Differential D28744 Diff 80553 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​ enabled: kcm.lastError == ""
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​ property alias exportActive: exportInfo.visible
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: kcm.lastError !== ""
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: !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​ columns: 2
86​ QQC2.ScrollView {
87​ Component.onCompleted: background.visible = true
88​ Layout.preferredWidth: 300
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.fillHeight:true
90​ ListView {
91​ id: components
92​ clip: true
93​ model: kcm.filteredModel
94​ delegate: Kirigami.AbstractListItem {
95​ id: componentDelegate
broulikUnsubmitted
Done

Is contentItem the default property?

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

Yes

davidre: Yes
96​ readonly property color foregroundColor: ListView.isCurrentItem ? activeTextColor : textColor
97​ RowLayout {
98​ Kirigami.Icon {
99​ id: appIcon
100​ source: model.decoration
101​ Layout.preferredWidth: Kirigami.Units.iconSizes.small
102​ Layout.preferredHeight: Layout.preferredWidth
103​ color: foregroundColor
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​ }
105​ QQC2.Label {
106​ Layout.fillWidth: true
107​ text: model.display
108​ color: foregroundColor
109​ }
110​ QQC2.ToolButton {
111​ Layout.preferredHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.largeSpacing
112​ Layout.preferredWidth: Layout.preferredHeight
113​ visible: !exportActive
114​ opacity: componentDelegate.containsMouse || componentDelegate.ListView.isCurrentItem ? 1 : 0
115​ enabled: opacity
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​ icon.name: "edit-delete"
117​ icon.width: Kirigami.Units.iconSizes.small
118​ onClicked: kcm.removeComponent(index)
119​ }
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.CheckBox {
121​ id: checkbox
ngrahamUnsubmitted
Done

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

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

You're doing a Connections above already.

broulik: You're doing a `Connections` above already.
162​ Component.onCompleted: background.visible = true
163​ onRootIndexChanged: shortcutsList.currentIndex = -1
164​ ListView {
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​ clip: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​ id: shortcutsList
167​ model: DelegateModel {
168​ id: dm
ngrahamUnsubmitted
Done

Make it a level 3 Heading

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