Improve DevicesPage and DevicesModel

- Split the list into sections for "this devices", "verified devices", "unverified devices", and "devices without encryption support"
- Sort the lists by last activity
This commit is contained in:
Tobias Fella
2023-03-17 23:59:55 +01:00
parent 7587a1a418
commit 8db2526153
13 changed files with 390 additions and 172 deletions

View File

@@ -26,12 +26,22 @@ QQC2.Menu {
QQC2.MenuItem {
text: i18n("Notification settings")
icon.name: "notifications"
onTriggered: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {defaultPage: "notifications"}, { title: i18n("Configure")})
onTriggered: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {
defaultPage: "notifications",
connection: Controller.activeConnection,
}, {
title: i18n("Configure")
});
}
QQC2.MenuItem {
text: i18n("Devices")
icon.name: "computer-symbolic"
onTriggered: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {defaultPage: "devices"}, { title: i18n("Configure")})
onTriggered: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {
defaultPage: "devices",
connection: Controller.activeConnection,
}, {
title: i18n("Configure")
})
}
QQC2.MenuItem {
text: i18n("Logout")

View File

@@ -214,7 +214,7 @@ QQC2.ToolBar {
}
QQC2.ToolButton {
icon.name: "settings-configure"
onClicked: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {}, { title: i18n("Configure") })
onClicked: pageStack.pushDialogLayer("qrc:/SettingsPage.qml", {connection: Controller.activeConnection}, { title: i18n("Configure") })
text: i18n("Open Settings")
display: QQC2.AbstractButton.IconOnly
Layout.minimumWidth: Layout.preferredWidth

View File

@@ -0,0 +1,134 @@
// SPDX-FileCopyrightText: 2020 - 2023 Tobias Fella <tobias.fella@kde.org>
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.15
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
MobileForm.AbstractFormDelegate {
id: deviceDelegate
required property string id
required property int lastTimestamp
required property string displayName
property bool editDeviceName: false
property bool showVerifyButton
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: deviceDelegate.displayName
elide: Text.ElideRight
wrapMode: Text.Wrap
maximumLineCount: 2
}
QQC2.Label {
Layout.fillWidth: true
text: deviceDelegate.id + ", Last activity: " + (new Date(deviceDelegate.lastTimestamp)).toLocaleString(Qt.locale(), Locale.ShortFormat)
color: Kirigami.Theme.disabledTextColor
font: Kirigami.Theme.smallFont
elide: Text.ElideRight
visible: text.length > 0
}
}
Kirigami.ActionTextField {
id: nameField
Accessible.description: i18n("New device name")
Layout.fillWidth: true
Layout.preferredHeight: deviceLabel.implicitHeight
visible: deviceDelegate.editDeviceName
text: deviceDelegate.displayName
rightActions: [
Kirigami.Action {
text: i18n("Cancel editing display name")
icon.name: "edit-delete-remove"
onTriggered: {
deviceDelegate.editDeviceName = false
}
},
Kirigami.Action {
text: i18n("Confirm new display name")
icon.name: "checkmark"
visible: nameField.text !== deviceDelegate.displayName
onTriggered: {
devicesModel.setName(deviceDelegate.id, nameField.text)
}
}
]
onAccepted: devicesModel.setName(deviceDelegate.id, nameField.text)
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
id: editDeviceAction
text: i18n("Edit device name")
icon.name: "document-edit"
onTriggered: deviceDelegate.editDeviceName = true
}
QQC2.ToolTip {
text: editDeviceAction.text
delay: Kirigami.Units.toolTipDelay
}
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
visible: Controller.encryptionSupported && deviceDelegate.showVerifyButton
action: Kirigami.Action {
id: verifyDeviceAction
text: i18n("Verify device")
icon.name: "security-low-symbolic"
onTriggered: {
devicesModel.connection.startKeyVerificationSession(devicesModel.connection.localUserId, deviceDelegate.id)
}
}
QQC2.ToolTip {
text: verifyDeviceAction.text
delay: Kirigami.Units.toolTipDelay
}
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
id: logoutDeviceAction
text: i18n("Logout device")
icon.name: "edit-delete-remove"
onTriggered: {
passwordSheet.deviceId = deviceDelegate.id
passwordSheet.open()
}
}
QQC2.ToolTip {
text: logoutDeviceAction.text
delay: Kirigami.Units.toolTipDelay
}
}
}
}

View File

@@ -0,0 +1,56 @@
// SPDX-FileCopyrightText: 2020 - 2023 Tobias Fella <tobias.fella@kde.org>
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.15
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
ColumnLayout {
id: root
required property string title
required property var type
required property bool showVerifyButton
visible: deviceRepeater.count > 0
MobileForm.FormHeader {
title: root.title
Layout.fillWidth: true
}
MobileForm.FormCard {
id: devicesCard
Layout.fillWidth: true
contentItem: ColumnLayout {
spacing: 0
Repeater {
id: deviceRepeater
model: DevicesProxyModel {
sourceModel: devicesModel
type: root.type
}
Kirigami.LoadingPlaceholder {
visible: deviceModel.count === 0 // We can assume 0 means loading since there is at least one device
anchors.centerIn: parent
}
delegate: DeviceDelegate {
showVerifyButton: root.showVerifyButton
}
}
}
}
}

View File

@@ -1,4 +1,5 @@
// SPDX-FileCopyrightText: Tobias Fella <tobias.fella@kde.org>
// SPDX-FileCopyrightText: 2020 - 2023 Tobias Fella <tobias.fella@kde.org>
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.15
@@ -12,155 +13,44 @@ import org.kde.neochat 1.0
Kirigami.ScrollablePage {
title: i18n("Devices")
topPadding: 0
property alias connection: devicesModel.connection
leftPadding: 0
rightPadding: 0
DevicesModel {
id: devicesModel
}
ColumnLayout {
spacing: 0
MobileForm.FormHeader {
Layout.fillWidth: true
title: i18n("Devices")
DevicesCard {
title: i18n("This Device")
type: DevicesModel.This
showVerifyButton: false
}
MobileForm.FormCard {
Layout.fillWidth: true
contentItem: ColumnLayout {
spacing: 0
MobileForm.AbstractFormDelegate {
Layout.fillWidth: true
visible: Controller.activeConnection && deviceRepeater.count === 0 // We can assume 0 means loading since there is at least one device
contentItem: Kirigami.LoadingPlaceholder { }
}
Repeater {
id: deviceRepeater
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 {
text: i18n("Cancel editing display name")
icon.name: "edit-delete-remove"
onTriggered: {
deviceDelegate.editDeviceName = false
}
},
Kirigami.Action {
text: i18n("Confirm new display name")
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 {
id: editDeviceAction
text: i18n("Edit device name")
icon.name: "document-edit"
onTriggered: deviceDelegate.editDeviceName = true
}
QQC2.ToolTip {
text: editDeviceAction.text
delay: Kirigami.Units.toolTipDelay
}
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
visible: Controller.encryptionSupported
action: Kirigami.Action {
id: verifyDeviceAction
text: i18n("Verify device")
icon.name: "security-low-symbolic"
onTriggered: {
devices.connection.startKeyVerificationSession(devices.connection.localUserId, model.id)
}
}
QQC2.ToolTip {
text: verifyDeviceAction.text
delay: Kirigami.Units.toolTipDelay
}
}
QQC2.ToolButton {
display: QQC2.AbstractButton.IconOnly
action: Kirigami.Action {
id: logoutDeviceAction
text: i18n("Logout device")
icon.name: "edit-delete-remove"
onTriggered: {
passwordSheet.index = index
passwordSheet.open()
}
}
QQC2.ToolTip {
text: logoutDeviceAction.text
delay: Kirigami.Units.toolTipDelay
}
}
}
}
}
}
DevicesCard {
title: i18n("Verified Devices")
type: DevicesModel.Verified
showVerifyButton: true
}
DevicesCard {
title: i18n("Unverified Devices")
type: DevicesModel.Unverified
showVerifyButton: true
}
DevicesCard {
title: i18n("Devices without Encryption Support")
type: DevicesModel.Unencrypted
showVerifyButton: false
}
MobileForm.AbstractFormDelegate {
Layout.fillWidth: true
visible: Controller.activeConnection && devicesModel.count === 0 // We can assume 0 means loading since there is at least one device
contentItem: Kirigami.LoadingPlaceholder { }
}
Kirigami.InlineMessage {
Layout.fillWidth: true
Layout.maximumWidth: Kirigami.Units.gridUnit * 30
@@ -174,7 +64,7 @@ Kirigami.ScrollablePage {
Kirigami.OverlaySheet {
id: passwordSheet
property var index
property string deviceId
title: i18n("Remove device")
Kirigami.FormLayout {
@@ -186,7 +76,7 @@ Kirigami.ScrollablePage {
QQC2.Button {
text: i18n("Confirm")
onClicked: {
devices.logout(passwordSheet.index, passwordField.text)
devicesModel.logout(passwordSheet.deviceId, passwordField.text)
passwordField.text = ""
passwordSheet.close()
}

View File

@@ -6,6 +6,10 @@ import org.kde.kirigami 2.18 as Kirigami
import QtQuick.Layouts 1.15
Kirigami.CategorizedSettings {
id: settingsPage
required property var connection
objectName: "settingsPage"
actions: [
Kirigami.SettingAction {
@@ -57,6 +61,11 @@ Kirigami.CategorizedSettings {
text: i18n("Devices")
icon.name: "computer"
page: Qt.resolvedUrl("DevicesPage.qml")
initialProperties: {
return {
connection: settingsPage.connection
}
}
},
Kirigami.SettingAction {
actionName: "aboutNeochat"