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

Closes #1994

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

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
+        width: contentMaxWidth
-        anchors.leftMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
 
         StatusSectionDescItem {
             //% "App version"

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
+        width: contentMaxWidth
-        anchors.leftMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: contentMargin
 
         StatusSettingsLineButton {
             //% "Network"

ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml

@@ -37,10 +37,8 @@ ScrollView {
 
     Item {
         id: appearanceContainer
-        anchors.right: parent.right
+        width: contentMaxWidth
-        anchors.rightMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
         height: this.childrenRect.height + 100
 
         ButtonGroup {

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

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
+        width: contentMaxWidth
-        anchors.rightMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
 
         SearchBox {
             id: searchBox

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

ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml

@@ -10,70 +10,74 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    StyledText {
+    Item {
-        id: title
+        width: contentMaxWidth
-        //% "Language settings"
+        anchors.horizontalCenter: parent.horizontalCenter
-        text: qsTrId("language-settings")
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        anchors.top: parent.top
-        anchors.topMargin: 24
-        font.weight: Font.Bold
-        font.pixelSize: 20
-    }
-
-    RowLayout {
-        property string currentLocale: appSettings.locale
-        id: languageSetting
-        anchors.top: title.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
         StyledText {
-            //% "Language"
+            id: title
-            text: qsTrId("language")
+            //% "Language settings"
+            text: qsTrId("language-settings")
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            anchors.top: parent.top
+            anchors.topMargin: 24
+            font.weight: Font.Bold
+            font.pixelSize: 20
         }
-        Select {
-            id: select
-            anchors.right: undefined
-            anchors.left: undefined
-            width: 100
-            Layout.leftMargin: Style.current.padding
-            model: Locales_JSON.locales
-            selectedItemView: Item {
-                anchors.fill: parent
-                StyledText {
-                    id: selectedTextField
-                    text: languageSetting.currentLocale
-                    anchors.left: parent.left
-                    anchors.leftMargin: Style.current.padding
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.pixelSize: 15
-                    verticalAlignment: Text.AlignVCenter
-                    height: 22
-                }
-            }
-            menu.delegate: Component {
-                MenuItem {
-                    id: menuItem
-                    height: itemText.height + 4
-                    width: parent.width
-                    padding: 10
-                    onTriggered: function () {
-                        const locale = Locales_JSON.locales[index]
-                        profileModel.changeLocale(locale)
-                        appSettings.locale = locale
-                    }
 
+        RowLayout {
+            property string currentLocale: appSettings.locale
+            id: languageSetting
+            anchors.top: title.bottom
+            anchors.topMargin: 20
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            StyledText {
+                //% "Language"
+                text: qsTrId("language")
+            }
+            Select {
+                id: select
+                anchors.right: undefined
+                anchors.left: undefined
+                width: 100
+                Layout.leftMargin: Style.current.padding
+                model: Locales_JSON.locales
+                selectedItemView: Item {
+                    anchors.fill: parent
                     StyledText {
-                        id: itemText
+                        id: selectedTextField
-                        text: Locales_JSON.locales[index]
+                        text: languageSetting.currentLocale
                         anchors.left: parent.left
-                        anchors.leftMargin: 5
+                        anchors.leftMargin: Style.current.padding
                         anchors.verticalCenter: parent.verticalCenter
+                        font.pixelSize: 15
+                        verticalAlignment: Text.AlignVCenter
+                        height: 22
                     }
-                    background: Rectangle {
+                }
-                        color: menuItem.highlighted ? Style.current.backgroundHover : Style.current.transparent
+                menu.delegate: Component {
+                    MenuItem {
+                        id: menuItem
+                        height: itemText.height + 4
+                        width: parent.width
+                        padding: 10
+                        onTriggered: function () {
+                            const locale = Locales_JSON.locales[index]
+                            profileModel.changeLocale(locale)
+                            appSettings.locale = locale
+                        }
+
+                        StyledText {
+                            id: itemText
+                            text: Locales_JSON.locales[index]
+                            anchors.left: parent.left
+                            anchors.leftMargin: 5
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                        background: Rectangle {
+                            color: menuItem.highlighted ? Style.current.backgroundHover : Style.current.transparent
+                        }
                     }
                 }
             }

ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml

@@ -11,8 +11,7 @@ Item {
     property string pubkey: profileModel.profile.pubKey
 
     id: profileHeaderContent
-    height: parent.height
+    anchors.fill: parent
-    Layout.fillWidth: true
 
     Component {
         id: changeProfileModalComponent
@@ -23,10 +22,8 @@ Item {
         id: profileImgNameContainer
         anchors.top: parent.top
         anchors.topMargin: 64
-        anchors.right: parent.right
+        width: contentMaxWidth
-        anchors.rightMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
 
         height: this.childrenRect.height
 

ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml

@@ -15,10 +15,8 @@ ScrollView {
 
     Item {
         id: notificationsContainer
-        anchors.right: parent.right
+        width: contentMaxWidth
-        anchors.rightMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
         height: this.childrenRect.height + 100
 
         property Component mutedChatsModalComponent: MutedChatsModal {}

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
+        width: contentMaxWidth
-        anchors.rightMargin: contentMargin
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: contentMargin
-        anchors.bottom: parent.bottom
 
         StatusSectionHeadline {
             id: labelSecurity

ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml

@@ -10,44 +10,47 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    StyledText {
+    Item {
-        id: element5
+        width: contentMaxWidth
-        //% "Sounds settings"
+        anchors.horizontalCenter: parent.horizontalCenter
-        text: qsTrId("sounds-settings")
+        StyledText {
-        anchors.left: parent.left
+            id: element5
-        anchors.leftMargin: 24
+            //% "Sounds settings"
-        anchors.top: parent.top
+            text: qsTrId("sounds-settings")
-        anchors.topMargin: 24
+            anchors.left: parent.left
-        font.weight: Font.Bold
+            anchors.leftMargin: 24
-        font.pixelSize: 20
+            anchors.top: parent.top
-    }
+            anchors.topMargin: 24
+            font.weight: Font.Bold
+            font.pixelSize: 20
+        }
 
-    StyledText {
+        StyledText {
-        id: labelVolume
+            id: labelVolume
-        anchors.top: element5.bottom
+            anchors.top: element5.bottom
-        anchors.topMargin: Style.current.bigPadding
+            anchors.topMargin: Style.current.bigPadding
-        anchors.left: parent.left
+            anchors.left: parent.left
-        anchors.leftMargin: 24
+            anchors.leftMargin: 24
-        //% "Sound volume"
+            //% "Sound volume"
-        text: qsTrId("sound-volume") + " " + volume.value
+            text: qsTrId("sound-volume") + " " + volume.value
-        font.pixelSize: 15
+            font.pixelSize: 15
-    }
+        }
 
-    StatusSlider {
+        StatusSlider {
-        id: volume
+            id: volume
-        anchors.top: labelVolume.bottom
+            anchors.top: labelVolume.bottom
-        anchors.topMargin: Style.current.padding
+            anchors.topMargin: Style.current.padding
-        anchors.left: parent.left
+            anchors.left: parent.left
-        anchors.leftMargin: 24
+            anchors.leftMargin: 24
-        minimumValue: 0.0
+            minimumValue: 0.0
-        maximumValue: 1.0
+            maximumValue: 1.0
-        value: appSettings.volume
+            value: appSettings.volume
-        stepSize: 0.1
+            stepSize: 0.1
-        onValueChanged: {
+            onValueChanged: {
-            appSettings.volume = volume.value
+                appSettings.volume = volume.value
+            }
         }
     }
-
 }
 
 /*##^##

ui/app/AppLayouts/Profile/Sections/SyncContainer.qml

@@ -10,176 +10,180 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    StyledText {
+    Item {
-        id: element4
+        width: contentMaxWidth
-        //% "Sync settings"
+        anchors.horizontalCenter: parent.horizontalCenter
-        text: qsTrId("sync-settings")
+        StyledText {
-        anchors.left: parent.left
+            id: element4
-        anchors.leftMargin: 24
+            //% "Sync settings"
-        anchors.top: parent.top
+            text: qsTrId("sync-settings")
-        anchors.topMargin: 24
+            anchors.left: parent.left
-        font.weight: Font.Bold
+            anchors.leftMargin: 24
-        font.pixelSize: 20
+            anchors.top: parent.top
-    }
+            anchors.topMargin: 24
+            font.weight: Font.Bold
+            font.pixelSize: 20
+        }
 
-    Component {
+        Component {
-        id: mailserversList
+            id: mailserversList
             
-        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);
+                    }
                 }
             }
         }
-    }
 
-    Item {
+        Item {
-        id: addMailserver
+            id: addMailserver
-        width: parent.width
+            width: parent.width
-        height: addButton.height
+            height: addButton.height
-        anchors.top: element4.bottom
+            anchors.top: element4.bottom
-        anchors.topMargin: Style.current.padding
+            anchors.topMargin: Style.current.padding
-        anchors.left: parent.left
+            anchors.left: parent.left
-        anchors.leftMargin: 24
+            anchors.leftMargin: 24
 
-        StatusRoundButton {
+            StatusRoundButton {
-            id: addButton
+                id: addButton
-            icon.name: "plusSign"
+                icon.name: "plusSign"
-            size: "medium"
+                size: "medium"
-            type: "secondary"
+                type: "secondary"
-            anchors.verticalCenter: parent.verticalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+                    
+            StyledText {
+                id: usernameText
+                //% "Add mailserver"
+                text: qsTrId("add-mailserver")
+                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: addMailserverPopup.open()
+            }
+
+            ModalPopup {
+                id: addMailserverPopup
+                //% "Add mailserver"
+                title: qsTrId("add-mailserver")
+
+                property string nameValidationError: ""
+                property string enodeValidationError: ""
+                
+                function validate() {
+                    nameValidationError = ""
+                    enodeValidationError = ""
+                    
+                    if (nameInput.text === "") {
+                        //% "You need to enter a name"
+                        nameValidationError = qsTrId("you-need-to-enter-a-name")
+                    }
+
+                    if (enodeInput.text === "") {
+                        //% "You need to enter the enode address"
+                        enodeValidationError = qsTrId("you-need-to-enter-the-enode-address")
+                    }
+                    return !nameValidationError && !enodeValidationError
+                }
+
+                onOpened: {
+                    nameInput.text = "";
+                    enodeInput.text = "";
+        
+                    nameValidationError = "";
+                    enodeValidationError = "";
+                }
+
+                footer: StatusButton {
+                    anchors.right: parent.right
+                    anchors.rightMargin: Style.current.smallPadding
+                    //% "Save"
+                    text: qsTrId("save")
+                    anchors.bottom: parent.bottom
+                    enabled: nameInput.text !== "" && enodeInput.text !== ""
+                    onClicked: {
+                        if (!addMailserverPopup.validate()) {
+                            return;
+                        }
+                        profileModel.mailservers.save(nameInput.text, enodeInput.text)
+                        addMailserverPopup.close()
+                    }
+                }
+
+                Input {
+                    id: nameInput
+                    //% "Name"
+                    label: qsTrId("name")
+                    //% "Specify a name"
+                    placeholderText: qsTrId("specify-name")
+                    validationError: addMailserverPopup.nameValidationError
+                }
+
+                Input {
+                    id: enodeInput
+                    //% "History node address"
+                    label: qsTrId("history-node-address")
+                    //% "enode://{enode-id}:{password}@{ip-address}:{port-number}"
+                    placeholderText: qsTrId("enode----enode-id---password---ip-address---port-number-")
+                    validationError: addMailserverPopup.enodeValidationError
+                    anchors.top: nameInput.bottom
+                    anchors.topMargin: Style.current.bigPadding
+                }
+
+            }
         }
 
-                
         StyledText {
-            id: usernameText
+            id: switchLbl
-            //% "Add mailserver"
+            //% "Automatic mailserver selection"
-            text: qsTrId("add-mailserver")
+            text: qsTrId("automatic-mailserver-selection")
-            color: Style.current.blue
+            anchors.left: parent.left
-            anchors.left: addButton.right
+            anchors.leftMargin: 24
+            anchors.top: addMailserver.bottom
+            anchors.topMargin: 24
+        }
+
+        StatusSwitch {
+            id: automaticSelectionSwitch
+            checked: profileModel.mailservers.automaticSelection
+            onCheckedChanged: profileModel.mailservers.enableAutomaticSelection(checked)
+            anchors.top: addMailserver.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.left: switchLbl.right
             anchors.leftMargin: Style.current.padding
-            anchors.verticalCenter: addButton.verticalCenter
+
-            font.pixelSize: 15
         }
 
-        MouseArea {
+        StyledText {
+            //% "..."
+            text: profileModel.mailservers.activeMailserver || qsTrId("---")
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            anchors.top: switchLbl.bottom
+            anchors.topMargin: 24
+            visible: automaticSelectionSwitch.checked
+        }
+
+        ListView {
+            id: mailServersListView
+            anchors.topMargin: 200
+            anchors.top: automaticSelectionSwitch.bottom
             anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
+            model: profileModel.mailservers.list
-            onClicked: addMailserverPopup.open()
+            delegate: mailserversList
+            visible: !automaticSelectionSwitch.checked
         }
-
-        ModalPopup {
-            id: addMailserverPopup
-            //% "Add mailserver"
-            title: qsTrId("add-mailserver")
-
-            property string nameValidationError: ""
-            property string enodeValidationError: ""
-            
-            function validate() {
-                nameValidationError = ""
-                enodeValidationError = ""
-                
-                if (nameInput.text === "") {
-                    //% "You need to enter a name"
-                    nameValidationError = qsTrId("you-need-to-enter-a-name")
-                }
-
-                if (enodeInput.text === "") {
-                    //% "You need to enter the enode address"
-                    enodeValidationError = qsTrId("you-need-to-enter-the-enode-address")
-                }
-                return !nameValidationError && !enodeValidationError
-            }
-
-            onOpened: {
-                nameInput.text = "";
-                enodeInput.text = "";
-    
-                nameValidationError = "";
-                enodeValidationError = "";
-            }
-
-            footer: StatusButton {
-                anchors.right: parent.right
-                anchors.rightMargin: Style.current.smallPadding
-                //% "Save"
-                text: qsTrId("save")
-                anchors.bottom: parent.bottom
-                enabled: nameInput.text !== "" && enodeInput.text !== ""
-                onClicked: {
-                    if (!addMailserverPopup.validate()) {
-                        return;
-                    }
-                    profileModel.mailservers.save(nameInput.text, enodeInput.text)
-                    addMailserverPopup.close()
-                }
-            }
-
-            Input {
-                id: nameInput
-                //% "Name"
-                label: qsTrId("name")
-                //% "Specify a name"
-                placeholderText: qsTrId("specify-name")
-                validationError: addMailserverPopup.nameValidationError
-            }
-
-            Input {
-                id: enodeInput
-                //% "History node address"
-                label: qsTrId("history-node-address")
-                //% "enode://{enode-id}:{password}@{ip-address}:{port-number}"
-                placeholderText: qsTrId("enode----enode-id---password---ip-address---port-number-")
-                validationError: addMailserverPopup.enodeValidationError
-                anchors.top: nameInput.bottom
-                anchors.topMargin: Style.current.bigPadding
-            }
-
-        }
-    }
-
-    StyledText {
-        id: switchLbl
-        //% "Automatic mailserver selection"
-        text: qsTrId("automatic-mailserver-selection")
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        anchors.top: addMailserver.bottom
-        anchors.topMargin: 24
-    }
-
-    StatusSwitch {
-        id: automaticSelectionSwitch
-        checked: profileModel.mailservers.automaticSelection
-        onCheckedChanged: profileModel.mailservers.enableAutomaticSelection(checked)
-        anchors.top: addMailserver.bottom
-        anchors.topMargin: Style.current.padding
-        anchors.left: switchLbl.right
-        anchors.leftMargin: Style.current.padding
-
-    }
-
-    StyledText {
-        //% "..."
-        text: profileModel.mailservers.activeMailserver || qsTrId("---")
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        anchors.top: switchLbl.bottom
-        anchors.topMargin: 24
-        visible: automaticSelectionSwitch.checked
-    }
-
-    ListView {
-        id: mailServersListView
-        anchors.topMargin: 200
-        anchors.top: automaticSelectionSwitch.bottom
-        anchors.fill: parent
-        model: profileModel.mailservers.list
-        delegate: mailserversList
-        visible: !automaticSelectionSwitch.checked
     }
 }