Merge pull request #370 from amnezia-vpn/feature/custom_drawer_component

added new drawer2type for replacing drawertype

client/resources.qrc

@@ -216,6 +216,7 @@
         <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>
         <file>ui/qml/Pages2/PageProtocolAwgSettings.qml</file>
         <file>server_scripts/awg/template.conf</file>
         <file>server_scripts/awg/start.sh</file>

client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml

@@ -8,13 +8,16 @@ import "../Controls2"
 import "../Controls2/TextTypes"
 import "../Config"
 
-DrawerType {
+Drawer2Type {
     id: root
 
     width: parent.width
-    height: parent.height * 0.4375
+    height: parent.height
+    contentHeight: parent.height * 0.4375
 
     ColumnLayout {
+        parent: root.contentParent
+
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right

client/ui/qml/Components/HomeContainersListView.qml

@@ -63,7 +63,7 @@ ListView {
                         isDefault = true
 
                         menuContent.currentIndex = index
-                        containersDropDown.menuVisible = false
+                        containersDropDown.menu.close()
                     } else {
                         if (!isSupported && isInstalled) {
                             PageController.showErrorMessage(qsTr("The selected protocol is not supported on the current platform"))

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
@@ -15,12 +15,14 @@ DrawerType {
 
     property var yesButtonFunction
     property var noButtonFunction
+    property real drawerHeight: 0.5
 
     width: parent.width
-    height: content.implicitHeight + 32
+    height: parent.height
+    contentHeight: parent.height * drawerHeight
 
     ColumnLayout {
-        id: content
+        parent: root.contentParent
 
         anchors.top: parent.top
         anchors.left: parent.left
@@ -29,6 +31,8 @@ DrawerType {
         anchors.rightMargin: 16
         anchors.leftMargin: 16
 
+        // visible: false
+
         spacing: 8
 
         Header2TextType {

client/ui/qml/Components/SelectLanguageDrawer.qml

@@ -5,15 +5,18 @@ import QtQuick.Layouts
 import "../Controls2"
 import "../Controls2/TextTypes"
 
-DrawerType {
+Drawer2Type {
     id: root
 
     width: parent.width
-    height: parent.height * 0.9
+    height: parent.height
+    contentHeight: parent.height * 0.9
 
     ColumnLayout {
         id: backButton
 
+        parent: root.contentParent
+
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
@@ -28,6 +31,7 @@ DrawerType {
     }
 
     FlickableType {
+        parent: root.contentParent
         anchors.top: backButton.bottom
         anchors.left: parent.left
         anchors.right: parent.right

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
@@ -28,9 +28,10 @@ DrawerType {
     property string configFileName: "amnezia_config.vpn"
 
     width: parent.width
-    height: parent.height * 0.9
+    height: parent.height
+    contentHeight: parent.height * 0.9
 
-    onClosed: {
+    onDrawerClosed: {
         configExtension = ".vpn"
         configCaption = qsTr("Save AmneziaVPN config")
         configFileName = "amnezia_config"
@@ -41,6 +42,9 @@ DrawerType {
 
         Header2Type {
             id: header
+
+            parent: root.contentParent
+
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
@@ -50,6 +54,8 @@ DrawerType {
         }
 
         FlickableType {
+            parent: root.contentParent
+
             anchors.top: header.bottom
             anchors.bottom: parent.bottom
             contentHeight: content.height + 32
@@ -126,30 +132,37 @@ 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
+                    height: parent.height
+
+                    contentHeight: parent.height * 0.9
 
                     BackButtonType {
                         id: backButton
 
+                        parent: configContentDrawer.contentParent
+
                         anchors.top: parent.top
                         anchors.left: parent.left
                         anchors.right: parent.right
                         anchors.topMargin: 16
 
                         backButtonFunction: function() {
-                            configContentDrawer.visible = false
+                            configContentDrawer.close()
                         }
                     }
 
                     FlickableType {
+                        parent: configContentDrawer.contentParent
+
                         anchors.top: backButton.bottom
                         anchors.left: parent.left
                         anchors.right: parent.right

client/ui/qml/Controls2/Drawer2Type.qml

@@ -0,0 +1,314 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Shapes
+
+Item {
+    id: root
+
+    Connections {
+        target: PageController
+
+        function onForceCloseDrawer() {
+            if (root.expanded()) {
+                collapse()
+            }
+        }
+    }
+
+    signal drawerClosed
+    signal collapsedEntered
+    signal collapsedExited
+    signal collapsedEnter
+    signal collapsedPressChanged
+
+
+    visible: false
+
+    property bool needCloseButton: true
+
+    property string defaultColor: "#1C1D21"
+    property string borderColor: "#2C2D30"
+    property string semitransparentColor: "#90000000"
+
+    property bool needCollapsed: false
+
+    property int contentHeight: 0
+    property Item contentParent: contentArea
+
+    property bool dragActive: dragArea.drag.active
+
+    property int collapsedHeight: 0
+
+    property bool fullMouseAreaVisible: true
+    property MouseArea drawerDragArea: dragArea
+
+    state: "collapsed"
+
+    Rectangle {
+        id: draw2Background
+
+        anchors.fill: parent
+        height: parent.height
+        width: parent.width
+        radius: 16
+        color: "transparent"
+        border.color: "transparent"
+        border.width: 1
+        visible: true
+
+        MouseArea {
+            id: fullMouseArea
+            anchors.fill: parent
+            enabled: root.expanded()
+            hoverEnabled: true
+            visible: fullMouseAreaVisible
+
+            onClicked: {
+                if (root.expanded()) {
+                    collapse()
+                }
+            }
+        }
+
+        Rectangle {
+            id: placeAreaHolder
+
+            // for apdating home drawer, normal drawer will reset it
+            height: 0
+
+            anchors.right: parent.right
+            anchors.left: parent.left
+            visible: true
+            color: "transparent"
+
+            Drag.active: dragArea.drag.active
+        }
+
+
+        Rectangle {
+            id: contentArea
+
+            anchors.top: placeAreaHolder.bottom
+            height: contentHeight
+            radius: 16
+            color: root.defaultColor
+            border.width: 1
+            border.color: root.borderColor
+            width: parent.width
+            visible: true
+
+            Rectangle {
+                width: parent.radius
+                height: parent.radius
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                anchors.left: parent.left
+                color: parent.color
+            }
+
+            MouseArea {
+                id: dragArea
+
+                anchors.fill: parent
+
+                cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor
+                hoverEnabled: true
+
+                drag.target: placeAreaHolder
+                drag.axis: Drag.YAxis
+                drag.maximumY: root.height - root.collapsedHeight
+                drag.minimumY: root.collapsedHeight > 0 ? root.height - root.height * 0.9 : 0
+
+                /** If drag area is released at any point other than min or max y, transition to the other state */
+                onReleased: {
+                    if (root.collapsed() && placeAreaHolder.y < drag.maximumY) {
+                        root.state = "expanded"
+                        return
+                    }
+                    if (root.expanded() && placeAreaHolder.y > drag.minimumY) {
+                        root.state = "collapsed"
+                        return
+                    }
+                }
+
+                onClicked: {
+                    if (root.expanded()) {
+                        collapse()
+                        return
+                    }
+
+                    if (root.collapsed()) {
+                        root.state = "expanded"
+                    }
+                }
+
+                onExited: {
+                    collapsedExited()
+                }
+
+                onEntered: {
+                    collapsedEnter()
+                }
+
+                onPressedChanged: {
+                    collapsedPressChanged()
+                }
+            }
+        }
+    }
+
+    onStateChanged: {
+        if (root.collapsed()) {
+            var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
+            if (initialPageNavigationBarColor !== 0xFF1C1D21) {
+                PageController.updateNavigationBarColor(initialPageNavigationBarColor)
+            }
+
+            if (needCloseButton) {
+                PageController.drawerClose()
+            }
+
+            drawerClosed()
+
+            return
+        }
+
+        if (root.expanded()) {
+            if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
+                PageController.updateNavigationBarColor(0xFF1C1D21)
+            }
+
+            if (needCloseButton) {
+                PageController.drawerOpen()
+            }
+
+            return
+        }
+    }
+
+    /** Two states of buttonContent, great place to add any future animations for the drawer */
+    states: [
+        State {
+            name: "collapsed"
+            PropertyChanges {
+                target: placeAreaHolder
+                y: dragArea.drag.maximumY
+            }
+        },
+
+        State {
+            name: "expanded"
+            PropertyChanges {
+                target: placeAreaHolder
+                y: dragArea.drag.minimumY
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "expanded"
+            to: "collapsed"
+            PropertyAnimation {
+                target: placeAreaHolder
+                properties: "y"
+                duration: 200
+            }
+
+            onRunningChanged: {
+                if (!running) {
+                    draw2Background.color = "transparent"
+                    fullMouseArea.visible = false
+                }
+            }
+        },
+
+        Transition {
+            from: "collapsed"
+            to: "expanded"
+            PropertyAnimation {
+                target: placeAreaHolder
+                properties: "y"
+                duration: 200
+            }
+
+            onRunningChanged: {
+                if (!running) {
+                    draw2Background.color = semitransparentColor
+                    fullMouseArea.visible = true
+                }
+            }
+        }
+    ]
+
+    NumberAnimation {
+        id: animationVisible
+        target: placeAreaHolder
+        property: "y"
+        from: parent.height
+        to: 0
+        duration: 200
+    }
+
+    // for normal drawer
+    function open() {
+        if (root.expanded()) {
+            return
+        }
+
+        draw2Background.color = semitransparentColor
+        fullMouseArea.visible = true
+
+        collapsedHeight = 0
+
+        root.y = 0
+        root.state = "expanded"
+        root.visible = true
+        root.height = parent.height
+
+        contentArea.height = contentHeight
+
+        placeAreaHolder.y = 0
+        placeAreaHolder.height = root.height - contentHeight
+
+        animationVisible.running = true
+    }
+
+    function close() {
+        collapse()
+    }
+
+    function collapse() {
+        draw2Background.color = "transparent"
+        root.state = "collapsed"
+    }
+
+    // for page home
+    function expand() {
+        draw2Background.color = semitransparentColor
+        root.state = "expanded"
+    }
+
+    function expanded() {
+        return root.state === "expanded" ? true : false
+    }
+
+    function collapsed() {
+        return root.state === "collapsed" ? true : false
+    }
+
+
+    onVisibleChanged: {
+        // e.g cancel, ......
+        if (!visible) {
+            if (root.expanded()) {
+                if (needCloseButton) {
+                    PageController.drawerClose()
+                }
+
+                close()
+            }
+        }
+    }
+}

client/ui/qml/Controls2/DropDownType.qml

@@ -40,6 +40,10 @@ Item {
 
     property alias menuVisible: menu.visible
 
+    property Item drawerParent: root
+
+    property Drawer2Type menu: menu
+
     implicitWidth: rootButtonContent.implicitWidth
     implicitHeight: rootButtonContent.implicitHeight
 
@@ -155,21 +159,26 @@ Item {
         onClicked: {
             if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
                 rootButtonClickedFunction()
-            } else {
-                menu.visible = true
             }
+
+            menu.open()
         }
     }
 
-    DrawerType {
+    Drawer2Type {
         id: menu
 
+        parent: drawerParent
+
         width: parent.width
-        height: parent.height * drawerHeight
+        height: parent.height
+        contentHeight: parent.height * drawerHeight
 
         ColumnLayout {
             id: header
 
+            parent: menu.contentParent
+
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
@@ -178,12 +187,14 @@ Item {
             BackButtonType {
                 backButtonImage: root.headerBackButtonImage
                 backButtonFunction: function() {
-                    root.menuVisible = false
+                    menu.close()
                 }
             }
         }
 
         FlickableType {
+            parent: menu.contentParent
+
             anchors.top: header.bottom
             anchors.topMargin: 16
             contentHeight: col.implicitHeight

client/ui/qml/Pages2/PageHome.qml

@@ -30,13 +30,13 @@ PageType {
         target: PageController
 
         function onRestorePageHomeState(isContainerInstalled) {
-            buttonContent.state = "expanded"
+            buttonContent.collapse()
             if (isContainerInstalled) {
                 containersDropDown.menuVisible = true
             }
         }
         function onForceCloseDrawer() {
-            buttonContent.state = "collapsed"
+            buttonContent.collapse()
         }
     }
 
@@ -73,14 +73,8 @@ PageType {
         expandedServersMenuDescription.text = description + root.defaultServerHostName
     }
 
-    Component.onCompleted: updateDescriptions()
+    Component.onCompleted: {
-
+        updateDescriptions()
-    MouseArea {
-        anchors.fill: parent
-        enabled: buttonContent.state === "expanded"
-        onClicked: {
-            buttonContent.state = "collapsed"
-        }
     }
 
     Item {
@@ -92,56 +86,10 @@ PageType {
         }
     }
 
-    MouseArea {
-        id: dragArea
-
-        anchors.fill: buttonBackground
-        cursorShape: buttonContent.state === "collapsed" ? Qt.PointingHandCursor : Qt.ArrowCursor
-        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 { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
-        height: root.height
+
         radius: 16
         color: root.defaultColor
         border.color: root.borderColor
@@ -157,98 +105,45 @@ PageType {
         }
     }
 
-    ColumnLayout {
+    Drawer2Type {
         id: buttonContent
+        visible: true
+
+        fullMouseAreaVisible: false
 
-        /** Initial height of button content */
-        property int collapsedHeight: 0
         /** True when expanded objects should be visible */
-        property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active === true)
+        property bool expandedVisibility: buttonContent.expanded() || (buttonContent.collapsed() && buttonContent.dragActive)
         /** True when collapsed objects should be visible */
-        property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false
+        property bool collapsedVisibility: buttonContent.collapsed() && !buttonContent.dragActive
 
-        Drag.active: dragArea.drag.active
+        width: parent.width
-        anchors.right: root.right
+        height: parent.height
-        anchors.left: root.left
+        contentHeight: parent.height * 0.9
-        y: root.height - buttonContent.height
 
-        Component.onCompleted: {
-            buttonContent.state = "collapsed"
-        }
 
-        /** Set once based on first implicit height change once all children are layed out */
+        ColumnLayout {
+            id: collapsedButtonContent
+
+            parent: buttonContent.contentParent
+
+            visible: buttonContent.collapsedVisibility
+
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.top: parent.top
+
             onImplicitHeightChanged: {
-            if (buttonContent.state === "collapsed" && collapsedHeight == 0) {
+                if (buttonContent.collapsed() && buttonContent.collapsedHeight === 0) {
-                collapsedHeight = implicitHeight
+                    buttonContent.collapsedHeight = implicitHeight
                 }
             }
 
-        onStateChanged: {
-            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
-                }
-            }
-        ]
-
             DividerType {
                 Layout.topMargin: 10
                 Layout.fillWidth: false
                 Layout.preferredWidth: 20
                 Layout.preferredHeight: 2
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-            visible: (buttonContent.collapsedVisibility || buttonContent.expandedVisibility)
             }
         
             RowLayout {
@@ -256,44 +151,45 @@ PageType {
                 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
+                    Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
 
                     maximumLineCount: 2
                     elide: Qt.ElideRight
 
                     text: root.defaultServerName
-                horizontalAlignment: Qt.AlignHCenter
 
-                Behavior on opacity {
+                    Layout.alignment: Qt.AlignLeft
-                    PropertyAnimation { duration: 200 }
-                }
                 }
 
+
                 ImageButtonType {
                     id: collapsedButtonChevron
 
-                Layout.leftMargin: 8
-
                     hoverEnabled: false
                     image: "qrc:/images/controls/chevron-down.svg"
                     imageColor: "#d7d8db"
 
-                icon.width: 18
+                    horizontalPadding: 0
-                icon.height: 18
+                    padding: 0
-                backgroundRadius: 16
+                    spacing: 0
-                horizontalPadding: 4
+
-                topPadding: 4
+                    Rectangle {
-                bottomPadding: 3
+                        id: rightImageBackground
+                        anchors.fill: parent
+                        radius: 16
+                        color: "transparent"
+
+                        Behavior on color {
+                            PropertyAnimation { duration: 200 }
+                        }
+                    }
 
                     onClicked: {
-                    if (buttonContent.state === "collapsed") {
+                        if (buttonContent.collapsed()) {
-                        buttonContent.state = "expanded"
+                            buttonContent.expand()
                         }
                     }
                 }
@@ -305,14 +201,31 @@ PageType {
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                 visible: buttonContent.collapsedVisibility
             }
+        }
+
+        Component.onCompleted: {
+            buttonContent.collapse()
+        }
 
         ColumnLayout {
             id: serversMenuHeader
 
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            parent: buttonContent.contentParent
-            Layout.fillWidth: true
+
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.left: parent.left
+
             visible: buttonContent.expandedVisibility
             
+            DividerType {
+                Layout.topMargin: 10
+                Layout.fillWidth: false
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 2
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+
             Header1TextType {
                 Layout.fillWidth: true
                 Layout.topMargin: 14
@@ -340,6 +253,8 @@ PageType {
                 DropDownType {
                     id: containersDropDown
 
+                    drawerParent: root
+
                     rootButtonImageColor: "#0E0E11"
                     rootButtonBackgroundColor: "#D7D8DB"
                     rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
@@ -401,12 +316,18 @@ PageType {
 
         Flickable {
             id: serversContainer
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+
-            Layout.fillWidth: true
+            parent: buttonContent.contentParent
-            Layout.topMargin: 16
+
+            anchors.top: serversMenuHeader.bottom
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.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 {
@@ -516,7 +437,7 @@ PageType {
                                     onClicked: function() {
                                         ServersModel.currentlyProcessedIndex = index
                                         PageController.goToPage(PageEnum.PageSettingsServerInfo)
-                                        buttonContent.state = "collapsed"
+                                        buttonContent.collapse()
                                     }
                                 }
                             }
@@ -531,5 +452,22 @@ PageType {
                 }
             }
         }
+
+        onCollapsedEnter: {
+            collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
+            collapsedButtonHeader.opacity = 0.8
+        }
+
+        onCollapsedExited: {
+            collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
+            collapsedButtonHeader.opacity = 1
+        }
+
+        onCollapsedPressChanged: {
+            collapsedButtonChevron.backgroundColor = buttonContent.drawerDragArea.pressed ?
+                        collapsedButtonChevron.pressedColor : buttonContent.drawerDragArea.entered ?
+                            collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
+            collapsedButtonHeader.opacity = 0.7
+        }
     }
 }

client/ui/qml/Pages2/PageProtocolCloakSettings.qml

@@ -117,6 +117,8 @@ PageType {
                             Layout.fillWidth: true
                             Layout.topMargin: 16
 
+                            drawerParent: root
+
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

@@ -157,6 +157,8 @@ PageType {
                             Layout.fillWidth: true
                             Layout.topMargin: 20
 
+                            drawerParent: root
+
                             enabled: !autoNegotiateEncryprionSwitcher.checked
 
                             descriptionText: qsTr("Hash")
@@ -203,6 +205,8 @@ PageType {
                             Layout.fillWidth: true
                             Layout.topMargin: 16
 
+                            drawerParent: root
+
                             enabled: !autoNegotiateEncryprionSwitcher.checked
 
                             descriptionText: qsTr("Cipher")
@@ -370,14 +374,14 @@ PageType {
                                 questionDrawer.noButtonText = qsTr("Cancel")
 
                                 questionDrawer.yesButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.close()
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
                                 questionDrawer.noButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.close()
                                 }
-                                questionDrawer.visible = true
+                                questionDrawer.open()
                             }
                         }
 
@@ -402,6 +406,7 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageProtocolRaw.qml

@@ -90,15 +90,19 @@ PageType {
 
                         DividerType {}
 
-                        DrawerType {
+                        Drawer2Type {
                             id: configContentDrawer
+                            parent: root
 
                             width: parent.width
-                            height: parent.height * 0.9
+                            height: parent.height
+                            contentHeight: parent.height * 0.9
 
                             BackButtonType {
                                 id: backButton
 
+                                parent: configContentDrawer.contentParent
+
                                 anchors.top: parent.top
                                 anchors.left: parent.left
                                 anchors.right: parent.right
@@ -181,14 +185,14 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
 
                 MouseArea {
@@ -203,6 +207,7 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
+            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml

@@ -95,6 +95,8 @@ PageType {
                             Layout.fillWidth: true
                             Layout.topMargin: 20
 
+                            drawerParent: root
+
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 

client/ui/qml/Pages2/PageServiceDnsSettings.qml

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

client/ui/qml/Pages2/PageServiceSftpSettings.qml

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

client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml

@@ -131,20 +131,21 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                     }
-                    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.close()
                         SettingsController.clearSettings()
                         PageController.replaceStartPage()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -166,6 +167,7 @@ PageType {
 
             QuestionDrawer {
                 id: questionDrawer
+                parent: root
             }
         }
     }

client/ui/qml/Pages2/PageSettingsBackup.qml

@@ -139,18 +139,19 @@ PageType {
         questionDrawer.noButtonText = qsTr("Cancel")
 
         questionDrawer.yesButtonFunction = function() {
-            questionDrawer.visible = false
+            questionDrawer.close()
             PageController.showBusyIndicator(true)
             SettingsController.restoreAppConfig(filePath)
             PageController.showBusyIndicator(false)
         }
         questionDrawer.noButtonFunction = function() {
-            questionDrawer.visible = false
+            questionDrawer.close()
         }
-        questionDrawer.visible = true
+        questionDrawer.open()
     }
 
     QuestionDrawer {
         id: questionDrawer
+        parent: root
     }
 }

client/ui/qml/Pages2/PageSettingsDns.qml

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

client/ui/qml/Pages2/PageSettingsLogging.qml

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

client/ui/qml/Pages2/PageSettingsServerData.qml

@@ -14,6 +14,8 @@ import "../Components"
 PageType {
     id: root
 
+    property Item questionDrawerParent
+
     Connections {
         target: InstallController
 
@@ -94,15 +96,15 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                         PageController.showBusyIndicator(true)
                         SettingsController.clearCachedProfiles()
                         PageController.showBusyIndicator(false)
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -141,7 +143,7 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                         PageController.showBusyIndicator(true)
                         if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) {
                             ConnectionController.closeConnection()
@@ -150,9 +152,9 @@ PageType {
                         PageController.showBusyIndicator(false)
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -172,7 +174,7 @@ PageType {
                     questionDrawer.noButtonText = qsTr("Cancel")
 
                     questionDrawer.yesButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) {
                             ConnectionController.closeConnection()
@@ -180,9 +182,9 @@ PageType {
                         InstallController.removeAllContainers()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.visible = false
+                        questionDrawer.close()
                     }
-                    questionDrawer.visible = true
+                    questionDrawer.open()
                 }
             }
 
@@ -192,6 +194,10 @@ PageType {
 
             QuestionDrawer {
                 id: questionDrawer
+
+                drawerHeight: 0.5
+
+                parent: questionDrawerParent
             }
         }
     }

client/ui/qml/Pages2/PageSettingsServerInfo.qml

@@ -71,15 +71,17 @@ PageType {
                     }
 
                     actionButtonFunction: function() {
-                        serverNameEditDrawer.visible = true
+                        serverNameEditDrawer.open()
                     }
                 }
 
-                DrawerType {
+                Drawer2Type {
                     id: serverNameEditDrawer
 
+                    parent: root
                     width: root.width
-                    height: root.height * 0.35
+                    height: root.height // * 0.35
+                    contentHeight: root.height * 0.35
 
                     onVisibleChanged: {
                         if (serverNameEditDrawer.visible) {
@@ -88,6 +90,8 @@ PageType {
                     }
 
                     ColumnLayout {
+                        parent: serverNameEditDrawer.contentParent
+
                         anchors.top: parent.top
                         anchors.left: parent.left
                         anchors.right: parent.right
@@ -95,6 +99,7 @@ PageType {
                         anchors.leftMargin: 16
                         anchors.rightMargin: 16
 
+
                         TextFieldWithHeaderType {
                             id: serverName
 
@@ -164,6 +169,7 @@ PageType {
             }
             PageSettingsServerData {
                 stackView: root.stackView
+                questionDrawerParent: root
             }
         }
     }

client/ui/qml/Pages2/PageSettingsServerProtocol.qml

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

client/ui/qml/Pages2/PageSettingsSplitTunneling.qml

@@ -116,6 +116,8 @@ PageType {
         DropDownType {
             id: selector
 
+            drawerParent: root
+
             Layout.fillWidth: true
             Layout.topMargin: 32
             Layout.leftMargin: 16
@@ -208,13 +210,13 @@ PageType {
                                 questionDrawer.noButtonText = qsTr("Cancel")
 
                                 questionDrawer.yesButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.close()
                                     SitesController.removeSite(index)
                                 }
                                 questionDrawer.noButtonFunction = function() {
-                                    questionDrawer.visible = false
+                                    questionDrawer.close()
                                 }
-                                questionDrawer.visible = true
+                                questionDrawer.open()
                             }
                         }
 
@@ -222,6 +224,7 @@ PageType {
 
                         QuestionDrawer {
                             id: questionDrawer
+                            parent: root
                         }
                     }
                 }
@@ -276,13 +279,18 @@ PageType {
         }
     }
 
-    DrawerType {
+    Drawer2Type {
         id: moreActionsDrawer
 
         width: parent.width
-        height: parent.height * 0.4375
+        height: parent.height
+        contentHeight: parent.height * 0.4375
+
+        parent: root
 
         FlickableType {
+            parent: moreActionsDrawer.contentParent
+
             anchors.fill: parent
             contentHeight: moreActionsDrawerContent.height
             ColumnLayout {
@@ -341,15 +349,20 @@ PageType {
         }
     }
 
-    DrawerType {
+    Drawer2Type {
         id: importSitesDrawer
 
         width: parent.width
-        height: parent.height * 0.4375
+        height: parent.height
+        contentHeight: parent.height * 0.4375
+
+        parent: root
 
         BackButtonType {
             id: importSitesDrawerBackButton
 
+            parent: importSitesDrawer.contentParent
+
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
@@ -361,6 +374,8 @@ PageType {
         }
 
         FlickableType {
+            parent: importSitesDrawer.contentParent
+
             anchors.top: importSitesDrawerBackButton.bottom
             anchors.left: parent.left
             anchors.right: parent.right

client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml

@@ -97,15 +97,20 @@ PageType {
                             }
                         }
 
-                        DrawerType {
+                        Drawer2Type {
                             id: showDetailsDrawer
 
                             width: parent.width
-                            height: parent.height * 0.9
+                            height: parent.height
+                            contentHeight: parent.height * 0.9
+
+                            parent: root
 
                             BackButtonType {
                                 id: showDetailsBackButton
 
+                                parent: showDetailsDrawer.contentParent
+
                                 anchors.top: parent.top
                                 anchors.left: parent.left
                                 anchors.right: parent.right
@@ -117,6 +122,8 @@ PageType {
                             }
 
                             FlickableType {
+                                parent: showDetailsDrawer.contentParent
+
                                 anchors.top: showDetailsBackButton.bottom
                                 anchors.left: parent.left
                                 anchors.right: parent.right

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

@@ -179,6 +179,8 @@ PageType {
             DropDownType {
                 id: serverSelector
 
+                drawerParent: root
+
                 signal severSelectorIndexChanged
                 property int currentIndex: 0
 
@@ -241,6 +243,8 @@ PageType {
             DropDownType {
                 id: protocolSelector
 
+                drawerParent: root
+
                 visible: accessTypeSelector.currentIndex === 0
 
                 Layout.fillWidth: true
@@ -330,6 +334,8 @@ PageType {
             DropDownType {
                 id: exportTypeSelector
 
+                drawerParent: root
+
                 property int currentIndex: 0
 
                 Layout.fillWidth: true
@@ -371,6 +377,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: {
@@ -174,6 +176,12 @@ PageType {
                 strokeColor: "#2C2D30"
                 fillColor: "#1C1D21"
             }
+
+            MouseArea {
+                id: noPropagateMouseEvent
+                anchors.fill: parent
+                enabled: true
+            }
         }
 
         TabImageButtonType {
@@ -244,7 +252,9 @@ PageType {
     ConnectionTypeSelectionDrawer {
         id: connectionTypeSelection
 
-        onAboutToHide: {
+        z: 1
+
+        onDrawerClosed: {
             tabBar.setCurrentIndex(tabBar.previousIndex)
         }
     }