Unify look of scrolling setting page

* Add frame on desktop * Remove frame on mobile * Use actions.main when needed on mobile * Don't push a new setting page on mobile
2021-06-17 12:57:58 +02:00
parent 6487ea7414
commit d7345ee4e6
6 changed files with 267 additions and 148 deletions
--- a/imports/NeoChat/Page/AccountsPage.qml
+++ b/imports/NeoChat/Page/AccountsPage.qml
@@ -11,10 +11,37 @@ import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 import NeoChat.Dialog 1.0

-Kirigami.ScrollablePage {
+Kirigami.Page {
    title: i18n("Accounts")

+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    actions.main: Kirigami.Action {
+        text: i18n("Add an account")
+        icon.name: "list-add-user"
+        onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+        visible: !pageSettingStack.wideMode
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        Controls.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
            ListView {
+                clip: true
                model: AccountListModel { }
                delegate: Kirigami.SwipeListItem {
                    leftPadding: 0
@@ -56,6 +83,21 @@ Kirigami.ScrollablePage {
                    ]
                }
            }
+        }
+
+
+        RowLayout {
+            Item {
+                Layout.fillWidth: true
+            }
+            Controls.Button {
+                visible: pageSettingStack.wideMode
+                text: i18n("Add an account")
+                icon.name: "list-add-user"
+                onClicked: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
+            }
+        }
+    }

    Connections {
        target: Controller
@@ -73,12 +115,6 @@ Kirigami.ScrollablePage {
        }
    }

-    actions.main: Kirigami.Action {
-        text: i18n("Add an account")
-        iconName: "list-add-user"
-        onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml")
-    }
-
    Component {
        id: openFileDialog

--- a/imports/NeoChat/Page/DevicesPage.qml
+++ b/imports/NeoChat/Page/DevicesPage.qml
@@ -9,13 +9,42 @@ import org.kde.kirigami 2.15 as Kirigami

 import org.kde.neochat 1.0

-Kirigami.ScrollablePage {
+Kirigami.Page {
    title: i18n("Devices")

+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
+        }
+
+        Controls.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            Layout.fillWidth: true
+            Layout.fillHeight: true
            ListView {
+                clip: true
                model: DevicesModel {
                    id: devices
                }
+
+                Kirigami.PlaceholderMessage {
+                    visible: parent.model.count === 0 // We can assume 0 means loading since there is at least one device
+                    anchors.centerIn: parent
+                    text: i18n("Loading")
+                    Controls.BusyIndicator {
+                        running: parent.visible
+                    }
+                }
+
                delegate: Kirigami.SwipeListItem {
                    leftPadding: 0
                    rightPadding: 0
@@ -48,6 +77,8 @@ Kirigami.ScrollablePage {
                    ]
                }
            }
+        }
+    }

    Kirigami.OverlaySheet {
        id: passwordSheet
--- a/imports/NeoChat/Page/RoomListPage.qml
+++ b/imports/NeoChat/Page/RoomListPage.qml
@@ -17,6 +17,8 @@ import NeoChat.Menu 1.0
 Kirigami.ScrollablePage {
    id: page

+    title: i18n("Rooms")
+
    property var enteredRoom
    property bool collapsedMode: Config.roomListPageWidth === applicationWindow().collapsedPageWidth && applicationWindow().shouldUseSidebars

--- a/imports/NeoChat/Page/SettingsPage.qml
+++ b/imports/NeoChat/Page/SettingsPage.qml
@@ -36,7 +36,9 @@ Kirigami.ScrollablePage {
            topPadding: 0
            Kirigami.Theme.colorSet: Kirigami.Theme.View
            ListView {
-                Component.onCompleted: actions[0].trigger();
+                Component.onCompleted: if (pageSettingStack.wideMode) {
+                    actions[0].trigger();
+                }
                property list<Kirigami.Action> actions: [
                    Kirigami.Action {
                        text: i18n("General")
@@ -58,6 +60,11 @@ Kirigami.ScrollablePage {
                        icon.name: "preferences-desktop-emoticons"
                        onTriggered: pageSettingStack.push("qrc:/imports/NeoChat/Settings/Emoticons.qml")
                    },
+                    Kirigami.Action {
+                        text: i18n("Devices")
+                        iconName: "network-connect"
+                        onTriggered: pageSettingStack.push("qrc:/imports/NeoChat/Page/DevicesPage.qml")
+                    },
                    Kirigami.Action {
                        text: i18n("About NeoChat")
                        icon.name: "help-about"
--- a/imports/NeoChat/Settings/Emoticons.qml
+++ b/imports/NeoChat/Settings/Emoticons.qml
@@ -13,64 +13,42 @@ import NeoChat.Settings 1.0
 import NeoChat.Component 1.0 as Components
 import NeoChat.Dialog 1.0

-Kirigami.ScrollablePage {
-    Component {
-        id: openFileDialog
+Kirigami.Page {

-        OpenFileDialog {
-            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
-        }
+    leftPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    topPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+    rightPadding: pageSettingStack.wideMode ? Kirigami.Units.gridUnit : 0
+
+    ColumnLayout {
+        id: column
+        anchors.fill: parent
+
+        Connections {
+            target: pageSettingStack
+            onWideModeChanged: scroll.background.visible = pageSettingStack.wideMode
        }

+        QQC2.ScrollView {
+            id: scroll
+            Component.onCompleted: background.visible = pageSettingStack.wideMode
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
            ListView {
-        header: QQC2.ToolBar {
-            width: parent.width
-            contentItem: RowLayout {
-                Item {
-                    Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
-                }
-                QQC2.TextField {
-                    id: emojiField
-                    placeholderText: i18n("new_emoji_name_here")
-
-                    validator: RegularExpressionValidator {
-                        regularExpression: /[a-zA-Z_0-9]*/
-                    }
-                }
-                QQC2.Button {
-                    text: i18n("Add Emoji...")
-
-                    enabled: emojiField.text != ""
-                    property var fileDialog: null
-
-                    onClicked: {
-                        if (this.fileDialog != null) {
-                            return;
-                        }
-
-                        this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
-
-                        this.fileDialog.chosen.connect((url) => {
-                            emojiModel.addEmoji(emojiField.text, url)
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.onRejected.connect(() => {
-                            rej()
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.open()
-                    }
-                }
-                Item {
-                    Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
-                }
-            }
-        }
+                clip: true
                model: CustomEmojiModel {
                    id: emojiModel

                    connection: Controller.activeConnection
                }
+
+                Kirigami.PlaceholderMessage {
+                    anchors.centerIn: parent
+                    text: i18n("No custom inline stickers found")
+                    visible: parent.model.count === 0
+                }
+
                delegate: Kirigami.BasicListItem {
                    id: del

@@ -102,3 +80,74 @@ Kirigami.ScrollablePage {
                }
            }
        }
+
+        Loader {
+            active: pageSettingStack.wideMode
+            sourceComponent: addEmojiComponent
+            Layout.fillWidth: true
+        }
+    }
+
+    footer: QQC2.ToolBar {
+        id: toolbar
+        width: parent.width
+        visible: !pageSettingStack.wideMode
+        height: visible ? implicitHeight : 0
+        contentItem: Loader {
+            active: !pageSettingStack.wideMode
+            sourceComponent: addEmojiComponent
+        }
+    }
+
+    Component {
+        id: openFileDialog
+
+        OpenFileDialog {
+            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
+        }
+    }
+
+    property Component addEmojiComponent: RowLayout {
+        Item {
+            Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
+        }
+
+        QQC2.TextField {
+            id: emojiField
+            placeholderText: i18n("new_emoji_name_here")
+
+            validator: RegularExpressionValidator {
+                regularExpression: /[a-zA-Z_0-9]*/
+            }
+        }
+
+        QQC2.Button {
+            text: i18n("Add Emoji...")
+
+            enabled: emojiField.text != ""
+            property var fileDialog: null
+
+            onClicked: {
+                if (this.fileDialog != null) {
+                    return;
+                }
+
+                this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
+
+                this.fileDialog.chosen.connect((url) => {
+                    emojiModel.addEmoji(emojiField.text, url)
+                    this.fileDialog = null
+                })
+                this.fileDialog.onRejected.connect(() => {
+                    rej()
+                    this.fileDialog = null
+                })
+                this.fileDialog.open()
+            }
+        }
+
+        Item {
+            Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
+        }
+    }
+}
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -258,12 +258,6 @@ Kirigami.ApplicationWindow {
                shortcut: StandardKey.New
                enabled: pageStack.layers.currentItem.title !== i18n("Start a Chat") && Controller.accountCount > 0
            },
-            Kirigami.Action {
-                text: i18n("Devices")
-                iconName: "network-connect"
-                onTriggered: pushReplaceLayer("qrc:/imports/NeoChat/Page/DevicesPage.qml")
-                enabled: pageStack.layers.currentItem.title !== i18n("Devices") && Controller.accountCount > 0
-            },
            Kirigami.Action {
                text: i18n("Settings")
                icon.name: "settings-configure"