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 QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami import org.kde.kirigami 2.19 as Kirigami
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
import org.kde.neochat 1.0 import org.kde.neochat 1.0
Kirigami.ScrollablePage { Kirigami.ScrollablePage {
title: i18n("Devices") title: i18n("Devices")
ListView { leftPadding: 0
model: DevicesModel { rightPadding: 0
id: devices
}
anchors.fill: parent ColumnLayout {
MobileForm.FormCard {
Layout.fillWidth: true
Kirigami.LoadingPlaceholder { contentItem: ColumnLayout {
visible: parent.count === 0 // We can assume 0 means loading since there is at least one device spacing: 0
anchors.centerIn: parent MobileForm.FormCardHeader {
} title: i18n("Devices")
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()
}
}
} }
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly Kirigami.LoadingPlaceholder {
visible: Controller.encryptionSupported Layout.alignment: Qt.AlignHCenter
action: Kirigami.Action { visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
text: i18n("Verify device")
iconName: "security-low-symbolic"
onTriggered: {
devices.connection.startKeyVerificationSession(model.id)
}
}
} }
QQC2.ToolButton { Repeater {
display: QQC2.AbstractButton.IconOnly model: DevicesModel {
action: Kirigami.Action { id: devices
text: i18n("Logout device") }
iconName: "edit-delete-remove"
onTriggered: { Kirigami.LoadingPlaceholder {
passwordSheet.index = index visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
passwordSheet.open() 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()
}
}
}
}
} }