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

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

Closes #1994
This commit is contained in:
Pascal Precht 2021-03-18 10:33:39 +01:00 committed by Iuri Matias
parent 010a7e0d8e
commit 29c7f7b91d
13 changed files with 278 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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"

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

@ -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"

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

@ -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 {

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

@ -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

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

@ -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

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

@ -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

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

@ -10,70 +10,74 @@ Item {
Layout.fillHeight: true
Layout.fillWidth: true
StyledText {
id: title
//% "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
}
RowLayout {
property string currentLocale: appSettings.locale
id: languageSetting
anchors.top: title.bottom
anchors.topMargin: 20
anchors.left: parent.left
anchors.leftMargin: 24
Item {
width: contentMaxWidth
anchors.horizontalCenter: parent.horizontalCenter
StyledText {
//% "Language"
text: qsTrId("language")
id: title
//% "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
text: Locales_JSON.locales[index]
id: selectedTextField
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
}
}
}
}

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

@ -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

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

@ -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 {}

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

@ -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

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

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

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

@ -10,176 +10,180 @@ Item {
Layout.fillHeight: true
Layout.fillWidth: true
StyledText {
id: element4
//% "Sync settings"
text: qsTrId("sync-settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
Item {
width: contentMaxWidth
anchors.horizontalCenter: parent.horizontalCenter
StyledText {
id: element4
//% "Sync settings"
text: qsTrId("sync-settings")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 20
}
Component {
id: mailserversList
Component {
id: mailserversList
StatusRadioButton {
text: name
checked: name == profileModel.mailservers.activeMailserver
onClicked: {
if (checked) {
profileModel.mailservers.setMailserver(name);
StatusRadioButton {
text: name
checked: name == profileModel.mailservers.activeMailserver
onClicked: {
if (checked) {
profileModel.mailservers.setMailserver(name);
}
}
}
}
}
Item {
id: addMailserver
width: parent.width
height: addButton.height
anchors.top: element4.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: 24
Item {
id: addMailserver
width: parent.width
height: addButton.height
anchors.top: element4.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: 24
StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
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
//% "Add mailserver"
text: qsTrId("add-mailserver")
color: Style.current.blue
anchors.left: addButton.right
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
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
onClicked: addMailserverPopup.open()
model: profileModel.mailservers.list
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
}
}