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/ProfileLayout.qml

236 lines
6.1 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"
import "."
Item {
id: profileView
x: 0
y: 0
Layout.fillHeight: true
Layout.fillWidth: true
// Those anchors show a warning too, but whithout them, there is a gap on the right
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
LeftTab {
id: leftTab
}
StackLayout {
id: profileContainer
anchors.top: parent.top
anchors.topMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: leftTab.right
anchors.leftMargin: 0
currentIndex: leftTab.currentTab
Item {
id: ensContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element1
text: qsTr("ENS usernames")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: contactsContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element2
text: qsTr("Contacts")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: privacyContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element3
text: qsTr("Privacy and security settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: syncContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element4
text: qsTr("Sync settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: languageContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element5
text: qsTr("Language settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: notificationsContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element6
text: qsTr("Notifications settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: advancedContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element7
text: qsTr("Advanced settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: helpContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element8
text: qsTr("Help menus: FAQ, Glossary, etc.")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: aboutContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element9
text: qsTr("About the app")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
Item {
id: signoutContainer
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element10
text: qsTr("Sign out controls")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/