added PageSettingsAbout, PageSettingsApplication, PageSettingsBackup, PageSettingsConnection, PageSettingsDns

- added SettingsController

client/ui/qml/Controls2/DropDownType.qml

@@ -15,13 +15,15 @@ Item {
     property string headerText
     property string headerBackButtonImage
 
-    property var onRootButtonClicked
+    property var rootButtonClickedFunction
     property string rootButtonImage: "qrc:/images/controls/chevron-down.svg"
-    property string rootButtonImageColor: "#494B50"
-    property string rootButtonDefaultColor: "#1C1D21"
+    property string rootButtonImageColor: "#D7D8DB"
+    property string rootButtonBackgroundColor: "#1C1D21"
     property int rootButtonMaximumWidth: 0
 
-    property string rootButtonBorderColor: "#494B50"
+    property string rootButtonHoveredBorderColor: "#494B50"
+    property string rootButtonDefaultBorderColor: "transparent"
+    property string rootButtonPressedBorderColor: "#D7D8DB"
     property int rootButtonBorderWidth: 1
 
     property real drawerHeight: 0.9
@@ -32,18 +34,31 @@ Item {
     implicitWidth: rootButtonContent.implicitWidth
     implicitHeight: rootButtonContent.implicitHeight
 
+    onMenuVisibleChanged: {
+        if (menuVisible) {
+            rootButtonBackground.border.color = rootButtonPressedBorderColor
+            rootButtonBackground.border.width = rootButtonBorderWidth
+        } else {
+            rootButtonBackground.border.color = rootButtonDefaultBorderColor
+            rootButtonBackground.border.width = 0
+        }
+    }
+
     Rectangle {
         id: rootButtonBackground
         anchors.fill: rootButtonContent
 
         radius: 16
-        color: rootButtonDefaultColor
-        border.color: rootButtonBorderColor
-        border.width: rootButtonBorderWidth
+        color: rootButtonBackgroundColor
+        border.color: rootButtonDefaultBorderColor
+        border.width: 0
 
         Behavior on border.width {
             PropertyAnimation { duration: 200 }
         }
+        Behavior on border.color {
+            PropertyAnimation { duration: 200 }
+        }
     }
 
     RowLayout {
@@ -83,7 +98,6 @@ Item {
             }
         }
 
-        //todo change to image type
         ImageButtonType {
             Layout.leftMargin: 4
             Layout.rightMargin: 16
@@ -100,16 +114,22 @@ Item {
         hoverEnabled: true
 
         onEntered: {
-            rootButtonBackground.border.width = rootButtonBorderWidth
+            if (menu.visible === false) {
+                rootButtonBackground.border.width = rootButtonBorderWidth
+                rootButtonBackground.border.color = rootButtonHoveredBorderColor
+            }
         }
 
         onExited: {
-            rootButtonBackground.border.width = 0
+            if (menu.visible === false) {
+                rootButtonBackground.border.width = 0
+                rootButtonBackground.border.color = rootButtonDefaultBorderColor
+            }
         }
 
         onClicked: {
-            if (onRootButtonClicked && typeof onRootButtonClicked === "function") {
-                onRootButtonClicked()
+            if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
+                rootButtonClickedFunction()
             } else {
                 menu.visible = true
             }

client/ui/qml/Controls2/ImageButtonType.qml

@@ -10,8 +10,10 @@ Button {
     property string hoveredColor: Qt.rgba(1, 1, 1, 0.08)
     property string defaultColor: "transparent"
     property string pressedColor: Qt.rgba(1, 1, 1, 0.12)
+    property string disableColor: "#2C2D30"
 
     property string imageColor: "#878B91"
+    property string disableImageColor: "#2C2D30"
 
     implicitWidth: 40
     implicitHeight: 40
@@ -19,7 +21,11 @@ Button {
     hoverEnabled: true
 
     icon.source: image
-    icon.color: imageColor
+    icon.color: root.enabled ? imageColor : disableImageColor
+
+    Behavior on icon.color {
+        PropertyAnimation { duration: 200 }
+    }
 
     background: Rectangle {
         id: background
@@ -33,6 +39,7 @@ Button {
                 }
                 return hovered ? hoveredColor : defaultColor
             }
+            return defaultColor
         }
         Behavior on color {
             PropertyAnimation { duration: 200 }

client/ui/qml/Controls2/SwitcherType.qml

@@ -2,9 +2,13 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import "TextTypes"
+
 Switch {
     id: root
 
+    property alias descriptionText: description.text
+
     property string checkedIndicatorColor: "#412102"
     property string defaultIndicatorColor: "transparent"
     property string checkedIndicatorBorderColor: "#412102"
@@ -16,10 +20,18 @@ Switch {
     property string hoveredIndicatorBackgroundColor: Qt.rgba(1, 1, 1, 0.08)
     property string defaultIndicatorBackgroundColor: "transparent"
 
+    implicitWidth: content.implicitWidth + switcher.implicitWidth
+    implicitHeight: content.implicitHeight
+
     indicator: Rectangle {
+        id: switcher
+
+        anchors.left: content.right
+        anchors.verticalCenter: parent.verticalCenter
+
         implicitWidth: 52
         implicitHeight: 32
-        x: content.width - width
+
         radius: 16
         color: root.checked ? checkedIndicatorColor : defaultIndicatorColor
         border.color: root.checked ? checkedIndicatorBorderColor : defaultIndicatorBorderColor
@@ -62,16 +74,23 @@ Switch {
     contentItem: ColumnLayout {
         id: content
 
-        Text {
-            text: root.text
-            color: "#D7D8DB"
-            font.pixelSize: 18
-            font.weight: 400
-            font.family: "PT Root UI VF"
+        anchors.fill: parent
+        anchors.rightMargin: switcher.implicitWidth
 
-            height: 22
+        ListItemTitleType {
             Layout.fillWidth: true
-            Layout.bottomMargin: 16
+
+            text: root.text
+        }
+
+        CaptionTextType {
+            id: description
+
+            Layout.fillWidth: true
+
+            color: "#878B91"
+
+            visible: text !== ""
         }
     }