diff --git a/imports/NeoChat/Page/AccountsPage.qml b/imports/NeoChat/Page/AccountsPage.qml index 3eb85631f..99f34dd61 100644 --- a/imports/NeoChat/Page/AccountsPage.qml +++ b/imports/NeoChat/Page/AccountsPage.qml @@ -11,49 +11,91 @@ 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") - ListView { - model: AccountListModel { } - delegate: Kirigami.SwipeListItem { - leftPadding: 0 - rightPadding: 0 - action: Kirigami.Action { - onTriggered: Controller.activeConnection = model.connection - } - Kirigami.BasicListItem { - anchors.top: parent.top - anchors.bottom: parent.bottom + 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 - text: model.user.displayName - subtitle: model.user.id - icon: model.user.avatarMediaId ? ("image://mxc/" + model.user.avatarMediaId) : "im-user" + 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 + } - 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() + 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 + rightPadding: 0 + action: Kirigami.Action { + onTriggered: Controller.activeConnection = model.connection } - }, - Kirigami.Action { - text: i18n("Logout") - iconName: "im-kick-user" - onTriggered: { - Controller.logout(model.connection, true) - if(Controller.accountCount === 1) + Kirigami.BasicListItem { + anchors.top: parent.top + anchors.bottom: parent.bottom + + text: model.user.displayName + subtitle: model.user.id + icon: model.user.avatarMediaId ? ("image://mxc/" + model.user.avatarMediaId) : "im-user" + + 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() + } + } + ] } - ] + } + } + + + 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") + } } } @@ -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 diff --git a/imports/NeoChat/Page/DevicesPage.qml b/imports/NeoChat/Page/DevicesPage.qml index dd5149b20..47d54f03d 100644 --- a/imports/NeoChat/Page/DevicesPage.qml +++ b/imports/NeoChat/Page/DevicesPage.qml @@ -9,43 +9,74 @@ import org.kde.kirigami 2.15 as Kirigami import org.kde.neochat 1.0 -Kirigami.ScrollablePage { +Kirigami.Page { title: i18n("Devices") - ListView { - model: DevicesModel { - id: devices - } - delegate: Kirigami.SwipeListItem { - leftPadding: 0 - rightPadding: 0 - Kirigami.BasicListItem { - anchors.top: parent.top - anchors.bottom: parent.bottom + 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 - 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() + 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 + 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() + } + } + ] + } + } } } diff --git a/imports/NeoChat/Page/RoomListPage.qml b/imports/NeoChat/Page/RoomListPage.qml index 6bd134813..a0305d8bc 100644 --- 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 diff --git a/imports/NeoChat/Page/SettingsPage.qml b/imports/NeoChat/Page/SettingsPage.qml index 54b0e8eb6..7088dd3c5 100644 --- 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 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" diff --git a/imports/NeoChat/Settings/Emoticons.qml b/imports/NeoChat/Settings/Emoticons.qml index 3a56fe46b..73d0ce31e 100644 --- a/imports/NeoChat/Settings/Emoticons.qml +++ b/imports/NeoChat/Settings/Emoticons.qml @@ -13,7 +13,92 @@ import NeoChat.Settings 1.0 import NeoChat.Component 1.0 as Components import NeoChat.Dialog 1.0 -Kirigami.ScrollablePage { +Kirigami.Page { + + 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 { + 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) + } + } + } + } + + 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 @@ -22,83 +107,47 @@ Kirigami.ScrollablePage { } } - 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") + property Component addEmojiComponent: RowLayout { + Item { + Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight + } - validator: RegularExpressionValidator { - regularExpression: /[a-zA-Z_0-9]*/ - } - } - QQC2.Button { - text: i18n("Add Emoji...") + QQC2.TextField { + id: emojiField + placeholderText: i18n("new_emoji_name_here") - 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 - } + validator: RegularExpressionValidator { + regularExpression: /[a-zA-Z_0-9]*/ } } - model: CustomEmojiModel { - id: emojiModel - connection: Controller.activeConnection - } - delegate: Kirigami.BasicListItem { - id: del + QQC2.Button { + text: i18n("Add Emoji...") - required property string name - required property url imageURL + enabled: emojiField.text != "" + property var fileDialog: null - 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 { } + onClicked: { + if (this.fileDialog != null) { + return; } - } - trailing: QQC2.ToolButton { - width: height - icon.name: "delete" - onClicked: emojiModel.removeEmoji(del.name) + 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 + } } } diff --git a/qml/main.qml b/qml/main.qml index d01448565..38feb7c62 100644 --- 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"