added new drawer2type for replacing drawertype

client/resources.qrc

@@ -216,5 +216,6 @@
         <file>ui/qml/Pages2/PageServiceDnsSettings.qml</file>
         <file>ui/qml/Controls2/TopCloseButtonType.qml</file>
         <file>images/controls/x-circle.svg</file>
+        <file>ui/qml/Controls2/Drawer2Type.qml</file>
     </qresource>
 </RCC>

client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml

@@ -8,7 +8,7 @@ import "../Controls2"
 import "../Controls2/TextTypes"
 import "../Config"
 
-DrawerType {
+Drawer2Type {
     id: root
 
     width: parent.width

client/ui/qml/Components/QuestionDrawer.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts
 import "../Controls2"
 import "../Controls2/TextTypes"
 
-DrawerType {
+Drawer2Type {
     id: root
 
     property string headerText

client/ui/qml/Components/SelectLanguageDrawer.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts
 import "../Controls2"
 import "../Controls2/TextTypes"
 
-DrawerType {
+Drawer2Type {
     id: root
 
     width: parent.width

client/ui/qml/Components/ShareConnectionDrawer.qml

@@ -16,7 +16,7 @@ import "../Controls2/TextTypes"
 import "../Config"
 import "../Components"
 
-DrawerType {
+Drawer2Type {
     id: root
 
     property alias headerText: header.headerText
@@ -30,7 +30,7 @@ DrawerType {
     width: parent.width
     height: parent.height * 0.9
 
-    onClosed: {
+    onClose: {
         configExtension = ".vpn"
         configCaption = qsTr("Save AmneziaVPN config")
         configFileName = "amnezia_config"
@@ -126,13 +126,14 @@ DrawerType {
                     text: qsTr("Show connection settings")
 
                     onClicked: {
-                        configContentDrawer.visible = true
+                        configContentDrawer.open()
                     }
                 }
 
-                DrawerType {
+                Drawer2Type {
                     id: configContentDrawer
 
+                    parent: root
                     width: parent.width
                     height: parent.height * 0.9
 
@@ -145,7 +146,7 @@ DrawerType {
                         anchors.topMargin: 16
 
                         backButtonFunction: function() {
-                            configContentDrawer.visible = false
+                            configContentDrawer.close()
                         }
                     }
 

client/ui/qml/Controls2/Drawer2Type.qml

@@ -0,0 +1,266 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Shapes
+
+Item {
+    id: root
+
+    Connections {
+        target: PageController
+
+        function onForceCloseDrawer() {
+            root.state = "closed"
+        }
+    }
+
+    visible: false
+
+    parent: Overlay.overlay
+
+    signal close()
+
+    property bool needCloseButton: true
+
+    property string defaultColor: "#1C1D21"
+    property string borderColor: "#2C2D30"
+    property int collapsedHeight: 0
+
+    property bool needCollapsed: false
+
+
+    y: parent.height - root.height
+
+    state: "closed"
+
+    Rectangle {
+        id: draw2Background
+
+        anchors { left: root.left; right: root.right; top: root.top }
+        height: root.height
+        radius: 16
+        color: root.defaultColor
+        border.color: root.borderColor
+        border.width: 1
+
+        Rectangle {
+            width: parent.radius
+            height: parent.radius
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.left: parent.left
+            color: parent.color
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: (root.state === "expanded" || root.state === "opened")
+        onClicked: {
+            if (root.state === "expanded") {
+                root.state = "collapsed"
+                return
+            }
+
+            if (root.state === "opened") {
+                root.state = "closed"
+                return
+            }
+        }
+    }
+
+    Drag.active: dragArea.drag.active
+
+    MouseArea {
+        id: dragArea
+
+        anchors.fill: parent
+        cursorShape: (root.state === "opened"  || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor
+        hoverEnabled: true
+
+        drag.target: parent
+        drag.axis: Drag.YAxis
+        drag.maximumY: parent.height
+        drag.minimumY: parent.height - root.height
+
+        /** If drag area is released at any point other than min or max y, transition to the other state */
+        onReleased: {
+            if (root.state === "closed" && root.y < dragArea.drag.maximumY) {
+                root.state = "opened"
+                PageController.drawerOpen()
+                return
+            }
+
+            if (root.state === "opened" && root.y > dragArea.drag.minimumY) {
+                root.state = "closed"
+                PageController.drawerClose()
+                return
+            }
+
+            if (root.state === "collapsed" && root.y < dragArea.drag.maximumY) {
+                root.state = "expanded"
+                return
+            }
+            if (root.state === "expanded" && root.y > dragArea.drag.minimumY) {
+                root.state = "collapsed"
+                return
+            }
+        }
+
+        onClicked: {
+            if (root.state === "opened") {
+                root.state = "closed"
+            }
+
+            if (root.state == "expanded") {
+                root.state == "collapsed"
+            }
+        }
+    }
+
+    onStateChanged: {
+        if (root.state === "closed" || root.state === "collapsed") {
+            var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
+            if (initialPageNavigationBarColor !== 0xFF1C1D21) {
+                PageController.updateNavigationBarColor(initialPageNavigationBarColor)
+            }
+
+            PageController.drawerClose()
+            return
+        }
+        if (root.state === "expanded" || root.state === "opened") {
+            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: root
+                y: root.height - collapsedHeight
+            }
+        },
+        State {
+            name: "expanded"
+            PropertyChanges {
+                target: root
+                y: dragArea.drag.minimumY
+            }
+        },
+
+        State {
+            name: "closed"
+            PropertyChanges {
+                target: root
+                y: parent.height
+            }
+        },
+
+        State {
+            name: "opend"
+            PropertyChanges {
+                target: root
+                y: dragArea.drag.minimumY
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "collapsed"
+            to: "expanded"
+            PropertyAnimation {
+                target: root
+                properties: "y"
+                duration: 200
+            }
+        },
+        Transition {
+            from: "expanded"
+            to: "collapsed"
+            PropertyAnimation {
+                target: root
+                properties: "y"
+                duration: 200
+            }
+        },
+
+        Transition {
+            from: "opened"
+            to: "closed"
+            PropertyAnimation {
+                target: root
+                properties: "y"
+                duration: 200
+            }
+        },
+
+        Transition {
+            from: "closed"
+            to: "opened"
+            PropertyAnimation {
+                target: root
+                properties: "y"
+                duration: 200
+            }
+        }
+    ]
+
+    NumberAnimation {
+        id: animationVisible
+        target: root
+        property: "y"
+        from: parent.height
+        to: parent.height  - root.height
+        duration: 200
+    }
+
+    function open() {
+        if (root.visible && root.state !== "closed") {
+            return
+        }
+
+        root.state = "opened"
+        root.visible = true
+        root.y = parent.height - root.height
+
+        dragArea.drag.maximumY =  parent.height
+        dragArea.drag.minimumY =  parent.height - root.height
+
+
+        animationVisible.running = true
+
+        if (needCloseButton) {
+            PageController.drawerOpen()
+        }
+
+        if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
+            PageController.updateNavigationBarColor(0xFF1C1D21)
+        }
+    }
+
+    function onClose() {
+        if (needCloseButton) {
+            PageController.drawerClose()
+        }
+
+        var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
+        if (initialPageNavigationBarColor !== 0xFF1C1D21) {
+            PageController.updateNavigationBarColor(initialPageNavigationBarColor)
+        }
+
+        root.visible = false
+    }
+
+    onVisibleChanged: {
+        if (!visible) {
+            close()
+        }
+    }
+}

client/ui/qml/Controls2/DropDownType.qml

@@ -156,17 +156,20 @@ Item {
             if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
                 rootButtonClickedFunction()
             } else {
-                menu.visible = true
+                menu.open()
             }
         }
     }
 
+    // Drawer2Type {
     DrawerType {
         id: menu
 
         width: parent.width
         height: parent.height * drawerHeight
 
+        // parent: root.parent.parent
+
         ColumnLayout {
             id: header
 

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

@@ -365,14 +365,14 @@ PageType {
                                 questionDrawer.noButtonText = qsTr("Cancel")
 
                                 questionDrawer.yesButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.onClose()
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
                                 questionDrawer.noButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.onClose()
                                 }
-                                questionDrawer.visible = true
+                                questionDrawer.open()
                             }
                         }
 
@@ -397,6 +397,7 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageProtocolRaw.qml

@@ -90,8 +90,9 @@ PageType {
 
                         DividerType {}
 
-                        DrawerType {
+                        Drawer2Type {
                             id: configContentDrawer
+                            parent: root
 
                             width: parent.width
                             height: parent.height * 0.9
@@ -179,14 +180,14 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
 
                 MouseArea {
@@ -201,6 +202,7 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageServiceDnsSettings.qml

@@ -68,14 +68,14 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
 
                 MouseArea {
@@ -89,6 +89,7 @@ PageType {
 
             QuestionDrawer {
                 id: questionDrawer
+                parent: root
             }
         }
     }

client/ui/qml/Pages2/PageServiceSftpSettings.qml

@@ -265,14 +265,14 @@ PageType {
                                 questionDrawer.noButtonText = qsTr("Cancel")
 
                                 questionDrawer.yesButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.onClose()
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
                                 questionDrawer.noButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.onClose()
                                 }
-                                questionDrawer.visible = true
+                                questionDrawer.open()
                             }
                         }
                     }
@@ -282,6 +282,7 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml

@@ -143,20 +143,21 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
         }
 
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageSettingsApplication.qml

@@ -119,6 +119,7 @@ PageType {
 
             SelectLanguageDrawer {
                 id: selectLanguageDrawer
+                parent: root
             }
 
 
@@ -151,14 +152,14 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         SettingsController.clearSettings()
                         PageController.replaceStartPage()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -166,6 +167,7 @@ PageType {
 
             QuestionDrawer {
                 id: questionDrawer
+                parent: root
             }
         }
     }

client/ui/qml/Pages2/PageSettingsBackup.qml

@@ -138,15 +138,15 @@ PageType {
         questionDrawer.noButtonText = qsTr("Cancel")
 
         questionDrawer.yesButtonFunction = function() {
-            questionDrawer.visible = false
+            questionDrawer.onClose()
             PageController.showBusyIndicator(true)
             SettingsController.restoreAppConfig(filePath)
             PageController.showBusyIndicator(false)
         }
         questionDrawer.noButtonFunction = function() {
-            questionDrawer.visible = false
+            questionDrawer.onClose()
         }
-        questionDrawer.visible = true
+        questionDrawer.open()
     }
 
     QuestionDrawer {

client/ui/qml/Pages2/PageSettingsDns.qml

@@ -91,7 +91,7 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         SettingsController.primaryDns = "1.1.1.1"
                         primaryDns.textFieldText = SettingsController.primaryDns
                         SettingsController.secondaryDns = "1.0.0.1"
@@ -99,9 +99,9 @@ PageType {
                         PageController.showNotificationMessage(qsTr("Settings have been reset"))
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -123,6 +123,7 @@ PageType {
         }
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageSettingsLogging.qml

@@ -146,16 +146,16 @@ PageType {
                             questionDrawer.noButtonText = qsTr("Cancel")
 
                             questionDrawer.yesButtonFunction = function() {
-                                questionDrawer.visible = false
+                                questionDrawer.onClose()
                                 PageController.showBusyIndicator(true)
                                 SettingsController.clearLogs()
                                 PageController.showBusyIndicator(false)
                                 PageController.showNotificationMessage(qsTr("Logs have been cleaned up"))
                             }
                             questionDrawer.noButtonFunction = function() {
-                                questionDrawer.visible = false
+                                questionDrawer.onClose()
                             }
-                            questionDrawer.visible = true
+                            questionDrawer.open()
                         }
                     }
 
@@ -171,6 +171,7 @@ PageType {
 
             QuestionDrawer {
                 id: questionDrawer
+                parent: root
             }
         }
     }

client/ui/qml/Pages2/PageSettingsServerData.qml

@@ -94,15 +94,15 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         PageController.showBusyIndicator(true)
                         SettingsController.clearCachedProfiles()
                         PageController.showBusyIndicator(false)
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -172,7 +172,7 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) {
                             ConnectionController.closeConnection()
@@ -180,9 +180,9 @@ PageType {
                         InstallController.removeAllContainers()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 

client/ui/qml/Pages2/PageSettingsServerInfo.qml

@@ -71,13 +71,14 @@ PageType {
                     }
 
                     actionButtonFunction: function() {
-                        serverNameEditDrawer.visible = true
+                        serverNameEditDrawer.open()
                     }
                 }
 
-                DrawerType {
+                Drawer2Type {
                     id: serverNameEditDrawer
 
+                    parent: root
                     width: root.width
                     height: root.height * 0.35
 
@@ -95,6 +96,7 @@ PageType {
                         anchors.leftMargin: 16
                         anchors.rightMargin: 16
 
+
                         TextFieldWithHeaderType {
                             id: serverName
 

client/ui/qml/Pages2/PageSettingsServerProtocol.qml

@@ -119,14 +119,14 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.onClose()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
 
                 MouseArea {

client/ui/qml/Pages2/PageSettingsSplitTunneling.qml

@@ -200,13 +200,13 @@ PageType {
                                 questionDrawer.noButtonText = qsTr("Cancel")
 
                                 questionDrawer.yesButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.onClose()
                                     SitesController.removeSite(index)
                                 }
                                 questionDrawer.noButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.onClose()
                                 }
-                                questionDrawer.visible = true
+                                questionDrawer.open()
                             }
                         }
 
@@ -214,6 +214,7 @@ PageType {
 
                         QuestionDrawer {
                             id: questionDrawer
+                            parent: root
                         }
                     }
                 }
@@ -259,12 +260,14 @@ PageType {
         }
     }
 
-    DrawerType {
+    Drawer2Type {
         id: moreActionsDrawer
 
         width: parent.width
         height: parent.height * 0.4375
 
+        parent: root
+
         FlickableType {
             anchors.fill: parent
             contentHeight: moreActionsDrawerContent.height
@@ -324,12 +327,14 @@ PageType {
         }
     }
 
-    DrawerType {
+    Drawer2Type {
         id: importSitesDrawer
 
         width: parent.width
         height: parent.height * 0.4375
 
+        parent: root
+
         BackButtonType {
             id: importSitesDrawerBackButton
 

client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml

@@ -97,12 +97,14 @@ PageType {
                             }
                         }
 
-                        DrawerType {
+                        Drawer2Type {
                             id: showDetailsDrawer
 
                             width: parent.width
                             height: parent.height * 0.9
 
+                            parent: root
+
                             BackButtonType {
                                 id: showDetailsBackButton
 

client/ui/qml/Pages2/PageSetupWizardStart.qml

@@ -115,7 +115,7 @@ PageType {
                 text: qsTr("I have the data to connect")
 
                 onClicked: {
-                    connectionTypeSelection.visible = true
+                    connectionTypeSelection.open()
                 }
             }
 
@@ -140,6 +140,7 @@ PageType {
 
         ConnectionTypeSelectionDrawer {
             id: connectionTypeSelection
+            parent: root
         }
     }
 

client/ui/qml/Pages2/PageShare.qml

@@ -371,6 +371,7 @@ PageType {
 
             ShareConnectionDrawer {
                 id: shareConnectionDrawer
+                parent: root
             }
 
             BasicButtonType {

client/ui/qml/Pages2/PageStart.qml

@@ -135,6 +135,8 @@ PageType {
             var pagePath = PageController.getPagePath(PageEnum.PageHome)
             ServersModel.currentlyProcessedIndex = ServersModel.defaultIndex
             tabBarStackView.push(pagePath, { "objectName" : pagePath })
+
+            connectionTypeSelection.parent = tabBarStackView
         }
 
         onWidthChanged: {
@@ -243,7 +245,7 @@ PageType {
     ConnectionTypeSelectionDrawer {
         id: connectionTypeSelection
 
-        onAboutToHide: {
+        onClose: function() {
             tabBar.setCurrentIndex(tabBar.previousIndex)
         }
     }