ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Port the devices settings page to mobileform

Browse Source 
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
1 changed files with 121 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/qml/Settings/DevicesPage.qml
View File

@@ -6,39 +6,113 @@ 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 {
leftPadding: 0
rightPadding: 0
ColumnLayout {
MobileForm.FormCard {
Layout.fillWidth: true
contentItem: ColumnLayout {
spacing: 0
MobileForm.FormCardHeader {
title: i18n("Devices")
}
Kirigami.LoadingPlaceholder {
Layout.alignment: Qt.AlignHCenter
visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
}
Repeater {
model: DevicesModel {
id: devices
}
anchors.fill: parent
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 {
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
subtitle: model.id
icon: "network-connect"
trailing: RowLayout {
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: {
renameSheet.index = model.index
renameSheet.name = model.displayName
renameSheet.open()
}
onTriggered: deviceDelegate.editDeviceName = true
}
}
QQC2.ToolButton {
@@ -66,6 +140,9 @@ Kirigami.ScrollablePage {
}
}
}
}
}
}
Kirigami.OverlaySheet {
id: passwordSheet
@@ -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()
}
}
}
}
}