Changeset View
Changeset View
Standalone View
Standalone View
kcms/colors/package/contents/ui/main.qml
Show All 20 Lines | |||||
21 | import QtQuick 2.6 | 21 | import QtQuick 2.6 | ||
22 | import QtQuick.Layouts 1.1 | 22 | import QtQuick.Layouts 1.1 | ||
23 | import QtQuick.Window 2.2 | 23 | import QtQuick.Window 2.2 | ||
24 | import QtQuick.Dialogs 1.0 as QtDialogs | 24 | import QtQuick.Dialogs 1.0 as QtDialogs | ||
25 | import QtQuick.Controls 2.3 as QtControls | 25 | import QtQuick.Controls 2.3 as QtControls | ||
26 | import org.kde.kirigami 2.4 as Kirigami | 26 | import org.kde.kirigami 2.4 as Kirigami | ||
27 | import org.kde.kconfig 1.0 // for KAuthorized | 27 | import org.kde.kconfig 1.0 // for KAuthorized | ||
28 | import 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 | | |||
30 | KCM.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 Lines | 63 | 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 | } | ||||
davidedmundson: why do we need a different approach from the way you've done the clear button? | |||||
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… | |||||
74 | } | 130 | } | ||
75 | 131 | | |||
76 | view.delegate: KCM.GridDelegate { | 132 | view.delegate: KCM.GridDelegate { | ||
77 | id: delegate | 133 | id: delegate | ||
78 | 134 | | |||
79 | text: model.display | 135 | text: model.display | ||
80 | 136 | | |||
81 | thumbnailAvailable: true | 137 | thumbnailAvailable: true | ||
▲ Show 20 Lines • Show All 89 Lines • ▼ Show 20 Line(s) | 138 | thumbnail: Rectangle { | |||
171 | } | 227 | } | ||
172 | } | 228 | } | ||
173 | 229 | | |||
174 | actions: [ | 230 | actions: [ | ||
175 | Kirigami.Action { | 231 | Kirigami.Action { | ||
176 | iconName: "document-edit" | 232 | iconName: "document-edit" | ||
177 | tooltip: i18n("Edit Color Scheme") | 233 | tooltip: i18n("Edit Color Scheme") | ||
178 | enabled: !model.pendingDeletion | 234 | enabled: !model.pendingDeletion | ||
179 | onTriggered: kcm.editScheme(model.index, parent) | 235 | onTriggered: kcm.editScheme(model.schemeName, parent) | ||
180 | }, | 236 | }, | ||
181 | Kirigami.Action { | 237 | Kirigami.Action { | ||
182 | iconName: "edit-delete" | 238 | iconName: "edit-delete" | ||
183 | tooltip: i18n("Remove Color Scheme") | 239 | tooltip: i18n("Remove Color Scheme") | ||
184 | enabled: model.removable | 240 | enabled: model.removable | ||
185 | visible: !model.pendingDeletion | 241 | visible: !model.pendingDeletion | ||
186 | onTriggered: kcm.setPendingDeletion(model.index, true) | 242 | onTriggered: kcm.setPendingDeletion(model.schemeName, true) | ||
187 | }, | 243 | }, | ||
188 | Kirigami.Action { | 244 | Kirigami.Action { | ||
189 | iconName: "edit-undo" | 245 | iconName: "edit-undo" | ||
190 | tooltip: i18n("Restore Color Scheme") | 246 | tooltip: i18n("Restore Color Scheme") | ||
191 | visible: model.pendingDeletion | 247 | visible: model.pendingDeletion | ||
192 | onTriggered: kcm.setPendingDeletion(model.index, false) | 248 | onTriggered: kcm.setPendingDeletion(model.schemeName, false) | ||
193 | } | 249 | } | ||
194 | ] | 250 | ] | ||
195 | onClicked: { | 251 | onClicked: { | ||
196 | kcm.selectedScheme = model.schemeName; | 252 | kcm.selectedScheme = model.schemeName; | ||
197 | view.forceActiveFocus(); | 253 | view.forceActiveFocus(); | ||
198 | } | 254 | } | ||
199 | onDoubleClicked: { | 255 | onDoubleClicked: { | ||
200 | kcm.save(); | 256 | kcm.save(); | ||
▲ Show 20 Lines • Show All 65 Lines • Show Last 20 Lines |
why do we need a different approach from the way you've done the clear button?