From de2fbadba5ec60c72466aa47a2b095a52e984438 Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Sun, 19 Dec 2021 23:40:30 +0100 Subject: [PATCH] Adapt list setting pages to new style --- imports/NeoChat/Settings/AccountsPage.qml | 116 +++++-------- imports/NeoChat/Settings/DevicesPage.qml | 96 +++++----- imports/NeoChat/Settings/Emoticons.qml | 202 +++++++++------------- 3 files changed, 166 insertions(+), 248 deletions(-) diff --git a/imports/NeoChat/Settings/AccountsPage.qml b/imports/NeoChat/Settings/AccountsPage.qml index 4209f9524..cd914352b 100644 --- a/imports/NeoChat/Settings/AccountsPage.qml +++ b/imports/NeoChat/Settings/AccountsPage.qml @@ -11,14 +11,9 @@ import org.kde.kirigami 2.15 as Kirigami import org.kde.neochat 1.0 import NeoChat.Dialog 1.0 -Kirigami.Page { +Kirigami.ScrollablePage { title: i18n("Accounts") - leftPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - actions.main: Kirigami.Action { text: i18n("Add an account") icon.name: "list-add-user" @@ -26,82 +21,59 @@ Kirigami.Page { visible: !pageSettingStack.wideMode } - Connections { - target: pageSettingStack - function onWideModeChanged() { - scroll.background.visible = pageSettingStack.wideMode - } - } + ListView { + model: AccountRegistry + delegate: Kirigami.SwipeListItem { + leftPadding: 0 + rightPadding: 0 + Kirigami.BasicListItem { + anchors.top: parent.top + anchors.bottom: parent.bottom - Controls.ScrollView { - id: scroll - Component.onCompleted: background.visible = pageSettingStack.wideMode + text: model.connection.localUser.displayName + labelItem.textFormat: Text.PlainText + subtitle: model.connection.localUserId + icon: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : "im-user" - anchors.fill: parent - - Controls.ScrollBar.horizontal.policy: Controls.ScrollBar.AlwaysOff - ListView { - clip: true - model: AccountRegistry - delegate: Kirigami.SwipeListItem { - leftPadding: 0 - rightPadding: 0 - Kirigami.BasicListItem { - anchors.top: parent.top - anchors.bottom: parent.bottom - - text: model.connection.localUser.displayName - labelItem.textFormat: Text.PlainText - subtitle: model.connection.localUserId - icon: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : "im-user" - - onClicked: { - Controller.activeConnection = model.connection - pageStack.layers.pop() - } + onClicked: { + Controller.activeConnection = model.connection + pageStack.layers.pop() } - actions: [ - Kirigami.Action { - text: i18n("Edit this account") - iconName: "document-edit" - onTriggered: { - userEditSheet.connection = model.connection - userEditSheet.open() - } - }, - Kirigami.Action { - text: i18n("Logout") - iconName: "im-kick-user" - onTriggered: { - Controller.logout(model.connection, true) - if(Controller.accountCount === 1) - pageStack.layers.pop() - } - } - ] } - } - } - - footer: Column { - height: visible ? implicitHeight : 0 - Kirigami.ActionToolBar { - alignment: Qt.AlignRight - visible: pageSettingStack.wideMode - rightPadding: Kirigami.Units.smallSpacing - width: parent.width - flat: false actions: [ Kirigami.Action { - text: i18n("Add an account") - icon.name: "list-add-user" - onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml") + text: i18n("Edit this account") + iconName: "document-edit" + onTriggered: { + userEditSheet.connection = model.connection + userEditSheet.open() + } + }, + Kirigami.Action { + text: i18n("Logout") + iconName: "im-kick-user" + onTriggered: { + Controller.logout(model.connection, true) + if(Controller.accountCount === 1) + pageStack.layers.pop() + } } ] } - Item { + } + + footer: Controls.ToolBar { + Kirigami.Theme.colorSet: Kirigami.Theme.Window + Kirigami.ActionToolBar { + alignment: Qt.AlignRight + rightPadding: Kirigami.Units.smallSpacing width: parent.width - height: Kirigami.Units.smallSpacing + flat: false + actions: Kirigami.Action { + text: i18n("Add an account") + icon.name: "list-add-user" + onTriggered: pageStack.layers.push("qrc:/imports/NeoChat/Page/WelcomePage.qml") + } } } Connections { diff --git a/imports/NeoChat/Settings/DevicesPage.qml b/imports/NeoChat/Settings/DevicesPage.qml index e70061c1e..0f33d2870 100644 --- a/imports/NeoChat/Settings/DevicesPage.qml +++ b/imports/NeoChat/Settings/DevicesPage.qml @@ -9,71 +9,53 @@ import org.kde.kirigami 2.15 as Kirigami import org.kde.neochat 1.0 -Kirigami.Page { +Kirigami.ScrollablePage { title: i18n("Devices") - leftPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - - Connections { - target: pageSettingStack - function onWideModeChanged() { - scroll.background.visible = pageSettingStack.wideMode + ListView { + model: DevicesModel { + id: devices } - } - Controls.ScrollView { - id: scroll - Component.onCompleted: background.visible = pageSettingStack.wideMode - anchors.fill: parent - 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 } + } - 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 + Kirigami.BasicListItem { + anchors.top: parent.top + anchors.bottom: parent.bottom + + text: model.displayName + subtitle: model.id + icon: "network-connect" } - - delegate: Kirigami.SwipeListItem { - leftPadding: 0 - rightPadding: 0 - Kirigami.BasicListItem { - anchors.top: parent.top - anchors.bottom: parent.bottom - - text: model.displayName - subtitle: model.id - icon: "network-connect" - } - actions: [ - Kirigami.Action { - text: i18n("Edit device name") - iconName: "document-edit" - onTriggered: { - renameSheet.index = model.index - renameSheet.name = model.displayName - renameSheet.open() - } - }, - Kirigami.Action { - text: i18n("Logout device") - iconName: "edit-delete-remove" - onTriggered: { - passwordSheet.index = index - passwordSheet.open() - } + actions: [ + Kirigami.Action { + text: i18n("Edit device name") + iconName: "document-edit" + onTriggered: { + renameSheet.index = model.index + renameSheet.name = model.displayName + renameSheet.open() } - ] - } + }, + Kirigami.Action { + text: i18n("Logout device") + iconName: "edit-delete-remove" + onTriggered: { + passwordSheet.index = index + passwordSheet.open() + } + } + ] } } diff --git a/imports/NeoChat/Settings/Emoticons.qml b/imports/NeoChat/Settings/Emoticons.qml index d1fe3cfab..ec8f8eb70 100644 --- a/imports/NeoChat/Settings/Emoticons.qml +++ b/imports/NeoChat/Settings/Emoticons.qml @@ -13,92 +13,100 @@ import NeoChat.Settings 1.0 import NeoChat.Component 1.0 as Components import NeoChat.Dialog 1.0 -Kirigami.Page { +Kirigami.ScrollablePage { title: i18nc('@title:window', 'Custom Emojis') - leftPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 - rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0 + ListView { + model: CustomEmojiModel { + id: emojiModel - ColumnLayout { - id: column - anchors.fill: parent - - Connections { - target: pageSettingStack - function onWideModeChanged() { - scroll.background.visible = pageSettingStack.wideMode - } + connection: Controller.activeConnection } - QQC2.ScrollView { - id: scroll - Component.onCompleted: background.visible = pageSettingStack.wideMode - Layout.fillWidth: true - Layout.fillHeight: true - - ListView { - 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 - - required property string name - required property url imageURL - - text: name - reserveSpaceForSubtitle: true - - leading: Image { - width: height - sourceSize.width: width - sourceSize.height: height - source: imageURL - - Rectangle { - anchors.fill: parent - visible: parent.status === Image.Loading - radius: height/2 - gradient: Components.ShimmerGradient { } - } - } - - trailing: QQC2.ToolButton { - width: height - icon.name: "delete" - onClicked: emojiModel.removeEmoji(del.name) - } - } - } + Kirigami.PlaceholderMessage { + anchors.centerIn: parent + text: i18n("No custom inline stickers found") + visible: parent.model.count === 0 } - Loader { - active: pageSettingStack.wideMode - sourceComponent: addEmojiComponent - Layout.fillWidth: true + delegate: Kirigami.BasicListItem { + id: del + + required property string name + required property url imageURL + + text: name + reserveSpaceForSubtitle: true + + leading: Image { + width: height + sourceSize.width: width + sourceSize.height: height + source: imageURL + + Rectangle { + anchors.fill: parent + visible: parent.status === Image.Loading + radius: height/2 + gradient: Components.ShimmerGradient { } + } + } + + trailing: QQC2.ToolButton { + width: height + icon.name: "delete" + onClicked: emojiModel.removeEmoji(del.name) + } } } footer: QQC2.ToolBar { - id: toolbar - width: parent.width - visible: !pageSettingStack.wideMode - height: visible ? implicitHeight : 0 - contentItem: Loader { - active: !pageSettingStack.wideMode - sourceComponent: addEmojiComponent + Kirigami.Theme.colorSet: Kirigami.Theme.Window + Kirigami.ActionToolBar { + id: emojiCreator + alignment: Qt.AlignRight + rightPadding: Kirigami.Units.smallSpacing + width: parent.width + flat: false + property string name + actions: [ + Kirigami.Action { + displayComponent: QQC2.TextField { + id: emojiField + placeholderText: i18n("new_emoji_name_here") + + validator: RegularExpressionValidator { + regularExpression: /[a-zA-Z_0-9]*/ + } + onTextChanged: emojiCreator.name = text + } + }, + Kirigami.Action { + text: i18n("Add Emoji...") + + enabled: emojiCreator.name.length > 0 + property var fileDialog: null + icon.name: 'list-add' + + onTriggered: { + 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() + } + } + ] } } @@ -109,48 +117,4 @@ Kirigami.Page { 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 - } - } }