status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/ui/app/AppLayouts/Profile/LeftTab.qml

368 lines
13 KiB
QML
Raw Normal View History

feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
import QtGraphicalEffects 1.12
import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../imports"
import "../../../shared"
ColumnLayout {
readonly property int w: 340
property alias currentTab: profileScreenButtons.currentIndex
id: profileInfoContainer
width: w
spacing: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
RowLayout {
id: profileHeader
height: 240
Layout.fillWidth: true
width: profileInfoContainer.w
Rectangle {
id: profileHeaderContent
height: parent.height
Layout.fillWidth: true
Item {
id: profileImgNameContainer
width: profileHeaderContent.width
height: profileHeaderContent.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
Image {
id: profileImg
simplify controllers and views, make everything more consistent simplify controllers and views, make everything more consistent refactor wallet to use asset model move some of wallet logic away from the controller move ChatMessage to model move chatItem model organize models folder simplify chat message and chat item rename messageList to message_list simply addresses in the controller rename mailservers list refactor how profile is set refactor/simplify profile view refactor/simplify adding mailservers rename wallet view simplify wallet assets rename nodeView to view extract channel list view extract channel list view refactor channel list / chats view move signals out of app folder address code reviews
2020-05-22 23:33:36 +00:00
source: profileModel.profile.identicon
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
width: 80
height: 80
fillMode: Image.PreserveAspectCrop
anchors.horizontalCenter: parent.horizontalCenter
property bool rounded: true
property bool adapt: false
y: 78
layer.enabled: rounded
layer.effect: OpacityMask {
maskSource: Item {
width: profileImg.width
height: profileImg.height
Rectangle {
anchors.centerIn: parent
width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height)
height: profileImg.adapt ? profileImg.height : width
radius: Math.min(width, height)
}
}
}
}
Text {
id: profileName
simplify controllers and views, make everything more consistent simplify controllers and views, make everything more consistent refactor wallet to use asset model move some of wallet logic away from the controller move ChatMessage to model move chatItem model organize models folder simplify chat message and chat item rename messageList to message_list simply addresses in the controller rename mailservers list refactor how profile is set refactor/simplify profile view refactor/simplify adding mailservers rename wallet view simplify wallet assets rename nodeView to view extract channel list view extract channel list view refactor channel list / chats view move signals out of app folder address code reviews
2020-05-22 23:33:36 +00:00
text: profileModel.profile.username
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
anchors.top: profileImg.bottom
anchors.topMargin: 10
anchors.horizontalCenterOffset: 0
anchors.horizontalCenter: parent.horizontalCenter
font.weight: Font.Medium
font.pixelSize: 20
}
}
}
}
RowLayout {
readonly property int btnheight: 42
id: profileTabBar
width: profileInfoContainer.w
height: btnheight * 10
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
id: profileTabBarBg
color: "#ffffff"
height: parent.height
Layout.fillHeight: true
Layout.fillWidth: true
TabBar {
id: profileScreenButtons
width: profileInfoContainer.w
height: parent.height
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
currentIndex: 0
spacing: 0
background: Rectangle {
color: "#00000000"
}
TabButton {
id: ensTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.top: parent.top
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element1
color: "#000000"
text: qsTr("ENS usernames")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: contactsTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: ensTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element2
color: "#000000"
text: qsTr("Contacts")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: privacyTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: contactsTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element3
color: "#000000"
text: qsTr("Privacy and security")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: syncTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: privacyTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element4
color: "#000000"
text: qsTr("Sync settings")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: languageTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: syncTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element5
color: "#000000"
text: qsTr("Language settings")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: notificationsTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: languageTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element6
color: "#000000"
text: qsTr("Notifications settings")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: advancedTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: notificationsTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element7
color: "#000000"
text: qsTr("Advanced settings")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: helpTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: advancedTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element8
color: "#000000"
text: qsTr("Need help?")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: aboutTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: helpTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element9
color: "#000000"
text: qsTr("About")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
TabButton {
id: signoutTabButton
width: profileInfoContainer.w
height: profileTabBar.btnheight
text: ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: aboutTabButton.bottom
anchors.topMargin: 0
background: Rectangle {
color: Theme.transparent
}
Text {
id: element10
color: "#000000"
text: qsTr("Sign out")
anchors.left: parent.left
anchors.leftMargin: 72
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Medium
font.pixelSize: 14
}
}
}
}
}
}
/*##^##
Designer {
D{i:15;anchors_height:56}
}
##^##*/