refactor(ProfileView): use StatusQ components to render profile menu

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: qsTr("Profile")
-        text: qsTrId("profile")
         anchors.top: parent.top
         anchors.topMargin: Style.current.padding
         anchors.horizontalCenter: parent.horizontalCenter
-        font.weight: Font.Bold
-        font.pixelSize: 17
     }
 
     Menu {

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 {
+            delegate: StatusNavigationListItem {
-                menuItemId: modelData.id
+                itemId: modelData.id
-                text: modelData .text
+                title: modelData.text
-                source: "../../../img/profile/" + modelData.filename
+                icon.name: modelData.icon
-                active: Config.currentMenuTab === modelData.id
+                selected: Config.currentMenuTab === modelData.id
-                Layout.fillWidth: true
+                onClicked: Config.currentMenuTab = modelData.id
-                width: profileMenu.width
-                onClicked: {
-                    Config.currentMenuTab = modelData.id
-                }
             }
         }
 
-        StyledText {
+        StatusListSectionHeadline { text: "Settings" }
-            topPadding: 10
-            leftPadding: 20
-            text: "Settings"
-            color: Style.current.secondaryText
-        }
 
         Repeater {
             model: ProfileConstants.settingsMenuButtons
-            delegate: MenuButton {
+            delegate: StatusNavigationListItem {
-                menuItemId: modelData.id
+                itemId: modelData.id
-                text: modelData .text
+                title: modelData.text
-                source: "../../../img/profile/" + modelData.filename
+                icon.name: modelData.icon
-                active: Config.currentMenuTab === modelData.id
+                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 {
+        Item {
-            text: " "
+            id: invisibleSeparator
+            height: 16
+            width: parent.width
         }
 
         Repeater {
             model: ProfileConstants.extraMenuButtons
-            delegate: MenuButton {
+            delegate: StatusNavigationListItem {
-                menuItemId: modelData.id
+                itemId: modelData.id
-                text: modelData.text
+                title: modelData.text
-                source: "../../../img/profile/" + modelData.filename
+                icon.name: modelData.icon
-                active: Config.currentMenuTab === modelData.id
+                selected: Config.currentMenuTab === modelData.id
-                Layout.fillWidth: true
+                visible: modelData.ifEnabled !== "browser" || appSettings.isBrowserEnabled
-                width: profileMenu.width
                 onClicked: function () {
                     if (modelData.function === "exit") {
                         return Qt.quit()

ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml

@@ -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}
-}
-##^##*/

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"
                    }]

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 \