diff --git a/cuttlefish/package/contents/ui/IconGrid.qml b/cuttlefish/package/contents/ui/IconGrid.qml --- a/cuttlefish/package/contents/ui/IconGrid.qml +++ b/cuttlefish/package/contents/ui/IconGrid.qml @@ -19,41 +19,37 @@ * * ***************************************************************************/ -import QtQuick 2.2 -// import QtQuick.Controls 1.0 +import QtQuick 2.5 +import QtQuick.Controls 2.5 as QQC2 import QtQuick.Layouts 1.0 -import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtras - +import org.kde.kirigami 2.8 as Kirigami GridView { id: iconGrid focus: true - cellWidth: iconSize + units.gridUnit - cellHeight: cellWidth + Math.round(units.gridUnit * 2) + cellWidth: iconSize + Kirigami.Units.gridUnit + cellHeight: cellWidth + Math.round(Kirigami.Units.gridUnit * 2) - cacheBuffer: 10000 + cacheBuffer: 20 highlightMoveDuration: 0 boundsBehavior: Flickable.StopAtBounds model: iconModel highlight: Rectangle { color: theme.highlightColor - //height: parent.height + units.gridUnit * 3 - anchors.bottomMargin: -units.gridUnit * 2 + anchors.bottomMargin: -Kirigami.Units.gridUnit * 2 } delegate: IconGridDelegate {} - PlasmaComponents.BusyIndicator { + QQC2.BusyIndicator { running: iconModel.loading visible: running anchors.centerIn: parent - width: units.gridUnit * 8 + width: Kirigami.Units.gridUnit * 8 height: width } } diff --git a/cuttlefish/package/contents/ui/IconGridDelegate.qml b/cuttlefish/package/contents/ui/IconGridDelegate.qml --- a/cuttlefish/package/contents/ui/IconGridDelegate.qml +++ b/cuttlefish/package/contents/ui/IconGridDelegate.qml @@ -19,23 +19,18 @@ * * ***************************************************************************/ -import QtQuick 2.2 -// import QtQuick.Controls 1.0 +import QtQuick 2.5 +import QtQuick.Controls 2.5 as QQC2 import QtQuick.Layouts 1.0 -import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtras - +import org.kde.kirigami 2.8 as Kirigami MouseArea { id: delegateRoot width: iconSize height: iconSize + Math.round(units.gridUnit * 1.25) - hoverEnabled: hoveredHighlight function setAsPreview() { - print("preview() " + iconName + " " + fullPath); preview.fullPath = fullPath preview.iconName = iconName preview.fileName = fileName @@ -59,20 +54,18 @@ } } - PlasmaCore.IconItem { + Kirigami.Icon { id: delegateIcon width: iconSize height: width source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup anchors { top: parent.top horizontalCenter: parent.horizontalCenter } } - PlasmaComponents.Label { + QQC2.Label { font.pointSize: iconSize > 96 ? theme.defaultFont.pointSize : theme.smallestFont.pointSize text: iconName wrapMode: Text.Wrap @@ -96,8 +89,6 @@ target: iconGrid onCurrentIndexChanged: { if (delegateRoot.GridView.isCurrentItem) { - print("index changed" + iconName + " " + fullPath) - //preview.fullPath = fullPath delegateRoot.setAsPreview(); } } diff --git a/cuttlefish/package/contents/ui/Preview.qml b/cuttlefish/package/contents/ui/Preview.qml --- a/cuttlefish/package/contents/ui/Preview.qml +++ b/cuttlefish/package/contents/ui/Preview.qml @@ -20,28 +20,15 @@ ***************************************************************************/ import QtQuick 2.2 -import QtQuick.Controls 1.0 +import QtQuick.Controls 2.5 as QQC2 import QtQuick.Layouts 1.0 +import QtQuick.Dialogs 1.3 -import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtras - +import org.kde.kirigami 2.8 as Kirigami Rectangle { - id: preview - - color: PlasmaCore.ColorScope.backgroundColor - - property string iconName: "plasma" - property string fullPath: "" - property string category: "" - property string fileName: "" - property string type: "" - property string iconTheme: "" - property variant sizes: [] - property bool scalable: true + color: Kirigami.Theme.backgroundColor function clipboard(text) { if (!pickerMode) { @@ -58,152 +45,201 @@ visible: false } - - ColumnLayout { - anchors.margins: units.gridUnit - anchors.rightMargin: units.gridUnit * 2 - anchors.fill: parent - spacing: units.gridUnit / 2 - - Item { height: units.gridUnit / 2 } - - PlasmaExtras.Heading { - level: 3 - elide: Text.ElideRight - Layout.fillWidth: true - Layout.fillHeight: false - wrapMode: Text.Wrap - text: iconName + FileDialog { + id: ssPicker + selectExisting: false + selectMultiple: false + selectFolder: false + onAccepted: { + iconPreview.grabToImage(function(result) { + ssPicker.resetColors() + res = result.saveToFile(ssPicker.fileUrl.toString().slice(7)) + }); } - RowLayout { - Layout.fillWidth: false - Layout.fillHeight: false - Layout.preferredHeight: indexToSize(4) - anchors.horizontalCenter: parent.horizontalCenter - - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.preferredWidth: indexToSize(0) - Layout.preferredHeight: indexToSize(0) - } - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.preferredWidth: indexToSize(1) - Layout.preferredHeight: indexToSize(1) - } - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.preferredWidth: indexToSize(2) - Layout.preferredHeight: indexToSize(2) - } - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.preferredWidth: indexToSize(3) - Layout.preferredHeight: indexToSize(3) - } - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.preferredWidth: indexToSize(4) - Layout.preferredHeight: indexToSize(4) - } + onRejected: { + ssPicker.resetColors() } - - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.fillHeight: false - Layout.preferredWidth: parent.width - Layout.preferredHeight: parent.width + function resetColors() { + iconPreview.screenshotting = false + iconPreview.Kirigami.Theme.textColor = Kirigami.Theme.textColor + iconPreview.Kirigami.Theme.backgroundColor = Kirigami.Theme.backgroundColor + iconPreview.Kirigami.Theme.highlightColor = Kirigami.Theme.highlightColor + iconPreview.Kirigami.Theme.highlightedTextColor = Kirigami.Theme.highlightedTextColor + iconPreview.Kirigami.Theme.positiveTextColor = Kirigami.Theme.positiveTextColor + iconPreview.Kirigami.Theme.neutralTextColor = Kirigami.Theme.neutralTextColor + iconPreview.Kirigami.Theme.negativeTextColor = Kirigami.Theme.negativeTextColor + iconPreview.Kirigami.Theme.inherit = true } + nameFilters: [ "PNG screenshot files (*.png)" ] + } + + GridLayout { + anchors.fill: parent + columns: 2 + Rectangle { + id: iconPreview - GridLayout { - columns: 2 + property bool screenshotting: false - PlasmaComponents.Label { - text: i18n("Name:") - } - PlasmaComponents.Label { - text: iconName - wrapMode: Text.Wrap - } - PlasmaComponents.Label { - text: i18n("Filename:") - } - PlasmaComponents.Label { - text: fileName - wrapMode: Text.Wrap - verticalAlignment: Text.AlignVCenter - } - PlasmaComponents.Label { - text: i18n("Category:") - } - PlasmaComponents.Label { - text: category - wrapMode: Text.WordWrap - } - PlasmaComponents.Label { - text: i18n("Scalable:") - } - PlasmaComponents.Label { - text: scalable ? i18n("yes") : i18n("no") - } - PlasmaComponents.Label { - text: i18n("Sizes:") - } - PlasmaComponents.Label { - text: (sizes != undefined) ? sizes.join(", ") : "" - } - } - Item { + color: Kirigami.Theme.backgroundColor Layout.fillHeight: true - } - PlasmaComponents.ToolButton { - text: pickerMode ? i18n("Insert icon name") : i18n("Copy icon name to clipboard") - iconSource: "edit-copy" Layout.fillWidth: true - onClicked: clipboard(preview.iconName); + GridLayout { + id: previewGrid + anchors.centerIn: parent + columns: sizes.length + rows: 2 + property var sizes: [8, 16, 22, 32, 48, 64, 128] + Repeater { + model: previewGrid.sizes.length + delegate: Kirigami.Icon { + Layout.alignment: Qt.AlignBottom + source: preview.iconName + width: previewGrid.sizes[index] + height: previewGrid.sizes[index] + } + } + Repeater { + model: previewGrid.sizes.length + delegate: QQC2.Label { + Layout.alignment: Qt.AlignTop | Qt.AlignHCenter + text: previewGrid.sizes[index] + } + } + } + function shot(type) { + iconPreview.screenshotting = true + if (type == "normal") { + iconPreview.Kirigami.Theme.inherit = false + iconPreview.Kirigami.Theme.textColor = "#232629" + iconPreview.Kirigami.Theme.backgroundColor = "#eff0f1" + iconPreview.Kirigami.Theme.highlightColor = "#3daee9" + iconPreview.Kirigami.Theme.highlightedTextColor = "#eff0f1" + iconPreview.Kirigami.Theme.positiveTextColor = "#27ae60" + iconPreview.Kirigami.Theme.neutralTextColor = "#f67400" + iconPreview.Kirigami.Theme.negativeTextColor = "#da4453" + } else if (type == "dark") { + iconPreview.Kirigami.Theme.inherit = false + iconPreview.Kirigami.Theme.textColor = "#eff0f1" + iconPreview.Kirigami.Theme.backgroundColor = "#31363b" + iconPreview.Kirigami.Theme.highlightColor = "#3daee9" + iconPreview.Kirigami.Theme.highlightedTextColor = "#eff0f1" + iconPreview.Kirigami.Theme.positiveTextColor = "#27ae60" + iconPreview.Kirigami.Theme.neutralTextColor = "#f67400" + iconPreview.Kirigami.Theme.negativeTextColor = "#da4453" + } else if (type == "active") { + iconPreview.Kirigami.Theme.inherit = true + } + ssPicker.open() + } + QQC2.ToolButton { + visible: !iconPreview.screenshotting + + hoverEnabled: true + + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + QQC2.ToolTip.text: i18n("Create screenshot of icon") + + icon.name: "camera-web-symbolic" + text: i18n("Create screenshot of icon") + + anchors.margins: Kirigami.Units.smallSpacing + anchors.bottom: parent.bottom + anchors.right: parent.right + + onClicked: { + screenshotActions.popup() + } + + QQC2.Menu { + id: screenshotActions + QQC2.MenuItem { + text: i18n("Screenshot with Breeze Colors") + onTriggered: { + iconPreview.shot("normal") + } + } + QQC2.MenuItem { + text: i18n("Screenshot with Breeze Dark Colors") + onTriggered: { + iconPreview.shot("dark") + } + } + QQC2.MenuItem { + text: i18n("Screenshot with Active Colorscheme") + onTriggered: { + iconPreview.shot("active") + } + } + } + } + Row { + visible: iconPreview.screenshotting + anchors.top: parent.top + anchors.left: parent.left + anchors.margins: Kirigami.Units.smallSpacing + Kirigami.Icon { + height: 32 + width: 32 + source: "cuttlefish" + } + QQC2.Label { + anchors.verticalCenter: parent.verticalCenter + text: "Montage made with Cuttlefish" + } + } } - PlasmaComponents.ToolButton { - text: pickerMode ? i18n("Insert QtQuick code") : i18n("Copy QtQuick code to clipboard") - iconSource: "edit-copy" + Rectangle { + color: "transparent" + Layout.fillHeight: true Layout.fillWidth: true - onClicked: { - var code = "/* Don't forget to import...\n\ -import org.kde.plasma.core 2.0 as PlasmaCore\n\ -*/\n\ - PlasmaCore.IconItem {\n\ - source: \"" + preview.iconName + "\"\n\ - Layout.preferredWidth: units.iconSizes.medium\n\ - Layout.preferredHeight: units.iconSizes.medium\n\ - }\n\ -"; - clipboard(code); + Kirigami.FormLayout { + width: parent.width + anchors.centerIn: parent + QQC2.ToolButton { + hoverEnabled: true + + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + QQC2.ToolTip.text: i18n("Copy icon name to clipboard") + + Kirigami.FormData.label: i18n("Name:") + icon.name: "edit-copy" + text: preview.iconName + onClicked: clipboard(preview.iconName) + } + QQC2.ToolButton { + hoverEnabled: true + + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + QQC2.ToolTip.text: i18n("Open icon with external program") + + Kirigami.FormData.label: i18n("Filename:") + text: preview.fileName + icon.name: "document-open" + onClicked: Qt.openUrlExternally(preview.fullPath) + } + QQC2.Label { + Kirigami.FormData.label: i18n("Category:") + font.capitalization: Font.Capitalize + text: preview.category + } + QQC2.Label { + Kirigami.FormData.label: i18n("Scalable:") + text: preview.scalable ? i18n("Yes") : i18n("No") + } } } - PlasmaComponents.CheckBox { - text: i18n("Update preview on hover") - onCheckedChanged: hoveredHighlight = checked - } } - Rectangle { - color: theme.highlightColor - width: Math.round(units.gridUnit / 20) + Kirigami.Separator { + height: 1 anchors { left: parent.left + right: parent.right top: parent.top - bottom: parent.bottom } } } diff --git a/cuttlefish/package/contents/ui/SvgGrid.qml b/cuttlefish/package/contents/ui/SvgGrid.qml --- a/cuttlefish/package/contents/ui/SvgGrid.qml +++ b/cuttlefish/package/contents/ui/SvgGrid.qml @@ -20,13 +20,10 @@ ***************************************************************************/ import QtQuick 2.2 -// import QtQuick.Controls 1.0 +import QtQuick.Controls 2.5 as QQC2 import QtQuick.Layouts 1.0 -import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtras - +import org.kde.kirigami 2.8 as Kirigami GridView { id: iconGrid @@ -73,7 +70,7 @@ } } - PlasmaCore.IconItem { + Kirigami.Icon { id: delegateIcon width: iconSize height: width @@ -84,13 +81,13 @@ } } - PlasmaComponents.Label { + QQC2.Label { font.pointSize: iconSize > 96 ? theme.defaultFont.pointSize : theme.smallestFont.pointSize text: modelData.fileName + " " + modelData.iconName - wrapMode: Text.Wrap + wrapMode: QQC2.Text.Wrap // elide: Text.ElideRight maximumLineCount: 3 - horizontalAlignment: Text.AlignHCenter + horizontalAlignment: QQC2.Text.AlignHCenter opacity: iconGrid.currentIndex == index ? 1.0 : 0.7 anchors { left: parent.left diff --git a/cuttlefish/package/contents/ui/Tools.qml b/cuttlefish/package/contents/ui/Tools.qml --- a/cuttlefish/package/contents/ui/Tools.qml +++ b/cuttlefish/package/contents/ui/Tools.qml @@ -19,29 +19,21 @@ * * ***************************************************************************/ -import QtQuick 2.2 -import QtQuick.Controls 2.0 +import QtQuick 2.5 +import QtQuick.Controls 2.5 as QQC2 import QtQuick.Layouts 1.0 -import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents +import org.kde.kirigami 2.8 as Kirigami -PlasmaComponents.ToolBar { +Item { + width: parent.width + RowLayout { + anchors.fill: parent + anchors.leftMargin: Kirigami.Units.smallSpacing + anchors.verticalCenter: parent.verticalCenter + spacing: Kirigami.Units.largeSpacing - Rectangle { - color: theme.backgroundColor - height: units.gridUnit / 20 - width: preview.width - anchors { - right: parent.right - top: parent.bottom - } - } - tools: RowLayout { - - spacing: units.gridUnit / 2 - - PlasmaComponents.TextField { + Kirigami.SearchField { id: filterInput Layout.fillWidth: true onTextChanged: typingtimer.restart() @@ -58,7 +50,7 @@ } } - ComboBox { + QQC2.ComboBox { Layout.preferredWidth: units.gridUnit * 6 model: iconModel.categories onActivated: { @@ -70,13 +62,13 @@ } } - Slider { + QQC2.Slider { id: sizeslider Layout.preferredWidth: preview.width - units.gridUnit * 2 - to: 6.0 + to: 5.0 stepSize: 1.0 - snapMode: Slider.AlwaysSnap + snapMode: QQC2.Slider.SnapAlways value: 4.0 onValueChanged: { @@ -97,41 +89,18 @@ } } - PlasmaComponents.TextField { + QQC2.Label { id: pixelSizeInput Layout.preferredWidth: units.gridUnit * 3 - - onTextChanged: { - if (pixelSizeInput.activeFocus) { - pxSizetimer.restart() - } - } - - Timer { - id: pxSizetimer - running: false - repeat: false - interval: 100 - onTriggered: iconSize = pixelSizeInput.text - } } - - PlasmaComponents.CheckBox { - id: colorContextCheckbox - text: i18n("Inverted") - onCheckedChanged: darkScheme = checked - } - - PlasmaComponents.CheckBox { - id: plasmaThemeCheckbox - text: i18n("Monochrome") - checked: true - onCheckedChanged: cuttlefish.usesPlasmaTheme = checked - } - - Item { - Layout.preferredWidth: preview.width + } + Kirigami.Separator { + height: 1 + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom } } } diff --git a/cuttlefish/package/contents/ui/cuttlefish.qml b/cuttlefish/package/contents/ui/cuttlefish.qml --- a/cuttlefish/package/contents/ui/cuttlefish.qml +++ b/cuttlefish/package/contents/ui/cuttlefish.qml @@ -21,76 +21,83 @@ import QtQuick 2.5 import QtQuick.Layouts 1.0 +import QtQuick.Controls 2.5 as QQC2 -import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtras - +import org.kde.kirigami 2.4 as Kirigami Item { id: cuttlefish objectName: "cuttlefish" - width: units.gridUnit * 60 - height: Math.round(width / 3 * 2) - - property int iconSize: units.iconSizes.large - property bool hoveredHighlight: false + property int iconSize: Kirigami.Units.iconSizes.large property bool darkScheme: false property bool usesPlasmaTheme: true function indexToSize(ix) { var sizes = new Array(); - sizes[0] = units.iconSizes.tiny; - sizes[1] = units.iconSizes.small; - sizes[2] = units.iconSizes.smallMedium; - sizes[3] = units.iconSizes.medium; - sizes[4] = units.iconSizes.large; - sizes[5] = units.iconSizes.huge; - sizes[6] = units.iconSizes.enormous; + sizes[0] = 8; + sizes[1] = 16; + sizes[2] = 22; + sizes[3] = 32; + sizes[4] = 64; + sizes[5] = 128; return sizes[ix]; } - PlasmaCore.ColorScope { + Rectangle { + color: Kirigami.Theme.backgroundColor anchors.fill: parent - colorGroup: darkScheme ? PlasmaCore.Theme.ComplementaryColorGroup : PlasmaCore.Theme.NormalColorGroup - Rectangle { - color: PlasmaCore.ColorScope.backgroundColor - anchors.fill: parent - } + } + Rectangle { + Kirigami.Theme.colorSet: Kirigami.Theme.View + color: Kirigami.Theme.backgroundColor + x: grid.x + y: grid.y + width: grid.width + height: grid.height + } - GridLayout { - columns: 2 - anchors.fill: parent - rowSpacing: - Math.round(units.gridUnit / 20) + ColumnLayout { + anchors.fill: parent + spacing: 0 - Tools { - Layout.columnSpan: 2 - Layout.fillWidth: true - Layout.preferredHeight: units.gridUnit * 2 - } + Tools { + Layout.fillWidth: true + Layout.preferredHeight: (Kirigami.Units.gridUnit * 2) + Kirigami.Units.largeSpacing + } - PlasmaExtras.ScrollArea { - Layout.fillWidth: true - Layout.fillHeight: true - IconGrid { - id: iconGrid - anchors.fill: parent + QQC2.ScrollView { + id: grid + Layout.fillWidth: true + Layout.fillHeight: true + QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff + IconGrid { + id: iconGrid + anchors.fill: parent - footer: SvgGrid { - id: svgGrid - interactive: false - } + footer: SvgGrid { + id: svgGrid + interactive: false } } - Preview { - id: preview - Layout.preferredWidth: Math.max(parent.width / 4, units.gridUnit * 12) - Layout.fillHeight: true - } } + Preview { + Layout.fillWidth: true + Layout.preferredHeight: Kirigami.Units.gridUnit * 15 + } + } + Item { + id: preview + property string iconName: "plasma" + property string fullPath: "" + property string category: "" + property string fileName: "" + property string type: "" + property string iconTheme: "" + property variant sizes: [] + property bool scalable: true } Shortcut { diff --git a/cuttlefish/src/main.cpp b/cuttlefish/src/main.cpp --- a/cuttlefish/src/main.cpp +++ b/cuttlefish/src/main.cpp @@ -41,6 +41,10 @@ app.setApplicationVersion(PROJECT_VERSION); app.setDesktopFileName(QStringLiteral("org.kde.cuttlefish")); + app.setOrganizationName("KDE"); + app.setOrganizationDomain("org.kde"); + app.setApplicationName("Cuttlefish"); + const static auto _category = QStringLiteral("category"); QCommandLineOption category = QCommandLineOption(QStringList() << QStringLiteral("c") << _category, i18n("Start with category"), i18n("category")); diff --git a/cuttlefish/src/view.cpp b/cuttlefish/src/view.cpp --- a/cuttlefish/src/view.cpp +++ b/cuttlefish/src/view.cpp @@ -37,6 +37,9 @@ : QQuickView(parent), m_browserRootItem(nullptr) { + setMinimumHeight(800); + setMinimumWidth(800); + setResizeMode(QQuickView::SizeRootObjectToView); QQuickWindow::setDefaultAlphaBuffer(true);