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

fix: improve profile sections min width and scaling

This commit is contained in:
Jonathan Rainville 2021-04-08 11:44:58 -04:00 committed by Iuri Matias
parent 3fe9f6c6b8
commit bf67c941ff
21 changed files with 328 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/app/AppLayouts/Profile/ProfileLayout.qml
View File

@ -6,8 +6,8 @@ import "../../../shared"
import "./Sections"
SplitView {
property int contentMargin: 120
property int contentMaxWidth: 624
property int contentMinWidth: 450
property int topMargin: 46
property alias changeProfileSection: leftTab.changeProfileSection
@ -34,6 +34,8 @@ SplitView {
}
StackLayout {
property int profileContentWidth: Math.max(contentMinWidth, Math.min(profileContainer.width * 0.8, contentMaxWidth))
id: profileContainer
anchors.top: parent.top
anchors.topMargin: 0

3
ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
View File

@ -9,13 +9,14 @@ Item {
id: aboutContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Column {
id: generalColumn
spacing: Style.current.bigPadding
anchors.top: parent.top
anchors.topMargin: 46
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
StatusSectionDescItem {

4
ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
View File

@ -10,12 +10,14 @@ Item {
id: advancedContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Column {
id: generalColumn
anchors.top: parent.top
anchors.topMargin: topMargin
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
StatusSettingsLineButton {

3
ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml
View File

@ -37,7 +37,8 @@ ScrollView {
Item {
id: appearanceContainer
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
height: this.childrenRect.height + 100

4
ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml
View File

@ -10,6 +10,7 @@ Item {
id: root
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
property Component dappListPopup: DappList {
onClosed: destroy()
@ -22,7 +23,8 @@ Item {
anchors.top: parent.top
anchors.topMargin: topMargin
anchors.bottom: parent.bottom
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Column {

4
ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
View File

@ -12,12 +12,14 @@ Item {
property bool isPending: false
height: parent.height
Layout.fillWidth: true
clip: true
Item {
anchors.top: parent.top
anchors.topMargin: 32
anchors.bottom: parent.bottom
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
SearchBox {

1
ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml
View File

@ -14,6 +14,7 @@ Item {
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Item {
id: firstTimeSetup

553
ui/app/AppLayouts/Profile/Sections/Ens/List.qml
View File

@ -24,306 +24,313 @@ Item {
property int timestamp: 1577872140
function shouldDisplayExampleMessage(){
return profileModel.ens.rowCount() > 0 && profileModel.ens.pendingLen() != profileModel.ens.rowCount() && profileModel.ens.preferredUsername !== ""
return profileModel.ens.rowCount() > 0 && profileModel.ens.pendingLen() !== profileModel.ens.rowCount() && profileModel.ens.preferredUsername !== ""
}
anchors.fill: parent
Component {
id: statusENS
Item {
Text {
id: usernameTxt
//% "(pending)"
text: username.substr(0, username.indexOf(".")) + " " + (isPending ? qsTrId("-pending-") : "")
color: Style.current.textColor
}
Item {
anchors.top: parent.top
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Text {
Component {
id: statusENS
Item {
Text {
id: usernameTxt
//% "(pending)"
text: username.substr(0, username.indexOf(".")) + " " + (isPending ? qsTrId("-pending-") : "")
color: Style.current.textColor
}
anchors.top: usernameTxt.bottom
anchors.topMargin: 2
text: username.substr(username.indexOf("."))
color: Style.current.darkGrey
Text {
anchors.top: usernameTxt.bottom
anchors.topMargin: 2
text: username.substr(username.indexOf("."))
color: Style.current.darkGrey
}
}
}
}
Component {
id: normalENS
Item {
Text {
id: usernameTxt
//% "(pending)"
text: username + " " + (isPending ? qsTrId("-pending-") : "")
font.pixelSize: 16
color: Style.current.textColor
anchors.top: parent.top
anchors.topMargin: 5
Component {
id: normalENS
Item {
Text {
id: usernameTxt
//% "(pending)"
text: username + " " + (isPending ? qsTrId("-pending-") : "")
font.pixelSize: 16
color: Style.current.textColor
anchors.top: parent.top
anchors.topMargin: 5
}
}
}
}
Component {
id: ensDelegate
Item {
height: 45
Component {
id: ensDelegate
Item {
height: 45
anchors.left: parent.left
anchors.right: parent.right
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: selectEns(model.username)
}
Rectangle {
id: circle
width: 35
height: 35
radius: 35
color: Style.current.blue
StyledText {
text: "@"
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 16
color: Style.current.white
anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
}
}
Loader {
sourceComponent: model.username.endsWith(".stateofus.eth") ? statusENS : normalENS
property string username: model.username
property bool isPending: model.isPending
active: true
anchors.left: circle.right
anchors.leftMargin: Style.current.smallPadding
}
}
}
ENSPopup {
id: ensPopup
}
StyledText {
id: sectionTitle
//% "ENS usernames"
text: qsTrId("ens-usernames")
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
Item {
id: addUsername
anchors.top: sectionTitle.bottom
anchors.topMargin: Style.current.bigPadding
width: addButton.width + usernameText.width + Style.current.padding
height: addButton.height
StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: usernameText
//% "Add username"
text: qsTrId("ens-add-username")
color: Style.current.blue
anchors.left: addButton.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: addButton.verticalCenter
font.pixelSize: 15
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: selectEns(model.username)
onClicked: addBtnClicked()
}
}
StyledText {
id: usernamesLabel
//% "Your usernames"
text: qsTrId("ens-your-usernames")
anchors.left: parent.left
anchors.top: addUsername.bottom
anchors.topMargin: 24
font.pixelSize: 16
}
Item {
anchors.top: usernamesLabel.bottom
anchors.topMargin: 10
anchors.left: parent.left
anchors.right: parent.right
height: 200
id: ensList
ScrollView {
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: lvEns.contentHeight > lvEns.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
ListView {
id: lvEns
anchors.fill: parent
model: profileModel.ens
spacing: 10
clip: true
delegate: ensDelegate
}
}
}
Separator {
id: separator
anchors.topMargin: Style.current.padding
anchors.top: ensList.bottom
}
StyledText {
id: chatSettingsLabel
visible: profileModel.ens.rowCount() > 0 && profileModel.ens.pendingLen() != profileModel.ens.rowCount()
//% "Chat settings"
text: qsTrId("chat-settings")
anchors.left: parent.left
anchors.top: ensList.bottom
anchors.topMargin: 24
font.pixelSize: 16
}
Item {
width: childrenRect.width
height: childrenRect.height
id: preferredUsername
anchors.left: parent.left
anchors.top: chatSettingsLabel.bottom
anchors.topMargin: 24
StyledText {
id: usernameLabel
visible: chatSettingsLabel.visible
//% "Primary Username"
text: qsTrId("primary-username")
font.pixelSize: 14
font.weight: Font.Bold
}
StyledText {
id: usernameLabel2
visible: chatSettingsLabel.visible
//% "None selected"
text: profileModel.ens.preferredUsername || qsTrId("none-selected")
anchors.left: usernameLabel.right
anchors.leftMargin: Style.current.padding
font.pixelSize: 14
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: ensPopup.open()
}
}
Item {
id: messagesShownAs
visible: shouldDisplayExampleMessage()
anchors.top: !visible ? separator.bottom : preferredUsername.bottom
anchors.topMargin: Style.current.padding * 2
UserImage {
id: chatImage
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.top: parent.top
anchors.topMargin: 20
}
UsernameLabel {
id: chatName
label.text: "@" + (profileModel.ens.preferredUsername.replace(".stateofus.eth", ""))
label.color: Style.current.blue
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: chatImage.right
}
Rectangle {
id: circle
width: 35
property int chatVerticalPadding: 7
property int chatHorizontalPadding: 12
id: chatBox
color: Style.current.secondaryBackground
height: 35
radius: 35
color: Style.current.blue
width: 80
radius: 16
anchors.left: chatImage.right
anchors.leftMargin: 8
anchors.top: chatImage.top
StyledText {
text: "@"
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 16
color: Style.current.white
anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
ChatText {
id: chatText
anchors.top: parent.top
anchors.topMargin: chatBox.chatVerticalPadding
anchors.left: parent.left
anchors.leftMargin: chatBox.chatHorizontalPadding
width: parent.width
anchors.right: parent.right
}
}
Loader {
sourceComponent: model.username.endsWith(".stateofus.eth") ? statusENS : normalENS
property string username: model.username
property bool isPending: model.isPending
active: true
anchors.left: circle.right
anchors.leftMargin: Style.current.smallPadding
}
}
}
ENSPopup {
id: ensPopup
}
StyledText {
id: sectionTitle
//% "ENS usernames"
text: qsTrId("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: addUsername
anchors.top: sectionTitle.bottom
anchors.topMargin: Style.current.bigPadding
width: addButton.width + usernameText.width + Style.current.padding
height: addButton.height
StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: usernameText
//% "Add username"
text: qsTrId("ens-add-username")
color: Style.current.blue
anchors.left: addButton.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: addButton.verticalCenter
font.pixelSize: 15
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: addBtnClicked()
}
}
StyledText {
id: usernamesLabel
//% "Your usernames"
text: qsTrId("ens-your-usernames")
anchors.left: parent.left
anchors.top: addUsername.bottom
anchors.topMargin: 24
font.pixelSize: 16
}
Item {
anchors.top: usernamesLabel.bottom
anchors.topMargin: 10
anchors.left: parent.left
anchors.right: parent.right
height: 200
id: ensList
ScrollView {
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: lvEns.contentHeight > lvEns.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
ListView {
id: lvEns
anchors.fill: parent
model: profileModel.ens
spacing: 10
clip: true
delegate: ensDelegate
}
}
}
Separator {
id: separator
anchors.topMargin: Style.current.padding
anchors.top: ensList.bottom
}
StyledText {
id: chatSettingsLabel
visible: profileModel.ens.rowCount() > 0 && profileModel.ens.pendingLen() != profileModel.ens.rowCount()
//% "Chat settings"
text: qsTrId("chat-settings")
anchors.left: parent.left
anchors.top: ensList.bottom
anchors.topMargin: 24
font.pixelSize: 16
}
Item {
width: childrenRect.width
height: childrenRect.height
id: preferredUsername
anchors.left: parent.left
anchors.top: chatSettingsLabel.bottom
anchors.topMargin: 24
StyledText {
id: usernameLabel
visible: chatSettingsLabel.visible
//% "Primary Username"
text: qsTrId("primary-username")
font.pixelSize: 14
font.weight: Font.Bold
}
StyledText {
id: usernameLabel2
visible: chatSettingsLabel.visible
//% "None selected"
text: profileModel.ens.preferredUsername || qsTrId("none-selected")
anchors.left: usernameLabel.right
anchors.leftMargin: Style.current.padding
font.pixelSize: 14
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: ensPopup.open()
}
}
Item {
id: messagesShownAs
visible: shouldDisplayExampleMessage()
anchors.top: !visible ? separator.bottom : preferredUsername.bottom
anchors.topMargin: Style.current.padding * 2
UserImage {
id: chatImage
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.top: parent.top
anchors.topMargin: 20
}
UsernameLabel {
id: chatName
label.text: "@" + (profileModel.ens.preferredUsername.replace(".stateofus.eth", ""))
label.color: Style.current.blue
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: chatImage.right
}
Rectangle {
property int chatVerticalPadding: 7
property int chatHorizontalPadding: 12
id: chatBox
color: Style.current.secondaryBackground
height: 35
width: 80
radius: 16
anchors.left: chatImage.right
anchors.leftMargin: 8
anchors.top: chatImage.top
ChatText {
id: chatText
anchors.top: parent.top
anchors.topMargin: chatBox.chatVerticalPadding
anchors.left: parent.left
anchors.leftMargin: chatBox.chatHorizontalPadding
width: parent.width
anchors.right: parent.right
RectangleCorner {}
}
RectangleCorner {}
ChatTime {
id: chatTime
anchors.top: chatBox.bottom
anchors.topMargin: 4
anchors.bottomMargin: Style.current.padding
anchors.right: chatBox.right
anchors.rightMargin: Style.current.padding
}
StyledText {
anchors.top: chatTime.bottom
anchors.left: chatImage.left
anchors.topMargin: Style.current.padding
//% "You’re displaying your ENS username in chats"
text: qsTrId("you-re-displaying-your-ens-username-in-chats")
font.pixelSize: 14
color: Style.current.secondaryText
}
}
ChatTime {
id: chatTime
anchors.top: chatBox.bottom
anchors.topMargin: 4
anchors.bottomMargin: Style.current.padding
anchors.right: chatBox.right
anchors.rightMargin: Style.current.padding
}
StyledText {
anchors.top: chatTime.bottom
anchors.left: chatImage.left
anchors.topMargin: Style.current.padding
//% "You’re displaying your ENS username in chats"
text: qsTrId("you-re-displaying-your-ens-username-in-chats")
font.pixelSize: 14
color: Style.current.secondaryText
}
}
Connections {
target: profileModel.ens
onPreferredUsernameChanged: {
messagesShownAs.visible = shouldDisplayExampleMessage()
}
onUsernameConfirmed: {
messagesShownAs.visible = shouldDisplayExampleMessage()
chatSettingsLabel.visible = true
Connections {
target: profileModel.ens
onPreferredUsernameChanged: {
messagesShownAs.visible = shouldDisplayExampleMessage()
}
onUsernameConfirmed: {
messagesShownAs.visible = shouldDisplayExampleMessage()
chatSettingsLabel.visible = true
}
}
}
}

6
ui/app/AppLayouts/Profile/Sections/Ens/Search.qml
View File

@ -60,7 +60,7 @@ Item {
onClosed: {
transactionDialog.closed()
}
ensUsername: ensUsername.text
ensUsername: ensUsername.text || ""
width: 400
height: 400
}
@ -69,7 +69,7 @@ Item {
Item {
id: ensContainer
anchors.top: parent.top
width: 624
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Rectangle {
@ -245,7 +245,9 @@ Item {
id: validationResult
text: validationMessage
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
anchors.top: ensTypeRect.bottom
wrapMode: Text.WordWrap
anchors.topMargin: Style.current.bigPadding
}
}

2
ui/app/AppLayouts/Profile/Sections/Ens/Welcome.qml
View File

@ -22,7 +22,7 @@ Item {
Item {
id: contentItem
width: 624
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Image {

1
ui/app/AppLayouts/Profile/Sections/EnsContainer.qml
View File

@ -10,6 +10,7 @@ Item {
id: ensContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
property bool showSearchScreen: false
property string addedUsername: ""

8
ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
View File

@ -9,7 +9,7 @@ Item {
id: helpContainer
height: parent.height
Layout.fillWidth: true
clip: true
ScrollView {
height: parent.height
@ -20,7 +20,8 @@ Item {
id: glossary
anchors.top: parent.top
height: this.childrenRect.height
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
StatusSectionHeadline {
@ -126,7 +127,8 @@ Item {
anchors.top: glossary.bottom
anchors.topMargin: Style.current.bigPadding * 2
height: this.childrenRect.height
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
StyledText {

4
ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
View File

@ -10,6 +10,7 @@ Item {
id: languageContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
property Component languagePopup: LanguageModal {}
@ -17,7 +18,8 @@ Item {
anchors.top: parent.top
anchors.topMargin: topMargin
anchors.bottom: parent.bottom
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Column {

4
ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
View File

@ -12,6 +12,7 @@ Item {
id: profileHeaderContent
anchors.fill: parent
clip: true
Component {
id: changeProfileModalComponent
@ -22,7 +23,8 @@ Item {
id: profileImgNameContainer
anchors.top: parent.top
anchors.topMargin: 64
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
height: this.childrenRect.height

2
ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml
View File

@ -15,7 +15,7 @@ ScrollView {
Item {
id: notificationsContainer
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
height: this.childrenRect.height + 100

4
ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
View File

@ -10,12 +10,14 @@ Item {
id: privacyContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Column {
id: containerColumn
anchors.top: parent.top
anchors.topMargin: topMargin
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
StatusSectionHeadline {

1
ui/app/AppLayouts/Profile/Sections/SignoutContainer.qml
View File

@ -11,6 +11,7 @@ Item {
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
StyledText {
id: txtTitle

4
ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml
View File

@ -9,9 +9,11 @@ Item {
id: soundsContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Item {
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
StyledText {

6
ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
View File

@ -9,9 +9,11 @@ Item {
id: syncContainer
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Item {
width: contentMaxWidth
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Component {
@ -19,7 +21,7 @@ Item {
StatusRadioButton {
text: name
checked: name == profileModel.mailservers.activeMailserver
checked: name === profileModel.mailservers.activeMailserver
onClicked: {
if (checked) {
profileModel.mailservers.setMailserver(name);

2
ui/imports/Constants.qml
View File

@ -135,7 +135,7 @@ QtObject {
readonly property string ens_taken: "taken"
readonly property string ens_taken_custom: "taken-custom"
readonly property string ens_owned: "owned"
readonly property string ens_availabe: "available"
readonly property string ens_available: "available"
readonly property string ens_already_connected: "already-connected"
readonly property string ens_connected: "connected"
readonly property string ens_connected_dkey: "connected-different-key"

2
ui/main.qml
View File

@ -24,7 +24,7 @@ ApplicationWindow {
Universal.theme: Universal.System
id: applicationWindow
minimumWidth: 800
minimumWidth: 900
minimumHeight: 600
width: 1232
height: 770