uiux: revamp advanced settings panel

Closes #1623

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

@@ -11,234 +11,80 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    StyledText {
+    Column {
-        id: title
+        id: generalColumn
-        //% "Advanced settings"
+        spacing: Style.current.bigPadding
-        text: qsTrId("advanced-settings")
-        anchors.left: parent.left
-        anchors.leftMargin: 24
         anchors.top: parent.top
-        anchors.topMargin: 24
+        anchors.topMargin: 46
-        font.weight: Font.Bold
-        font.pixelSize: 20
-    }
-
-    RowLayout {
-        id: communitiesTabSettings
-        anchors.top: title.bottom
-        anchors.topMargin: 20
         anchors.left: parent.left
-        anchors.leftMargin: 24
+        anchors.leftMargin: contentMargin
+        anchors.right: parent.right
+        anchors.rightMargin: contentMargin
 
-        StyledText {
+        StatusSectionMenuItem {
-            text: qsTr("Enable Communities")
+            label: qsTr("Network")
-        }
+            info: utilsModel.getNetworkName()
-        StatusSwitch {
-            checked: appSettings.communitiesEnabled
-            onCheckedChanged: {
-                appSettings.communitiesEnabled = this.checked
-            }
-        }
-        StyledText {
-            text: qsTr("Currently WIP")
-        }
-    }
-
-    RowLayout {
-        id: walletTabSettings
-        anchors.top: communitiesTabSettings.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-
-        StyledText {
-            //% "Wallet Tab"
-            text: qsTrId("wallet-tab")
-        }
-        StatusSwitch {
-            checked: appSettings.walletEnabled
-            onCheckedChanged: function(value) {
-                appSettings.walletEnabled = this.checked
-            }
-        }
-        StyledText {
-            //% "NOT RECOMMENDED - Use at your own risk"
-            text: qsTrId("not-recommended---use-at-your-own-risk")
-        }
-    }
-
-    RowLayout {
-        id: browserTabSettings
-        anchors.top: walletTabSettings.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        StyledText {
-            //% "Browser Tab"
-            text: qsTrId("browser-tab")
-        }
-        StatusSwitch {
-            checked: appSettings.browserEnabled
-            onCheckedChanged: function(value) {
-                appSettings.browserEnabled = this.checked
-            }
-        }
-        StyledText {
-            //% "experimental (web3 not supported yet)"
-            text: qsTrId("experimental-(web3-not-supported-yet)")
-        }
-    }
-
-    RowLayout {
-        id: nodeTabSettings
-        anchors.top: browserTabSettings.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        StyledText {
-            //% "Node Management Tab"
-            text: qsTrId("node-management-tab")
-        }
-        StatusSwitch {
-            checked: nodeBtn.enabled
-            onCheckedChanged: function(value) {
-                nodeBtn.enabled = this.checked
-            }
-        }
-        StyledText {
-            //% "under development"
-            text: qsTrId("under-development")
-        }
-    }
-
-    Item {
-        id: networkTabSettings
-        anchors.top: nodeTabSettings.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        width: parent.width - 20
-        height: networkText.height
-
-        StyledText {
-            id: networkText
-            text: qsTr("Network")
-            font.pixelSize: 15
-        }
-        
-        StyledText {
-            text: utilsModel.getNetworkName()
-            font.pixelSize: 15
-            anchors.right: caret3.left
-            anchors.rightMargin: Style.current.padding
-        }
-
-        SVGImage {
-            id: caret3
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.verticalCenter: networkText.verticalCenter
-            source: "../../../img/caret.svg"
-            width: 13
-            height: 7
-            rotation: -90
-        }
-        
-        ColorOverlay {
-            anchors.fill: caret3
-            source: caret2
-            color: Style.current.darkGrey
-            rotation: -90
-        }
-
-        NetworksModal {
-            id: networksModal
-        }
-
-        MouseArea {
-            anchors.fill: parent
             onClicked: networksModal.open()
-            cursorShape: Qt.PointingHandCursor
-        }
-    }
-
-    Item {
-        id: fleetSetting
-        anchors.top: networkTabSettings.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        width: parent.width - 20
-        height: fleetText.height
-
-        StyledText {
-            id: fleetText
-            text: qsTr("Fleet")
-            font.pixelSize: 15
         }
 
-        StyledText {
+        StatusSectionMenuItem {
-            text: profileModel.fleets.fleet
+            label: qsTr("Fleet")
-            font.pixelSize: 15
+            info: profileModel.fleets.fleet
-            anchors.right: caret2.left
-            anchors.rightMargin: Style.current.padding
-        }
-
-        SVGImage {
-            id: caret2
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.verticalCenter: fleetText.verticalCenter
-            source: "../../../img/caret.svg"
-            width: 13
-            height: 7
-            rotation: -90
-        }
-        
-        ColorOverlay {
-            anchors.fill: caret2
-            source: caret2
-            color: Style.current.darkGrey
-            rotation: -90
-        }
-
-        FleetsModal {
-            id: fleetModal
-        }
-
-        MouseArea {
-            anchors.fill: parent
             onClicked: fleetModal.open()
-            cursorShape: Qt.PointingHandCursor
-        }
-    }
-
-    RowLayout {
-        id: uiCatalog
-        anchors.top: fleetSetting.bottom
-        anchors.topMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        Component.onCompleted: {
-            uiComponentBtn.enabled = false
         }
 
-        StyledText {
+        Separator {}
-            //% "UI Components"
+
-            text: qsTrId("ui-components")
+        StatusSectionHeadline {
+            text: qsTr("Experimental features")
         }
 
-        StatusSwitch {
+        StatusSettingsLineButton {
-            checked: uiComponentBtn.enabled
+            text: qsTr("Wallet")
-            onCheckedChanged: function(value) {
+            isSwitch: true
-                uiComponentBtn.enabled = this.checked
+            switchChecked: appSettings.walletEnabled
+            onClicked: function (checked) {
+                appSettings.walletEnabled = checked
             }
         }
-        StyledText {
+
-            //% "Developer setting"
+        StatusSettingsLineButton {
-            text: qsTrId("developer-setting")
+            text: qsTr("Dapp Browser")
+            isSwitch: true
+            switchChecked: appSettings.browserEnabled
+            onClicked: function (checked) {
+                appSettings.browserEnabled = checked
+            }
+        }
+
+        StatusSettingsLineButton {
+            text: qsTr("Communities")
+            isSwitch: true
+            switchChecked: appSettings.communitiesEnabled
+            onClicked: function (checked) {
+                appSettings.communitiesEnabled = checked
+            }
+        }
+
+        StatusSettingsLineButton {
+            text: qsTr("Node Management")
+            isSwitch: true
+            switchChecked: appSettings.nodeManagementEnabled
+            onClicked: function (checked) {
+                appSettings.nodeManagementEnabled = checked
+            }
         }
     }
+
+    NetworksModal {
+        id: networksModal
+    }
+
+    FleetsModal {
+        id: fleetModal
+    }
+
+
 }
 
 /*##^##

ui/app/AppMain.qml

@@ -262,7 +262,7 @@ RowLayout {
 
         StatusIconTabButton {
               id: nodeBtn
-              enabled: isExperimental === "1"
+              enabled: isExperimental === "1" && appSettings.nodeManagementEnabled
               anchors.top: profileBtn.top
               icon.name: "node"
         }

ui/main.qml

@@ -95,6 +95,7 @@ ApplicationWindow {
         id: defaultAppSettings
         property bool communitiesEnabled: false
         property bool walletEnabled: false
+        property bool nodeManagementEnabled: false
         property bool browserEnabled: false
         property bool displayChatImages: false
         property bool timelineEnabled: true
@@ -141,6 +142,7 @@ ApplicationWindow {
         property var profileSplitView
         property bool communitiesEnabled: defaultAppSettings.communitiesEnabled
         property bool walletEnabled: defaultAppSettings.walletEnabled
+        property bool nodeManagementEnabled: defaultAppSettings.nodeManagementEnabled
         property bool browserEnabled: defaultAppSettings.browserEnabled
         property bool displayChatImages: defaultAppSettings.displayChatImages
         property bool compactMode: defaultAppSettings.compactMode