added page transition effects

- added functionality for buttons on PageSettingsServerData page

client/ui/qml/Controls2/DrawerType.qml

@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Controls
+
+Drawer {
+    edge: Qt.BottomEdge
+
+    clip: true
+    modal: true
+
+    enter: Transition {
+        SmoothedAnimation {
+            velocity: 4
+        }
+    }
+    exit: Transition {
+        SmoothedAnimation {
+            velocity: 4
+        }
+    }
+}

client/ui/qml/Controls2/DropDownType.qml

@@ -111,16 +111,12 @@ Item {
         }
     }
 
-    Drawer {
+    DrawerType {
         id: menu
 
-        edge: Qt.BottomEdge
         width: parent.width
         height: parent.height * 0.9
 
-        clip: true
-        modal: true
-
         background: Rectangle {
             anchors.fill: parent
             anchors.bottomMargin: -radius

client/ui/qml/Controls2/PageType.qml

@@ -8,10 +8,11 @@ Item {
     property StackView stackView: StackView.view
 
     function goToPage(page, slide = true) {
+        var pagePath = PageController.getPagePath(page)
         if (slide) {
-            root.stackView.push(PageController.getPagePath(page), {}, StackView.PushTransition)
+            root.stackView.push(pagePath, { "objectName" : pagePath }, StackView.PushTransition)
         } else {
-            root.stackView.push(PageController.getPagePath(page), {}, StackView.Immediate)
+            root.stackView.push(pagePath, { "objectName" : pagePath }, StackView.Immediate)
         }
     }
 

client/ui/qml/Controls2/StackViewType.qml

@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Controls
+
+StackView {
+    id: root
+
+    pushEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to:1
+            duration: 200
+        }
+    }
+
+    pushExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to:0
+            duration: 200
+        }
+    }
+
+    popEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to:1
+            duration: 200
+        }
+    }
+
+    popExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to:0
+            duration: 200
+        }
+    }
+
+    replaceEnter: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 0
+            to:1
+            duration: 200
+        }
+    }
+
+    replaceExit: Transition {
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to:0
+            duration: 200
+        }
+    }
+}
+

client/ui/qml/Controls2/SwitcherType.qml

@@ -59,6 +59,7 @@ Switch {
         }
     }
 
+    contentItem: ColumnLayout {
     contentItem: ColumnLayout {
         id: content
 

client/ui/qml/Controls2/VerticalRadioButton.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import "TextTypes"
+
 RadioButton {
     id: root
 
@@ -13,7 +15,8 @@ RadioButton {
     property string disabledColor: Qt.rgba(1, 1, 1, 0)
     property string selectedColor: Qt.rgba(1, 1, 1, 0)
 
-    property string textColor: "#0E0E11"
+    property string textColor: "#D7D8DB"
+    property string selectedTextColor: "#FBB26A"
 
     property string pressedBorderColor: Qt.rgba(251/255, 178/255, 106/255, 0.3)
     property string selectedBorderColor: "#FBB26A"
@@ -26,11 +29,16 @@ RadioButton {
 
     property string defaultInnerCircleColor: "#FBB26A"
 
+    property string imageSource
+    property bool showImage
+
     hoverEnabled: true
 
     indicator: Rectangle {
         id: background
 
+        anchors.verticalCenter: parent.verticalCenter
+
         implicitWidth: 56
         implicitHeight: 56
         radius: 16
@@ -52,6 +60,16 @@ RadioButton {
             PropertyAnimation { duration: 200 }
         }
 
+        Image {
+            source: imageSource
+            visible: showImage
+
+            anchors.centerIn: parent
+
+            width: 24
+            height: 24
+        }
+
         Rectangle {
             id: outerCircle
 
@@ -59,6 +77,8 @@ RadioButton {
             height: 24
             radius: 16
 
+            visible: !showImage
+
             anchors.centerIn: parent
 
             color: "transparent"
@@ -120,34 +140,41 @@ RadioButton {
 
     contentItem: ColumnLayout {
         id: content
-        anchors.fill: parent
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.leftMargin: 8 + background.width
 
-        Text {
-            text: root.text
-            wrapMode: Text.WordWrap
-            color: "#D7D8DB"
-            font.pixelSize: 16
-            font.weight: 400
-            font.family: "PT Root UI VF"
+        spacing: 4
+
+        ListItemTitleType {
+            text: root.text
+
+            color: {
+                if (root.checked) {
+                    return selectedTextColor
+                }
+                return textColor
+            }
 
-            height: 24
             Layout.fillWidth: true
+            Layout.topMargin: 16
+            Layout.bottomMargin: description.visible ? 0 : 16
+
+            Behavior on color {
+                PropertyAnimation { duration: 200 }
+            }
         }
 
-        Text {
-            font.family: "PT Root UI VF"
-            font.styleName: "normal"
-            font.pixelSize: 13
-            font.letterSpacing: 0.02
+        CaptionTextType {
+            id: description
+
             color: "#878B91"
             text: root.descriptionText
-            wrapMode: Text.WordWrap
 
             visible: root.descriptionText !== ""
 
             Layout.fillWidth: true
-            height: 16
+            Layout.bottomMargin: 16
         }
     }