Differential D18646 Diff 50838 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 KCM.ConfigModule.quickHelp: i18n("This module lets you choose the color scheme.") 32​ KCM.ConfigModule.quickHelp: i18n("This module lets you choose the color scheme.")
32 33​
33 view.model: kcm.colorsModel 34​ view.model: Private.FilterProxyModel {
35​ query: searchField.text
36​ filter: filterCombo.model[filterCombo.currentIndex].filter
37​ sourceModel: kcm.colorsModel
38​ }
34 view.currentIndex: kcm.selectedSchemeIndex 39​ view.currentIndex: kcm.selectedSchemeIndex
35 40​
36 enabled: !kcm.downloadingFile 41​ enabled: !kcm.downloadingFile
37 42​
38 Component.onCompleted: { 43​ Component.onCompleted: {
39 // The thumbnails are a bit more elaborate and need more room, especially when translated 44​ // The thumbnails are a bit more elaborate and need more room, especially when translated
40 view.implicitCellWidth = Kirigami.Units.gridUnit * 13; 45​ view.implicitCellWidth = Kirigami.Units.gridUnit * 13;
41 } 46​ }
Show All 24 Lines63 Kirigami.InlineMessage {
66 Connections { 71​ Connections {
67 target: kcm 72​ target: kcm
68 onShowSchemeNotInstalledWarning: { 73​ onShowSchemeNotInstalledWarning: {
69 notInstalledWarning.text = i18n("The color scheme '%1' is not installed. Selecting the default theme instead.", schemeName) 74​ notInstalledWarning.text = i18n("The color scheme '%1' is not installed. Selecting the default theme instead.", schemeName)
70 notInstalledWarning.visible = true; 75​ notInstalledWarning.visible = true;
71 } 76​ }
72 } 77​ }
73 } 78​ }
79​
80​ RowLayout {
81​ Layout.fillWidth: true
82​
83​ QtControls.TextField {
84​ id: searchField
85​ Layout.fillWidth: true
86​ placeholderText: i18n("Search...")
87​ leftPadding: LayoutMirroring.enabled ? clearButton.width : undefined
88​ rightPadding: LayoutMirroring.enabled ? undefined : clearButton.width
89​
90​ // this could be useful as a component
91​ MouseArea {
92​ id: clearButton
93​ anchors {
94​ top: parent.top
95​ topMargin: parent.topPadding
96​ right: parent.right
97​ // the TextField's padding is taking into account the clear button's size
98​ // so we just use the opposite one for positioning the clear button
99​ rightMargin: LayoutMirroring.enabled ? parent.rightPadding: parent.leftPadding
100​ bottom: parent.bottom
101​ bottomMargin: parent.bottomPadding
102​ }
103​ width: height
104​
105​ opacity: searchField.length > 0 ? 1 : 0
106​ onClicked: searchField.clear()
107​
108​ Kirigami.Icon {
109​ anchors.fill: parent
110​ active: parent.pressed
111​ source: "edit-clear-locationbar-" + (LayoutMirroring.enabled ? "ltr" : "rtl")
112​ }
113​
114​ Behavior on opacity {
115​ NumberAnimation { duration: Kirigami.Units.longDuration }
116​ }
117​ }
118​ }
119​
120​ QtControls.ComboBox {
121​ id: filterCombo
122​ textRole: "text"
123​ model: [
124​ {text: i18n("All Schemes"), filter: Private.FilterProxyModel.AllSchemes},
125​ {text: i18n("Light Schemes"), filter: Private.FilterProxyModel.LightSchemes},
126​ {text: i18n("Dark Schemes"), filter: Private.FilterProxyModel.DarkSchemes}
127​ ]
128​
129​ // 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…
130​ // and inject a nice little filter icon.
131​ Component.onCompleted: {
132​ if (!background || !background.hasOwnProperty("properties")) {
133​ // not a KQuickStyleItem
134​ return;
135​ }
136​
137​ var props = background.properties || {};
138​ props.currentIcon = "view-filter";
139​ background.properties = props;
140​ }
141​ }
142​ }
74 } 143​ }
75 144​
76 view.delegate: KCM.GridDelegate { 145​ view.delegate: KCM.GridDelegate {
77 id: delegate 146​ id: delegate
78 147​
79 text: model.display 148​ text: model.display
80 149​
81 thumbnailAvailable: true 150​ thumbnailAvailable: true
▲ Show 20 Lines • Show All 89 Lines • ▼ Show 20 Line(s)151 thumbnail: Rectangle {
171 } 240​ }
172 } 241​ }
173 242​
174 actions: [ 243​ actions: [
175 Kirigami.Action { 244​ Kirigami.Action {
176 iconName: "document-edit" 245​ iconName: "document-edit"
177 tooltip: i18n("Edit Color Scheme") 246​ tooltip: i18n("Edit Color Scheme")
178 enabled: !model.pendingDeletion 247​ enabled: !model.pendingDeletion
179 onTriggered: kcm.editScheme(model.index, parent) 248​ onTriggered: kcm.editScheme(model.schemeName, parent)
180 }, 249​ },
181 Kirigami.Action { 250​ Kirigami.Action {
182 iconName: "edit-delete" 251​ iconName: "edit-delete"
183 tooltip: i18n("Remove Color Scheme") 252​ tooltip: i18n("Remove Color Scheme")
184 enabled: model.removable 253​ enabled: model.removable
185 visible: !model.pendingDeletion 254​ visible: !model.pendingDeletion
186 onTriggered: kcm.setPendingDeletion(model.index, true) 255​ onTriggered: kcm.setPendingDeletion(model.schemeName, true)
187 }, 256​ },
188 Kirigami.Action { 257​ Kirigami.Action {
189 iconName: "edit-undo" 258​ iconName: "edit-undo"
190 tooltip: i18n("Restore Color Scheme") 259​ tooltip: i18n("Restore Color Scheme")
191 visible: model.pendingDeletion 260​ visible: model.pendingDeletion
192 onTriggered: kcm.setPendingDeletion(model.index, false) 261​ onTriggered: kcm.setPendingDeletion(model.schemeName, false)
193 } 262​ }
194 ] 263​ ]
195 onClicked: { 264​ onClicked: {
196 kcm.selectedScheme = model.schemeName; 265​ kcm.selectedScheme = model.schemeName;
197 view.forceActiveFocus(); 266​ view.forceActiveFocus();
198 } 267​ }
199 onDoubleClicked: { 268​ onDoubleClicked: {
200 kcm.save(); 269​ kcm.save();
▲ Show 20 Lines • Show All 65 Lines • Show Last 20 Lines