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

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.
This commit is contained in:
Michael Bradley, Jr 2020-05-19 14:44:45 -05:00 committed by Iuri Matias
parent 5cc31ae28d
commit d673915975
12 changed files with 674 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,7 +1,3 @@
libstatus.a
libstatus.dylib
nim_status_client
nim_libstatus
data/
noBackup/
.idea

11
nim_status_client.nimble
View File

@ -1,10 +1,13 @@
[Package]
# Package
version = "0.1.0"
author = "Richard Ramos"
description = "A new awesome nimble package"
license = "MIT"
srcDir = "src"
bin = "nim_status_client"
bin = @["nim_status_client"]
skipExt = @["nim"]
[Deps]
Requires: "nim >= 1.0.0, nimqml >= 0.7.0, stint"
# Deps
requires "nim >= 1.0.0", " nimqml >= 0.7.0", "stint"

43
ui/app/AppLayouts/Browser/BrowserLayout.qml Normal file
View File

@ -0,0 +1,43 @@
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"
Item {
id: browserView
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
StackLayout {
id: browserContainer
anchors.top: parent.top
anchors.topMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
Text {
id: element1
text: qsTr("Ðapp Browser")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Medium
font.pixelSize: 20
}
}
}

4
ui/app/AppLayouts/ChatLayout.qml → ui/app/AppLayouts/Chat/ChatLayout.qml
View File

@ -3,7 +3,7 @@ import QtQuick.Controls 1.3
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../imports"
import "../../../imports"
SplitView {
property alias searchStr: searchText.text
@ -75,7 +75,7 @@ SplitView {
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: "../img/search.svg"
source: "../../img/search.svg"
}
MouseArea {

2
ui/app/AppLayouts/NodeLayout.qml → ui/app/AppLayouts/Node/NodeLayout.qml
View File

@ -3,7 +3,7 @@ import QtQuick.Controls 1.3
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../imports"
import "../../../imports"
SplitView {
id: nodeView

367
ui/app/AppLayouts/Profile/LeftTab.qml Normal file
View File

@ -0,0 +1,367 @@
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
source: "../../img/placeholder-profile-large.jpg"
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
text: qsTr("Happy Extraneous Dancer")
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}
}
##^##*/

235
ui/app/AppLayouts/Profile/ProfileLayout.qml Normal file
View File

@ -0,0 +1,235 @@
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}
}
##^##*/

1
ui/app/AppLayouts/Profile/qmldir Normal file
View File

@ -0,0 +1 @@
LeftTab 1.0 LeftTab.qml

6
ui/app/AppLayouts/qmldir
View File

@ -1,3 +1,5 @@
ChatLayout 1.0 ChatLayout.qml
NodeLayout 1.0 NodeLayout.qml
BrowserLayout 1.0 Browser/BrowserLayout.qml
ChatLayout 1.0 Chat/ChatLayout.qml
NodeLayout 1.0 Node/NodeLayout.qml
ProfileLayout 1.0 Profile/ProfileLayout.qml
WalletLayout 1.0 Wallet/WalletLayout.qml

14
ui/app/AppMain.qml
View File

@ -172,12 +172,18 @@ RowLayout {
Layout.fillHeight: true
}
Item {
// browser
BrowserLayout {
id: browserLayoutContainer
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
Item {
// profile
ProfileLayout {
id: profileLayoutContainer
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
NodeLayout {

BIN
ui/app/img/placeholder-profile-large.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

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

@ -49,8 +49,10 @@ DISTFILES += \
Inter-ThinItalic.otf \
Inter-V.otf \
Theme.qml \
app/AppLayouts/ChatLayout.qml \
app/AppLayouts/NodeLayout.qml \
app/AppLayouts/Browser/BrowserLayout.qml \
app/AppLayouts/Chat/ChatLayout.qml \
app/AppLayouts/Node/NodeLayout.qml \
app/AppLayouts/Profile/ProfileLayout.qml \
app/AppLayouts/Wallet/LeftTab.qml \
app/AppLayouts/Wallet/WalletLayout.qml \
app/AppLayouts/Wallet/qmldir \