Merge pull request #340 from amnezia-vpn/bugfix/add_hover_in_home_page

added  hover effect for default-server in pagehome

client/resources.qrc

@@ -215,5 +215,6 @@
         <file>ui/qml/Controls2/ListViewWithLabelsType.qml</file>
         <file>ui/qml/Pages2/PageServiceDnsSettings.qml</file>
         <file>ui/qml/Controls2/TopCloseButtonType.qml</file>
+        <file>ui/qml/Components/HomeRootMenuButton.qml</file>
     </qresource>
 </RCC>

client/ui/qml/Components/HomeRootMenuButton.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import "../Controls2/TextTypes"
+import "../Controls2"
+
+Item {
+    id: root
+
+    property string text
+    property int textMaximumLineCount: 2
+    property int textElide: Qt.ElideRight
+
+    property string descriptionText
+
+    property var clickedFunction
+
+    property string rightImageSource
+
+    property string textColor: "#d7d8db"
+    property string descriptionColor: "#878B91"
+    property real textOpacity: 1.0
+
+    property string rightImageColor: "#d7d8db"
+
+    property bool descriptionOnTop: false
+
+    property string defaultServerHostName
+    property string defaultContainerName
+
+    implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
+    implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
+
+    ColumnLayout {
+        id: content
+
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+
+        RowLayout {
+            Layout.topMargin: 24
+            Layout.leftMargin: 24
+            Layout.rightMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            Header1TextType {
+                Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
+
+                maximumLineCount: 2
+                elide: Qt.ElideRight
+
+                text: root.text
+                Layout.alignment: Qt.AlignLeft
+            }
+
+
+            ImageButtonType {
+                id: rightImage
+
+                hoverEnabled: false
+                image: rightImageSource
+                imageColor: rightImageColor
+                visible: rightImageSource ? true : false
+
+                implicitSize: 18
+                backGroudRadius: 5
+                horizontalPadding: 0
+                padding: 0
+                spacing: 0
+
+
+                Rectangle {
+                    id: rightImageBackground
+                    anchors.fill: parent
+                    radius: 16
+                    color: "transparent"
+
+                    Behavior on color {
+                        PropertyAnimation { duration: 200 }
+                    }
+                }
+            }
+        }
+
+        LabelTextType {
+            Layout.bottomMargin: 44
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            text: {
+                var description = ""
+                if (ServersModel.isDefaultServerHasWriteAccess()) {
+                    if (SettingsController.isAmneziaDnsEnabled()
+                            && ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) {
+                        description += "Amnezia DNS | "
+                    }
+                } else {
+                    if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) {
+                        description += "Amnezia DNS | "
+                    }
+                }
+
+                description += root.defaultContainerName + " | " + root.defaultServerHostName
+                return description
+            }
+        }
+    }
+
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+
+        onEntered: {
+            rightImageBackground.color = rightImage.hoveredColor
+
+            root.textOpacity = 0.8
+        }
+
+        onExited: {
+            rightImageBackground.color = rightImage.defaultColor
+
+            root.textOpacity = 1
+        }
+
+        onPressedChanged: {
+            rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
+
+            root.textOpacity = 0.7
+        }
+
+        onClicked: {
+            if (clickedFunction && typeof clickedFunction === "function") {
+                clickedFunction()
+            }
+        }
+    }
+}

client/ui/qml/Controls2/ImageButtonType.qml

@@ -15,8 +15,11 @@ Button {
     property string imageColor: "#878B91"
     property string disableImageColor: "#2C2D30"
 
-    implicitWidth: 40
+    property int backGroudRadius: 12
-    implicitHeight: 40
+    property int implicitSize: 40
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
 
     hoverEnabled: true
 
@@ -31,7 +34,7 @@ Button {
         id: background
 
         anchors.fill: parent
-        radius: 12
+        radius: backGroudRadius
         color: {
             if (root.enabled) {
                 if(root.pressed) {

client/ui/qml/Pages2/PageHome.qml

@@ -50,7 +50,7 @@ PageType {
 
     Rectangle {
         id: buttonBackground
-        anchors.fill: buttonContent
+        anchors.fill: defaultServerInfo
 
         radius: 16
         color: root.defaultColor
@@ -67,70 +67,21 @@ PageType {
         }
     }
 
-    ColumnLayout {
+    HomeRootMenuButton {
-        id: buttonContent
+        id: defaultServerInfo
+        height: 130
         anchors.right: parent.right
         anchors.left: parent.left
         anchors.bottom: parent.bottom
 
-        RowLayout {
+        text: root.defaultServerName
-            Layout.topMargin: 24
+        rightImageSource: "qrc:/images/controls/chevron-down.svg"
-            Layout.leftMargin: 24
-            Layout.rightMargin: 24
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            spacing: 0
+        defaultContainerName: root.defaultContainerName
+        defaultServerHostName: root.defaultServerHostName
 
-            Header1TextType {
+        clickedFunction: function() {
-                Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo
+             menu.visible = true
-
-                maximumLineCount: 2
-                elide: Qt.ElideRight
-
-                text: root.defaultServerName
-                horizontalAlignment: Qt.AlignHCenter
-            }
-
-            Image {
-                Layout.preferredWidth: 18
-                Layout.preferredHeight: 18
-
-                Layout.leftMargin: 12
-
-                source: "qrc:/images/controls/chevron-down.svg"
-            }
-        }
-
-        LabelTextType {
-            Layout.bottomMargin: 44
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-            text: {
-                var description = ""
-                if (ServersModel.isDefaultServerHasWriteAccess()) {
-                    if (SettingsController.isAmneziaDnsEnabled()
-                            && ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) {
-                        description += "Amnezia DNS | "
-                    }
-                } else {
-                    if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) {
-                        description += "Amnezia DNS | "
-                    }
-                }
-
-                description += root.defaultContainerName + " | " + root.defaultServerHostName
-                return description
-            }
-        }
-    }
-
-    MouseArea {
-        anchors.fill: buttonBackground
-        cursorShape: Qt.PointingHandCursor
-        hoverEnabled: true
-
-        onClicked: {
-            menu.visible = true
         }
     }