Merge branch 'dev' of github.com:amnezia-vpn/amnezia-client into HEAD

client/resources.qrc

@@ -215,6 +215,5 @@
         <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

@@ -1,127 +0,0 @@
-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
-
-                icon.width: 18
-                icon.height: 18
-                backgroundRadius: 16
-                horizontalPadding: 4
-                topPadding: 4
-                bottomPadding: 3
-            }
-        }
-
-        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: {
-            rightImage.backgroundColor = rightImage.hoveredColor
-
-            root.textOpacity = 0.8
-        }
-
-        onExited: {
-            rightImage.backgroundColor = rightImage.defaultColor
-
-            root.textOpacity = 1
-        }
-
-        onPressedChanged: {
-            rightImage.backgroundColor = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
-
-            root.textOpacity = 0.7
-        }
-
-        onClicked: {
-            if (clickedFunction && typeof clickedFunction === "function") {
-                clickedFunction()
-            }
-        }
-    }
-}

client/ui/qml/Controls2/DrawerType.qml

@@ -4,7 +4,6 @@ import QtQuick.Controls
 Drawer {
     id: drawer
     property bool needCloseButton: true
-    property bool isOpened: false
 
     Connections {
         target: PageController
@@ -53,16 +52,12 @@ Drawer {
     }
 
     onOpened: {
-        isOpened = true
-        
         if (needCloseButton) {
             PageController.drawerOpen()
         }
     }
 
     onClosed: {
-        isOpened = false
-        
         if (needCloseButton) {
             PageController.drawerClose()
         }
@@ -72,27 +67,4 @@ Drawer {
             PageController.updateNavigationBarColor(initialPageNavigationBarColor)
         }
     }
-
-
-    onPositionChanged: {
-        if (isOpened && (position <= 0.99 && position >= 0.95)) {
-            mouseArea.canceled()
-            drawer.close()
-            mouseArea.exited()
-            dropArea.exited()
-        }
-    }
-
-    DropArea {
-        id: dropArea
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-
-        onPressed: {
-            isOpened = true
-        }
-    }
 }

client/ui/qml/Pages2/PageHome.qml

@@ -26,11 +26,17 @@ PageType {
     property string defaultServerHostName: ServersModel.defaultServerHostName
     property string defaultContainerName: ContainersModel.defaultContainerName
 
+    MouseArea {
+        anchors.fill: parent
+        enabled: buttonContent.state === "expanded"
+        onClicked: {
+            buttonContent.state = "collapsed"
+        }
+    }
+
     Item {
-        anchors.top: parent.top
+        anchors.fill: parent
-        anchors.bottom: buttonBackground.top
+        anchors.bottomMargin: buttonContent.collapsedHeight
-        anchors.right: parent.right
-        anchors.left: parent.left
 
         ConnectButton {
             anchors.centerIn: parent
@@ -41,17 +47,66 @@ PageType {
         target: PageController
 
         function onRestorePageHomeState(isContainerInstalled) {
-            menu.visible = true
+            buttonContent.state = "expanded"
             if (isContainerInstalled) {
                 containersDropDown.menuVisible = true
             }
         }
+        function onForceCloseDrawer() {
+            buttonContent.state = "collapsed"
+        }
+    }
+
+    MouseArea {
+        id: dragArea
+
+        anchors.fill: buttonBackground
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+
+        drag.target: buttonContent
+        drag.axis: Drag.YAxis
+        drag.maximumY: root.height - buttonContent.collapsedHeight
+        drag.minimumY: root.height - root.height * 0.9
+
+        /** If drag area is released at any point other than min or max y, transition to the other state */
+        onReleased: {
+            if (buttonContent.state === "collapsed" && buttonContent.y < dragArea.drag.maximumY) {
+                buttonContent.state = "expanded"
+                return
+            }
+            if (buttonContent.state === "expanded" && buttonContent.y > dragArea.drag.minimumY) {
+                buttonContent.state = "collapsed"
+                return
+            }
+        }
+
+        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"
+            }
+        }
     }
 
     Rectangle {
         id: buttonBackground
-        anchors.fill: defaultServerInfo
 
+        anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
+        height: root.height
         radius: 16
         color: root.defaultColor
         border.color: root.borderColor
@@ -67,44 +122,167 @@ PageType {
         }
     }
 
-    HomeRootMenuButton {
+    ColumnLayout {
-        id: defaultServerInfo
+        id: buttonContent
-        height: 130
-        anchors.right: parent.right
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
 
-        text: root.defaultServerName
+        /** Initial height of button content */
-        rightImageSource: "qrc:/images/controls/chevron-down.svg"
+        property int collapsedHeight: 0
+        /** True when expanded objects should be visible */
+        property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active === true)
+        /** True when collapsed objects should be visible */
+        property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false
 
-        defaultContainerName: root.defaultContainerName
+        Drag.active: dragArea.drag.active
-        defaultServerHostName: root.defaultServerHostName
+        anchors.right: root.right
+        anchors.left: root.left
+        y: root.height - buttonContent.height
 
-        clickedFunction: function() {
+        Component.onCompleted: {
-             menu.visible = true
+            buttonContent.state = "collapsed"
         }
-    }
 
-    DrawerType {
+        /** Set once based on first implicit height change once all children are layed out */
-        id: menu
+        onImplicitHeightChanged: {
-
+            if (buttonContent.state === "collapsed" && collapsedHeight == 0) {
-        interactive: {
+                collapsedHeight = implicitHeight
-            if (stackView && stackView.currentItem) {
-                return (stackView.currentItem.objectName === PageController.getPagePath(PageEnum.PageHome)) ? true : false
-            } else {
-                return false
             }
         }
-        dragMargin: buttonBackground.height + 56 // page start tabBar height
 
-        width: parent.width
+        onStateChanged: {
-        height: parent.height * 0.9
+            if (buttonContent.state === "collapsed") {
+                var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
+                if (initialPageNavigationBarColor !== 0xFF1C1D21) {
+                    PageController.updateNavigationBarColor(initialPageNavigationBarColor)
+                }
+                PageController.drawerClose()
+                return
+            }
+            if (buttonContent.state === "expanded") {
+                if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
+                    PageController.updateNavigationBarColor(0xFF1C1D21)
+                }
+                PageController.drawerOpen()
+                return
+            }
+        }
+
+        /** Two states of buttonContent, great place to add any future animations for the drawer */
+        states: [
+            State {
+                name: "collapsed"
+                PropertyChanges {
+                    target: buttonContent
+                    y: root.height - collapsedHeight
+                }
+            },
+            State {
+                name: "expanded"
+                PropertyChanges {
+                    target: buttonContent
+                    y: dragArea.drag.minimumY
+
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: "collapsed"
+                to: "expanded"
+                PropertyAnimation {
+                    target: buttonContent
+                    properties: "y"
+                    duration: 200
+                }
+            },
+            Transition {
+                from: "expanded"
+                to: "collapsed"
+                PropertyAnimation {
+                    target: buttonContent
+                    properties: "y"
+                    duration: 200
+                }
+            }
+        ]
+
+        RowLayout {
+            Layout.topMargin: 24
+            Layout.leftMargin: 24
+            Layout.rightMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            visible: buttonContent.collapsedVisibility
+
+            spacing: 0
+
+            Header1TextType {
+                id: collapsedButtonHeader
+                Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo
+
+                maximumLineCount: 2
+                elide: Qt.ElideRight
+
+                text: root.defaultServerName
+                horizontalAlignment: Qt.AlignHCenter
+
+                Behavior on opacity {
+                    PropertyAnimation { duration: 200 }
+                }
+            }
+
+            ImageButtonType {
+                id: collapsedButtonChevron
+
+                Layout.leftMargin: 8
+
+                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"
+                    }
+                }
+            }
+        }
+
+        LabelTextType {
+            Layout.bottomMargin: 44
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            visible: buttonContent.collapsedVisibility
+
+            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
+            }
+        }
 
         ColumnLayout {
             id: serversMenuHeader
-            anchors.top: parent.top
+
-            anchors.right: parent.right
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
-            anchors.left: parent.left
+            Layout.fillWidth: true
+            visible: buttonContent.expandedVisibility
 
             Header1TextType {
                 Layout.fillWidth: true
@@ -185,13 +363,14 @@ PageType {
                 Layout.topMargin: 48
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
+                visible: buttonContent.expandedVisibility
 
                 actionButtonImage: "qrc:/images/controls/plus.svg"
 
                 headerText: qsTr("Servers")
 
                 actionButtonFunction: function() {
-                    menu.visible = false
+                    buttonContent.state = "collapsed"
                     connectionTypeSelection.visible = true
                 }
             }
@@ -201,10 +380,23 @@ PageType {
             }
         }
 
-        FlickableType {
+        Flickable {
-            anchors.top: serversMenuHeader.bottom
+            id: serversContainer
-            anchors.topMargin: 16
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.topMargin: 16
             contentHeight: col.implicitHeight
+            implicitHeight: root.height - (root.height * 0.1) - serversMenuHeader.implicitHeight - 52 //todo 52 is tabbar height
+            visible: buttonContent.expandedVisibility
+            clip: true
+
+            ScrollBar.vertical: ScrollBar {
+                id: scrollBar
+                policy: serversContainer.height >= serversContainer.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
+            }
+
+            Keys.onUpPressed: scrollBar.decrease()
+            Keys.onDownPressed: scrollBar.increase()
 
             Column {
                 id: col
@@ -299,7 +491,7 @@ PageType {
                                     onClicked: function() {
                                         ServersModel.currentlyProcessedIndex = index
                                         PageController.goToPage(PageEnum.PageSettingsServerInfo)
-                                        menu.visible = false
+                                        buttonContent.state = "collapsed"
                                     }
                                 }
                             }