diff --git a/ui/app/AppLayouts/Profile/LeftTab.qml b/ui/app/AppLayouts/Profile/LeftTab.qml index e9a7eb4fbd..f728fc9088 100644 --- a/ui/app/AppLayouts/Profile/LeftTab.qml +++ b/ui/app/AppLayouts/Profile/LeftTab.qml @@ -1,23 +1,20 @@ import QtQuick 2.13 + +import StatusQ.Components 0.1 import "../../../imports" -import "../../../shared" import "./LeftTab" -Rectangle { +Item { property alias changeProfileSection: profileMenu.changeProfileSection id: profileInfoContainer - color: Style.current.secondaryMenuBackground - StyledText { + StatusNavigationPanelHeadline { id: title - //% "Profile" - text: qsTrId("profile") + text: qsTr("Profile") anchors.top: parent.top anchors.topMargin: Style.current.padding anchors.horizontalCenter: parent.horizontalCenter - font.weight: Font.Bold - font.pixelSize: 17 } Menu { diff --git a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml index 7ceda6fc48..45bd4e4629 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml +++ b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml @@ -1,17 +1,17 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 + +import StatusQ.Components 0.1 + import "../../../../imports" -import "../../../../shared" -import "./components" import "./constants.js" as ProfileConstants ScrollView { - readonly property int btnheight: 42 - readonly property int w: 340 property var changeProfileSection: function (sectionId) { Config.currentMenuTab = sectionId } + ScrollBar.horizontal.policy: Qt.ScrollBarAlwaysOff contentHeight: menuItems.height + 24 id: profileMenu @@ -19,59 +19,47 @@ ScrollView { Column { id: menuItems - spacing: 8 + spacing: 4 Repeater { model: ProfileConstants.mainMenuButtons - delegate: MenuButton { - menuItemId: modelData.id - text: modelData .text - source: "../../../img/profile/" + modelData.filename - active: Config.currentMenuTab === modelData.id - Layout.fillWidth: true - width: profileMenu.width - onClicked: { - Config.currentMenuTab = modelData.id - } + delegate: StatusNavigationListItem { + itemId: modelData.id + title: modelData.text + icon.name: modelData.icon + selected: Config.currentMenuTab === modelData.id + onClicked: Config.currentMenuTab = modelData.id } } - StyledText { - topPadding: 10 - leftPadding: 20 - text: "Settings" - color: Style.current.secondaryText - } + StatusListSectionHeadline { text: "Settings" } Repeater { model: ProfileConstants.settingsMenuButtons - delegate: MenuButton { - menuItemId: modelData.id - text: modelData .text - source: "../../../img/profile/" + modelData.filename - active: Config.currentMenuTab === modelData.id + delegate: StatusNavigationListItem { + itemId: modelData.id + title: modelData.text + icon.name: modelData.icon + selected: Config.currentMenuTab === modelData.id + onClicked: Config.currentMenuTab = modelData.id visible: modelData.ifEnabled !== "browser" || appSettings.isBrowserEnabled - Layout.fillWidth: true - width: profileMenu.width - onClicked: function () { - Config.currentMenuTab = modelData.id - } } } - StyledText { - text: " " + Item { + id: invisibleSeparator + height: 16 + width: parent.width } Repeater { model: ProfileConstants.extraMenuButtons - delegate: MenuButton { - menuItemId: modelData.id - text: modelData.text - source: "../../../img/profile/" + modelData.filename - active: Config.currentMenuTab === modelData.id - Layout.fillWidth: true - width: profileMenu.width + delegate: StatusNavigationListItem { + itemId: modelData.id + title: modelData.text + icon.name: modelData.icon + selected: Config.currentMenuTab === modelData.id + visible: modelData.ifEnabled !== "browser" || appSettings.isBrowserEnabled onClicked: function () { if (modelData.function === "exit") { return Qt.quit() diff --git a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml deleted file mode 100644 index 75fe89bb5c..0000000000 --- a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml +++ /dev/null @@ -1,91 +0,0 @@ -import QtQuick 2.13 -import QtGraphicalEffects 1.13 -import "../../../../../imports" -import "../../../../../shared" -import "../constants.js" as ProfileConstants - - -Rectangle { - property int menuItemId: -1 - property bool hovered: false - property bool active: false - property url source: "../../../../img/eye.svg" - property string text: "My Profile" - signal clicked() - - id: menuButton - color: { - if (active) { - return Style.current.menuBackgroundActive - } - if (hovered) { - return Style.current.menuBackgroundHover - } - return Style.current.transparent - } - border.width: 0 - height: 48 - width: parent.width - radius: Style.current.radius - - SVGImage { - id: iconImage - height: 24 - width: 24 - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.verticalCenter: parent.verticalCenter - source: menuButton.source - - ColorOverlay { - anchors.fill: parent - source: parent - color: Style.current.blue - } - } - - StyledText { - text: menuButton.text - anchors.left: iconImage.right - anchors.leftMargin: Style.current.padding - anchors.verticalCenter: parent.verticalCenter - } - - Rectangle { - visible: !profileModel.mnemonic.isBackedUp && !active && ProfileConstants.PRIVACY_AND_SECURITY === menuItemId - anchors.verticalCenter: parent.verticalCenter - anchors.right: menuButton.right - anchors.rightMargin: 10 - radius: 9 - color: Style.current.blue - width: 18 - height: 18 - Text { - font.pixelSize: 12 - color: Style.current.white - anchors.centerIn: parent - text: "1" - } - } - - MouseArea { - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - hoverEnabled: true - onEntered: { - menuButton.hovered = true - } - onExited: { - menuButton.hovered = false - } - onClicked: function () { - menuButton.clicked() - } - } -} - -/*##^## -Designer { - D{i:0;formeditorColor:"#ffffff";height:48;width:300} -} -##^##*/ diff --git a/ui/app/AppLayouts/Profile/LeftTab/constants.js b/ui/app/AppLayouts/Profile/LeftTab/constants.js index 79cb2c589d..bf27dc135d 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/constants.js +++ b/ui/app/AppLayouts/Profile/LeftTab/constants.js @@ -17,67 +17,67 @@ var SIGNOUT = 14 var mainMenuButtons = [{ "id": PROFILE, "text": qsTr("My Profile"), - "filename": "myProfile.svg" + "icon": "profile" }, { "id": CONTACTS, "text": qsTr("Contacts"), - "filename": "contacts.svg" + "icon": "contact" }, { "id": ENS, "text": qsTr("ENS usernames"), - "filename": "ensUsernames.svg" + "icon": "username" }] var settingsMenuButtons = [{ "id": PRIVACY_AND_SECURITY, "text": qsTr("Privacy and security"), - "filename": "security.svg" + "icon": "security" }, { "id": APPEARANCE, "text": qsTr("Appearance"), - "filename": "appearance.svg" + "icon": "appearance" }, { "id": SOUND, "text": qsTr("Sound"), - "filename": "sound.svg" + "icon": "sound" }, { "id": LANGUAGE, "text": qsTr("Language"), - "filename": "globe.svg" + "icon": "language" }, { "id": NOTIFICATIONS, "text": qsTr("Notifications"), - "filename": "notifications.svg" + "icon": "notification" }, { "id": SYNC_SETTINGS, "text": qsTr("Sync settings"), - "filename": "sync.svg" + "icon": "mobile" }, { "id": DEVICES_SETTINGS, "text": qsTr("Devices settings"), - "filename": "sync.svg" + "icon": "mobile" }, { "id": BROWSER_SETTINGS, "text": qsTr("Browser settings"), - "filename": "../compassActive.svg", + "icon": "browser", "ifEnabled": "browser" }, { "id": ADVANCED, "text": qsTr("Advanced"), - "filename": "advanced.svg" + "icon": "settings" }] var extraMenuButtons = [{ "id": NEED_HELP, "text": qsTr("Need help?"), - "filename": "help.svg" + "icon": "help" }, { "id": ABOUT, "text": qsTr("About"), - "filename": "about.svg" + "icon": "info" }, { "id": SIGNOUT, "function": "exit", "text": qsTr("Sign out & Quit"), - "filename": "signout.svg" + "icon": "logout" }] diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index a895d563ea..3d95adb2a0 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -179,7 +179,6 @@ DISTFILES += \ app/AppLayouts/Chat/components/GroupInfoPopup.qml \ app/AppLayouts/Chat/data/channelList.js \ app/AppLayouts/Profile/LeftTab/Constants.js \ - app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \ app/AppLayouts/Chat/data/EmojiReactions.qml \ app/AppLayouts/Profile/Sections/AppearanceContainer.qml \ app/AppLayouts/Profile/Sections/NetworksModal.qml \