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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -24,8 +24,14 @@ Item {
property int timestamp: 1577872140 property int timestamp: 1577872140
function shouldDisplayExampleMessage(){ 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
Item {
anchors.top: parent.top
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
Component { Component {
id: statusENS id: statusENS
@ -327,3 +333,4 @@ Item {
} }
} }
} }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -9,9 +9,11 @@ Item {
id: syncContainer id: syncContainer
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
clip: true
Item { Item {
width: contentMaxWidth width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
Component { Component {
@ -19,7 +21,7 @@ Item {
StatusRadioButton { StatusRadioButton {
text: name text: name
checked: name == profileModel.mailservers.activeMailserver checked: name === profileModel.mailservers.activeMailserver
onClicked: { onClicked: {
if (checked) { if (checked) {
profileModel.mailservers.setMailserver(name); 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: "taken"
readonly property string ens_taken_custom: "taken-custom" readonly property string ens_taken_custom: "taken-custom"
readonly property string ens_owned: "owned" 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_already_connected: "already-connected"
readonly property string ens_connected: "connected" readonly property string ens_connected: "connected"
readonly property string ens_connected_dkey: "connected-different-key" readonly property string ens_connected_dkey: "connected-different-key"

2
ui/main.qml
View File

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