Rework HBox-based pages and account settings

- Refactor everything about HBox, and adapt all the pages and popups that used it - Replace HTabContainer by HTabbedBox - Make boxes swippable - Make esc presses in boxes click the cancel button - Make all boxes and popups scrollable when needed - Replace generic apply button icons in popups - Fix tab focus for error and invite popups - Rework (still WIP) the account settings page: - Use the standard tabbed design of other pages - Ditch the horizontal profile layout, hacky and impossible to extend - Add real-time coloring for the display name field - Implement a device list in account settings (Sessions, still WIP)
2020-06-25 08:32:08 -04:00
parent 72bd78c77e
commit da4a5ab5cd
66 changed files with 1594 additions and 1173 deletions
--- a/src/gui/Pages/AccountSettings/DeviceDelegate.qml
+++ b/src/gui/Pages/AccountSettings/DeviceDelegate.qml
@@ -0,0 +1,113 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+import "../../Base/ButtonLayout"
+import "../../Base/HTile"
+
+HTile {
+    id: device
+
+
+    property HListView view
+
+
+    backgroundColor: "transparent"
+    compact: false
+
+    leftPadding: theme.spacing * 2
+    rightPadding: 0
+
+    contentItem: ContentRow {
+        tile: device
+        spacing: 0
+
+        HCheckBox {
+            id: checkBox
+            checked: view.checked[model.id] || false
+            onClicked: view.toggleCheck(model.index)
+        }
+
+        HColumnLayout {
+            Layout.leftMargin: theme.spacing
+
+            HRowLayout {
+                spacing: theme.spacing
+
+                TitleLabel {
+                    text: model.display_name || qsTr("Unnamed")
+                }
+
+                TitleRightInfoLabel {
+                    tile: device
+                    text: utils.smartFormatDate(model.last_seen_date)
+                }
+            }
+
+            SubtitleLabel {
+                tile: device
+                font.family: theme.fontFamily.mono
+                text:
+                    model.last_seen_ip ?
+                    model.id + " " + model.last_seen_ip :
+                    model.id
+            }
+        }
+
+        HButton {
+            icon.name: "device-action-menu"
+            toolTip.text: qsTr("Rename, verify or sign out")
+            backgroundColor: "transparent"
+            onClicked: contextMenuLoader.active = true
+
+            Layout.fillHeight: true
+        }
+    }
+
+    contextMenu: HMenu {
+        id: actionMenu
+        implicitWidth: Math.min(320 * theme.uiScale, window.width)
+        onOpened: nameField.forceActiveFocus()
+
+        HLabeledItem {
+            width: parent.width
+            label.topPadding: theme.spacing / 2
+            label.text: qsTr("Public display name:")
+            label.horizontalAlignment: Qt.AlignHCenter
+
+            HTextField {
+                id: nameField
+                width: parent.width
+                defaultText: model.display_name
+                horizontalAlignment: Qt.AlignHCenter
+            }
+        }
+
+        HMenuSeparator {}
+
+        HLabeledItem {
+            width: parent.width
+            label.text: qsTr("Actions:")
+            label.horizontalAlignment: Qt.AlignHCenter
+
+            ButtonLayout {
+                width: parent.width
+
+                ApplyButton {
+                    enabled:
+                        model.type !== "current" && model.type !== "verified"
+                    text: qsTr("Verify")
+                    icon.name: "device-verify"
+                }
+
+                CancelButton {
+                    text: qsTr("Sign out")
+                    icon.name: "device-delete"
+                }
+            }
+        }
+    }
+
+    onLeftClicked: checkBox.clicked()
+}