Differential D28744 Diff 80672 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​ }
106​ QQC2.Label {
107​ Layout.fillWidth: true
108​ text: model.display
109​ color: foregroundColor
110​ }
111​ QQC2.ToolButton {
112​ Layout.preferredHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.largeSpacing
113​ Layout.preferredWidth: Layout.preferredHeight
114​ visible: !exportActive
115​ opacity: componentDelegate.containsMouse || componentDelegate.ListView.isCurrentItem ? 1 : 0
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​ enabled: opacity
117​ icon.name: "edit-delete"
118​ icon.width: Kirigami.Units.iconSizes.small
119​ onClicked: kcm.removeComponent(index)
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​ QQC2.ToolTip {
121​ text: i18n("Remove the selected component")
ngrahamUnsubmitted
Done

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

ngraham: How about "Remove all shortcuts for [model.name]"
122​ }
123​ }
124​ QQC2.CheckBox {
125​ id: checkbox
126​ checked: model.checked
127​ visible: exportActive
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​ onToggled: model.checked = checked
129​ }
130​ }
131​ }
132​ section.property: "section"
133​ section.delegate: Kirigami.ListSectionHeader {
134​ label: section
135​ QQC2.CheckBox {
136​ id: sectionCheckbox
137​ Layout.alignment: Qt.AlignRight
138​ visible: exportActive
139​ onToggled: {
140​ const checked = sectionCheckbox.checked
141​ const startIndex = kcm.shortcutsModel.index(0, 0)
142​ const indices = kcm.shortcutsModel.match(startIndex, Private.ShortcutsModel.SectionRole, section, -1)
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​ for (const index of indices) {
144​ kcm.shortcutsModel.setData(index, checked, Private.ShortcutsModel.CheckedRole)
145​ }
146​ }
147​ Connections {
148​ enabled: exportActive
149​ target: kcm.shortcutsModel
150​ function onDataChanged (topLeft, bottomRight, roles) {
151​ const startIndex = kcm.shortcutsModel.index(0, 0)
152​ const indices = kcm.shortcutsModel.match(startIndex, Private.ShortcutsModel.SectionRole, section, -1)
153​ sectionCheckbox.checked = indices.reduce((acc, index) => acc && kcm.shortcutsModel.data(index,Private.ShortcutsModel.CheckedRole), true)
154​ }
155​ }
156​ }
157​ }
158​ onCurrentItemChanged: dm.rootIndex = kcm.filteredModel.index(currentIndex, 0)
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​ onCurrentIndexChanged: shortcutsList.selectedIndex = -1
160​ }
161​ }
broulikUnsubmitted
Done

You're doing a Connections above already.

broulik: You're doing a `Connections` above already.
162​ QQC2.ScrollView {
163​ enabled: !exportActive
164​ id: shortcutsScroll
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​ Layout.fillHeight: true
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​ Layout.fillWidth: true
167​ Component.onCompleted: background.visible = true
168​ QQC2.Label {
ngrahamUnsubmitted
Done

Make it a level 3 Heading

ngraham: Make it a level 3 `Heading`
169​ visible: components.currentIndex == -1
170​ anchors.centerIn: parent
171​ text: i18n("Select an item from the list to view its shortcuts here")
172​ color: Kirigami.Theme.disabledTextColor
173​ }
174​ ListView {
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​ clip:true
176​ visible: components.currentIndex != -1
177​ anchors.fill: parent
178​ id: shortcutsList
179​ property int selectedIndex: -1
180​ model: DelegateModel {
181​ id: dm
182​ model: rootIndex.valid ? kcm.filteredModel : undefined
183​ delegate: ShortcutActionDelegate {}
184​ }
185​ }
186​ }
187​ QQC2.Button {
188​ enabled: !exportActive
189​ Layout.alignment: Qt.AlignRight
190​ icon.name: "list-add"
191​ text: i18n("Add Application...")
192​ onClicked: {
193​ kcm.addApplication(this)
194​ }
195​ }
196​ RowLayout {
197​ Layout.alignment: Qt.AlignRight
198​ QQC2.Button {
199​ enabled: !exportActive
200​ icon.name: "document-import"
201​ text: i18n("Import Scheme...")
202​ onClicked: importSheet.open()
203​ }
204​ QQC2.Button {
205​ icon.name: exportActive ? "dialog-cancel" : "document-export"
206​ text: exportActive ? i18n("Cancel Export") : i18n("Export Scheme...")
207​ onClicked: {
208​ if (exportActive) {
209​ exportActive = false
210​ } else if (kcm.needsSave) {
211​ exportWarning.visible = true
212​ } else {
213​ search.text = ""
214​ exportActive = true
215​ }
216​ }
217​ }
218​ }
219​ }
220​ }
221​ Loader {
222​ id: fileDialogLoader
223​ active: false
224​ property bool save
225​ sourceComponent: FileDialog {
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​ id: fileDialog
227​ title: save ? i18n("Export Shortcut Scheme") : i18n("Import Shortcut Scheme")
228​ folder: shortcuts.home
229​ nameFilters: [ i18nc("Template for file dialog","Schortcut Scheme (*.kksrc)") ]
230​ defaultSuffix: ".kksrc"
231​ selectExisting: !fileDialogLoader.save
232​ Component.onCompleted: open()
233​ onAccepted: {
234​ save ? kcm.writeScheme(fileUrls[0]) : kcm.loadScheme(fileUrls[0])
235​ fileDialogLoader.active = false
236​ }
237​ onRejected: fileDialogLoader.active = false
238​ }
239​ }
240​ Kirigami.OverlaySheet {
241​ id: importSheet
242​ header: Kirigami.Heading {
243​ text: i18n("Import Shortcut Scheme")
244​ }
245​
246​ ColumnLayout {
247​ anchors.centerIn: parent
248​ QQC2.Label {
249​ text: i18n("Select the scheme to import:")
250​ }
251​ RowLayout {
252​ QQC2.ComboBox {
253​ id: schemeBox
254​ readonly property bool customSchemeSelected: currentIndex == count - 1
255​ property string url: ""
256​ currentIndex: count - 1
257​ textRole: "name"
258​ onActivated: url = model[index]["url"]
259​ Component.onCompleted: {
260​ var defaultSchemes = kcm.defaultSchemes()
261​ defaultSchemes.push({name: i18n("Custom Scheme"), url: "unused"})
262​ model = defaultSchemes
263​ }
264​ }
265​ QQC2.Button {
266​ text: schemeBox.customSchemeSelected ? i18n("Select File...") : i18n("Import")
267​ onClicked: {
268​ if (schemeBox.customSchemeSelected) {
269​ fileDialogLoader.save = false;
270​ fileDialogLoader.active = true;
271​ } else {
272​ kcm.loadScheme(schemeBox.defaultSchemes[schemeBox.url])
273​ }
274​ importSheet.close()
275​ }
276​ }
277​ }
278​ }
279​ }
280​}
281​