Port the devices settings page to mobileform

As description, also note that the edit device name is now an inline element rather than an overlay.

Normal 
![image](/uploads/46008dfcaa7e29a809f5ef93d2d51b79/image.png)

Editing Name
![image](/uploads/841c70cf9ad03d7abeef62202d799a72/image.png)
This commit is contained in:
James Graham
2022-11-17 20:00:55 +00:00
parent b8eb18d7bc
commit 74cf615e53

View File

@@ -6,60 +6,137 @@ import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
import org.kde.neochat 1.0
Kirigami.ScrollablePage {
title: i18n("Devices")
ListView {
model: DevicesModel {
id: devices
}
leftPadding: 0
rightPadding: 0
anchors.fill: parent
ColumnLayout {
MobileForm.FormCard {
Layout.fillWidth: true
Kirigami.LoadingPlaceholder {
visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
anchors.centerIn: parent
}
delegate: Kirigami.BasicListItem {
text: model.displayName
subtitle: model.id
icon: "network-connect"
trailing: RowLayout {
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
text: i18n("Edit device name")
iconName: "document-edit"
onTriggered: {
renameSheet.index = model.index
renameSheet.name = model.displayName
renameSheet.open()
}
}
contentItem: ColumnLayout {
spacing: 0
MobileForm.FormCardHeader {
title: i18n("Devices")
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
visible: Controller.encryptionSupported
action: Kirigami.Action {
text: i18n("Verify device")
iconName: "security-low-symbolic"
onTriggered: {
devices.connection.startKeyVerificationSession(model.id)
}
}
Kirigami.LoadingPlaceholder {
Layout.alignment: Qt.AlignHCenter
visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
text: i18n("Logout device")
iconName: "edit-delete-remove"
onTriggered: {
passwordSheet.index = index
passwordSheet.open()
Repeater {
model: DevicesModel {
id: devices
}
Kirigami.LoadingPlaceholder {
visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
anchors.centerIn: parent
}
delegate: MobileForm.AbstractFormDelegate {
id: deviceDelegate
property bool editDeviceName: false
Layout.fillWidth: true
onClicked: deviceDelegate.editDeviceName = true
contentItem: RowLayout {
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
source: "network-connect"
implicitWidth: Kirigami.Units.iconSizes.medium
implicitHeight: Kirigami.Units.iconSizes.medium
}
ColumnLayout {
id: deviceLabel
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
visible: !deviceDelegate.editDeviceName
QQC2.Label {
Layout.fillWidth: true
text: model.displayName
elide: Text.ElideRight
wrapMode: Text.Wrap
maximumLineCount: 2
}
QQC2.Label {
Layout.fillWidth: true
text: model.id + ", Last activity: " + (new Date(model.lastTimestamp)).toLocaleString(Qt.locale(), Locale.ShortFormat)
color: Kirigami.Theme.disabledTextColor
font: Kirigami.Theme.smallFont
elide: Text.ElideRight
visible: text !== ""
}
}
Kirigami.ActionTextField {
id: nameField
Accessible.description: i18n("New device name")
Layout.fillWidth: true
Layout.preferredHeight: deviceLabel.implicitHeight
visible: deviceDelegate.editDeviceName
text: model.displayName
rightActions: [
Kirigami.Action {
icon.name: "edit-delete-remove"
onTriggered: {
deviceDelegate.editDeviceName = false
}
},
Kirigami.Action {
icon.name: "checkmark"
visible: nameField.text != model.displayName
onTriggered: {
devices.setName(model.index, nameField.text)
}
}
]
onAccepted: devices.setName(model.index, nameField.text)
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
text: i18n("Edit device name")
iconName: "document-edit"
onTriggered: deviceDelegate.editDeviceName = true
}
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
visible: Controller.encryptionSupported
action: Kirigami.Action {
text: i18n("Verify device")
iconName: "security-low-symbolic"
onTriggered: {
devices.connection.startKeyVerificationSession(model.id)
}
}
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
text: i18n("Logout device")
iconName: "edit-delete-remove"
onTriggered: {
passwordSheet.index = index
passwordSheet.open()
}
}
}
}
}
}
@@ -89,26 +166,4 @@ Kirigami.ScrollablePage {
}
}
}
Kirigami.OverlaySheet {
id: renameSheet
property int index
property string name
title: i18n("Edit device")
Kirigami.FormLayout {
QQC2.TextField {
id: nameField
Kirigami.FormData.label: i18n("Name:")
text: renameSheet.name
}
QQC2.Button {
text: i18n("Save")
onClicked: {
devices.setName(renameSheet.index, nameField.text)
renameSheet.close()
}
}
}
}
}