From 869bb5ad8705e451f17f8a5827f7158ce8d96cb8 Mon Sep 17 00:00:00 2001 From: James Graham Date: Sun, 20 Nov 2022 16:30:54 +0000 Subject: [PATCH] Refine mobileform settings Numerous refinements to the new mobileform setting pages - Ensure left and right padding at the top level is 0 for mobile - Centre align the avatar in the account editor page and add tooltip to button - Fix the bubble/compact mode setting so that it fits when thin, i.e on mobile - Fix the loading placeholder in device settings --- src/qml/Settings/AccountEditorPage.qml | 13 +++++++++++++ src/qml/Settings/AppearanceSettingsPage.qml | 13 +++++++++++-- src/qml/Settings/DevicesPage.qml | 9 +++++---- src/qml/Settings/GlobalNotificationsPage.qml | 2 ++ src/qml/Settings/NetworkProxyPage.qml | 2 ++ src/qml/Settings/ThemeRadioButton.qml | 3 ++- 6 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/qml/Settings/AccountEditorPage.qml b/src/qml/Settings/AccountEditorPage.qml index 7e72f48ab..f73421e14 100644 --- a/src/qml/Settings/AccountEditorPage.qml +++ b/src/qml/Settings/AccountEditorPage.qml @@ -18,6 +18,8 @@ Kirigami.ScrollablePage { readonly property bool compact: width > Kirigami.Units.gridUnit * 30 ? 2 : 1 + leftPadding: 0 + rightPadding: 0 ColumnLayout { MobileForm.FormCard { Layout.topMargin: Kirigami.Units.largeSpacing @@ -29,9 +31,14 @@ Kirigami.ScrollablePage { } MobileForm.AbstractFormDelegate { Layout.fillWidth: true + background: Item {} contentItem: RowLayout { + Item { + Layout.fillWidth: true + } Kirigami.Avatar { id: avatar + Layout.alignment: Qt.AlignRight source: root.connection && root.connection.localUser.avatarMediaId ? ("image://mxc/" + root.connection.localUser.avatarMediaId) : "" name: root.connection.localUser.displayName ?? root.connection.localUser.id @@ -60,10 +67,16 @@ Kirigami.ScrollablePage { } } QQC2.Button { + Layout.alignment: Qt.AlignLeft visible: avatar.source.toString().length !== 0 icon.name: "edit-clear" + text: i18n("Remove current avatar") + display: QQC2.AbstractButton.IconOnly onClicked: avatar.source = "" + + QQC2.ToolTip.text: text + QQC2.ToolTip.visible: hovered } Item { Layout.fillWidth: true diff --git a/src/qml/Settings/AppearanceSettingsPage.qml b/src/qml/Settings/AppearanceSettingsPage.qml index bdeecdd6d..799371e08 100644 --- a/src/qml/Settings/AppearanceSettingsPage.qml +++ b/src/qml/Settings/AppearanceSettingsPage.qml @@ -26,13 +26,18 @@ Kirigami.ScrollablePage { } MobileForm.AbstractFormDelegate { + id: timelineModeSetting Layout.fillWidth: true background: Item {} contentItem: RowLayout { Layout.alignment: Qt.AlignCenter - spacing: Kirigami.Units.gridUnit * 2 + spacing: Kirigami.Units.largeSpacing + Item { + Layout.fillWidth: true + } QQC2.ButtonGroup { id: themeGroup } ThemeRadioButton { + thin: timelineModeSetting.width < Kirigami.Units.gridUnit * 22 innerObject: [ RowLayout { Layout.fillWidth: true @@ -121,7 +126,8 @@ Kirigami.ScrollablePage { } } ThemeRadioButton { - Layout.alignment: Qt.AlignRight + // Layout.alignment: Qt.AlignRight + thin: timelineModeSetting.width < Kirigami.Units.gridUnit * 22 innerObject: [ RowLayout { Layout.fillWidth: true @@ -188,6 +194,9 @@ Kirigami.ScrollablePage { Config.save(); } } + Item { + Layout.fillWidth: true + } } } } diff --git a/src/qml/Settings/DevicesPage.qml b/src/qml/Settings/DevicesPage.qml index 1465662c6..f36c6d6ec 100644 --- a/src/qml/Settings/DevicesPage.qml +++ b/src/qml/Settings/DevicesPage.qml @@ -25,12 +25,13 @@ Kirigami.ScrollablePage { MobileForm.FormCardHeader { title: i18n("Devices") } - - Kirigami.LoadingPlaceholder { - Layout.alignment: Qt.AlignHCenter - visible: parent.count === 0 // We can assume 0 means loading since there is at least one device + MobileForm.AbstractFormDelegate { + Layout.fillWidth: true + visible: deviceRepeater.count === 0 // We can assume 0 means loading since there is at least one device + contentItem: Kirigami.LoadingPlaceholder { } } Repeater { + id: deviceRepeater model: DevicesModel { id: devices } diff --git a/src/qml/Settings/GlobalNotificationsPage.qml b/src/qml/Settings/GlobalNotificationsPage.qml index 7e62363df..f81b1a651 100644 --- a/src/qml/Settings/GlobalNotificationsPage.qml +++ b/src/qml/Settings/GlobalNotificationsPage.qml @@ -12,6 +12,8 @@ import org.kde.neochat 1.0 Kirigami.ScrollablePage { title: i18nc("@title:window", "Notifications") + leftPadding: 0 + rightPadding: 0 ColumnLayout { id: notificationLayout diff --git a/src/qml/Settings/NetworkProxyPage.qml b/src/qml/Settings/NetworkProxyPage.qml index 5479015fc..7b117a038 100644 --- a/src/qml/Settings/NetworkProxyPage.qml +++ b/src/qml/Settings/NetworkProxyPage.qml @@ -15,6 +15,8 @@ Kirigami.ScrollablePage { property int currentType property bool proxyConfigChanged: false + leftPadding: 0 + rightPadding: 0 ColumnLayout { MobileForm.FormCard { Layout.topMargin: Kirigami.Units.largeSpacing diff --git a/src/qml/Settings/ThemeRadioButton.qml b/src/qml/Settings/ThemeRadioButton.qml index cb49e4284..8743344d4 100644 --- a/src/qml/Settings/ThemeRadioButton.qml +++ b/src/qml/Settings/ThemeRadioButton.qml @@ -15,11 +15,12 @@ QQC2.RadioButton { implicitHeight: contentItem.implicitHeight property alias innerObject: contentLayout.children + property bool thin contentItem: ColumnLayout { Kirigami.ShadowedRectangle { implicitWidth: implicitHeight * 1.6 - implicitHeight: Kirigami.Units.gridUnit * 6 + implicitHeight: delegate.thin ? Kirigami.Units.gridUnit * 5 : Kirigami.Units.gridUnit * 6 radius: Kirigami.Units.smallSpacing Kirigami.Theme.inherit: false Kirigami.Theme.colorSet: Kirigami.Theme.View