Merge pull request #359 from amnezia-vpn/bugfix/minor-ui-fixes-4-version

minor ui fixes

client/ui/controllers/installController.cpp

@@ -113,8 +113,7 @@ void InstallController::installServer(DockerContainer container, QJsonObject &co
                 ContainerProps::containerHumanNames().value(container) + tr(" is already installed on the server. ");
     }
     if (installedContainers.size() > 1) {
-        finishMessage += tr("\nAlready installed containers were found on the server. "
+        finishMessage += tr("\nAdded containers that were already installed on the server");
-                            "All installed containers have been added to the application");
     }
 
     if (errorCode == ErrorCode::NoError) {

client/ui/qml/Components/ShareConnectionDrawer.qml

@@ -114,7 +114,7 @@ DrawerType {
 
                 BasicButtonType {
                     Layout.fillWidth: true
-                    Layout.topMargin: 8
+                    Layout.topMargin: 24
 
                     defaultColor: "transparent"
                     hoveredColor: Qt.rgba(1, 1, 1, 0.08)
@@ -123,7 +123,7 @@ DrawerType {
                     textColor: "#D7D8DB"
                     borderWidth: 1
 
-                    text: qsTr("Show content")
+                    text: qsTr("Show connection settings")
 
                     onClicked: {
                         configContentDrawer.visible = true

client/ui/qml/Controls2/BackButtonType.qml

@@ -23,6 +23,9 @@ Item {
             image: backButtonImage
             imageColor: "#D7D8DB"
 
+            implicitWidth: 40
+            implicitHeight: 40
+
             onClicked: {
                 if (backButtonFunction && typeof backButtonFunction === "function") {
                     backButtonFunction()

client/ui/qml/Controls2/BasicButtonType.qml

@@ -90,6 +90,9 @@ Button {
             anchors.centerIn: parent
 
             Image {
+                Layout.preferredHeight: 20
+                Layout.preferredWidth: 20
+
                 source: root.imageSource
                 visible: root.imageSource === "" ? false : true
 

client/ui/qml/Controls2/DropDownType.qml

@@ -24,6 +24,8 @@ Item {
     property string rootButtonImage: "qrc:/images/controls/chevron-down.svg"
     property string rootButtonImageColor: "#D7D8DB"
     property string rootButtonBackgroundColor: "#1C1D21"
+    property string rootButtonBackgroundHoveredColor: "#1C1D21"
+    property string rootButtonBackgroundPressedColor: "#1C1D21"
 
     property string rootButtonHoveredBorderColor: "#494B50"
     property string rootButtonDefaultBorderColor: "#2C2D30"
@@ -71,6 +73,10 @@ Item {
         Behavior on border.color {
             PropertyAnimation { duration: 200 }
         }
+
+        Behavior on color {
+            PropertyAnimation { duration: 200 }
+        }
     }
 
     RowLayout {
@@ -112,6 +118,9 @@ Item {
         ImageButtonType {
             Layout.rightMargin: 16
 
+            implicitWidth: 40
+            implicitHeight: 40
+
             hoverEnabled: false
             image: rootButtonImage
             imageColor: rootButtonImageColor
@@ -126,12 +135,20 @@ Item {
         onEntered: {
             if (menu.visible === false) {
                 rootButtonBackground.border.color = rootButtonHoveredBorderColor
+                rootButtonBackground.color = rootButtonBackgroundHoveredColor
             }
         }
 
         onExited: {
             if (menu.visible === false) {
                 rootButtonBackground.border.color = rootButtonDefaultBorderColor
+                rootButtonBackground.color = rootButtonBackgroundColor
+            }
+        }
+
+        onPressed: {
+            if (menu.visible === false) {
+                rootButtonBackground.color = pressed ? rootButtonBackgroundPressedColor : entered ? rootButtonHoveredBorderColor : rootButtonDefaultBorderColor
             }
         }
 

client/ui/qml/Controls2/Header2Type.qml

@@ -31,6 +31,9 @@ Item {
             ImageButtonType {
                 id: headerActionButton
 
+                implicitWidth: 40
+                implicitHeight: 40
+
                 image: root.actionButtonImage
                 imageColor: "#D7D8DB"
 

client/ui/qml/Controls2/HeaderType.qml

@@ -36,6 +36,9 @@ Item {
             ImageButtonType {
                 id: headerActionButton
 
+                implicitWidth: 40
+                implicitHeight: 40
+
                 Layout.alignment: Qt.AlignRight
 
                 image: root.actionButtonImage

client/ui/qml/Controls2/ImageButtonType.qml

@@ -15,11 +15,8 @@ Button {
     property string imageColor: "#878B91"
     property string disableImageColor: "#2C2D30"
 
-    property int backGroudRadius: 12
+    property alias backgroundColor: background.color
-    property int implicitSize: 40
+    property alias backgroundRadius: background.radius
-
-    implicitWidth: implicitSize
-    implicitHeight: implicitSize
 
     hoverEnabled: true
 
@@ -34,7 +31,6 @@ Button {
         id: background
 
         anchors.fill: parent
-        radius: backGroudRadius
         color: {
             if (root.enabled) {
                 if (root.pressed) {
@@ -44,6 +40,7 @@ Button {
             }
             return defaultColor
         }
+        radius: 12
         Behavior on color {
             PropertyAnimation { duration: 200 }
         }

client/ui/qml/Controls2/LabelWithButtonType.qml

@@ -119,6 +119,9 @@ Item {
         ImageButtonType {
             id: rightImage
 
+            implicitWidth: 40
+            implicitHeight: 40
+
             hoverEnabled: false
             image: rightImageSource
             imageColor: rightImageColor

client/ui/qml/Controls2/TextTypes/ButtonTextType.qml

@@ -6,7 +6,7 @@ Text {
 
     color: "#D7D8DB"
     font.pixelSize: 16
-    font.weight: 500
+    font.weight: 600
     font.family: "PT Root UI VF"
 
     wrapMode: Text.WordWrap

client/ui/qml/Controls2/TopCloseButtonType.qml

@@ -23,6 +23,9 @@ Popup {
         image: "qrc:/images/svg/close_black_24dp.svg"
         imageColor: "#D7D8DB"
 
+        implicitWidth: 40
+        implicitHeight: 40
+
         onClicked: {
             PageController.goToDrawerRootPage()
         }

client/ui/qml/Pages2/PageHome.qml

@@ -81,6 +81,20 @@ PageType {
             }
         }
 
+        onEntered: {
+            collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
+            collapsedButtonHeader.opacity = 0.8
+        }
+        onExited: {
+            collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
+            collapsedButtonHeader.opacity = 1
+        }
+        onPressedChanged: {
+            collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
+            collapsedButtonHeader.opacity = 0.7
+        }
+
+
         onClicked: {
             if (buttonContent.state === "collapsed") {
                 buttonContent.state = "expanded"
@@ -202,6 +216,7 @@ PageType {
             spacing: 0
 
             Header1TextType {
+                id: collapsedButtonHeader
                 Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo
 
                 maximumLineCount: 2
@@ -209,15 +224,33 @@ PageType {
 
                 text: root.defaultServerName
                 horizontalAlignment: Qt.AlignHCenter
+
+                Behavior on opacity {
+                    PropertyAnimation { duration: 200 }
+                }
             }
 
-            Image {
+            ImageButtonType {
-                Layout.preferredWidth: 18
+                id: collapsedButtonChevron
-                Layout.preferredHeight: 18
 
-                Layout.leftMargin: 12
+                Layout.leftMargin: 8
 
-                source: "qrc:/images/controls/chevron-down.svg"
+                hoverEnabled: false
+                image: "qrc:/images/controls/chevron-down.svg"
+                imageColor: "#d7d8db"
+
+                icon.width: 18
+                icon.height: 18
+                backgroundRadius: 16
+                horizontalPadding: 4
+                topPadding: 4
+                bottomPadding: 3
+
+                onClicked: {
+                    if (buttonContent.state === "collapsed") {
+                        buttonContent.state = "expanded"
+                    }
+                }
             }
         }
 
@@ -279,8 +312,10 @@ PageType {
 
                     rootButtonImageColor: "#0E0E11"
                     rootButtonBackgroundColor: "#D7D8DB"
+                    rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
+                    rootButtonBackgroundPressedColor: Qt.rgba(215, 216, 219, 0.65)
                     rootButtonHoveredBorderColor: "transparent"
-                    rootButtonPressedBorderColor: "transparent"
+                    rootButtonDefaultBorderColor: "transparent"
                     rootButtonTextTopMargin: 8
                     rootButtonTextBottomMargin: 8
 
@@ -463,6 +498,8 @@ PageType {
 
                             DividerType {
                                 Layout.fillWidth: true
+                                Layout.leftMargin: 0
+                                Layout.rightMargin: 0
                             }
                         }
                     }

client/ui/qml/Pages2/PageSetupWizardEasy.qml

@@ -62,6 +62,7 @@ PageType {
                 id: header
 
                 implicitWidth: parent.width
+                headerTextMaximumLineCount: 10
 
                 headerText: qsTr("What is the level of internet control in your region?")
             }
@@ -145,14 +146,13 @@ PageType {
 
             Item {
                 implicitWidth: 1
-                implicitHeight: 1
+                implicitHeight: 54
             }
 
             BasicButtonType {
                 id: continueButton
 
                 implicitWidth: parent.width
-                anchors.topMargin: 24
 
                 text: qsTr("Continue")
 

client/ui/qml/Pages2/PageShare.qml

@@ -219,13 +219,14 @@ PageType {
 
                         if (accessTypeSelector.currentIndex !== 0) {
                             shareConnectionDrawer.headerText = qsTr("Accessing ") + serverSelector.text
-                            shareConnectionDrawer.configContentHeaderText = qsTr("File with connection settings to ") + serverSelector.text
+                            shareConnectionDrawer.configContentHeaderText = qsTr("File with accessing settings to ") + serverSelector.text
                         }
                         serverSelector.menuVisible = false
                     }
 
                     Component.onCompleted: {
                         handler()
+                        serverSelector.severSelectorIndexChanged()
                     }
 
                     function handler() {
@@ -240,12 +241,14 @@ PageType {
             DropDownType {
                 id: protocolSelector
 
+                visible: accessTypeSelector.currentIndex === 0
+
                 Layout.fillWidth: true
                 Layout.topMargin: 16
 
                 drawerHeight: 0.5
 
-                descriptionText: qsTr("Protocols")
+                descriptionText: qsTr("Protocol")
                 headerText: qsTr("Protocol")
 
                 listView: ListViewWithRadioButtonType {