Differential D28154 Diff 83095 kcms/users/package/contents/ui/UserDetailsPage.qml

Changeset View

Standalone View

View Options

kcms/users/package/contents/ui/UserDetailsPage.qml

  • This file was added.
1​/*
2​ Copyright 2019 Nicolas Fella <nicolas.fella@gmx.de>
3​ Copyright 2020 Carson Black <uhhadd@gmail.com>
4​
5​ This library is free software; you can redistribute it and/or
6​ modify it under the terms of the GNU Lesser General Public
7​ License as published by the Free Software Foundation; either
8​ version 2.1 of the License, or (at your option) version 3, or any
9​ later version accepted by the membership of KDE e.V. (or its
10​ successor approved by the membership of KDE e.V.), which shall
11​ act as a proxy defined in Section 6 of version 3 of the license.
12​
13​ This library is distributed in the hope that it will be useful,
14​ but WITHOUT ANY WARRANTY; without even the implied warranty of
15​ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
16​ Lesser General Public License for more details.
17​
18​ You should have received a copy of the GNU Lesser General Public
19​ License along with this library. If not, see <http://www.gnu.org/licenses/>.
20​*/
21​
22​import QtQuick 2.6
23​import QtQuick.Layouts 1.3
24​import QtGraphicalEffects 1.12
25​import QtQuick.Controls 2.5 as QQC2
26​import QtQuick.Dialogs 1.3
ngrahamUnsubmitted
Done

...as QQC2

ngraham: ...`as QQC2`
27​
28​import org.kde.kcm 1.2
29​import org.kde.kirigami 2.8 as Kirigami
30​
31​SimpleKCM {
32​ id: usersDetailPage
33​
34​ title: user.realName
35​
36​ property QtObject user
37​ property bool overrideImage: false
broulikUnsubmitted
Done

Use property var, or even property QtObject since User is a QObject

broulik: Use `property var`, or even `property QtObject` since `User` is a `QObject`
38​ property url oldImage
39​
40​ Connections {
41​ target: kcm
42​
43​ onApply: {
44​ usersDetailPage.user.realName = realNametextField.text
45​ usersDetailPage.user.email = emailTextField.text
46​ usersDetailPage.user.name = userNameField.text
47​ usersDetailPage.user.administrator = (usertypeBox.model[usertypeBox.currentIndex]["type"] == "administrator")
48​ user.apply()
49​ usersDetailPage.overrideImage = false
50​ usersDetailPage.oldImage = ""
51​ }
broulikUnsubmitted
Done

No user picture gallery anymore?

broulik: No user picture gallery anymore?
52​
53​ onReset: {
54​ realNametextField.text = usersDetailPage.user.realName
55​ emailTextField.text = usersDetailPage.user.email
56​ userNameField.text = usersDetailPage.user.name
57​ usertypeBox.currentIndex = usersDetailPage.user.administrator ? 1 : 0
58​ if (usersDetailPage.oldImage != "") {
59​ usersDetailPage.overrideImage = false
60​ usersDetailPage.user.face = usersDetailPage.oldImage
61​ }
62​ }
63​ }
64​
65​ function resolvePending() {
66​ let pending = false
67​ let user = usersDetailPage.user
68​ pending = pending || user.realName != realNametextField.text
69​ pending = pending || user.email != emailTextField.text
70​ pending = pending || user.name != userNameField.text
broulikUnsubmitted
Done

Start in pictures folder?
I think you can set that by doing

folder: shortcuts.pictures
broulik: Start in pictures folder? I think you can set that by doing ``` folder: shortcuts.pictures ```
71​ pending = pending || user.administrator != (usertypeBox.model[usertypeBox.currentIndex]["type"] == "administrator")
72​ pending = pending || usersDetailPage.overrideImage
73​ return pending
74​ }
75​
76​ Component.onCompleted: {
77​ kcm.needsSave = Qt.binding(resolvePending)
78​ }
79​
80​ FileDialog {
81​ id: fileDialog
82​ title: i18n("Choose a picture")
83​ folder: shortcuts.pictures
broulikUnsubmitted
Done

i18n

broulik: `i18n`
84​ onAccepted: {
85​ picturesSheet.close()
86​ usersDetailPage.oldImage = usersDetailPage.user.face
87​ usersDetailPage.user.face = fileDialog.fileUrl
88​ usersDetailPage.overrideImage = true
89​ }
90​ }
broulikUnsubmitted
Done

Set a sourceSize to keep it from loading a full size image when user choses an absurdly large image

broulik: Set a `sourceSize` to keep it from loading a full size image when user choses an absurdly large…
ngrahamUnsubmitted
Done

This should be cropped into a circle, like we do in Kickoff and the login/lock/logout screens. You can probably just lift the code straight from Kickoff.

ngraham: This should be cropped into a circle, like we do in Kickoff and the login/lock/logout screens.
91​
92​ ColumnLayout {
93​
94​ RowLayout {
95​ Layout.alignment: Qt.AlignHCenter
96​ QQC2.RoundButton {
97​ id: userPfp
broulikUnsubmitted
Not Done

Is this a RoundButton bug that it doesn't indicate keyboard focus when I tab to it?

broulik: Is this a `RoundButton` bug that it doesn't indicate keyboard focus when I tab to it?
98​
broulikUnsubmitted
Done

Pfp?

broulik: Pfp?
cblackAuthorUnsubmitted
Not Done

profile picture

cblack: profile picture
99​ readonly property int size: 6 * Kirigami.Units.gridUnit
100​
broulikUnsubmitted
Done

readonly property

broulik: `readonly property`
101​ icon.name: usersDetailPage.user.faceValid || usersDetailPage.overrideImage ? "" : "user-identity"
102​ icon.width: size
ngrahamUnsubmitted
Done

Nice! How about an outline around the circle like we do in Kickoff?

ngraham: Nice! How about an outline around the circle like we do in Kickoff?
103​ icon.height: size
104​ implicitWidth: size
105​ implicitHeight: size
106​ flat: true
107​
108​ Image {
109​ source: usersDetailPage.user.face
110​ visible: usersDetailPage.user.faceValid || usersDetailPage.overrideImage
111​ sourceSize: Qt.size(parent.size*Screen.devicePixelRatio, parent.size*Screen.devicePixelRatio)
broulikUnsubmitted
Done

Add context i18nc("Example name", "John Doe")

broulik: Add context `i18nc("Example name", "John Doe")`
112​ cache: false
broulikUnsubmitted
Done

I *think* one needs to multiple that with Screen.devicePixelRatio

broulik: I *think* one needs to multiple that with `Screen.devicePixelRatio`
113​ anchors {
broulikUnsubmitted
Done

Use onEditingFinished

broulik: Use `onEditingFinished`
114​ fill: parent
115​ margins: Kirigami.Units.smallSpacing
116​ }
117​ layer.enabled: usersDetailPage.user.faceValid || usersDetailPage.overrideImage
118​ layer.effect: OpacityMask {
119​ maskSource: Rectangle {
120​ height: userPfp.size; width: height
121​ radius: height/2
122​ }
123​ }
124​ }
125​
126​ Layout.alignment: Qt.AlignHCenter
127​ Layout.maximumHeight: size + Kirigami.smallSpacing
128​ Layout.minimumHeight: size + Kirigami.smallSpacing
129​ Layout.maximumWidth: size + Kirigami.smallSpacing
130​ Layout.minimumWidth: size + Kirigami.smallSpacing
131​
132​ onClicked: {
133​ picturesSheet.open()
broulikUnsubmitted
Done

I'd prefer if you did

textRole: "label"
model: [
    {type: "standard", label: i18n("Standard")},
    {type: "admin", label: i18n("Administrator")}
]

and then in the place where you check admin check for type rather than index === 1

broulik: I'd prefer if you did ``` textRole: "label" model: [ {type: "standard", label: i18n…
134​ stackSwitcher.forceActiveFocus()
135​ }
136​ }
137​ QQC2.TextField {
138​ id: realNametextField
139​ focus: true
140​ text: user.realName
141​ placeholderText: i18nc("Example name", "John Doe")
broulikUnsubmitted
Done

Looks unused

broulik: Looks unused
142​ }
143​ }
144​ Kirigami.FormLayout {
145​ QQC2.TextField {
146​ id: userNameField
147​ focus: true
148​ text: user.name
149​ Kirigami.FormData.label: i18n("Username:")
150​ }
151​
152​ QQC2.ComboBox {
153​ id: usertypeBox
154​
broulikUnsubmitted
Done

Add i18nc

broulik: Add `i18nc`
155​ textRole: "label"
156​ model: [
157​ { "type": "standard", "label": i18n("Standard") },
158​ { "type": "administrator", "label": i18n("Administrator") },
159​ ]
160​
161​ Kirigami.FormData.label: i18n("Account type:")
162​
163​ currentIndex: user.administrator ? 1 : 0
164​ }
165​
166​ QQC2.TextField {
167​ id: emailTextField
168​ focus: true
169​ text: user.email
170​ placeholderText: i18nc("Example email address", "john.doe@kde.org")
171​ Kirigami.FormData.label: i18n("Email address:")
172​ }
173​
ngrahamUnsubmitted
Done

Does it make sense to be able to delete the currently-logged-in user, or the only user on the system?

ngraham: Does it make sense to be able to delete the currently-logged-in user, or the only user on the…
174​ QQC2.Button {
175​ text: i18n("Change Password")
176​ onClicked: {
177​ changePassword.account = user
178​ changePassword.openAndClear()
ngrahamUnsubmitted
Done

Doesn't work for me; clicking the button has no effect.

ngraham: Doesn't work for me; clicking the button has no effect.
179​ }
180​ }
181​
182​ Item {
183​ Layout.preferredHeight: deleteUser.height
ngrahamUnsubmitted
Done

Might be nice to give this sheet a title, so that there's something in its header area besides a close button.

ngraham: Might be nice to give this sheet a title, so that there's something in its header area besides…
184​ }
185​
186​ QQC2.Button {
ngrahamUnsubmitted
Done

This sheet ends up really narrow, so there are only ever two columns of icons visible, even with a very wide window. It doesn't look great IMO. Wider would be better.

ngraham: This sheet ends up really narrow, so there are only ever two columns of icons visible, even…
187​ id: deleteUser
188​
189​ enabled: !usersDetailPage.user.loggedIn && (!kcm.userModel.rowCount() < 2)
ngrahamUnsubmitted
Done

This menu doesn't close when you click outside of it; you need to hit the escape key.

ngraham: This menu doesn't close when you click outside of it; you need to hit the escape key.
190​
191​ QQC2.Menu {
ngrahamUnsubmitted
Done

this isn't working anymore for me

ngraham: this isn't working anymore for me
ngrahamUnsubmitted
Done

Give it an icon: edit-delete

ngraham: Give it an icon: `edit-delete`
192​ id: deleteMenu
193​ modal: true
194​ QQC2.MenuItem {
195​ text: i18n("Delete files")
196​ icon.name: "edit-delete-shred"
ngrahamUnsubmitted
Done

This no longer asks if you want to delete that user's home directory, so it's always preserved.

ngraham: This no longer asks if you want to delete that user's home directory, so it's always preserved.
197​ onClicked: {
ngrahamUnsubmitted
Done

This button needs text so people can figure out what it does.

ngraham: This button needs text so people can figure out what it does.
198​ if (kcm.deleteUser(usersDetailPage.user.uid, true)) {
199​ kcm.pop()
ngrahamUnsubmitted
Done

Give it an icon: document-multiple

ngraham: Give it an icon: `document-multiple`
200​ }
201​ }
202​ }
203​ QQC2.MenuItem {
204​ text: i18n("Keep files")
205​ icon.name: "document-multiple"
206​ onClicked: {
207​ if (kcm.deleteUser(usersDetailPage.user.uid, false)) {
208​ kcm.pop()
209​ }
ngrahamUnsubmitted
Done

edit-delete

ngraham: `edit-delete`
210​ }
211​ }
212​ }
213​ text: i18n("Delete User...")
214​ icon.name: "edit-delete"
215​ onClicked: deleteMenu.open()
216​ }
217​ }
218​ }
broulikUnsubmitted
Done

Can you add some way to make Escape close the sheet but not the entire KCM, when run standalone through kcmshell? Hopefully the following is sufficient, otherwise you'd have to mess with FocusScope and the like:

Keys.onEscapePressed: {
    close();
    event.accepted = true;
}
broulik: Can you add some way to make Escape close the sheet but not the entire KCM, when run standalone…
ngrahamUnsubmitted
Done

FWIW KCMs opened through KRunner are now opened in System Settings so KCMShell is something we're going to have to deal with much less. :)

ngraham: FWIW KCMs opened through KRunner are now opened in System Settings so KCMShell is something…
broulikUnsubmitted
Done

Yes, but it's still something to consider. Right now Esc does nothing at all, and neither do arrow keys. This thing needs some FocusScope treatment

broulik: Yes, but it's still something to consider. Right now Esc does nothing at all, and neither do…
219​
220​ Kirigami.OverlaySheet {
broulikUnsubmitted
Done

Is this RowLayout needed?

broulik: Is this `RowLayout` needed?
cblackAuthorUnsubmitted
Not Done

it's a convenience for the default alignment of a layout (Qt.AlignVCenter | Qt.AlignLeft)

cblack: it's a convenience for the default alignment of a layout (`Qt.AlignVCenter | Qt.AlignLeft`)
221​ id: picturesSheet
222​ header: RowLayout {
223​ Kirigami.Heading {
224​ text: i18n("Change Avatar")
ngrahamUnsubmitted
Done

This still doesn't work right. Selecting a custom image doesn't make it get applied when you click on the apply button, and I still can't clear avatars.

ngraham: This still doesn't work right. Selecting a custom image doesn't make it get applied when you…
225​ }
226​ }
227​ StackLayout {
228​ id: stackSwitcher
229​ Layout.preferredWidth: usersDetailPage.width - (Kirigami.Units.largeSpacing*4)
230​ Keys.onEscapePressed: {
231​ picturesSheet.close()
232​ event.accepted = true
233​ }
234​ ColumnLayout {
235​ id: cols
236​ GridLayout {
237​ id: picturesColumn
238​
239​ rowSpacing: Kirigami.Units.smallSpacing
240​ columnSpacing: Kirigami.Units.smallSpacing
ngrahamUnsubmitted
Done

This doesn't seem to work. When I change the avatar using the sheet, the image on the details page gets reset to the default, rather than reflecting my choice.

ngraham: This doesn't seem to work. When I change the avatar using the sheet, the image on the details…
ngrahamUnsubmitted
Done

I think "Choose from File..." would be more appropriate (and don't forget the ellipses, since it opens a file dialog)

ngraham: I think "Choose from File..." would be more appropriate (and don't forget the ellipses, since…
241​ columns: {
242​ return Math.floor((stackSwitcher.width) / (Kirigami.Units.gridUnit * 6))
243​ }
244​
245​ Layout.fillWidth: true
246​ Layout.alignment: Qt.AlignHCenter
247​
248​ QQC2.Button {
249​ Layout.preferredHeight: Kirigami.Units.gridUnit * 6
250​ Layout.preferredWidth: Layout.preferredHeight
251​
252​ ColumnLayout {
253​ anchors.centerIn: parent
254​
255​ Kirigami.Icon {
256​ width: Kirigami.Units.gridUnit * 4
257​ height: Kirigami.Units.gridUnit * 4
258​ source: "document-open"
259​
260​ Layout.alignment: Qt.AlignHCenter
261​ }
262​ QQC2.Label {
263​ text: i18n("Choose File...")
264​
265​ horizontalAlignment: Text.AlignHCenter
266​ verticalAlignment: Text.AlignBottom
267​ fontSizeMode: Text.HorizontalFit
268​ wrapMode: Text.Wrap
ngrahamUnsubmitted
Done

Despite this, they're still jaggy for me. Maybe play with the mipmapping settings?

ngraham: Despite this, they're still jaggy for me. Maybe play with the mipmapping settings?
ngrahamUnsubmitted
Done

Still not fixed for me.

ngraham: Still not fixed for me. {F8249187, size=full}
269​ Layout.fillWidth: true
270​ Layout.maximumWidth: Kirigami.Units.gridUnit * 5
271​ }
272​ }
273​
274​ onClicked: fileDialog.open()
275​ }
276​
277​ QQC2.Button {
278​ Layout.preferredHeight: Kirigami.Units.gridUnit * 6
279​ Layout.preferredWidth: Layout.preferredHeight
280​
281​ Kirigami.Heading {
282​ anchors.centerIn: parent
283​ font.pixelSize: Kirigami.Units.gridUnit * 4
284​ text: kcm.initializeString(user.realName)
285​ }
286​
287​ onClicked: stackSwitcher.currentIndex = 1
288​ // https://bugs.kde.org/show_bug.cgi?id=420439
broulikUnsubmitted
Not Done

Can we not hardcode the list of avatars, please.
Also, you probably want to use a proper GridView for all of this, otherwise you end up creating every single delegate immediately on opening.

broulik: Can we not hardcode the list of avatars, please. Also, you probably want to use a proper…
289​ visible: false
290​ }
291​
292​ Repeater {
293​ model: [
294​ "Artist Konqi.png",
295​ "Bookworm Konqi.png",
296​ "Boss Konqi.png",
297​ "Bug Catcher Konqi.png",
298​ "Card Shark Konqi.png",
299​ "Hacker Konqi.png",
300​ "Journalist Konqi.png",
301​ "Katie.png",
302​ "Konqi.png",
303​ "Mechanic Konqi.png",
304​ "Messenger Konqi.png",
305​ "Musician Konqi.png",
306​ "Office Worker Konqi.png",
307​ "PC Builder Konqi.png",
308​ "Scientist Konqi.png",
309​ "Teacher Konqi.png",
310​ "Virtual Reality Konqi.png"
311​ ]
312​ QQC2.Button {
313​ Layout.preferredHeight: Kirigami.Units.gridUnit * 6
314​ Layout.preferredWidth: Layout.preferredHeight
315​
316​ QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
317​ QQC2.ToolTip.text: modelData
318​ Accessible.name: modelData
319​
320​ Image {
321​ id: imgDelegate
322​ smooth: true
323​ mipmap: true
324​
325​ anchors.fill: parent
326​ source: "../img/%1".arg(modelData)
327​
328​ Accessible.ignored: true
329​ }
330​
331​ onClicked: {
332​ picturesSheet.close()
333​ usersDetailPage.oldImage = usersDetailPage.user.face
334​ usersDetailPage.user.face = imgDelegate.source
335​ usersDetailPage.overrideImage = true
336​ }
337​ }
338​ }
339​ }
340​ }
341​ ColumnLayout {
342​ id: initialPictures
343​ GridLayout {
broulikUnsubmitted
Done

A tooltip and Accessible.name with the name of the avatar would be nice

broulik: A tooltip and `Accessible.name` with the name of the avatar would be nice
344​ id: initialsColumn
345​
346​ rowSpacing: Kirigami.Units.smallSpacing
347​ columnSpacing: Kirigami.Units.smallSpacing
broulikUnsubmitted
Not Done

Is this ColumnLayout needed?

broulik: Is this `ColumnLayout` needed?
348​ columns: {
349​ return Math.floor((stackSwitcher.width) / (Kirigami.Units.gridUnit * 6))
350​ }
351​
352​ Layout.fillWidth: true
353​ Layout.alignment: Qt.AlignHCenter
354​
355​ QQC2.Button {
356​ Layout.preferredHeight: Kirigami.Units.gridUnit * 6
357​ Layout.preferredWidth: Layout.preferredHeight
358​
359​ ColumnLayout {
360​ anchors.centerIn: parent
361​
362​ Kirigami.Icon {
broulikUnsubmitted
Not Done

What's all of this? I don't see anything in the UI.
Anyway, we probably want to make all of this into a proper QAbstractListModel

broulik: What's all of this? I don't see anything in the UI. Anyway, we probably want to make all of…
363​ width: Kirigami.Units.gridUnit * 4
364​ height: Kirigami.Units.gridUnit * 4
365​ source: "go-previous"
366​
367​ Layout.alignment: Qt.AlignHCenter
368​ }
369​ }
370​
371​ onClicked: stackSwitcher.currentIndex = 0
372​ }
373​
374​ Repeater {
375​ model: [
376​ {"name": i18n("Feisty Flamingo"), "color": "#E93A9A", "dark": true},
377​ {"name": i18n("Dragon's Fruit"), "color": "#E93D58", "dark": true},
378​ {"name": i18n("Sweet Potato"), "color": "#E9643A", "dark": true},
379​ {"name": i18n("Ambient Amber"), "color": "#EF973C", "dark": false},
380​ {"name": i18n("Sparkle Sunbeam"), "color": "#E8CB2D", "dark": false},
381​ {"name": i18n("Lemon-Lime"), "color": "#B6E521", "dark": false},
382​ {"name": i18n("Verdant Charm"), "color": "#3DD425", "dark": false},
383​ {"name": i18n("Mellow Meadow"), "color": "#00D485", "dark": false},
384​ {"name": i18n("Tepid Teal"), "color": "#00D3B8", "dark": false},
385​ {"name": i18n("Plasma Blue"), "color": "#3DAEE9", "dark": true},
386​ {"name": i18n("Pon Purple"), "color": "#B875DC", "dark": true},
387​ {"name": i18n("Bajo Purple"), "color": "#926EE4", "dark": true},
388​ {"name": i18n("Burnt Charcoal"), "color": "#232629", "dark": true},
389​ {"name": i18n("Paper Perfection"), "color": "#EEF1F5", "dark": false},
390​ {"name": i18n("Cafétera Brown"), "color": "#CB775A", "dark": false},
391​ {"name": i18n("Rich Hardwood"), "color": "#6A250E", "dark": true}
392​ ]
393​ delegate: QQC2.Button {
394​ Layout.preferredHeight: Kirigami.Units.gridUnit * 6
395​ Layout.preferredWidth: Layout.preferredHeight
396​
397​ Rectangle {
398​ id: colourRectangle
399​
400​ anchors.fill: parent
broulikUnsubmitted
Not Done

Not sure if clever or mad :) Can we not just generate a colored rectangle on C++ side?

broulik: Not sure if clever or mad :) Can we not just generate a colored rectangle on C++ side?
401​ anchors.margins: Kirigami.Units.smallSpacing
402​ color: modelData.color
403​ Kirigami.Heading {
404​ anchors.centerIn: parent
405​ color: modelData.dark ? "white" : "black"
406​ font.pixelSize: Kirigami.Units.gridUnit * 4
407​ text: kcm.initializeString(user.realName)
408​ }
409​ }
410​
411​ onClicked: {
412​ colourRectangle.grabToImage(function(result) {
413​ picturesSheet.close()
414​ let uri = kcm.plonkImageInTempfile(result.image)
415​ if (uri != "") {
416​ usersDetailPage.oldImage = usersDetailPage.user.face
417​ usersDetailPage.user.face = uri
418​ usersDetailPage.overrideImage = true
419​ }
420​ })
421​ }
422​ }
423​ }
424​ }
425​ }
426​ }
427​ }
428​
429​ ChangePassword { id: changePassword; account: user }
430​}