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 @@ -20,40 +20,36 @@ ***************************************************************************/ import QtQuick 2.2 -// import QtQuick.Controls 1.0 import QtQuick.Layouts 1.0 +import QtQuick.Controls 2.5 -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 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 { + 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 @@ -20,22 +20,17 @@ ***************************************************************************/ import QtQuick 2.2 -// import QtQuick.Controls 1.0 +import QtQuick.Controls 2.0 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 { + 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,14 @@ ***************************************************************************/ import QtQuick 2.2 -import QtQuick.Controls 1.0 +import QtQuick.Controls 2.0 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 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) { @@ -59,151 +45,93 @@ } - ColumnLayout { - anchors.margins: units.gridUnit - anchors.rightMargin: units.gridUnit * 2 + GridLayout { anchors.fill: parent - spacing: units.gridUnit / 2 - - Item { height: units.gridUnit / 2 } - - PlasmaExtras.Heading { - level: 3 - elide: Text.ElideRight + columns: 2 + Rectangle { + color: "transparent" + Layout.fillHeight: true Layout.fillWidth: true - Layout.fillHeight: false - wrapMode: Text.Wrap - text: iconName - } - 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) + GridLayout { + id: previewGrid + anchors.centerIn: parent + columns: sizes.length + rows: 2 + property var sizes: [8, 16, 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: Label { + Layout.alignment: Qt.AlignTop | Qt.AlignHCenter + text: previewGrid.sizes[index] + } + } } } - - PlasmaCore.IconItem { - source: iconName - usesPlasmaTheme: cuttlefish.usesPlasmaTheme - colorGroup: PlasmaCore.ColorScope.colorGroup - Layout.fillHeight: false - Layout.preferredWidth: parent.width - Layout.preferredHeight: parent.width - } - - GridLayout { - columns: 2 - - 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 { + Rectangle { + color: "transparent" 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); - } - PlasmaComponents.ToolButton { - text: pickerMode ? i18n("Insert QtQuick code") : i18n("Copy QtQuick code to clipboard") - iconSource: "edit-copy" - 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); + GridLayout { + anchors.centerIn: parent + columns: 2 + Label { + Layout.fillHeight: true + Layout.alignment: Qt.AlignRight + text: i18n("Name:") + } + ToolButton { + icon.name: "edit-copy" + text: preview.iconName + onClicked: clipboard(preview.iconName) + } + Label { + Layout.fillHeight: true + Layout.alignment: Qt.AlignRight + text: i18n("Filename:") + } + ToolButton { + icon.name: "document-open" + text: preview.fileName + onClicked: Qt.openUrlExternally(preview.fullPath) + } + Label { + Layout.fillHeight: true + Layout.alignment: Qt.AlignRight + text: i18n("Category:") + } + Label { + font.capitalization: Font.Capitalize + text: preview.category + } + Label { + Layout.fillHeight: true + Layout.alignment: Qt.AlignRight + text: i18n("Scalable:") + } + Label { + 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) + opacity: 0.2 + color: Kirigami.Theme.textColor + 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.0 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,7 +81,7 @@ } } - PlasmaComponents.Label { + Label { font.pointSize: iconSize > 96 ? theme.defaultFont.pointSize : theme.smallestFont.pointSize text: modelData.fileName + " " + modelData.iconName wrapMode: Text.Wrap 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 @@ -20,32 +20,26 @@ ***************************************************************************/ import QtQuick 2.2 -import QtQuick.Controls 2.0 +import QtQuick.Controls 2.5 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.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 + Item { + width: Kirigami.Units.largeSpacing } - } - tools: RowLayout { - - spacing: units.gridUnit / 2 - - PlasmaComponents.TextField { + Kirigami.SearchField { id: filterInput Layout.fillWidth: true onTextChanged: typingtimer.restart() focus: true + placeholderText: i18n("Search icons...") Timer { id: typingtimer @@ -76,7 +70,7 @@ to: 6.0 stepSize: 1.0 - snapMode: Slider.AlwaysSnap + snapMode: Slider.SnapAlways value: 4.0 onValueChanged: { @@ -97,7 +91,7 @@ } } - PlasmaComponents.TextField { + TextField { id: pixelSizeInput Layout.preferredWidth: units.gridUnit * 3 @@ -117,21 +111,21 @@ } } - PlasmaComponents.CheckBox { - id: colorContextCheckbox - text: i18n("Inverted") - onCheckedChanged: darkScheme = checked - } - - PlasmaComponents.CheckBox { + CheckBox { id: plasmaThemeCheckbox text: i18n("Monochrome") checked: true onCheckedChanged: cuttlefish.usesPlasmaTheme = checked } - - Item { - Layout.preferredWidth: preview.width + } + Rectangle { + opacity: 0.2 + color: Kirigami.Theme.textColor + 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,88 @@ import QtQuick 2.5 import QtQuick.Layouts 1.0 +import QtQuick.Controls 2.5 -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) + height: Kirigami.Units.gridUnit * 50 + width: Kirigami.Units.gridUnit * 50 property int iconSize: units.iconSizes.large - property bool hoveredHighlight: false 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] = Kirigami.Units.iconSizes.tiny; + sizes[1] = Kirigami.Units.iconSizes.small; + sizes[2] = Kirigami.Units.iconSizes.smallMedium; + sizes[3] = Kirigami.Units.iconSizes.medium; + sizes[4] = Kirigami.Units.iconSizes.large; + sizes[5] = Kirigami.Units.iconSizes.huge; + sizes[6] = Kirigami.Units.iconSizes.enormous; 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 + } - PlasmaExtras.ScrollArea { - Layout.fillWidth: true - Layout.fillHeight: true - IconGrid { - id: iconGrid - anchors.fill: parent + ScrollView { + id: grid + Layout.fillWidth: true + Layout.fillHeight: true + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + IconGrid { + id: iconGrid + anchors.fill: parent + anchors.margins: Kirigami.Units.largeSpacing - 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 {