diff --git a/ui/app/AppLayouts/Profile/LeftTab.qml b/ui/app/AppLayouts/Profile/LeftTab.qml
index e6c8adf747..e0b1db8fc8 100644
--- a/ui/app/AppLayouts/Profile/LeftTab.qml
+++ b/ui/app/AppLayouts/Profile/LeftTab.qml
@@ -10,7 +10,6 @@ import "./LeftTab"
ColumnLayout {
readonly property int w: 340
- // property alias currentTab: profileScreenButtons.currentIndex
property alias currentTab: profileMenu.profileCurrentIndex
id: profileInfoContainer
@@ -23,12 +22,25 @@ ColumnLayout {
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
- Profile {}
+ RowLayout {
+ id: profileHeader
+ height: 240
+ Layout.fillWidth: true
+ width: profileInfoContainer.w
- Menu {
- id: profileMenu
+ Profile {}
}
+ RowLayout {
+ width: profileInfoContainer.w
+ height: btnheight * 10
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Menu {
+ id: profileMenu
+ }
+ }
}
/*##^##
diff --git a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml
index 54945ca40d..e97f1e8f3b 100644
--- a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml
+++ b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml
@@ -4,282 +4,274 @@ import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import "../../../../imports"
-RowLayout {
+Rectangle {
property alias profileCurrentIndex: profileScreenButtons.currentIndex
readonly property int btnheight: 42
id: profileTabBar
- width: profileInfoContainer.w
- height: btnheight * 10
+ color: "#ffffff"
+ height: parent.height
Layout.fillHeight: true
Layout.fillWidth: true
- Rectangle {
- id: profileTabBarBg
- color: "#ffffff"
+ TabBar {
+ id: profileScreenButtons
+ width: profileInfoContainer.w
height: parent.height
- Layout.fillHeight: true
- Layout.fillWidth: true
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 0
+ currentIndex: 0
+ spacing: 0
+ background: Rectangle {
+ color: "#00000000"
+ }
- TabBar {
- id: profileScreenButtons
+ TabButton {
+ id: ensTabButton
width: profileInfoContainer.w
- height: parent.height
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 0
- currentIndex: 0
- spacing: 0
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.top: parent.top
+ anchors.topMargin: 0
background: Rectangle {
- color: "#00000000"
+ color: Theme.transparent
}
- TabButton {
- id: ensTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
- anchors.top: parent.top
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
-
- Text {
- id: element1
- color: "#000000"
- text: qsTr("ENS usernames")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
- }
-
- TabButton {
- id: contactsTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element1
+ color: "#000000"
+ text: qsTr("ENS usernames")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: ensTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element2
- color: "#000000"
- text: qsTr("Contacts")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: contactsTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: ensTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: privacyTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element2
+ color: "#000000"
+ text: qsTr("Contacts")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: contactsTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element3
- color: "#000000"
- text: qsTr("Privacy and security")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: privacyTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: contactsTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: syncTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element3
+ color: "#000000"
+ text: qsTr("Privacy and security")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: privacyTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element4
- color: "#000000"
- text: qsTr("Sync settings")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: syncTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: privacyTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: languageTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element4
+ color: "#000000"
+ text: qsTr("Sync settings")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: syncTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element5
- color: "#000000"
- text: qsTr("Language settings")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: languageTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: syncTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: notificationsTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element5
+ color: "#000000"
+ text: qsTr("Language settings")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: languageTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element6
- color: "#000000"
- text: qsTr("Notifications settings")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: notificationsTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: languageTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: advancedTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element6
+ color: "#000000"
+ text: qsTr("Notifications settings")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: notificationsTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element7
- color: "#000000"
- text: qsTr("Advanced settings")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: advancedTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: notificationsTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: helpTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element7
+ color: "#000000"
+ text: qsTr("Advanced settings")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: advancedTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element8
- color: "#000000"
- text: qsTr("Need help?")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: helpTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: advancedTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: aboutTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element8
+ color: "#000000"
+ text: qsTr("Need help?")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: helpTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element9
- color: "#000000"
- text: qsTr("About")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: aboutTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: helpTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
}
- TabButton {
- id: signoutTabButton
- width: profileInfoContainer.w
- height: profileTabBar.btnheight
- text: ""
+ Text {
+ id: element9
+ color: "#000000"
+ text: qsTr("About")
anchors.left: parent.left
- anchors.leftMargin: 0
- anchors.top: aboutTabButton.bottom
- anchors.topMargin: 0
- background: Rectangle {
- color: Theme.transparent
- }
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
+ }
+ }
- Text {
- id: element10
- color: "#000000"
- text: qsTr("Sign out")
- anchors.left: parent.left
- anchors.leftMargin: 72
- anchors.verticalCenter: parent.verticalCenter
- font.weight: Font.Medium
- font.pixelSize: 14
- }
+ TabButton {
+ id: signoutTabButton
+ width: profileInfoContainer.w
+ height: profileTabBar.btnheight
+ text: ""
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ anchors.top: aboutTabButton.bottom
+ anchors.topMargin: 0
+ background: Rectangle {
+ color: Theme.transparent
+ }
+
+ Text {
+ id: element10
+ color: "#000000"
+ text: qsTr("Sign out")
+ anchors.left: parent.left
+ anchors.leftMargin: 72
+ anchors.verticalCenter: parent.verticalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 14
}
}
}
-}
\ No newline at end of file
+}
diff --git a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml
index d1061948db..6610358750 100644
--- a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml
+++ b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml
@@ -4,61 +4,54 @@ import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import "../../../../imports"
-RowLayout {
- id: profileHeader
- height: 240
+Rectangle {
+ id: profileHeaderContent
+ height: parent.height
Layout.fillWidth: true
- width: profileInfoContainer.w
- Rectangle {
- id: profileHeaderContent
- height: parent.height
- Layout.fillWidth: true
+ Item {
+ id: profileImgNameContainer
+ width: profileHeaderContent.width
+ height: profileHeaderContent.height
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.top: parent.top
- Item {
- id: profileImgNameContainer
- width: profileHeaderContent.width
- height: profileHeaderContent.height
+ Image {
+ id: profileImg
+ source: profileModel.profile.identicon
+ width: 80
+ height: 80
+ fillMode: Image.PreserveAspectCrop
anchors.horizontalCenter: parent.horizontalCenter
- anchors.top: parent.top
- Image {
- id: profileImg
- source: profileModel.profile.identicon
- width: 80
- height: 80
- fillMode: Image.PreserveAspectCrop
- anchors.horizontalCenter: parent.horizontalCenter
+ property bool rounded: true
+ property bool adapt: false
+ y: 78
- property bool rounded: true
- property bool adapt: false
- y: 78
-
- layer.enabled: rounded
- layer.effect: OpacityMask {
- maskSource: Item {
- width: profileImg.width
- height: profileImg.height
- Rectangle {
- anchors.centerIn: parent
- width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height)
- height: profileImg.adapt ? profileImg.height : width
- radius: Math.min(width, height)
- }
+ layer.enabled: rounded
+ layer.effect: OpacityMask {
+ maskSource: Item {
+ width: profileImg.width
+ height: profileImg.height
+ Rectangle {
+ anchors.centerIn: parent
+ width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height)
+ height: profileImg.adapt ? profileImg.height : width
+ radius: Math.min(width, height)
}
}
}
+ }
- Text {
- id: profileName
- text: profileModel.profile.username
- anchors.top: profileImg.bottom
- anchors.topMargin: 10
- anchors.horizontalCenterOffset: 0
- anchors.horizontalCenter: parent.horizontalCenter
- font.weight: Font.Medium
- font.pixelSize: 20
- }
+ Text {
+ id: profileName
+ text: profileModel.profile.username
+ anchors.top: profileImg.bottom
+ anchors.topMargin: 10
+ anchors.horizontalCenterOffset: 0
+ anchors.horizontalCenter: parent.horizontalCenter
+ font.weight: Font.Medium
+ font.pixelSize: 20
}
}
}
diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml
index 31a7f56d84..0cfe8cb7a8 100644
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@@ -6,6 +6,7 @@ import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../imports"
import "../../../shared"
+import "./Sections"
import "."
Item {
@@ -31,264 +32,25 @@ Item {
anchors.leftMargin: 0
currentIndex: leftTab.currentTab
- Item {
- id: ensContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
+ EnsContainer {}
- Text {
- id: element1
- text: qsTr("ENS usernames")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
+ ContactsContainer {}
- Item {
- id: contactsContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
+ PrivacyContainer {}
- Text {
- id: element2
- text: qsTr("Contacts")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
+ SyncContainer {}
- Component {
- id: contactsList
+ LanguageContainer {}
- Item {
- height: 56
- anchors.right: parent.right
- anchors.rightMargin: 0
- anchors.left: parent.left
- anchors.leftMargin: 0
- Column {
- Row {
- Text {
- text: name
- font.weight: Font.Bold
- font.pixelSize: 14
- }
- }
- Row {
- Text {
- text: address
- font.weight: Font.Bold
- font.pixelSize: 12
- }
- }
- }
- }
- }
+ NotificationsContainer {}
- ListView {
- id: contactListView
- anchors.topMargin: 48
- anchors.top: element2.bottom
- anchors.fill: parent
- model: profileModel.contactList
- delegate: contactsList
- }
+ AdvancedContainer {}
- }
+ HelpContainer {}
- Item {
- id: privacyContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
+ AboutContainer {}
- Text {
- id: element3
- text: qsTr("Privacy and security settings")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
-
- Item {
- id: syncContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element4
- text: qsTr("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
-
- RadioButton {
- text: name
- checked: index == 0 ? true: false
- }
- }
-
- ListView {
- id: mailServersListView
- anchors.topMargin: 48
- anchors.top: element4.bottom
- anchors.fill: parent
- model: profileModel.mailserversList
- delegate: mailserversList
- }
- }
-
- Item {
- id: languageContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element5
- text: qsTr("Language settings")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
-
- Item {
- id: notificationsContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element6
- text: qsTr("Notifications settings")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
-
- Item {
- id: advancedContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element7
- text: qsTr("Advanced settings")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
-
- Item {
- id: helpContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element8
- text: qsTr("Help menus: FAQ, Glossary, etc.")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
-
- Text {
- anchors.centerIn: parent
- text: "Frequently asked questions"
- onLinkActivated: Qt.openUrlExternally(link)
-
- MouseArea {
- anchors.fill: parent
- acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
- cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
- }
- }
- }
-
- Item {
- id: aboutContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element9
- text: qsTr("About the app")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
-
- Item {
- id: signoutContainer
- width: 200
- height: 200
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- id: element10
- text: qsTr("Sign out controls")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
- }
- }
+ SignoutContainer {}
}
}
diff --git a/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml b/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
new file mode 100644
index 0000000000..4080d0d152
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: aboutContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element9
+ text: qsTr("About the app")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
new file mode 100644
index 0000000000..d19e4dac20
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: advancedContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element7
+ text: qsTr("Advanced settings")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
new file mode 100644
index 0000000000..d9f438a028
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
@@ -0,0 +1,60 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: contactsContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element2
+ text: qsTr("Contacts")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+
+ Component {
+ id: contactsList
+
+ Item {
+ height: 56
+ anchors.right: parent.right
+ anchors.rightMargin: 0
+ anchors.left: parent.left
+ anchors.leftMargin: 0
+ Column {
+ Row {
+ Text {
+ text: name
+ font.weight: Font.Bold
+ font.pixelSize: 14
+ }
+ }
+ Row {
+ Text {
+ text: address
+ font.weight: Font.Bold
+ font.pixelSize: 12
+ }
+ }
+ }
+ }
+ }
+
+ ListView {
+ id: contactListView
+ anchors.topMargin: 48
+ anchors.top: element2.bottom
+ anchors.fill: parent
+ model: profileModel.contactList
+ delegate: contactsList
+ }
+}
\ No newline at end of file
diff --git a/ui/app/AppLayouts/Profile/Sections/EnsContainer.qml b/ui/app/AppLayouts/Profile/Sections/EnsContainer.qml
new file mode 100644
index 0000000000..5cb01955ae
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/EnsContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: ensContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element1
+ text: qsTr("ENS usernames")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
new file mode 100644
index 0000000000..da93aea11e
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: helpContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element8
+ text: qsTr("Help menus: FAQ, Glossary, etc.")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+
+ Text {
+ anchors.centerIn: parent
+ text: "Frequently asked questions"
+ onLinkActivated: Qt.openUrlExternally(link)
+
+ MouseArea {
+ anchors.fill: parent
+ acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
+ cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+ }
+ }
+}
\ No newline at end of file
diff --git a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
new file mode 100644
index 0000000000..9afd99a7d3
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: languageContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element5
+ text: qsTr("Language settings")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml b/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml
new file mode 100644
index 0000000000..ebb26fd3c9
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: notificationsContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element6
+ text: qsTr("Notifications settings")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
new file mode 100644
index 0000000000..a6b5ca676f
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: privacyContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element3
+ text: qsTr("Privacy and security settings")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/SignoutContainer.qml b/ui/app/AppLayouts/Profile/Sections/SignoutContainer.qml
new file mode 100644
index 0000000000..799c7cd9e3
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/SignoutContainer.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: signoutContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element10
+ text: qsTr("Sign out controls")
+ anchors.left: parent.left
+ anchors.leftMargin: 24
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ font.weight: Font.Bold
+ font.pixelSize: 20
+ }
+}
\ No newline at end of file
diff --git a/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml b/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
new file mode 100644
index 0000000000..71d17917f0
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import "../../../../imports"
+
+Item {
+ id: syncContainer
+ width: 200
+ height: 200
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ id: element4
+ text: qsTr("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
+
+ RadioButton {
+ text: name
+ checked: index == 0 ? true: false
+ }
+ }
+
+ ListView {
+ id: mailServersListView
+ anchors.topMargin: 48
+ anchors.top: element4.bottom
+ anchors.fill: parent
+ model: profileModel.mailserversList
+ delegate: mailserversList
+ }
+}
diff --git a/ui/app/AppLayouts/Profile/Sections/qmldir b/ui/app/AppLayouts/Profile/Sections/qmldir
new file mode 100644
index 0000000000..c11a582d9f
--- /dev/null
+++ b/ui/app/AppLayouts/Profile/Sections/qmldir
@@ -0,0 +1,10 @@
+EnsContainer 1.0 EnsContainer.qml
+ContactsContainer 1.0 ContactsContainer.qml
+PrivacyContainer 1.0 PrivacyContainer.qml
+SyncContainer 1.0 SyncContainer.qml
+LanguageContainer 1.0 LanguageContainer.qml
+NotificationsContainer 1.0 NotificationsContainer.qml
+AdvancedContainer 1.0 AdvancedContainer.qml
+HelpContainer 1.0 HelpContainer.qml
+AboutContainer 1.0 AboutContainer.qml
+SignoutContainer 1.0 SignoutContainer.qml
\ No newline at end of file