Mobile explore component

Create a mobile version of explore component and place it at the bottom for single handed use. This also refactors the UserInfo component so it can be at the top on mobile as well as the bottom on dektop. This should have no effect on desktop and should be identical. ![image](/uploads/9b3133fbde74ca27069d6b039efb1079/image.png)
2023-11-03 17:22:57 +00:00
parent 9cac2a8abd
commit 2065eb6684
5 changed files with 375 additions and 130 deletions
--- a/src/qml/UserInfo.qml
+++ b/src/qml/UserInfo.qml
@@ -12,22 +12,146 @@ import org.kde.neochat
 import org.kde.neochat.config
 import org.kde.neochat.accounts

-QQC2.ToolBar {
+RowLayout {
    id: root

-    padding: 0
-
    required property NeoChatConnection connection

+    property bool bottomEdge: true
+
    property var addAccount

-    contentItem: ColumnLayout {
-        id: content
+    spacing: Kirigami.Units.largeSpacing

+    Layout.topMargin: Kirigami.Units.smallSpacing
+    Layout.bottomMargin: Kirigami.Units.smallSpacing
+    Layout.minimumHeight: bottomEdge ? Kirigami.Units.gridUnit * 2 - 2 : -1 // HACK: -2 here is to ensure the ChatBox and the UserInfo have the same height
+
+    QQC2.AbstractButton {
+        id: accountButton
+
+        Layout.preferredWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+        Layout.preferredHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+        Layout.leftMargin: Kirigami.Units.largeSpacing
+
+        TapHandler {
+            acceptedButtons: Qt.RightButton | Qt.LeftButton
+            onTapped: (eventPoint, button) => {
+                // TODO Qt6 remove
+                if (!button) {
+                    button = eventPoint.event.button;
+                }
+                if (button == Qt.RightButton) {
+                    accountMenu.open();
+                } else {
+                    pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/org/kde/neochat/qml/AccountEditorPage.qml'), {
+                        connection: root.connection
+                    }, {
+                        title: i18n("Account editor")
+                    });
+                }
+            }
+        }
+
+        text: i18n("Edit this account")
+
+        contentItem: KirigamiComponents.Avatar {
+            readonly property string mediaId: root.connection.localUser.avatarMediaId
+
+            source: mediaId ? ("image://mxc/" + mediaId) : ""
+            name: root.connection.localUser.displayName ?? root.connection.localUser.id
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
        spacing: 0
+        QQC2.Label {
+            id: displayNameLabel
+            text: root.connection.localUser.displayName
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+            Layout.fillWidth: true
+        }
+        QQC2.Label {
+            text: (root.connection.label.length > 0 ? (root.connection.label + " ") : "") + root.connection.localUser.id
+            font.pointSize: displayNameLabel.font.pointSize * 0.8
+            opacity: 0.7
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+            Layout.fillWidth: true
+        }
+    }
+    QQC2.ToolButton {
+        id: switchUserButton
+        icon.name: "system-switch-user"
+        checkable: true
+        text: i18n("Switch User")
+        display: QQC2.AbstractButton.IconOnly
+        Accessible.name: text
+        QQC2.ToolTip.text: text
+        QQC2.ToolTip.visible: hovered
+        QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+        Layout.minimumWidth: Layout.preferredWidth
+        Layout.alignment: Qt.AlignRight
+        Shortcut {
+            sequence: "Ctrl+U"
+            onActivated: switchUserButton.toggle()
+        }
+    }
+    QQC2.ToolButton {
+        icon.name: "list-add"
+        onClicked: ; //TODO
+        text: i18n("Add") //TODO find better message
+        display: QQC2.AbstractButton.IconOnly
+        QQC2.ToolTip.text: text
+        QQC2.ToolTip.visible: hovered
+        QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+        Layout.minimumWidth: Layout.preferredWidth
+        Layout.alignment: Qt.AlignRight
+        visible: false
+    }
+    QQC2.ToolButton {
+        icon.name: "settings-configure"
+        onClicked: pageStack.pushDialogLayer("qrc:/org/kde/neochat/qml/SettingsPage.qml", {connection: root.connection}, { title: i18n("Configure") })
+        text: i18n("Open Settings")
+        display: QQC2.AbstractButton.IconOnly
+        Layout.minimumWidth: Layout.preferredWidth
+        Layout.alignment: Qt.AlignRight
+        Layout.rightMargin: Kirigami.Units.largeSpacing
+        QQC2.ToolTip.text: text
+        QQC2.ToolTip.visible: hovered
+        QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+    }
+    Item {
+        width: 1
+    }

-        ListView {
+    AccountMenu {
+        id: accountMenu
+        y: root.bottomEdge ? -height : accountButton.height
+        connection: root.connection
+    }
+    QQC2.Popup {
+        id: accountsPopup
+        parent: root
+
+        visible: switchUserButton.checked
+        onVisibleChanged: if (visible) accounts.forceActiveFocus()
+
+        x: -Kirigami.Units.smallSpacing
+        y: root.bottomEdge ? -height - Kirigami.Units.smallSpacing - 1  : root.height + Kirigami.Units.smallSpacing - 1
+        width: root.width + (root.bottomEdge ? 0 : Kirigami.Units.smallSpacing * 2)
+        leftPadding: 0
+        rightPadding: 0
+        bottomPadding: Kirigami.Units.smallSpacing
+        topPadding: Kirigami.Units.smallSpacing
+
+        closePolicy: QQC2.Popup.CloseOnEscape
+
+        contentItem: ListView {
            id: accounts
+            implicitHeight: contentHeight

            currentIndex: Controller.activeConnectionIndex

@@ -69,9 +193,6 @@ QQC2.ToolBar {
                    accounts.forceActiveFocus()
                }
            }
-
-            visible: switchUserButton.checked
-            onVisibleChanged: if (visible) accounts.forceActiveFocus()
            clip: true
            model: AccountRegistry

@@ -99,8 +220,6 @@ QQC2.ToolBar {
                }
            }

-            Layout.fillWidth: true
-            Layout.preferredHeight: contentHeight
            delegate: Delegates.RoundedItemDelegate {
                id: userDelegate

@@ -138,121 +257,20 @@ QQC2.ToolBar {
            }
        }

-        Kirigami.Separator {
-            Layout.fillWidth: true
-        }
-
-        RowLayout {
-            spacing: Kirigami.Units.largeSpacing
-
-            Layout.topMargin: Kirigami.Units.smallSpacing
-            Layout.bottomMargin: Kirigami.Units.smallSpacing
-            Layout.minimumHeight: Kirigami.Units.gridUnit * 2 - 2 // HACK: -2 here is to ensure the ChatBox and the UserInfo have the same height
-
-            QQC2.AbstractButton {
-                id: accountButton
-
-                Layout.preferredWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                Layout.preferredHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                Layout.leftMargin: Kirigami.Units.largeSpacing
-
-                TapHandler {
-                    acceptedButtons: Qt.RightButton | Qt.LeftButton
-                    onTapped: (eventPoint, button) => {
-                        // TODO Qt6 remove
-                        if (!button) {
-                            button = eventPoint.event.button;
-                        }
-                        if (button == Qt.RightButton) {
-                            accountMenu.open();
-                        } else {
-                            pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/org/kde/neochat/qml/AccountEditorPage.qml'), {
-                                connection: root.connection
-                            }, {
-                                title: i18n("Account editor")
-                            });
-                        }
-                    }
-                }
-
-                text: i18n("Edit this account")
-
-                contentItem: KirigamiComponents.Avatar {
-                    readonly property string mediaId: root.connection.localUser.avatarMediaId
-
-                    source: mediaId ? ("image://mxc/" + mediaId) : ""
-                    name: root.connection.localUser.displayName ?? root.connection.localUser.id
-                }
-            }
-
-            ColumnLayout {
+        background: ColumnLayout {
+            spacing: 0
+            Kirigami.Separator {
                Layout.fillWidth: true
-                spacing: 0
-                QQC2.Label {
-                    id: displayNameLabel
-                    text: root.connection.localUser.displayName
-                    textFormat: Text.PlainText
-                    elide: Text.ElideRight
-                    Layout.fillWidth: true
-                }
-                QQC2.Label {
-                    text: (root.connection.label.length > 0 ? (root.connection.label + " ") : "") + root.connection.localUser.id
-                    font.pointSize: displayNameLabel.font.pointSize * 0.8
-                    opacity: 0.7
-                    textFormat: Text.PlainText
-                    elide: Text.ElideRight
-                    Layout.fillWidth: true
-                }
+                visible: root.bottomEdge
            }
-            QQC2.ToolButton {
-                id: switchUserButton
-                icon.name: "system-switch-user"
-                checkable: true
-                text: i18n("Switch User")
-                display: QQC2.AbstractButton.IconOnly
-                Accessible.name: text
-                QQC2.ToolTip.text: text
-                QQC2.ToolTip.visible: hovered
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-                Layout.minimumWidth: Layout.preferredWidth
-                Layout.alignment: Qt.AlignRight
-                Shortcut {
-                    sequence: "Ctrl+U"
-                    onActivated: switchUserButton.toggle()
-                }
+            Rectangle {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                color: Kirigami.Theme.backgroundColor
            }
-            QQC2.ToolButton {
-                icon.name: "list-add"
-                onClicked: ; //TODO
-                text: i18n("Add") //TODO find better message
-                display: QQC2.AbstractButton.IconOnly
-                QQC2.ToolTip.text: text
-                QQC2.ToolTip.visible: hovered
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-                Layout.minimumWidth: Layout.preferredWidth
-                Layout.alignment: Qt.AlignRight
-                visible: false
-            }
-            QQC2.ToolButton {
-                icon.name: "settings-configure"
-                onClicked: pageStack.pushDialogLayer("qrc:/org/kde/neochat/qml/SettingsPage.qml", {connection: root.connection}, { title: i18n("Configure") })
-                text: i18n("Open Settings")
-                display: QQC2.AbstractButton.IconOnly
-                Layout.minimumWidth: Layout.preferredWidth
-                Layout.alignment: Qt.AlignRight
-                Layout.rightMargin: Kirigami.Units.largeSpacing
-                QQC2.ToolTip.text: text
-                QQC2.ToolTip.visible: hovered
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-            }
-            Item {
-                width: 1
-            }
-
-            AccountMenu {
-                id: accountMenu
-                y: -height
-                connection: root.connection
+            Kirigami.Separator {
+                Layout.fillWidth: true
+                visible: !root.bottomEdge
            }
        }
    }