Differential D18646 Diff 53422 kcms/colors/package/contents/ui/main.qml

Changeset View

Standalone View

View Options

kcms/colors/package/contents/ui/main.qml

Show All 20 Lines
21import QtQuick 2.6 21​import QtQuick 2.6
22import QtQuick.Layouts 1.1 22​import QtQuick.Layouts 1.1
23import QtQuick.Window 2.2 23​import QtQuick.Window 2.2
24import QtQuick.Dialogs 1.0 as QtDialogs 24​import QtQuick.Dialogs 1.0 as QtDialogs
25import QtQuick.Controls 2.3 as QtControls 25​import QtQuick.Controls 2.3 as QtControls
26import org.kde.kirigami 2.4 as Kirigami 26​import org.kde.kirigami 2.4 as Kirigami
27import org.kde.kconfig 1.0 // for KAuthorized 27​import org.kde.kconfig 1.0 // for KAuthorized
28import org.kde.kcm 1.1 as KCM 28​import org.kde.kcm 1.1 as KCM
29​import org.kde.private.kcms.colors 1.0 as Private
29 30​
30KCM.GridViewKCM { 31​KCM.GridViewKCM {
31 id: root 32​ id: root
32 KCM.ConfigModule.quickHelp: i18n("This module lets you choose the color scheme.") 33​ KCM.ConfigModule.quickHelp: i18n("This module lets you choose the color scheme.")
33 34​
34 view.model: kcm.colorsModel 35​ view.model: kcm.filteredModel
35 view.currentIndex: kcm.selectedSchemeIndex 36​ view.currentIndex: kcm.filteredModel.selectedSchemeIndex
37​
38​ Binding {
39​ target: kcm.filteredModel
40​ property: "query"
41​ value: searchField.text
42​ }
43​
44​ Binding {
45​ target: kcm.filteredModel
46​ property: "filter"
47​ value: filterCombo.model[filterCombo.currentIndex].filter
48​ }
36 49​
37 enabled: !kcm.downloadingFile 50​ enabled: !kcm.downloadingFile
38 51​
39 Component.onCompleted: { 52​ Component.onCompleted: {
40 // The thumbnails are a bit more elaborate and need more room, especially when translated 53​ // The thumbnails are a bit more elaborate and need more room, especially when translated
41 view.implicitCellWidth = Kirigami.Units.gridUnit * 13; 54​ view.implicitCellWidth = Kirigami.Units.gridUnit * 13;
42 } 55​ }
43 56​
Show All 23 Lines72 Kirigami.InlineMessage {
67 Connections { 80​ Connections {
68 target: kcm 81​ target: kcm
69 onShowSchemeNotInstalledWarning: { 82​ onShowSchemeNotInstalledWarning: {
70 notInstalledWarning.text = i18n("The color scheme '%1' is not installed. Selecting the default theme instead.", schemeName) 83​ notInstalledWarning.text = i18n("The color scheme '%1' is not installed. Selecting the default theme instead.", schemeName)
71 notInstalledWarning.visible = true; 84​ notInstalledWarning.visible = true;
72 } 85​ }
73 } 86​ }
74 } 87​ }
88​
89​ RowLayout {
90​ Layout.fillWidth: true
91​
92​ QtControls.TextField {
93​ id: searchField
94​ Layout.fillWidth: true
95​ placeholderText: i18n("Search...")
96​ leftPadding: LayoutMirroring.enabled ? clearButton.width : undefined
97​ rightPadding: LayoutMirroring.enabled ? undefined : clearButton.width
98​
99​ // this could be useful as a component
100​ MouseArea {
101​ id: clearButton
102​ anchors {
103​ top: parent.top
104​ topMargin: parent.topPadding
105​ right: parent.right
106​ // the TextField's padding is taking into account the clear button's size
107​ // so we just use the opposite one for positioning the clear button
108​ rightMargin: LayoutMirroring.enabled ? parent.rightPadding: parent.leftPadding
109​ bottom: parent.bottom
110​ bottomMargin: parent.bottomPadding
111​ }
112​ width: height
113​
114​ opacity: searchField.length > 0 ? 1 : 0
115​ onClicked: searchField.clear()
116​
117​ Kirigami.Icon {
118​ anchors.fill: parent
119​ active: parent.pressed
120​ source: "edit-clear-locationbar-" + (LayoutMirroring.enabled ? "ltr" : "rtl")
121​ }
122​
123​ Behavior on opacity {
124​ NumberAnimation { duration: Kirigami.Units.longDuration }
125​ }
126​ }
127​ }
128​
129​ QtControls.ComboBox {
130​ id: filterCombo
131​ textRole: "text"
132​ model: [
133​ {text: i18n("All Schemes"), filter: Private.KCM.AllSchemes},
134​ {text: i18n("Light Schemes"), filter: Private.KCM.LightSchemes},
135​ {text: i18n("Dark Schemes"), filter: Private.KCM.DarkSchemes}
136​ ]
137​
138​ // HACK QQC2 doesn't support icons, so we just tamper with the desktop style ComboBox's background
davidedmundsonUnsubmitted
Not Done

why do we need a different approach from the way you've done the clear button?

davidedmundson: why do we need a different approach from the way you've done the clear button?
broulikAuthorUnsubmitted
Not Done

If I could change the left padding of the ComboBox button I would have done that and placed an icon ontop. However, since it's all painted as a monolith by KQuickStyleItem I cannot.

It doesn't follow the padding properties because it's all derived from the QStyle, and changing that opens a can of worm imho.

broulik: If I could change the left padding of the `ComboBox` button I would have done that and placed…
139​ // and inject a nice little filter icon.
140​ Component.onCompleted: {
141​ if (!background || !background.hasOwnProperty("properties")) {
142​ // not a KQuickStyleItem
143​ return;
144​ }
145​
146​ var props = background.properties || {};
147​ props.currentIcon = "view-filter";
148​ props.iconColor = Kirigami.Theme.textColor;
149​ background.properties = props;
150​ }
151​ }
152​ }
75 } 153​ }
76 154​
77 view.delegate: KCM.GridDelegate { 155​ view.delegate: KCM.GridDelegate {
78 id: delegate 156​ id: delegate
79 157​
80 text: model.display 158​ text: model.display
81 159​
82 thumbnailAvailable: true 160​ thumbnailAvailable: true
▲ Show 20 Lines • Show All 89 Lines • ▼ Show 20 Line(s)161 thumbnail: Rectangle {
172 } 250​ }
173 } 251​ }
174 252​
175 actions: [ 253​ actions: [
176 Kirigami.Action { 254​ Kirigami.Action {
177 iconName: "document-edit" 255​ iconName: "document-edit"
178 tooltip: i18n("Edit Color Scheme...") 256​ tooltip: i18n("Edit Color Scheme...")
179 enabled: !model.pendingDeletion 257​ enabled: !model.pendingDeletion
180 onTriggered: kcm.editScheme(model.index, root) 258​ onTriggered: kcm.editScheme(model.schemeName, root)
181 }, 259​ },
182 Kirigami.Action { 260​ Kirigami.Action {
183 iconName: "edit-delete" 261​ iconName: "edit-delete"
184 tooltip: i18n("Remove Color Scheme") 262​ tooltip: i18n("Remove Color Scheme")
185 enabled: model.removable 263​ enabled: model.removable
186 visible: !model.pendingDeletion 264​ visible: !model.pendingDeletion
187 onTriggered: kcm.setPendingDeletion(model.index, true) 265​ onTriggered: model.pendingDeletion = true
188 }, 266​ },
189 Kirigami.Action { 267​ Kirigami.Action {
190 iconName: "edit-undo" 268​ iconName: "edit-undo"
191 tooltip: i18n("Restore Color Scheme") 269​ tooltip: i18n("Restore Color Scheme")
192 visible: model.pendingDeletion 270​ visible: model.pendingDeletion
193 onTriggered: kcm.setPendingDeletion(model.index, false) 271​ onTriggered: model.pendingDeletion = false
194 } 272​ }
195 ] 273​ ]
196 onClicked: { 274​ onClicked: {
197 kcm.selectedScheme = model.schemeName; 275​ kcm.model.selectedScheme = model.schemeName;
198 view.forceActiveFocus(); 276​ view.forceActiveFocus();
199 } 277​ }
200 onDoubleClicked: { 278​ onDoubleClicked: {
201 kcm.save(); 279​ kcm.save();
202 } 280​ }
203 } 281​ }
204 282​
205 footer: ColumnLayout { 283​ footer: ColumnLayout {
▲ Show 20 Lines • Show All 61 Lines • Show Last 20 Lines