Differential D28744 Diff 81016 kcms/keys/package/contents/ui/main.qml

Changeset View

Standalone View

View Options

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

  • This file was added.
1​/*
2​ * Copyright (C) 2020 David Redondo <david@david-redondo.de>
3​ *
4​ * This program is free software; you can redistribute it and/or modify
5​ * it under the terms of the GNU General Public License as published by
6​ * the Free Software Foundation; either version 2 of the License, or
7​ * (at your option) any later version.
8​ *
9​ * This program is distributed in the hope that it will be useful,
10​ * but WITHOUT ANY WARRANTY; without even the implied warranty of
11​ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12​ * GNU General Public License for more details.
13​ *
14​ * You should have received a copy of the GNU General Public License along
15​ * with this program; if not, write to the Free Software Foundation, Inc.,
16​ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
17​ */
18​
19​import QtQuick 2.14
20​import QtQuick.Dialogs 1.3
21​import QtQuick.Layouts 1.1
22​import QtQuick.Controls 2.3 as QQC2
23​import QtQml 2.14
24​import QtQml.Models 2.3
25​
26​import org.kde.kirigami 2.10 as Kirigami
27​import org.kde.kcm 1.2 as KCM
28​import org.kde.private.kcms.keys 2.0 as Private
29​
30​KCM.SimpleKCM {
31​ id: root
broulikUnsubmitted
Not Done

Kirigami.Units.gridUnit

broulik: `Kirigami.Units.gridUnit`
32​ implicitWidth: 800
ngrahamUnsubmitted
Done

The ratio between these is kind of unpleasant; I would recommend 800x600

ngraham: The ratio between these is kind of unpleasant; I would recommend 800x600
33​ implicitHeight: 600
34​ property alias exportActive: exportInfo.visible
broulikUnsubmitted
Done

This appears to loop? exportInfo's visible is bound to this

broulik: This appears to loop? `exportInfo`'s `visible` is bound to this
35​ readonly property bool errorOccured: kcm.lastError != ""
broulikUnsubmitted
Done

Coding style: ColumnLayout {

broulik: Coding style: `ColumnLayout {`
36​ ColumnLayout {
37​ anchors.fill: parent
broulikUnsubmitted
Done

Huh?

broulik: Huh?
38​ Kirigami.InlineMessage {
39​ Layout.fillWidth: true
40​ visible: errorOccured
41​ text: kcm.lastError
broulikUnsubmitted
Done

Coding style, also !==

broulik: Coding style, also `!==`
42​ type: Kirigami.MessageType.Error
43​ }
44​ Kirigami.InlineMessage {
45​ id: exportWarning
46​ Layout.fillWidth: true
47​ text: i18n("Cannot export scheme while there are unsaved changes")
48​ type: Kirigami.MessageType.Warning
49​ showCloseButton: true
50​ Binding on visible {
51​ when: exportWarning.visible
52​ value: kcm.needsSave
53​ restoreMode: Binding.RestoreNone
54​ }
broulikUnsubmitted
Done

What Qt version was that changed, 5.14?
Also why not just bind?

broulik: What Qt version was that changed, 5.14? Also why not just bind?
davidreAuthorUnsubmitted
Done

The way I used it caused a binding loop

Binding on visible {
                when: exportWarning.visible
                value: kcm.needsSave
                restoreMode: Binding.RestoreValue
            }
davidre: The way I used it caused a binding loop ``` Binding on visible { when…
55​ }
56​ Kirigami.InlineMessage {
57​ id: exportInfo
58​ Layout.fillWidth: true
59​ text: i18n("Select the components below that should be included in the exported scheme")
60​ type: Kirigami.MessageType.Information
61​ showCloseButton: true
62​ actions: [
63​ Kirigami.Action {
ngrahamUnsubmitted
Done

Maybe Select the components below... for extra clarity?

ngraham: Maybe `Select the components below...` for extra clarity?
64​ iconName: "document-save"
65​ text: i18n("Save scheme")
66​ onTriggered: {
ngrahamUnsubmitted
Done

Probably needs a "select all" action to make exporting everything not be incredibly frustrating

ngraham: Probably needs a "select all" action to make exporting everything not be incredibly frustrating
67​ fileDialogLoader.save = true
68​ fileDialogLoader.active = true
69​ exportActive = false
70​ }
71​ }
72​ ]
73​ }
74​ Kirigami.SearchField {
75​ id: search
76​ enabled: !errorOccured && !exportActive
77​ Layout.fillWidth: true
78​ Binding {
79​ target: kcm.filteredModel
80​ property: "filter"
81​ value: search.text
82​ }
ngrahamUnsubmitted
Done

Would be nice to filter immediately as the user types rather than having to hit the return key

ngraham: Would be nice to filter immediately as the user types rather than having to hit the return key
83​ }
84​ GridLayout {
85​ enabled: !errorOccured
86​ columns: 2
87​ QQC2.ScrollView {
88​ Component.onCompleted: background.visible = true
broulikUnsubmitted
Not Done

Kirigami.Units.gridUnit and/or maybe proportional to the window width?

broulik: `Kirigami.Units.gridUnit` and/or maybe proportional to the window width?
89​ Layout.preferredWidth: 300
90​ Layout.fillHeight:true
91​ ListView {
92​ id: components
93​ clip: true
94​ model: kcm.filteredModel
95​ delegate: Kirigami.AbstractListItem {
broulikUnsubmitted
Done

Is contentItem the default property?

broulik: Is `contentItem` the default property?
davidreAuthorUnsubmitted
Done

Yes

davidre: Yes
96​ id: componentDelegate
97​ readonly property color foregroundColor: ListView.isCurrentItem ? activeTextColor : textColor
98​ RowLayout {
99​ Kirigami.Icon {
100​ id: appIcon
101​ source: model.decoration
102​ Layout.preferredWidth: Kirigami.Units.iconSizes.small
103​ Layout.preferredHeight: Layout.preferredWidth
broulikUnsubmitted
Done

Make sure to replicate the color behavior on hover and when selected, right now text stays black with the blue selection background behind it

broulik: Make sure to replicate the color behavior on hover and when selected, right now text stays…
104​ color: foregroundColor
105​ opacity: model.pendingDeletion ? 0.3 : 1
106​ }
107​ QQC2.Label {
108​ Layout.fillWidth: true
109​ text: model.display
110​ color: foregroundColor
111​ opacity: model.pendingDeletion ? 0.3 : 1
112​ }
113​ QQC2.ToolButton {
114​ Layout.preferredHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.largeSpacing
115​ Layout.preferredWidth: Layout.preferredHeight
broulikUnsubmitted
Done

Perhaps you could put a checkbox here so one check all items in a section

broulik: Perhaps you could put a checkbox here so one check all items in a section
116​ visible: !exportActive && !model.pendingDeletion
117​ opacity: componentDelegate.containsMouse || componentDelegate.ListView.isCurrentItem ? 1 : 0
118​ enabled: opacity
119​ icon.name: "edit-delete"
ngrahamUnsubmitted
Done

When I click on it, the KCM enters this state:

ngraham: When I click on it, the KCM enters this state: {F8249469}
120​ icon.width: Kirigami.Units.iconSizes.small
121​ onClicked: model.pendingDeletion = true
ngrahamUnsubmitted
Done

How about "Remove all shortcuts for [model.name]"

ngraham: How about "Remove all shortcuts for [model.name]"
122​ QQC2.ToolTip {
123​ text: i18n("Remove all shortcuts for %1", model.display)
124​ }
125​ }
126​ QQC2.ToolButton {
127​ Layout.preferredHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.largeSpacing
ngrahamUnsubmitted
Done

Need to do one of the following:

  • Make this view never empty because something in the left view is always selected
  • Add a standard-looking placeholder message that appears in the center of this view when nothing is selected that says something like "Select an item from the list to view its shortcuts here"
ngraham: Need to do one of the following: - Make this view never empty because something in the left…
128​ Layout.preferredWidth: Layout.preferredHeight
129​ visible: !exportActive && model.pendingDeletion
130​ icon.name: "edit-undo"
131​ icon.width: Kirigami.Units.iconSizes.small
132​ onClicked: model.pendingDeletion = false
133​ QQC2.ToolTip {
134​ text: i18n("Undo deletion")
135​ }
136​ }
137​ QQC2.CheckBox {
138​ id: checkbox
139​ checked: model.checked
140​ visible: exportActive
141​ onToggled: model.checked = checked
142​ }
broulikUnsubmitted
Done

Capitalize: "Add Application..."

How do I remove applications again, though?

broulik: Capitalize: "Add Application..." How do I remove applications again, though?
davidreAuthorUnsubmitted
Done

I know...
I will look into what's the most reliable way of deleting things...

davidre: I know... I will look into what's the most reliable way of deleting things...
143​ }
144​ }
145​ section.property: "section"
146​ section.delegate: Kirigami.ListSectionHeader {
147​ label: section
148​ QQC2.CheckBox {
149​ id: sectionCheckbox
150​ Layout.alignment: Qt.AlignRight
151​ visible: exportActive
152​ onToggled: {
153​ const checked = sectionCheckbox.checked
154​ const startIndex = kcm.shortcutsModel.index(0, 0)
155​ const indices = kcm.shortcutsModel.match(startIndex, Private.ShortcutsModel.SectionRole, section, -1)
156​ for (const index of indices) {
157​ kcm.shortcutsModel.setData(index, checked, Private.ShortcutsModel.CheckedRole)
158​ }
broulikUnsubmitted
Done

I kinda think this button should turn into a "Cancel Export" button when exporting? Not sure that closing the message widget is obvious enough to the user?

broulik: I kinda think this button should turn into a "Cancel Export" button when exporting? Not sure…
159​ }
160​ Connections {
161​ enabled: exportActive
broulikUnsubmitted
Done

You're doing a Connections above already.

broulik: You're doing a `Connections` above already.
162​ target: kcm.shortcutsModel
163​ function onDataChanged (topLeft, bottomRight, roles) {
164​ const startIndex = kcm.shortcutsModel.index(0, 0)
broulikUnsubmitted
Done

This should just be bound to the search.text and work automatically

broulik: This should just be bound to the `search.text` and work automatically
165​ const indices = kcm.shortcutsModel.match(startIndex, Private.ShortcutsModel.SectionRole, section, -1)
broulikUnsubmitted
Done

You seem to love being overly explicit with this? :P You have a binding above already...

Perhaps run the application with QT_LOGGING_RULES="qt.qml.binding.removal.info=true" to clean those up

broulik: You seem to love being overly explicit with this? :P You have a binding above already...
166​ sectionCheckbox.checked = indices.reduce((acc, index) => acc && kcm.shortcutsModel.data(index,Private.ShortcutsModel.CheckedRole), true)
167​ }
168​ }
ngrahamUnsubmitted
Done

Make it a level 3 Heading

ngraham: Make it a level 3 `Heading`
169​ }
170​ }
171​ onCurrentItemChanged: dm.rootIndex = kcm.filteredModel.index(currentIndex, 0)
172​ onCurrentIndexChanged: shortcutsList.selectedIndex = -1
173​ }
174​ }
ngrahamUnsubmitted
Done

For some reason this list view doesn't get any sctollbars when it's scrollable. Also it implements kinetic scrolling while the other list view doesn't

ngraham: For some reason this list view doesn't get any sctollbars when it's scrollable. Also it…
175​ Item {
176​ Layout.fillHeight: true
177​ Layout.fillWidth: true
178​ QQC2.ScrollView {
179​ enabled: !exportActive
180​ id: shortcutsScroll
181​ anchors.fill:parent
182​ clip: true
183​// visible: components.currentIndex != -1
184​ Component.onCompleted: background.visible = true
185​ ListView {
186​ clip:true
187​ id: shortcutsList
188​ property int selectedIndex: -1
189​ model: DelegateModel {
190​ id: dm
191​ model: rootIndex.valid ? kcm.filteredModel : undefined
192​ delegate: ShortcutActionDelegate {}
193​ }
194​ }
195​ }
196​ Kirigami.Heading {
197​ anchors.centerIn: parent
198​ visible: components.currentIndex == -1
199​ text: i18n("Select an item from the list to view its shortcuts here")
200​ level: 3
201​ color: Kirigami.Theme.disabledTextColor
202​ }
203​ }
204​ QQC2.Button {
205​ enabled: !exportActive
206​ Layout.alignment: Qt.AlignRight
207​ icon.name: "list-add"
208​ text: i18n("Add Application...")
209​ onClicked: {
210​ kcm.addApplication(this)
211​ }
212​ }
213​ RowLayout {
214​ Layout.alignment: Qt.AlignRight
215​ QQC2.Button {
216​ enabled: !exportActive
217​ icon.name: "document-import"
218​ text: i18n("Import Scheme...")
219​ onClicked: importSheet.open()
220​ }
221​ QQC2.Button {
222​ icon.name: exportActive ? "dialog-cancel" : "document-export"
223​ text: exportActive ? i18n("Cancel Export") : i18n("Export Scheme...")
224​ onClicked: {
225​ if (exportActive) {
broulikUnsubmitted
Done

Found it a bit odd that the overlaysheet suddenly closed as a result.
I would have expected clicking "Select File", choosing one, and then it being added to and selected in the combox list and then confirming this by clicking "Import"

broulik: Found it a bit odd that the overlaysheet suddenly closed as a result. I would have expected…
226​ exportActive = false
227​ } else if (kcm.needsSave) {
228​ exportWarning.visible = true
229​ } else {
230​ search.text = ""
231​ exportActive = true
232​ }
233​ }
234​ }
235​ }
236​ }
237​ }
238​ Loader {
239​ id: fileDialogLoader
240​ active: false
241​ property bool save
242​ sourceComponent: FileDialog {
243​ id: fileDialog
244​ title: save ? i18n("Export Shortcut Scheme") : i18n("Import Shortcut Scheme")
245​ folder: shortcuts.home
246​ nameFilters: [ i18nc("Template for file dialog","Schortcut Scheme (*.kksrc)") ]
247​ defaultSuffix: ".kksrc"
248​ selectExisting: !fileDialogLoader.save
249​ Component.onCompleted: open()
250​ onAccepted: {
251​ if (save) {
252​ kcm.writeScheme(fileUrls[0])
253​ } else {
254​ var schemes = schemeBox.model
255​ schemes.splice(schemes.length - 1, 0, {name: kcm.urlFilename(fileUrls[0]), url: fileUrls[0]})
256​ schemeBox.model = schemes
257​ schemeBox.currentIndex = schemes.length - 2
258​ }
259​ fileDialogLoader.active = false
260​ }
261​ onRejected: fileDialogLoader.active = false
262​ }
263​ }
264​ Kirigami.OverlaySheet {
265​ id: importSheet
266​ header: Kirigami.Heading {
267​ text: i18n("Import Shortcut Scheme")
268​ }
269​
270​ ColumnLayout {
271​ anchors.centerIn: parent
272​ QQC2.Label {
273​ text: i18n("Select the scheme to import:")
274​ }
275​ RowLayout {
276​ QQC2.ComboBox {
277​ id: schemeBox
278​ readonly property bool customSchemeSelected: currentIndex == count - 1
279​ property string url: ""
280​ currentIndex: count - 1
281​ textRole: "name"
282​ onActivated: url = model[index]["url"]
283​ Component.onCompleted: {
284​ var defaultSchemes = kcm.defaultSchemes()
285​ defaultSchemes.push({name: i18n("Custom Scheme"), url: "unused"})
286​ model = defaultSchemes
287​ }
288​ }
289​ QQC2.Button {
290​ text: schemeBox.customSchemeSelected ? i18n("Select File...") : i18n("Import")
291​ onClicked: {
292​ if (schemeBox.customSchemeSelected) {
293​ fileDialogLoader.save = false;
294​ fileDialogLoader.active = true;
295​ } else {
296​ kcm.loadScheme(schemeBox.model[schemeBox.currentIndex]["url"])
297​ importSheet.close()
298​ }
299​ }
300​ }
301​ }
302​ }
303​ }
304​}
305​