Differential D23712 Diff 66409 cuttlefish/package/contents/ui/Preview.qml

Changeset View

Standalone View

View Options

cuttlefish/package/contents/ui/Preview.qml

1/*************************************************************************** 1​/***************************************************************************
2 * * 2​ * *
3 * Copyright 2014-2017 Sebastian Kügler <sebas@kde.org> * 3​ * Copyright 2014-2017 Sebastian Kügler <sebas@kde.org> *
4​ * Copyrihgt 2019 Carson Black <uhhadd@gmail.com> *
4 * * 5​ * *
5 * This program is free software; you can redistribute it and/or modify * 6​ * This program is free software; you can redistribute it and/or modify *
6 * it under the terms of the GNU General Public License as published by * 7​ * it under the terms of the GNU General Public License as published by *
7 * the Free Software Foundation; either version 2 of the License, or * 8​ * the Free Software Foundation; either version 2 of the License, or *
8 * (at your option) any later version. * 9​ * (at your option) any later version. *
9 * * 10​ * *
10 * This program is distributed in the hope that it will be useful, * 11​ * This program is distributed in the hope that it will be useful, *
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of * 12​ * but WITHOUT ANY WARRANTY; without even the implied warranty of *
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * 13​ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
13 * GNU General Public License for more details. * 14​ * GNU General Public License for more details. *
14 * * 15​ * *
15 * You should have received a copy of the GNU General Public License * 16​ * You should have received a copy of the GNU General Public License *
16 * along with this program; if not, write to the * 17​ * along with this program; if not, write to the *
17 * Free Software Foundation, Inc., * 18​ * Free Software Foundation, Inc., *
18 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . * 19​ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . *
19 * * 20​ * *
20 ***************************************************************************/ 21​ ***************************************************************************/
21 22​
22import QtQuick 2.2 23​import QtQuick 2.2
23import QtQuick.Controls 1.0 24​import QtQuick.Controls 2.5 as QQC2
24import QtQuick.Layouts 1.0 25​import QtQuick.Layouts 1.0
26​import QtQuick.Dialogs 1.3
25 27​
26import org.kde.plasma.core 2.0 as PlasmaCore 28​import org.kde.kirigami 2.8 as Kirigami
27import org.kde.plasma.components 2.0 as PlasmaComponents ​
28import org.kde.plasma.extras 2.0 as PlasmaExtras ​
29 ​
30 29​
31Rectangle { 30​Rectangle {
31​ property alias iconPreview: iconPreview
32​ property alias dualMont: dualMont
32 33​
33 id: preview 34​ Kirigami.Theme.textColor: cuttlefish.textcolor
34 35​ Kirigami.Theme.backgroundColor: cuttlefish.bgcolor
35 color: PlasmaCore.ColorScope.backgroundColor 36​ Kirigami.Theme.highlightColor: cuttlefish.highlightcolor
37​ Kirigami.Theme.highlightedTextColor: cuttlefish.highlightedtextcolor
38​ Kirigami.Theme.positiveTextColor: cuttlefish.positivetextcolor
39​ Kirigami.Theme.neutralTextColor: cuttlefish.neutraltextcolor
40​ Kirigami.Theme.negativeTextColor: cuttlefish.negativetextcolor
36 41​
37 property string iconName: "plasma" 42​ color: Kirigami.Theme.backgroundColor
38 property string fullPath: "" ​
39 property string category: "" ​
40 property string fileName: "" ​
41 property string type: "" ​
42 property string iconTheme: "" ​
43 property variant sizes: [] ​
44 property bool scalable: true ​
45 43​
46 function clipboard(text) { 44​ function clipboard(text) {
47 if (!pickerMode) { 45​ if (!pickerMode) {
48 clipboardHelper.text = text; 46​ clipboardHelper.text = text;
49 clipboardHelper.selectAll(); 47​ clipboardHelper.selectAll();
50 clipboardHelper.copy(); 48​ clipboardHelper.copy();
51 } else { 49​ } else {
52 iconModel.output(text); 50​ iconModel.output(text);
53 } 51​ }
54 52​
55 } 53​ }
56 TextEdit { 54​ TextEdit {
57 id: clipboardHelper 55​ id: clipboardHelper
58 visible: false 56​ visible: false
59 } 57​ }
60 58​
59​ FileDialog {
60​ id: ssPicker
61​ selectExisting: false
62​ selectMultiple: false
63​ selectFolder: false
64​ onAccepted: {
65​ iconPreview.grabToImage(function(result) {
66​ ssPicker.resetColors()
67​ res = result.saveToFile(ssPicker.fileUrl.toString().slice(7))
68​ });
69​ }
70​ onRejected: {
71​ ssPicker.resetColors()
72​ }
73​ function resetColors() {
74​ iconPreview.screenshotting = false
75​ iconPreview.Kirigami.Theme.textColor = Kirigami.Theme.textColor
76​ iconPreview.Kirigami.Theme.backgroundColor = Kirigami.Theme.backgroundColor
77​ iconPreview.Kirigami.Theme.highlightColor = Kirigami.Theme.highlightColor
78​ iconPreview.Kirigami.Theme.highlightedTextColor = Kirigami.Theme.highlightedTextColor
79​ iconPreview.Kirigami.Theme.positiveTextColor = Kirigami.Theme.positiveTextColor
80​ iconPreview.Kirigami.Theme.neutralTextColor = Kirigami.Theme.neutralTextColor
81​ iconPreview.Kirigami.Theme.negativeTextColor = Kirigami.Theme.negativeTextColor
82​ iconPreview.Kirigami.Theme.inherit = true
83​ }
84​ nameFilters: [ "PNG screenshot files (*.png)" ]
85​ }
61 86​
62 ColumnLayout { 87​ ColumnLayout {
63 anchors.margins: units.gridUnit ​
64 anchors.rightMargin: units.gridUnit * 2 ​
65 anchors.fill: parent 88​ anchors.fill: parent
66 spacing: units.gridUnit / 2 89​ spacing: Kirigami.Units.largeSpacing
ngrahamUnsubmitted
Not Done

A GridLayout with one column is just a ColumnLayout; use that instead

ngraham: A GridLayout with one column is just a ColumnLayout; use that instead
67 ​
68 Item { height: units.gridUnit / 2 } ​
69 90​
70 PlasmaExtras.Heading { 91​ Kirigami.Heading {
71 level: 3 92​ level: 1
GB_2Unsubmitted
Not Done

Maybe add wrapMode: Text.Wrap, so the heading can have multiple lines.

GB_2: Maybe add `wrapMode: Text.Wrap`, so the heading can have multiple lines.
72 elide: Text.ElideRight ​
73 Layout.fillWidth: true 93​ Layout.fillWidth: true
74 Layout.fillHeight: false ​
75 wrapMode: Text.Wrap 94​ wrapMode: Text.Wrap
76 text: iconName 95​ horizontalAlignment: Text.AlignHCenter
96​ elide: Text.ElideRight
97​ text: preview.iconName
77 } 98​ }
78 RowLayout { 99​ Kirigami.FormLayout {
79 Layout.fillWidth: false 100​ Layout.fillWidth: true
80 Layout.fillHeight: false 101​ Layout.topMargin: Kirigami.Units.largeSpacing
81 Layout.preferredHeight: indexToSize(4) 102​ QQC2.Label {
82 anchors.horizontalCenter: parent.horizontalCenter 103​ Layout.maximumWidth: Kirigami.Units.gridUnit * 15
83 104​ Kirigami.FormData.label: i18n("File name:")
84 PlasmaCore.IconItem { 105​ elide: Text.ElideRight
85 source: iconName 106​ text: preview.fileName
86 usesPlasmaTheme: cuttlefish.usesPlasmaTheme ​
87 colorGroup: PlasmaCore.ColorScope.colorGroup ​
88 Layout.preferredWidth: indexToSize(0) ​
89 Layout.preferredHeight: indexToSize(0) ​
90 } ​
91 PlasmaCore.IconItem { ​
92 source: iconName ​
93 usesPlasmaTheme: cuttlefish.usesPlasmaTheme ​
94 colorGroup: PlasmaCore.ColorScope.colorGroup ​
95 Layout.preferredWidth: indexToSize(1) ​
96 Layout.preferredHeight: indexToSize(1) ​
97 } ​
98 PlasmaCore.IconItem { ​
99 source: iconName ​
100 usesPlasmaTheme: cuttlefish.usesPlasmaTheme ​
101 colorGroup: PlasmaCore.ColorScope.colorGroup ​
102 Layout.preferredWidth: indexToSize(2) ​
103 Layout.preferredHeight: indexToSize(2) ​
104 } ​
105 PlasmaCore.IconItem { ​
106 source: iconName ​
107 usesPlasmaTheme: cuttlefish.usesPlasmaTheme ​
108 colorGroup: PlasmaCore.ColorScope.colorGroup ​
109 Layout.preferredWidth: indexToSize(3) ​
110 Layout.preferredHeight: indexToSize(3) ​
111 } ​
112 PlasmaCore.IconItem { ​
113 source: iconName ​
114 usesPlasmaTheme: cuttlefish.usesPlasmaTheme ​
115 colorGroup: PlasmaCore.ColorScope.colorGroup ​
116 Layout.preferredWidth: indexToSize(4) ​
117 Layout.preferredHeight: indexToSize(4) ​
118 } 107​ }
108​ QQC2.Label {
109​ Kirigami.FormData.label: i18n("Category:")
110​ font.capitalization: Font.Capitalize
111​ text: preview.category
112​ }
113​ QQC2.Label {
114​ Kirigami.FormData.label: i18n("Scalable:")
115​ text: preview.scalable ? i18n("yes") : i18n("no")
116​ font.capitalization: Font.Capitalize
117​ }
118​ }
119​ Rectangle {
120​ id: iconPreview
121​ Kirigami.Theme.textColor: cuttlefish.textcolor
122​ Kirigami.Theme.backgroundColor: cuttlefish.bgcolor
123​ Kirigami.Theme.highlightColor: cuttlefish.highlightcolor
124​ Kirigami.Theme.highlightedTextColor: cuttlefish.highlightedtextcolor
125​ Kirigami.Theme.positiveTextColor: cuttlefish.positivetextcolor
126​ Kirigami.Theme.neutralTextColor: cuttlefish.neutraltextcolor
127​ Kirigami.Theme.negativeTextColor: cuttlefish.negativetextcolor
ngrahamUnsubmitted
Not Done

Center this button horizontally

ngraham: Center this button horizontally
128​
129​ property bool screenshotting: false
130​
131​ color: Kirigami.Theme.backgroundColor
132​
133​ Behavior on color {
134​ ColorAnimation {
135​ duration: Kirigami.Units.longDuration
136​ }
137​ }
138​ Behavior on Layout.preferredHeight {
139​ NumberAnimation {
140​ duration: Kirigami.Units.longDuration
119 } 141​ }
120 ​
121 PlasmaCore.IconItem { ​
122 source: iconName ​
123 usesPlasmaTheme: cuttlefish.usesPlasmaTheme ​
davidedmundsonUnsubmitted
Done

This feature will be missing. Despite still having the checkbox for it.

davidedmundson: This feature will be missing. Despite still having the checkbox for it.
124 colorGroup: PlasmaCore.ColorScope.colorGroup ​
125 Layout.fillHeight: false ​
126 Layout.preferredWidth: parent.width ​
127 Layout.preferredHeight: parent.width ​
128 } 142​ }
129 143​
130 GridLayout { 144​ Layout.fillWidth: true
131 columns: 2 145​ Layout.preferredHeight: screenshotting ? previewGrid.height + (Kirigami.Units.gridUnit * 4) : previewGrid.height
146​
147​ Layout.topMargin: Kirigami.Units.largeSpacing
148​ Layout.bottomMargin: Kirigami.Units.largeSpacing * 4
132 149​
133 PlasmaComponents.Label { 150​ ColumnLayout {
134 text: i18n("Name:") 151​ id: previewGrid
152​ anchors.horizontalCenter: parent.horizontalCenter
153​ anchors.verticalCenter: parent.verticalCenter
154​ property var sizes: [8, 16, 22, 32, 48, 64]
155​ property var largeSizes: [128]
156​ GridLayout {
157​ Layout.alignment: Qt.AlignHCenter
158​ rows: 2
159​ columns: previewGrid.sizes.length
160​ Repeater {
161​ model: previewGrid.sizes.length
162​ delegate: Kirigami.Icon {
163​ Layout.alignment: Qt.AlignBottom
164​ source: preview.iconName
165​ width: previewGrid.sizes[index]
166​ height: previewGrid.sizes[index]
167​ }
168​ }
169​ Repeater {
170​ model: previewGrid.sizes.length
171​ delegate: QQC2.Label {
172​ Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
173​ text: previewGrid.sizes[index]
174​ Behavior on color {
175​ ColorAnimation {
176​ duration: Kirigami.Units.longDuration
135 } 177​ }
136 PlasmaComponents.Label { ​
137 text: iconName ​
138 wrapMode: Text.Wrap ​
139 } 178​ }
140 PlasmaComponents.Label { ​
141 text: i18n("Filename:") ​
142 } 179​ }
143 PlasmaComponents.Label { ​
144 text: fileName ​
145 wrapMode: Text.Wrap ​
146 verticalAlignment: Text.AlignVCenter ​
147 } 180​ }
148 PlasmaComponents.Label { ​
149 text: i18n("Category:") ​
150 } 181​ }
151 PlasmaComponents.Label { 182​ GridLayout {
152 text: category 183​ Layout.alignment: Qt.AlignHCenter
153 wrapMode: Text.WordWrap 184​ rows: 2
185​ columns: previewGrid.largeSizes.length
186​ Repeater {
187​ model: previewGrid.largeSizes.length
188​ delegate: Kirigami.Icon {
189​ Layout.alignment: Qt.AlignBottom
190​ source: preview.iconName
191​ width: previewGrid.largeSizes[index]
192​ height: previewGrid.largeSizes[index]
193​ }
194​ }
195​ Repeater {
196​ model: previewGrid.largeSizes.length
197​ delegate: QQC2.Label {
198​ Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
199​ text: previewGrid.largeSizes[index]
200​ Behavior on color {
201​ ColorAnimation {
202​ duration: Kirigami.Units.longDuration
154 } 203​ }
155 PlasmaComponents.Label { ​
156 text: i18n("Scalable:") ​
157 } 204​ }
158 PlasmaComponents.Label { ​
159 text: scalable ? i18n("yes") : i18n("no") ​
160 } 205​ }
161 PlasmaComponents.Label { ​
162 text: i18n("Sizes:") ​
163 } 206​ }
164 PlasmaComponents.Label { ​
165 text: (sizes != undefined) ? sizes.join(", ") : "" ​
166 } 207​ }
167 } 208​ }
168 Item { 209​ Row {
169 Layout.fillHeight: true 210​ opacity: iconPreview.screenshotting ? 1 : 0
211​ anchors.top: parent.top
212​ anchors.left: parent.left
213​ anchors.margins: Kirigami.Units.smallSpacing
214​ Kirigami.Icon {
215​ height: 32
216​ width: 32
217​ source: "cuttlefish"
218​ }
219​ QQC2.Label {
220​ anchors.verticalCenter: parent.verticalCenter
221​ text: "Montage made with Cuttlefish"
222​ }
223​ Behavior on opacity {
224​ OpacityAnimator {
225​ duration: Kirigami.Units.longDuration
226​ }
227​ }
228​ }
229​ function shot(type) {
230​ iconPreview.screenshotting = true
231​ if (type == "normal") {
232​ iconPreview.Kirigami.Theme.inherit = false
233​ iconPreview.Kirigami.Theme.textColor = "#232629"
234​ iconPreview.Kirigami.Theme.backgroundColor = "#eff0f1"
235​ iconPreview.Kirigami.Theme.highlightColor = "#3daee9"
236​ iconPreview.Kirigami.Theme.highlightedTextColor = "#eff0f1"
237​ iconPreview.Kirigami.Theme.positiveTextColor = "#27ae60"
238​ iconPreview.Kirigami.Theme.neutralTextColor = "#f67400"
239​ iconPreview.Kirigami.Theme.negativeTextColor = "#da4453"
240​ } else if (type == "dark") {
241​ iconPreview.Kirigami.Theme.inherit = false
242​ iconPreview.Kirigami.Theme.textColor = "#eff0f1"
243​ iconPreview.Kirigami.Theme.backgroundColor = "#31363b"
244​ iconPreview.Kirigami.Theme.highlightColor = "#3daee9"
245​ iconPreview.Kirigami.Theme.highlightedTextColor = "#eff0f1"
246​ iconPreview.Kirigami.Theme.positiveTextColor = "#27ae60"
247​ iconPreview.Kirigami.Theme.neutralTextColor = "#f67400"
248​ iconPreview.Kirigami.Theme.negativeTextColor = "#da4453"
249​ } else if (type == "active") {
250​ iconPreview.Kirigami.Theme.inherit = true
251​ }
252​ ssPicker.open()
253​ }
254​ }
255​ QQC2.Button {
256​ Layout.alignment: Qt.AlignHCenter
257​ text: i18n("Open icon with external program")
258​ icon.name: "document-open"
259​ onClicked: Qt.openUrlExternally(preview.fullPath)
260​ }
261​ QQC2.Button {
262​ Layout.alignment: Qt.AlignHCenter
263​ text: i18n("Copy icon name to clipboard")
264​ icon.name: "edit-copy"
265​ onClicked: {
266​ clipboard(preview.iconName)
267​ cuttlefish.showPassiveNotification(i18n("Icon name copied to clipboard"), "short")
170 } 268​ }
171 PlasmaComponents.ToolButton { ​
172 text: pickerMode ? i18n("Insert icon name") : i18n("Copy icon name to clipboard") ​
173 iconSource: "edit-copy" ​
174 Layout.fillWidth: true ​
175 onClicked: clipboard(preview.iconName); ​
176 } 269​ }
177 PlasmaComponents.ToolButton { 270​ QQC2.Button {
178 text: pickerMode ? i18n("Insert QtQuick code") : i18n("Copy QtQuick code to clipboard") 271​ Layout.alignment: Qt.AlignHCenter
179 iconSource: "edit-copy" 272​ visible: !iconPreview.screenshotting
180 Layout.fillWidth: true 273​ icon.name: "camera-web-symbolic"
274​ text: i18n("Create screenshot of icon")
275​
181 onClicked: { 276​ onClicked: {
182 var code = "/* Don't forget to import...\n\ 277​ screenshotActions.popup()
183import org.kde.plasma.core 2.0 as PlasmaCore\n\ 278​ }
184*/\n\ 279​
185 PlasmaCore.IconItem {\n\ 280​ QQC2.Menu {
186 source: \"" + preview.iconName + "\"\n\ 281​ id: screenshotActions
187 Layout.preferredWidth: units.iconSizes.medium\n\ 282​ QQC2.MenuItem {
188 Layout.preferredHeight: units.iconSizes.medium\n\ 283​ text: i18n("Screenshot with Breeze Colors")
189 }\n\ 284​ onTriggered: {
190"; 285​ iconPreview.shot("normal")
ngrahamUnsubmitted
Done

Needs a tooltip saying that this will copy the name to the clipboard (the icon isn't enough)

ngraham: Needs a tooltip saying that this will copy the name to the clipboard (the icon isn't enough)
191 clipboard(code); 286​ }
287​ }
288​ QQC2.MenuItem {
ngrahamUnsubmitted
Not Done

This is going to shock people, but I might even suggest displaying a Kirigami PassiveNotification saying "<text> copied to clipboard" when this is clicked. Otherwise it looks like nothing happens when you click the button.

ngraham: This is going to shock people, but I might even suggest displaying a Kirigami…
289​ text: i18n("Screenshot with Breeze Dark Colors")
290​ onTriggered: {
291​ iconPreview.shot("dark")
192 } 292​ }
193 } 293​ }
194 PlasmaComponents.CheckBox { 294​ QQC2.MenuItem {
195 text: i18n("Update preview on hover") 295​ text: i18n("Screenshot with Breeze (Normal) and Breeze Dark")
ngrahamUnsubmitted
Done

Needs a tooltip saying that this will open the image in an external app (the icon isn't enough, though making it actually use the icon of the app that it will open with would help with that)

ngraham: Needs a tooltip saying that this will open the image in an external app (the icon isn't enough…
196 onCheckedChanged: hoveredHighlight = checked 296​ onTriggered: {
297​ dualMont.shot()
197 } 298​ }
198 } 299​ }
300​ QQC2.MenuItem {
301​ text: i18n("Screenshot with Active Color Scheme")
ngrahamUnsubmitted
Not Done

Colorscheme -> Color Scheme

ngraham: Colorscheme -> Color Scheme
302​ onTriggered: {
303​ iconPreview.shot("active")
304​ }
305​ }
ngrahamUnsubmitted
Done

Use a Kirigami.FormLayout for this (if not using it was deliberate because of layout bugs, let's fix those)

ngraham: Use a Kirigami.FormLayout for this (if not using it was deliberate because of layout bugs…
306​ }
307​ }
308​ Item {
309​ Layout.fillHeight: true
ngrahamUnsubmitted
Done

There's plenty of space for a button that has visible text. I'd recommend doing that instead of using a tiny icons-only button.

ngraham: There's plenty of space for a button that has visible text. I'd recommend doing that instead of…
310​ }
311​ DualMontage { id: dualMont }
312​ }
199 313​
200 Rectangle { 314​ Kirigami.Separator {
201 color: theme.highlightColor 315​ width: 1
202 width: Math.round(units.gridUnit / 20) ​
203 anchors { 316​ anchors {
204 left: parent.left 317​ left: parent.left
205 top: parent.top ​
206 bottom: parent.bottom 318​ bottom: parent.bottom
319​ top: parent.top
207 } 320​ }
208 } 321​ }
209} 322​}