uiux(Profile): adjust layout max width of profile sections

Closes #1994
2021-03-18 10:33:39 +01:00 · 2021-03-18 10:33:39 +01:00 · 29c7f7b91d
parent 010a7e0d8e
commit 29c7f7b91d
13 changed files with 278 additions and 292 deletions
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@ -7,6 +7,7 @@ import "./Sections"

 SplitView {
    property int contentMargin: 120
+    property int contentMaxWidth: 624
    property int topMargin: 46
    property alias changeProfileSection: leftTab.changeProfileSection

@ -38,10 +39,6 @@ SplitView {
        anchors.topMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.left: leftTab.right
-        anchors.leftMargin: Style.current.padding
        currentIndex: leftTab.currentTab

        // This list needs to match LeftTab/constants.js
--- a/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
@ -15,10 +15,8 @@ Item {
        spacing: Style.current.bigPadding
        anchors.top: parent.top
        anchors.topMargin: 46
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter

        StatusSectionDescItem {
            //% "App version"
--- a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
@ -15,10 +15,8 @@ Item {
        id: generalColumn
        anchors.top: parent.top
        anchors.topMargin: topMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter

        StatusSettingsLineButton {
            //% "Network"
--- a/ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml
@ -37,10 +37,8 @@ ScrollView {

    Item {
        id: appearanceContainer
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter
        height: this.childrenRect.height + 100

        ButtonGroup {
--- a/ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml
@ -21,11 +21,9 @@ Item {
    Item {
        anchors.top: parent.top
        anchors.topMargin: topMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
        anchors.bottom: parent.bottom
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter

        Column {
            id: generalColumn
--- a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
@ -18,10 +18,8 @@ Item {
        anchors.top: parent.top
        anchors.topMargin: 32
        anchors.bottom: parent.bottom
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter

        SearchBox {
            id: searchBox
--- a/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
@ -19,11 +19,9 @@ Item {
        Item {
            id: glossary
            anchors.top: parent.top
-            anchors.right: parent.right
-            anchors.rightMargin: contentMargin
-            anchors.left: parent.left
-            anchors.leftMargin: contentMargin
            height: this.childrenRect.height
+            width: contentMaxWidth
+            anchors.horizontalCenter: parent.horizontalCenter

            StatusSectionHeadline {
                id: glossaryTitle
@ -127,11 +125,9 @@ Item {
            id: linksSection
            anchors.top: glossary.bottom
            anchors.topMargin: Style.current.bigPadding * 2
-            anchors.left: parent.left
-            anchors.leftMargin: contentMargin
-            anchors.right: parent.left
-            anchors.rightMargin: contentMargin
            height: this.childrenRect.height
+            width: contentMaxWidth
+            anchors.horizontalCenter: parent.horizontalCenter

            StyledText {
                id: faqLink
--- a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
@ -10,6 +10,9 @@ Item {
    Layout.fillHeight: true
    Layout.fillWidth: true

+    Item {
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter
        StyledText {
            id: title
            //% "Language settings"
@ -79,4 +82,5 @@ Item {
                }
            }
        }
+    }
 }
--- a/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
@ -11,8 +11,7 @@ Item {
    property string pubkey: profileModel.profile.pubKey

    id: profileHeaderContent
-    height: parent.height
-    Layout.fillWidth: true
+    anchors.fill: parent

    Component {
        id: changeProfileModalComponent
@ -23,10 +22,8 @@ Item {
        id: profileImgNameContainer
        anchors.top: parent.top
        anchors.topMargin: 64
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter

        height: this.childrenRect.height

--- a/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml
@ -15,10 +15,8 @@ ScrollView {

    Item {
        id: notificationsContainer
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter
        height: this.childrenRect.height + 100

        property Component mutedChatsModalComponent: MutedChatsModal {}
--- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
@ -15,11 +15,8 @@ Item {
        id: containerColumn
        anchors.top: parent.top
        anchors.topMargin: topMargin
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
-        anchors.bottom: parent.bottom
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter

        StatusSectionHeadline {
            id: labelSecurity
--- a/ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml
@ -10,6 +10,9 @@ Item {
    Layout.fillHeight: true
    Layout.fillWidth: true

+    Item {
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter
        StyledText {
            id: element5
            //% "Sounds settings"
@ -47,7 +50,7 @@ Item {
                appSettings.volume = volume.value
            }
        }
-
+    }
 }

 /*##^##
--- a/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
@ -10,6 +10,9 @@ Item {
    Layout.fillHeight: true
    Layout.fillWidth: true

+    Item {
+        width: contentMaxWidth
+        anchors.horizontalCenter: parent.horizontalCenter
        StyledText {
            id: element4
            //% "Sync settings"
@ -182,4 +185,5 @@ Item {
            delegate: mailserversList
            visible: !automaticSelectionSwitch.checked
        }
+    }
 }