From 5238074ed394352c6e5f40b271685809a3dcc80a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Thu, 31 Oct 2024 13:41:52 +0100 Subject: [PATCH] Settings list simplified - UI simplified, made independent from the backend - dedicated model created, filtering on the level of model instead of per delegate - using ListView instead of mutliple Repeaters - UI models removed from ProfileSectionStore Closes: #16675 --- ui/app/AppLayouts/Profile/ProfileLayout.qml | 76 ++++--- .../Profile/controls/SettingsList.qml | 78 +++++++ ui/app/AppLayouts/Profile/controls/qmldir | 3 +- .../Profile/helpers/SettingsEntriesModel.qml | 197 ++++++++++++++++++ ui/app/AppLayouts/Profile/helpers/qmldir | 5 +- .../AppLayouts/Profile/panels/MenuPanel.qml | 144 ------------- .../Profile/stores/ProfileSectionStore.qml | 111 +--------- .../AppLayouts/Profile/views/LeftTabView.qml | 75 +++---- 8 files changed, 358 insertions(+), 331 deletions(-) create mode 100644 ui/app/AppLayouts/Profile/controls/SettingsList.qml create mode 100644 ui/app/AppLayouts/Profile/helpers/SettingsEntriesModel.qml delete mode 100644 ui/app/AppLayouts/Profile/panels/MenuPanel.qml diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml index 367247c315..ea057716f7 100644 --- a/ui/app/AppLayouts/Profile/ProfileLayout.qml +++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml @@ -3,33 +3,34 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 -import utils 1.0 import shared 1.0 import shared.panels 1.0 -import shared.stores 1.0 as SharedStores import shared.popups.keycard 1.0 +import shared.stores 1.0 as SharedStores import shared.stores.send 1.0 +import utils 1.0 -import StatusQ.Core.Theme 0.1 - -import AppLayouts.Wallet.controls 1.0 -import AppLayouts.Wallet.stores 1.0 - -import "stores" import "popups" import "views" import "views/profile" import StatusQ 0.1 -import StatusQ.Core 0.1 -import StatusQ.Layout 0.1 import StatusQ.Controls 0.1 -import StatusQ.Popups.Dialog 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 as SQUtils +import StatusQ.Layout 0.1 +import StatusQ.Popups.Dialog 0.1 + +import AppLayouts.Communities.stores 1.0 as CommunitiesStore +import AppLayouts.Profile.helpers 1.0 +import AppLayouts.Profile.stores 1.0 as ProfileStores +import AppLayouts.Wallet.controls 1.0 +import AppLayouts.Wallet.stores 1.0 +import AppLayouts.stores 1.0 as AppLayoutsStores import SortFilterProxyModel 0.2 -import AppLayouts.stores 1.0 as AppLayoutsStores -import AppLayouts.Communities.stores 1.0 as CommunitiesStore + StatusSectionLayout { id: root @@ -41,7 +42,7 @@ StatusSectionLayout { property SharedStores.RootStore sharedRootStore property SharedStores.UtilsStore utilsStore - property ProfileSectionStore store + property ProfileStores.ProfileSectionStore store property AppLayoutsStores.RootStore globalStore property CommunitiesStore.CommunitiesStore communitiesStore required property var sendModalPopup @@ -99,6 +100,17 @@ StatusSectionLayout { readonly property bool toastClashesWithDirtyBubble: root.Window.width <= 1650 // design } + SettingsEntriesModel { + id: settingsEntriesModel + + showWalletEntries: root.store.walletMenuItemEnabled + showBackUpSeed: !root.store.privacyStore.mnemonicBackedUp + + syncingBadgeCount: root.store.devicesStore.devicesModel.count - + root.store.devicesStore.devicesModel.pairedCount + messagingBadgeCount: root.store.contactsStore.receivedContactRequestsModel.count + } + headerBackground: AccountHeaderGradient { width: parent.width overview: root.store.walletStore.selectedAccount @@ -106,8 +118,10 @@ StatusSectionLayout { } leftPanel: LeftTabView { - store: root.store anchors.fill: parent + + model: settingsEntriesModel + onMenuItemClicked: { if (profileContainer.currentItem.dirty && !profileContainer.currentItem.ignoreDirty) { event.accepted = true; @@ -137,9 +151,9 @@ StatusSectionLayout { root.store.backButtonName = "" if (currentIndex === Constants.settingsSubsection.contacts) { - root.store.backButtonName = root.store.getNameForSubsection(Constants.settingsSubsection.messaging) + root.store.backButtonName = settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.messaging) } else if (currentIndex === Constants.settingsSubsection.about_privacy || currentIndex === Constants.settingsSubsection.about_terms) { - root.store.backButtonName = root.store.getNameForSubsection(Constants.settingsSubsection.about) + root.store.backButtonName = settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.about) } else if (currentIndex === Constants.settingsSubsection.wallet) { walletView.item.resetStack() } else if (currentIndex === Constants.settingsSubsection.keycard) { @@ -161,7 +175,7 @@ StatusSectionLayout { utilsStore: root.utilsStore sendToAccountEnabled: root.networkConnectionStore.sendBuyBridgeEnabled - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.profile) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.profile) contentWidth: d.contentWidth sideBySidePreview: d.sideBySidePreviewAvailable toastClashesWithDirtyBubble: d.toastClashesWithDirtyBubble @@ -205,7 +219,7 @@ StatusSectionLayout { privacyStore: root.store.privacyStore passwordStrengthScoreFunction: root.sharedRootStore.getPasswordStrengthScore contentWidth: d.contentWidth - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.password) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.password) } } @@ -249,7 +263,7 @@ StatusSectionLayout { implicitWidth: parent.width implicitHeight: parent.height messagingStore: root.store.messagingStore - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.messaging) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.messaging) contactsStore: root.store.contactsStore contentWidth: d.contentWidth } @@ -276,7 +290,7 @@ StatusSectionLayout { currencySymbol: root.sharedRootStore.currencyStore.currentCurrency emojiPopup: root.emojiPopup sendModalPopup: root.sendModalPopup - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.wallet) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.wallet) } onLoaded: root.store.backButtonName = "" } @@ -289,7 +303,7 @@ StatusSectionLayout { implicitHeight: parent.height appearanceStore: root.store.appearanceStore - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.appearance) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.appearance) contentWidth: d.contentWidth systemPalette: root.systemPalette } @@ -305,7 +319,7 @@ StatusSectionLayout { languageSelectionEnabled: localAppSettings.translationsEnabled languageStore: root.store.languageStore currencyStore: root.currencyStore - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.language) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.language) contentWidth: d.contentWidth } } @@ -318,7 +332,7 @@ StatusSectionLayout { implicitHeight: parent.height notificationsStore: root.store.notificationsStore - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.notifications) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.notifications) contentWidth: d.contentWidth } } @@ -335,7 +349,7 @@ StatusSectionLayout { devicesStore: root.store.devicesStore privacyStore: root.store.privacyStore advancedStore: root.store.advancedStore - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.syncingSettings) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.syncingSettings) contentWidth: d.contentWidth } } @@ -351,7 +365,7 @@ StatusSectionLayout { advancedStore: root.store.advancedStore walletStore: root.store.walletStore isFleetSelectionEnabled: fleetSelectionEnabled - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.advanced) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.advanced) contentWidth: d.contentWidth } } @@ -362,7 +376,7 @@ StatusSectionLayout { sourceComponent: AboutView { implicitWidth: parent.width implicitHeight: parent.height - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.about) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.about) contentWidth: d.contentWidth store: QtObject { @@ -411,7 +425,7 @@ StatusSectionLayout { rootStore: root.globalStore currencyStore: root.currencyStore walletAssetsStore: root.walletAssetsStore - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.communitiesSettings) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.communitiesSettings) contentWidth: d.contentWidth } } @@ -427,8 +441,8 @@ StatusSectionLayout { profileSectionStore: root.store keycardStore: root.store.keycardStore emojiPopup: root.emojiPopup - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.keycard) - mainSectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.keycard) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.keycard) + mainSectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.keycard) contentWidth: d.contentWidth } } @@ -483,7 +497,7 @@ StatusSectionLayout { implicitWidth: parent.width implicitHeight: parent.height - sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.privacyAndSecurity) + sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.privacyAndSecurity) contentWidth: d.contentWidth } } diff --git a/ui/app/AppLayouts/Profile/controls/SettingsList.qml b/ui/app/AppLayouts/Profile/controls/SettingsList.qml new file mode 100644 index 0000000000..f978f32542 --- /dev/null +++ b/ui/app/AppLayouts/Profile/controls/SettingsList.qml @@ -0,0 +1,78 @@ +import QtQuick 2.15 + +import StatusQ.Components 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +/*! + \qmltype SettingsList + \inherits StatusListView + \inqmlmodule AppLayouts.Profile.controls + + \brief List view rendering setting entries + + Expected model structure: + + subsection [int] - identifier of the entry (Constants.settingsSubsection) + text [string] - readable name of the entry + icon [string] - icon name + badgeCount [int] - number presented on the badge + isExperimental [bool] - indicates if the beta tag should be presented + experimentalTooltip [string] - tooltip text for the beta tag +*/ +StatusListView { + id: root + + property int currenctSubsection + + readonly property int availableWidth: width - leftMargin - rightMargin + + signal clicked(int subsection) + + spacing: Theme.halfPadding + + delegate: StatusNavigationListItem { + id: delegate + + objectName: model.subsection + "-MenuItem" + + width: ListView.view.availableWidth + title: model.text + asset.name: model.icon + selected: root.currenctSubsection === model.subsection + highlighted: !!betaTagLoader.item && betaTagLoader.item.hovered + badge.value: model.badgeCount + + Loader { + id: betaTagLoader + + active: model.isExperimental + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: Theme.padding + + (delegate.badge.visible + ? delegate.badge.width + Theme.halfPadding : 0) + + sourceComponent: StatusBetaTag { + tooltipText: model.experimentalTooltip + cursorShape: Qt.PointingHandCursor + } + } + + onClicked: root.clicked(model.subsection) + } + + section.property: "group" + + section.delegate: StatusBaseText { + text: section + color: Theme.palette.baseColor1 + + width: ListView.view.availableWidth + + leftPadding: Theme.padding + rightPadding: Theme.padding + topPadding: Theme.smallPadding + bottomPadding: Theme.smallPadding + } +} diff --git a/ui/app/AppLayouts/Profile/controls/qmldir b/ui/app/AppLayouts/Profile/controls/qmldir index 8f8f7b2bdf..7532adb871 100644 --- a/ui/app/AppLayouts/Profile/controls/qmldir +++ b/ui/app/AppLayouts/Profile/controls/qmldir @@ -1,7 +1,8 @@ AddMoreAccountsLink 1.0 AddMoreAccountsLink.qml ProfileShowcasePanelDelegate 1.0 ProfileShowcasePanelDelegate.qml +SettingsList 1.0 SettingsList.qml ShowcaseDelegate 1.0 ShowcaseDelegate.qml StaticSocialLinkInput 1.0 StaticSocialLinkInput.qml WalletAccountDelegate 1.0 WalletAccountDelegate.qml +WalletAccountDetailsKeypairItem 1.0 WalletAccountDetailsKeypairItem.qml WalletKeyPairDelegate 1.0 WalletKeyPairDelegate.qml -WalletAccountDetailsKeypairItem 1.0 WalletAccountDetailsKeypairItem.qml \ No newline at end of file diff --git a/ui/app/AppLayouts/Profile/helpers/SettingsEntriesModel.qml b/ui/app/AppLayouts/Profile/helpers/SettingsEntriesModel.qml new file mode 100644 index 0000000000..350f66989e --- /dev/null +++ b/ui/app/AppLayouts/Profile/helpers/SettingsEntriesModel.qml @@ -0,0 +1,197 @@ +import QtQuick 2.15 + +import StatusQ 0.1 +import utils 1.0 + +import SortFilterProxyModel 0.2 + +/*! + \qmltype SettingsEntriesModel + \inherits SortFilterProxyModel + \inqmlmodule AppLayouts.Profile.helpers + + Model providing entries to the settings section. + + Model structure: + + subsection [int] - identifier of the entry (Constants.settingsSubsection) + text [string] - readable name of the entry + icon [string] - icon name + badgeCount [int] - number presented on the badge + isExperimental [bool] - indicates if the beta tag should be presented + experimentalTooltip [string] - tooltip text for the beta tag +*/ +SortFilterProxyModel { + id: root + + // Determines if wallet-related entries should be included + property bool showWalletEntries + + // Determines if back up seed phrase entry should be included + property bool showBackUpSeed + + // Badge count for the syncing entry + property int syncingBadgeCount: 0 + + // Badge count for the messaging section + property int messagingBadgeCount: 0 + + readonly property string appsGroupTitle: qsTr("Apps") + readonly property string preferencesGroupTitle: qsTr("Preferences") + readonly property string aboutAndHelpGroupTitle: qsTr("About & Help") + + readonly property var entries: [ + { + subsection: Constants.settingsSubsection.backUpSeed, + text: qsTr("Back up seed phrase"), + icon: "seed-phrase" + }, + { + subsection: Constants.settingsSubsection.profile, + text: qsTr("Profile"), + icon: "profile" + }, + { + subsection: Constants.settingsSubsection.password, + text: qsTr("Password"), + icon: "password" + }, + { + subsection: Constants.settingsSubsection.keycard, + text: qsTr("Keycard"), + icon: "keycard" + }, + { + subsection: Constants.settingsSubsection.ensUsernames, + text: qsTr("ENS usernames"), + icon: "username", + isExperimental: true, + experimentalTooltip: qsTr("This section is going through a redesign.") + }, + { + subsection: Constants.settingsSubsection.syncingSettings, + text: qsTr("Syncing"), + icon: "rotate", + isExperimental: true, + experimentalTooltip: qsTr("Connection problems can happen.
If they do, please use the Enter a Seed Phrase feature instead.") + }, + { + subsection: Constants.settingsSubsection.messaging, + text: qsTr("Messaging"), + icon: "chat", + group: root.appsGroupTitle + }, + { + subsection: Constants.settingsSubsection.wallet, + text: qsTr("Wallet"), + icon: "wallet", + group: root.appsGroupTitle + }, + { + subsection: Constants.settingsSubsection.communitiesSettings, + text: qsTr("Communities"), + icon: "communities", + group: root.appsGroupTitle + }, + { + subsection: Constants.settingsSubsection.privacyAndSecurity, + text: qsTr("Privacy and security"), + icon: "security", + group: root.preferencesGroupTitle + }, + { + subsection: Constants.settingsSubsection.appearance, + text: qsTr("Appearance"), + icon: "appearance", + group: root.preferencesGroupTitle + }, + { + subsection: Constants.settingsSubsection.notifications, + text: qsTr("Notifications & Sounds"), + icon: "notification", + group: root.preferencesGroupTitle + }, + { + subsection: Constants.settingsSubsection.language, + text: qsTr("Language & Currency"), + icon: "language", + group: root.preferencesGroupTitle + }, + { + subsection: Constants.settingsSubsection.advanced, + text: qsTr("Advanced"), + icon: "settings", + group: root.preferencesGroupTitle + }, + { + subsection: Constants.settingsSubsection.about, + text: qsTr("About"), + icon: "info", + group: root.aboutAndHelpGroupTitle + }, + { + subsection: Constants.settingsSubsection.signout, + text: qsTr("Sign out & Quit"), + icon: "logout", + group: root.aboutAndHelpGroupTitle + } + ] + + // Update model after retranslation + onEntriesChanged: { + entries.forEach((elem, index) => { + baseModel.setProperty(index, "text", elem.text) + + if (elem.group) + baseModel.setProperty(index, "group", elem.group) + }) + } + + function getNameForSubsection(subsection) { + const entry = root.entries.find(entry => entry.subsection === subsection) + return entry ? entry.text : "" + } + + sourceModel: ObjectProxyModel { + sourceModel: ListModel { + id: baseModel + + Component.onCompleted: append(root.entries) + } + + delegate: QtObject { + readonly property bool visible: { + switch (model.subsection) { + case Constants.settingsSubsection.ensUsernames: + case Constants.settingsSubsection.wallet: + return root.showWalletEntries + case Constants.settingsSubsection.backUpSeed: + return root.showBackUpSeed + + default: return true + } + } + + readonly property int badgeCount: { + switch (model.subsection) { + case Constants.settingsSubsection.backUpSeed: + return root.showBackUpSeed + case Constants.settingsSubsection.syncingSettings: + return root.syncingBadgeCount + case Constants.settingsSubsection.messaging: + return root.messagingBadgeCount + + default: return 0 + } + } + } + + expectedRoles: ["subsection"] + exposedRoles: ["visible", "badgeCount"] + } + + filters: ValueFilter { + roleName: "visible" + value: true + } +} diff --git a/ui/app/AppLayouts/Profile/helpers/qmldir b/ui/app/AppLayouts/Profile/helpers/qmldir index 80023a31f6..97487427bd 100644 --- a/ui/app/AppLayouts/Profile/helpers/qmldir +++ b/ui/app/AppLayouts/Profile/helpers/qmldir @@ -1,6 +1,7 @@ +ContactDetails 1.0 ContactDetails.qml ProfileShowcaseDirtyState 1.0 ProfileShowcaseDirtyState.qml ProfileShowcaseModelAdapter 1.0 ProfileShowcaseModelAdapter.qml -ProfileShowcaseSettingsModelAdapter 1.0 ProfileShowcaseSettingsModelAdapter.qml ProfileShowcaseModels 1.0 ProfileShowcaseModels.qml +ProfileShowcaseSettingsModelAdapter 1.0 ProfileShowcaseSettingsModelAdapter.qml +SettingsEntriesModel 1.0 SettingsEntriesModel.qml VisibilityAndPositionDirtyStateModel 1.0 VisibilityAndPositionDirtyStateModel.qml -ContactDetails 1.0 ContactDetails.qml diff --git a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml b/ui/app/AppLayouts/Profile/panels/MenuPanel.qml deleted file mode 100644 index e56de4e371..0000000000 --- a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml +++ /dev/null @@ -1,144 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 - -import StatusQ.Components 0.1 -import StatusQ.Core.Theme 0.1 - -import shared 1.0 -import utils 1.0 - -import "../stores" - -Column { - id: root - spacing: 8 - - property PrivacyStore privacyStore - property ContactsStore contactsStore - property DevicesStore devicesStore - property alias mainMenuItems: mainMenuItems.model - property alias settingsMenuItems: settingsMenuItems.model - property alias extraMenuItems: extraMenuItems.model - property alias appsMenuItems: appsMenuItems.model - - property bool walletMenuItemEnabled: false - - property int settingsSubsection - - signal menuItemClicked(var menu_item) - - Repeater { - id: mainMenuItems - delegate: StatusNavigationListItem { - id: navigationItem - objectName: itemId + "-MainMenuItem" - width: root.width - itemId: model.subsection - title: model.text - asset.name: model.icon - selected: root.settingsSubsection === model.subsection - highlighted: !!betaTagLoader.item && betaTagLoader.item.hovered - onClicked: root.menuItemClicked(model) - badge.value: { - switch (model.subsection) { - case Constants.settingsSubsection.backUpSeed: - return !root.privacyStore.mnemonicBackedUp - case Constants.settingsSubsection.syncingSettings: - return root.devicesStore.devicesModel.count - root.devicesStore.devicesModel.pairedCount - default: return 0 - } - } - visible: { - switch (model.subsection) { - case Constants.settingsSubsection.ensUsernames: - return root.walletMenuItemEnabled; - case Constants.settingsSubsection.backUpSeed: - return !root.privacyStore.mnemonicBackedUp; - default: return true; - } - } - - Loader { - id: betaTagLoader - readonly property string experimentalTooltip: model.experimentalTooltip ?? "" - active: model.isExperimental - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: Theme.padding + (navigationItem.badge.visible ? navigationItem.badge.width + Theme.halfPadding : 0) - - sourceComponent: StatusBetaTag { - tooltipText: betaTagLoader.experimentalTooltip - cursorShape: Qt.PointingHandCursor - } - } - } - } - - StatusListSectionHeadline { - text: qsTr("Apps") - width: root.width - } - - Repeater { - id: appsMenuItems - delegate: StatusNavigationListItem { - id: appsMenuDelegate - objectName: itemId + "-AppMenuItem" - width: root.width - itemId: model.subsection - title: model.text - asset.name: model.icon - selected: root.settingsSubsection === model.subsection - onClicked: root.menuItemClicked(model) - visible: { - (model.subsection !== Constants.settingsSubsection.wallet) || - (model.subsection === Constants.settingsSubsection.communitiesSettings) || - (model.subsection === Constants.settingsSubsection.wallet && root.walletMenuItemEnabled) - } - badge.value: { - switch (model.subsection) { - case Constants.settingsSubsection.messaging: - return root.contactsStore.receivedContactRequestsModel.count - default: return "" - } - } - } - } - - StatusListSectionHeadline { - text: qsTr("Preferences") - width: root.width - } - - Repeater { - id: settingsMenuItems - delegate: StatusNavigationListItem { - id: settingsMenuDelegate - objectName: itemId + "-SettingsMenuItem" - width: root.width - itemId: model.subsection - title: model.text - asset.name: model.icon - selected: root.settingsSubsection === model.subsection - onClicked: root.menuItemClicked(model) - } - } - - StatusListSectionHeadline { - text: qsTr("About & Help") - width: root.width - } - - Repeater { - id: extraMenuItems - delegate: StatusNavigationListItem { - objectName: itemId + "-ExtraMenuItem" - width: root.width - itemId: model.subsection - title: model.text - asset.name: model.icon - selected: root.settingsSubsection === model.subsection - onClicked: root.menuItemClicked(model) - } - } -} diff --git a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml index 9c6c6e2187..e2a312eea1 100644 --- a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml +++ b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml @@ -1,11 +1,11 @@ -import QtQuick 2.13 -import utils 1.0 +import QtQuick 2.15 + +import StatusQ.Core.Utils 0.1 import AppLayouts.Chat.stores 1.0 import AppLayouts.Communities.stores 1.0 import AppLayouts.Profile.helpers 1.0 - -import StatusQ.Core.Utils 0.1 +import utils 1.0 import SortFilterProxyModel 0.2 @@ -88,80 +88,6 @@ QtObject { } property var communitiesProfileModule: profileSectionModuleInst.communitiesModule - property ListModel mainMenuItems: ListModel { - Component.onCompleted: { - append({subsection: Constants.settingsSubsection.backUpSeed, - text: qsTr("Back up seed phrase"), - icon: "seed-phrase"}) - append({subsection: Constants.settingsSubsection.profile, - text: qsTr("Profile"), - icon: "profile"}) - append({subsection: Constants.settingsSubsection.password, - text: qsTr("Password"), - icon: "password"}) - append({subsection: Constants.settingsSubsection.keycard, - text: qsTr("Keycard"), - icon: "keycard"}) - append({subsection: Constants.settingsSubsection.ensUsernames, - text: qsTr("ENS usernames"), - icon: "username", - isExperimental: true, - experimentalTooltip: qsTr("This section is going through a redesign.") - }) - append({subsection: Constants.settingsSubsection.syncingSettings, - text: qsTr("Syncing"), - icon: "rotate", - isExperimental: true, - experimentalTooltip: qsTr("Connection problems can happen.
If they do, please use the Enter a Seed Phrase feature instead.") - }) - } - } - - property ListModel appsMenuItems: ListModel { - Component.onCompleted: { - append({subsection: Constants.settingsSubsection.messaging, - text: qsTr("Messaging"), - icon: "chat"}) - append({subsection: Constants.settingsSubsection.wallet, - text: qsTr("Wallet"), - icon: "wallet"}) - append({subsection: Constants.settingsSubsection.communitiesSettings, - text: qsTr("Communities"), - icon: "communities"}) - } - } - - property ListModel settingsMenuItems: ListModel { - Component.onCompleted: { - append({subsection: Constants.settingsSubsection.privacyAndSecurity, - text: qsTr("Privacy and security"), - icon: "security"}) - append({subsection: Constants.settingsSubsection.appearance, - text: qsTr("Appearance"), - icon: "appearance"}) - append({subsection: Constants.settingsSubsection.notifications, - text: qsTr("Notifications & Sounds"), - icon: "notification"}) - append({subsection: Constants.settingsSubsection.language, - text: qsTr("Language & Currency"), - icon: "language"}) - append({subsection: Constants.settingsSubsection.advanced, - text: qsTr("Advanced"), - icon: "settings"}) - } - } - - property ListModel extraMenuItems: ListModel { - Component.onCompleted: { - append({subsection: Constants.settingsSubsection.about, - text: qsTr("About"), - icon: "info"}) - append({subsection: Constants.settingsSubsection.signout, - text: qsTr("Sign out & Quit"), - icon: "logout"}) - } - } - readonly property alias ownShowcaseCommunitiesModel: ownShowcaseModels.adaptedCommunitiesSourceModel readonly property alias ownShowcaseAccountsModel: ownShowcaseModels.adaptedAccountsSourceModel readonly property alias ownShowcaseCollectiblesModel: ownShowcaseModels.adaptedCollectiblesSourceModel @@ -224,35 +150,6 @@ QtObject { aboutModuleInst.checkForUpdates() } - function getNameForSubsection(subsection) { - let i = 0; - for (; i < mainMenuItems.count; i++) { - let elem = mainMenuItems.get(i) - if(elem.subsection === subsection) - return elem.text - } - - for (i=0; i < appsMenuItems.count; i++) { - let elem = appsMenuItems.get(i) - if(elem.subsection === subsection) - return elem.text - } - - for (i=0; i < settingsMenuItems.count; i++) { - let elem = settingsMenuItems.get(i) - if(elem.subsection === subsection) - return elem.text - } - - for (i=0; i < extraMenuItems.count; i++) { - let elem = extraMenuItems.get(i) - if(elem.subsection === subsection) - return elem.text - } - - return "" - } - function addressWasShown(address) { return root.mainModuleInst.addressWasShown(address) } diff --git a/ui/app/AppLayouts/Profile/views/LeftTabView.qml b/ui/app/AppLayouts/Profile/views/LeftTabView.qml index 358b7f4c2b..e1b915ec53 100644 --- a/ui/app/AppLayouts/Profile/views/LeftTabView.qml +++ b/ui/app/AppLayouts/Profile/views/LeftTabView.qml @@ -1,25 +1,21 @@ import QtQuick 2.15 -import QtQuick.Controls 2.15 -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 import utils 1.0 -import shared 1.0 import shared.popups 1.0 -import "../panels" -import AppLayouts.Profile.stores 1.0 +import AppLayouts.Profile.controls 1.0 Item { id: root - property ProfileSectionStore store + property alias model: settingsList.model signal menuItemClicked(var event) - property alias settingsSubsection: profileMenu.settingsSubsection + property alias settingsSubsection: settingsList.currenctSubsection StatusNavigationPanelHeadline { id: title @@ -30,49 +26,38 @@ Item { anchors.leftMargin: Theme.bigPadding } - StatusScrollView { - id: scrollView - contentWidth: availableWidth - contentHeight: profileMenu.height + Theme.bigPadding + SettingsList { + id: settingsList + anchors.right: parent.right anchors.left: parent.left - leftPadding: Theme.halfPadding anchors.top: title.bottom - anchors.topMargin: Theme.halfPadding anchors.bottom: parent.bottom - MenuPanel { - id: profileMenu - width: scrollView.availableWidth - privacyStore: store.privacyStore - contactsStore: store.contactsStore - devicesStore: store.devicesStore - mainMenuItems: store.mainMenuItems - settingsMenuItems: store.settingsMenuItems - extraMenuItems: store.extraMenuItems - appsMenuItems: store.appsMenuItems - walletMenuItemEnabled: store.walletMenuItemEnabled + anchors.topMargin: Theme.bigPadding + anchors.bottomMargin: Theme.padding - objectName: "leftTabViewProfileMenu" + leftMargin: Theme.halfPadding + rightMargin: Theme.padding + bottomMargin: Theme.bigPadding - onMenuItemClicked: { - if (menu_item.subsection === Constants.settingsSubsection.backUpSeed) { - Global.openBackUpSeedPopup(); - return; - } - - let event = { accepted: false, item: menu_item.subsection }; - - root.menuItemClicked(event); - - if (event.accepted) - return; - - if (menu_item.subsection === Constants.settingsSubsection.signout) - return confirmDialog.open() - - profileMenu.settingsSubsection = menu_item.subsection + onClicked: { + if (subsection === Constants.settingsSubsection.backUpSeed) { + Global.openBackUpSeedPopup() + return } + + const event = { accepted: false, item: subsection }; + + root.menuItemClicked(event) + + if (event.accepted) + return + + if (subsection === Constants.settingsSubsection.signout) + return confirmDialog.open() + + root.settingsSubsection = subsection } } @@ -82,8 +67,6 @@ Item { headerSettings.title: qsTr("Sign out") confirmationText: qsTr("Make sure you have your account password and seed phrase stored. Without them you can lock yourself out of your account and lose funds.") confirmButtonLabel: qsTr("Sign out & Quit") - onConfirmButtonClicked: { - Qt.quit() - } + onConfirmButtonClicked: Qt.quit() } }