Changeset View
Changeset View
Standalone View
Standalone View
cuttlefish/package/contents/ui/cuttlefish.qml
Show All 15 Lines | |||||
16 | * along with this program; if not, write to the * | 16 | * along with this program; if not, write to the * | ||
17 | * Free Software Foundation, Inc., * | 17 | * Free Software Foundation, Inc., * | ||
18 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . * | 18 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . * | ||
19 | * * | 19 | * * | ||
20 | ***************************************************************************/ | 20 | ***************************************************************************/ | ||
21 | 21 | | |||
22 | import QtQuick 2.5 | 22 | import QtQuick 2.5 | ||
23 | import QtQuick.Layouts 1.0 | 23 | import QtQuick.Layouts 1.0 | ||
24 | import QtQuick.Controls 2.5 as QQC2 | ||||
ngraham: ditto | |||||
ngraham: Not done | |||||
25 | import Qt.labs.settings 1.0 | ||||
24 | 26 | | |||
25 | import org.kde.plasma.core 2.0 as PlasmaCore | 27 | import org.kde.kirigami 2.4 as Kirigami | ||
26 | import org.kde.plasma.components 2.0 as PlasmaComponents | | |||
27 | import org.kde.plasma.extras 2.0 as PlasmaExtras | | |||
28 | 28 | | |||
29 | 29 | Kirigami.ApplicationWindow { | |||
30 | Item { | | |||
31 | id: cuttlefish | 30 | id: cuttlefish | ||
32 | objectName: "cuttlefish" | 31 | objectName: "cuttlefish" | ||
33 | 32 | | |||
34 | width: units.gridUnit * 60 | 33 | signal itemRightClicked() | ||
35 | height: Math.round(width / 3 * 2) | 34 | | ||
filipf: you can just do `width: height` | |||||
35 | minimumWidth: 400 | ||||
36 | minimumHeight: 400 | ||||
37 | | ||||
38 | property bool widescreen: cuttlefish.width >= 800 | ||||
36 | 39 | | |||
37 | property int iconSize: units.iconSizes.large | 40 | property int iconSize: Kirigami.Units.iconSizes.large | ||
davidre: Why not Kirigami units here? | |||||
38 | property bool hoveredHighlight: false | | |||
39 | property bool darkScheme: false | 41 | property bool darkScheme: false | ||
40 | property bool usesPlasmaTheme: true | 42 | property bool usesPlasmaTheme: true | ||
43 | property var schemeStash | ||||
44 | | ||||
45 | property color textcolor: Kirigami.Theme.textColor | ||||
46 | property color bgcolor: Kirigami.Theme.backgroundColor | ||||
47 | property color highlightcolor: Kirigami.Theme.highlightColor | ||||
48 | property color highlightedtextcolor: Kirigami.Theme.highlightedTextColor | ||||
49 | property color positivetextcolor: Kirigami.Theme.positiveTextColor | ||||
50 | property color neutraltextcolor: Kirigami.Theme.neutralTextColor | ||||
51 | property color negativetextcolor: Kirigami.Theme.negativeTextColor | ||||
52 | | ||||
53 | Kirigami.Theme.textColor: cuttlefish.textcolor | ||||
54 | Kirigami.Theme.backgroundColor: cuttlefish.bgcolor | ||||
55 | Kirigami.Theme.highlightColor: cuttlefish.highlightcolor | ||||
56 | Kirigami.Theme.highlightedTextColor: cuttlefish.highlightedtextcolor | ||||
57 | Kirigami.Theme.positiveTextColor: cuttlefish.positivetextcolor | ||||
58 | Kirigami.Theme.neutralTextColor: cuttlefish.neutraltextcolor | ||||
59 | Kirigami.Theme.negativeTextColor: cuttlefish.negativetextcolor | ||||
60 | | ||||
61 | Loader { | ||||
62 | // Use a Loader instead of creating a GMB directly, | ||||
63 | // so if the GMB errors, it doesn't affect Cuttlefish's operation | ||||
64 | id: loader | ||||
65 | source: "GlobalMenuBar.qml" | ||||
66 | } | ||||
67 | Loader { | ||||
68 | // Ditto for the right click context menu. | ||||
69 | source: "Menu.qml" | ||||
70 | } | ||||
71 | Settings { | ||||
72 | property alias x: cuttlefish.x | ||||
73 | property alias y: cuttlefish.y | ||||
74 | property alias width: cuttlefish.width | ||||
75 | property alias height: cuttlefish.height | ||||
76 | } | ||||
77 | Connections { | ||||
78 | target: loader.item | ||||
79 | onQuit: { cuttlefish.close() } | ||||
80 | onZoomIn: { tools.slider.value += 1 } | ||||
81 | onZoomOut: { tools.slider.value -= 1 } | ||||
82 | onMontage: { | ||||
83 | switch(type) { | ||||
84 | case 0: | ||||
85 | previewPane.iconPreview.shot("active") | ||||
86 | break; | ||||
87 | case 1: | ||||
88 | previewPane.iconPreview.shot("normal") | ||||
89 | break; | ||||
90 | case 2: | ||||
91 | previewPane.iconPreview.shot("dark") | ||||
92 | break; | ||||
93 | case 3: | ||||
94 | previewPane.dualMont.shot() | ||||
95 | break; | ||||
96 | } | ||||
97 | } | ||||
98 | } | ||||
99 | function changeColors(index) { | ||||
100 | switch(index) { | ||||
101 | case 0: | ||||
102 | cuttlefish.Kirigami.Theme.inherit = true | ||||
103 | cuttlefish.textcolor = cuttlefish.schemeStash[0] | ||||
104 | cuttlefish.bgcolor = cuttlefish.schemeStash[1] | ||||
105 | cuttlefish.highlightcolor = cuttlefish.schemeStash[2] | ||||
106 | cuttlefish.highlightedtextcolor = cuttlefish.schemeStash[3] | ||||
107 | cuttlefish.positivetextcolor = cuttlefish.schemeStash[4] | ||||
108 | cuttlefish.neutraltextcolor = cuttlefish.schemeStash[5] | ||||
109 | cuttlefish.negativetextcolor = cuttlefish.schemeStash[6] | ||||
110 | break | ||||
111 | case 1: | ||||
112 | cuttlefish.Kirigami.Theme.inherit = false | ||||
113 | cuttlefish.textcolor = "#232629" | ||||
114 | cuttlefish.bgcolor = "#eff0f1" | ||||
115 | cuttlefish.highlightcolor = "#3daee9" | ||||
116 | cuttlefish.highlightedtextcolor = "#eff0f1" | ||||
117 | cuttlefish.positivetextcolor = "#27ae60" | ||||
118 | cuttlefish.neutraltextcolor = "#f67400" | ||||
119 | cuttlefish.negativetextcolor = "#da4453" | ||||
120 | break | ||||
121 | case 2: | ||||
122 | cuttlefish.Kirigami.Theme.inherit = false | ||||
123 | cuttlefish.textcolor = "#eff0f1" | ||||
124 | cuttlefish.bgcolor = "#31363b" | ||||
125 | cuttlefish.highlightcolor = "#3daee9" | ||||
126 | cuttlefish.highlightedtextcolor = "#eff0f1" | ||||
127 | cuttlefish.positivetextcolor = "#27ae60" | ||||
128 | cuttlefish.neutraltextcolor = "#f67400" | ||||
129 | cuttlefish.negativetextcolor = "#da4453" | ||||
130 | break | ||||
131 | } | ||||
132 | } | ||||
41 | 133 | | |||
42 | function indexToSize(ix) { | 134 | function indexToSize(ix) { | ||
43 | 135 | | |||
44 | var sizes = new Array(); | 136 | var sizes = new Array(); | ||
45 | sizes[0] = units.iconSizes.tiny; | 137 | sizes[0] = 8; | ||
46 | sizes[1] = units.iconSizes.small; | 138 | sizes[1] = 16; | ||
47 | sizes[2] = units.iconSizes.smallMedium; | 139 | sizes[2] = 22; | ||
48 | sizes[3] = units.iconSizes.medium; | 140 | sizes[3] = 32; | ||
49 | sizes[4] = units.iconSizes.large; | 141 | sizes[4] = 64; | ||
50 | sizes[5] = units.iconSizes.huge; | 142 | sizes[5] = 128; | ||
51 | sizes[6] = units.iconSizes.enormous; | | |||
52 | 143 | | |||
53 | return sizes[ix]; | 144 | return sizes[ix]; | ||
54 | } | 145 | } | ||
55 | | ||||
56 | PlasmaCore.ColorScope { | | |||
57 | anchors.fill: parent | | |||
58 | colorGroup: darkScheme ? PlasmaCore.Theme.ComplementaryColorGroup : PlasmaCore.Theme.NormalColorGroup | | |||
59 | Rectangle { | 146 | Rectangle { | ||
60 | color: PlasmaCore.ColorScope.backgroundColor | 147 | Kirigami.Theme.backgroundColor: cuttlefish.bgcolor | ||
148 | Kirigami.Theme.colorSet: Kirigami.Theme.View | ||||
149 | color: Kirigami.Theme.backgroundColor | ||||
61 | anchors.fill: parent | 150 | anchors.fill: parent | ||
62 | } | 151 | } | ||
63 | 152 | ColumnLayout { | |||
64 | GridLayout { | 153 | Shortcut { | ||
65 | columns: 2 | 154 | sequence: StandardKey.ZoomIn | ||
155 | onActivated: tools.slider.value += 1 | ||||
156 | } | ||||
157 | Shortcut { | ||||
158 | sequence: StandardKey.ZoomOut | ||||
159 | onActivated: tools.slider.value -= 1 | ||||
160 | } | ||||
66 | anchors.fill: parent | 161 | anchors.fill: parent | ||
67 | rowSpacing: - Math.round(units.gridUnit / 20) | 162 | spacing: 0 | ||
68 | 163 | | |||
69 | Tools { | 164 | Tools { | ||
70 | Layout.columnSpan: 2 | 165 | id: tools | ||
71 | Layout.fillWidth: true | 166 | Layout.fillWidth: true | ||
72 | Layout.preferredHeight: units.gridUnit * 2 | 167 | Layout.preferredHeight: (Kirigami.Units.gridUnit * 2) + Kirigami.Units.largeSpacing | ||
73 | } | 168 | } | ||
74 | 169 | | |||
75 | PlasmaExtras.ScrollArea { | 170 | RowLayout { | ||
171 | QQC2.ScrollView { | ||||
172 | id: grid | ||||
76 | Layout.fillWidth: true | 173 | Layout.fillWidth: true | ||
77 | Layout.fillHeight: true | 174 | Layout.fillHeight: true | ||
175 | QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff | ||||
78 | IconGrid { | 176 | IconGrid { | ||
79 | id: iconGrid | 177 | id: iconGrid | ||
80 | anchors.fill: parent | 178 | anchors.fill: parent | ||
179 | anchors.margins: Kirigami.Units.gridUnit | ||||
81 | 180 | | |||
82 | footer: SvgGrid { | 181 | footer: SvgGrid { | ||
83 | id: svgGrid | 182 | id: svgGrid | ||
84 | interactive: false | 183 | interactive: false | ||
85 | } | 184 | } | ||
86 | } | 185 | } | ||
87 | } | 186 | } | ||
88 | Preview { | 187 | Preview { | ||
89 | id: preview | 188 | visible: cuttlefish.widescreen | ||
90 | Layout.preferredWidth: Math.max(parent.width / 4, units.gridUnit * 12) | 189 | id: previewPane | ||
190 | Layout.preferredWidth: Kirigami.Units.gridUnit * 22 | ||||
91 | Layout.fillHeight: true | 191 | Layout.fillHeight: true | ||
92 | } | 192 | } | ||
93 | } | 193 | } | ||
194 | ToolsResponsive { | ||||
195 | visible: !cuttlefish.widescreen | ||||
196 | id: toolsResponsive | ||||
197 | Layout.fillWidth: true | ||||
198 | Layout.preferredHeight: (Kirigami.Units.gridUnit * 2) + Kirigami.Units.largeSpacing | ||||
94 | } | 199 | } | ||
95 | 200 | } | |||
96 | Shortcut { | 201 | Loader { | ||
97 | sequence: StandardKey.Quit | 202 | active: !cuttlefish.widescreen | ||
98 | onActivated: Qt.quit() | 203 | source: "ResponsivePreview.qml" | ||
204 | } | ||||
205 | Connections { | ||||
206 | target: tools | ||||
207 | onColorschemeChanged: (index) => { | ||||
208 | cuttlefish.changeColors(index) | ||||
209 | toolsResponsive.currentIndex = index | ||||
210 | } | ||||
211 | } | ||||
212 | Connections { | ||||
213 | target: toolsResponsive | ||||
214 | onColorschemeChanged: (index) => { | ||||
215 | cuttlefish.changeColors(index) | ||||
216 | tools.currentIndex = index | ||||
217 | } | ||||
218 | } | ||||
219 | Item { | ||||
220 | id: preview | ||||
221 | property string iconName: "plasma" | ||||
222 | property string fullPath: "" | ||||
223 | property string category: "" | ||||
224 | property string fileName: "" | ||||
225 | property string type: "" | ||||
226 | property string iconTheme: "" | ||||
227 | property variant sizes: [] | ||||
228 | property bool scalable: true | ||||
229 | } | ||||
230 | | ||||
231 | Component.onCompleted: { | ||||
232 | cuttlefish.schemeStash += Kirigami.Theme.textColor | ||||
233 | cuttlefish.schemeStash += Kirigami.Theme.backgroundColor | ||||
234 | cuttlefish.schemeStash += Kirigami.Theme.highlightColor | ||||
235 | cuttlefish.schemeStash += Kirigami.Theme.highlightedTextColor | ||||
236 | cuttlefish.schemeStash += Kirigami.Theme.positiveTextColor | ||||
237 | cuttlefish.schemeStash += Kirigami.Theme.neutralTextColor | ||||
238 | cuttlefish.schemeStash += Kirigami.Theme.negativeTextColor | ||||
239 | console.log(cuttlefish.schemeStash) | ||||
99 | } | 240 | } | ||
100 | } | 241 | } |
ditto