status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Pascal Precht 2021-08-27 12:44:39 +02:00 committed by Pascal Precht
parent 414637a260
commit 5b674cee5a
5 changed files with 48 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/app/AppLayouts/Profile/LeftTab.qml
View File

@ -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 {

68
ui/app/AppLayouts/Profile/LeftTab/Menu.qml
View File

@ -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()

91
ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml
View File

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

30
ui/app/AppLayouts/Profile/LeftTab/constants.js
View File

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

1
ui/nim-status-client.pro
View File

@ -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 \