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

305 lines
8.2 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
}
add contact list
2020-05-24 22:23:00 +00:00
Component {
id: contactsList
Item {
height: 56
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
Column {
Row {
Text {
text: name
font.weight: Font.Bold
font.pixelSize: 14
}
}
Row {
Text {
text: address
font.weight: Font.Bold
font.pixelSize: 12
}
}
}
}
}
ListView {
id: contactListView
anchors.topMargin: 48
anchors.top: element4.bottom
anchors.fill: parent
model: profileModel.contactList
delegate: contactsList
}
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
}
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
}
ui: render mailservers list
2020-05-22 14:06:47 +00:00
Component {
id: mailserversList
RadioButton {
text: name
checked: index == 0 ? true: false
}
}
ListView {
id: mailServersListView
anchors.topMargin: 48
anchors.top: element4.bottom
anchors.fill: parent
model: profileModel.mailserversList
delegate: mailserversList
}
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
}
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
}
add mouse hand pointer to chat list; add simple FAQ (testing QT urls) add mouse hand pointer to chat list; add simple FAQ (testing QT urls) 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 simplify callRPC add raw rpc method and make node section use it add node model move accounts model inside onboard controller (for now) make events usage consistent among models and controllers; separate model events from app events make mouse show hand cursor when hovering over chat list add FAQ url
2020-05-22 23:33:36 +00:00
Text {
anchors.centerIn: parent
text: "<a href='https://status.im/docs/FAQs.html'>Frequently asked questions</a>"
onLinkActivated: Qt.openUrlExternally(link)
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
}
}
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
}
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}
}
##^##*/