Revert "added new drawer2type for replacing drawertype"

client/resources.qrc

@@ -216,7 +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>
         <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,16 +8,13 @@ import "../Controls2"
 import "../Controls2/TextTypes"
 import "../Config"
 
-Drawer2Type {
+DrawerType {
     id: root
 
     width: parent.width
-    height: parent.height
+    height: parent.height * 0.4375
-    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.menu.close()
+                        containersDropDown.menuVisible = false
                     } 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"
 
-Drawer2Type {
+DrawerType {
     id: root
 
     property string headerText
@@ -15,14 +15,12 @@ Drawer2Type {
 
     property var yesButtonFunction
     property var noButtonFunction
-    property real drawerHeight: 0.5
 
     width: parent.width
-    height: parent.height
+    height: content.implicitHeight + 32
-    contentHeight: parent.height * drawerHeight
 
     ColumnLayout {
-        parent: root.contentParent
+        id: content
 
         anchors.top: parent.top
         anchors.left: parent.left
@@ -31,8 +29,6 @@ Drawer2Type {
         anchors.rightMargin: 16
         anchors.leftMargin: 16
 
-        // visible: false
-
         spacing: 8
 
         Header2TextType {

client/ui/qml/Components/SelectLanguageDrawer.qml

@@ -5,18 +5,15 @@ import QtQuick.Layouts
 import "../Controls2"
 import "../Controls2/TextTypes"
 
-Drawer2Type {
+DrawerType {
     id: root
 
     width: parent.width
-    height: parent.height
+    height: parent.height * 0.9
-    contentHeight: parent.height * 0.9
 
     ColumnLayout {
         id: backButton
 
-        parent: root.contentParent
-
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
@@ -31,7 +28,6 @@ Drawer2Type {
     }
 
     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"
 
-Drawer2Type {
+DrawerType {
     id: root
 
     property alias headerText: header.headerText
@@ -28,10 +28,9 @@ Drawer2Type {
     property string configFileName: "amnezia_config.vpn"
 
     width: parent.width
-    height: parent.height
+    height: parent.height * 0.9
-    contentHeight: parent.height * 0.9
 
-    onDrawerClosed: {
+    onClosed: {
         configExtension = ".vpn"
         configCaption = qsTr("Save AmneziaVPN config")
         configFileName = "amnezia_config"
@@ -42,9 +41,6 @@ Drawer2Type {
 
         Header2Type {
             id: header
-
-            parent: root.contentParent
-
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
@@ -54,8 +50,6 @@ Drawer2Type {
         }
 
         FlickableType {
-            parent: root.contentParent
-
             anchors.top: header.bottom
             anchors.bottom: parent.bottom
             contentHeight: content.height + 32
@@ -132,37 +126,30 @@ Drawer2Type {
                     text: qsTr("Show connection settings")
 
                     onClicked: {
-                        configContentDrawer.open()
+                        configContentDrawer.visible = true
                     }
                 }
 
-                Drawer2Type {
+                DrawerType {
                     id: configContentDrawer
 
-                    parent: root
                     width: parent.width
-                    height: parent.height
+                    height: parent.height * 0.9
-
-                    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.close()
+                            configContentDrawer.visible = false
                         }
                     }
 
                     FlickableType {
-                        parent: configContentDrawer.contentParent
-
                         anchors.top: backButton.bottom
                         anchors.left: parent.left
                         anchors.right: parent.right

client/ui/qml/Controls2/Drawer2Type.qml

@@ -1,314 +0,0 @@
-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,10 +40,6 @@ Item {
 
     property alias menuVisible: menu.visible
 
-    property Item drawerParent: root
-
-    property Drawer2Type menu: menu
-
     implicitWidth: rootButtonContent.implicitWidth
     implicitHeight: rootButtonContent.implicitHeight
 
@@ -159,26 +155,21 @@ Item {
         onClicked: {
             if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
                 rootButtonClickedFunction()
+            } else {
+                menu.visible = true
             }
-
-            menu.open()
         }
     }
 
-    Drawer2Type {
+    DrawerType {
         id: menu
 
-        parent: drawerParent
-
         width: parent.width
-        height: parent.height
+        height: parent.height * drawerHeight
-        contentHeight: parent.height * drawerHeight
 
         ColumnLayout {
             id: header
 
-            parent: menu.contentParent
-
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
@@ -187,14 +178,12 @@ Item {
             BackButtonType {
                 backButtonImage: root.headerBackButtonImage
                 backButtonFunction: function() {
-                    menu.close()
+                    root.menuVisible = false
                 }
             }
         }
 
         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.collapse()
+            buttonContent.state = "expanded"
             if (isContainerInstalled) {
                 containersDropDown.menuVisible = true
             }
         }
         function onForceCloseDrawer() {
-            buttonContent.collapse()
+            buttonContent.state = "collapsed"
         }
     }
 
@@ -73,8 +73,14 @@ PageType {
         expandedServersMenuDescription.text = description + root.defaultServerHostName
     }
 
-    Component.onCompleted: {
+    Component.onCompleted: updateDescriptions()
-        updateDescriptions()
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: buttonContent.state === "expanded"
+        onClicked: {
+            buttonContent.state = "collapsed"
+        }
     }
 
     Item {
@@ -86,10 +92,56 @@ 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 }
 
+        anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
+        height: root.height
         radius: 16
         color: root.defaultColor
         border.color: root.borderColor
@@ -105,126 +157,161 @@ PageType {
         }
     }
 
-    Drawer2Type {
+    ColumnLayout {
         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.expanded() || (buttonContent.collapsed() && buttonContent.dragActive)
+        property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active === true)
         /** True when collapsed objects should be visible */
-        property bool collapsedVisibility: buttonContent.collapsed() && !buttonContent.dragActive
+        property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false
 
-        width: parent.width
+        Drag.active: dragArea.drag.active
-        height: parent.height
+        anchors.right: root.right
-        contentHeight: parent.height * 0.9
+        anchors.left: root.left
+        y: root.height - buttonContent.height
 
+        Component.onCompleted: {
+            buttonContent.state = "collapsed"
+        }
 
-        ColumnLayout {
+        /** Set once based on first implicit height change once all children are layed out */
-            id: collapsedButtonContent
+        onImplicitHeightChanged: {
-
+            if (buttonContent.state === "collapsed" && collapsedHeight == 0) {
-            parent: buttonContent.contentParent
+                collapsedHeight = implicitHeight
-
-            visible: buttonContent.collapsedVisibility
-
-            anchors.right: parent.right
-            anchors.left: parent.left
-            anchors.top: parent.top
-
-            onImplicitHeightChanged: {
-                if (buttonContent.collapsed() && buttonContent.collapsedHeight === 0) {
-                    buttonContent.collapsedHeight = implicitHeight
-                }
-            }
-
-            DividerType {
-                Layout.topMargin: 10
-                Layout.fillWidth: false
-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 2
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            }
-        
-            RowLayout {
-                Layout.topMargin: 14
-                Layout.leftMargin: 24
-                Layout.rightMargin: 24
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                Header1TextType {
-                    id: collapsedButtonHeader
-                    Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
-
-                    maximumLineCount: 2
-                    elide: Qt.ElideRight
-
-                    text: root.defaultServerName
-
-                    Layout.alignment: Qt.AlignLeft
-                }
-
-
-                ImageButtonType {
-                    id: collapsedButtonChevron
-
-                    hoverEnabled: false
-                    image: "qrc:/images/controls/chevron-down.svg"
-                    imageColor: "#d7d8db"
-
-                    horizontalPadding: 0
-                    padding: 0
-                    spacing: 0
-
-                    Rectangle {
-                        id: rightImageBackground
-                        anchors.fill: parent
-                        radius: 16
-                        color: "transparent"
-
-                        Behavior on color {
-                            PropertyAnimation { duration: 200 }
-                        }
-                    }
-
-                    onClicked: {
-                        if (buttonContent.collapsed()) {
-                            buttonContent.expand()
-                        }
-                    }
-                }
-            }
-
-            LabelTextType {
-                id: collapsedServerMenuDescription
-                Layout.bottomMargin: 44
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                visible: buttonContent.collapsedVisibility
             }
         }
 
-        Component.onCompleted: {
+        onStateChanged: {
-            buttonContent.collapse()
+            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 {
+            Layout.topMargin: 14
+            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 {
+            id: collapsedServerMenuDescription
+            Layout.bottomMargin: 44
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            visible: buttonContent.collapsedVisibility
         }
 
         ColumnLayout {
             id: serversMenuHeader
 
-            parent: buttonContent.contentParent
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
-
+            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
@@ -253,8 +340,6 @@ PageType {
                 DropDownType {
                     id: containersDropDown
 
-                    drawerParent: root
-
                     rootButtonImageColor: "#0E0E11"
                     rootButtonBackgroundColor: "#D7D8DB"
                     rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
@@ -316,18 +401,12 @@ PageType {
 
         Flickable {
             id: serversContainer
-
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
-            parent: buttonContent.contentParent
+            Layout.fillWidth: true
-
+            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 {
@@ -437,7 +516,7 @@ PageType {
                                     onClicked: function() {
                                         ServersModel.currentlyProcessedIndex = index
                                         PageController.goToPage(PageEnum.PageSettingsServerInfo)
-                                        buttonContent.collapse()
+                                        buttonContent.state = "collapsed"
                                     }
                                 }
                             }
@@ -452,22 +531,5 @@ 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,8 +117,6 @@ PageType {
                             Layout.fillWidth: true
                             Layout.topMargin: 16
 
-                            drawerParent: root
-
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

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

client/ui/qml/Pages2/PageProtocolRaw.qml

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

client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml

@@ -95,8 +95,6 @@ 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.close()
+                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.close()
+                        questionDrawer.visible = false
                     }
-                    questionDrawer.open()
+                    questionDrawer.visible = true
                 }
 
                 MouseArea {
@@ -89,7 +89,6 @@ 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.close()
+                                    questionDrawer.visible = false
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
                                 questionDrawer.noButtonFunction = function() {
-                                    questionDrawer.close()
+                                    questionDrawer.visible = false
                                 }
-                                questionDrawer.open()
+                                questionDrawer.visible = true
                             }
                         }
                     }
@@ -270,7 +270,6 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
-            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml

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

client/ui/qml/Pages2/PageSettingsApplication.qml

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

client/ui/qml/Pages2/PageSettingsBackup.qml

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

client/ui/qml/Pages2/PageSettingsDns.qml

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

client/ui/qml/Pages2/PageSettingsServerData.qml

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

client/ui/qml/Pages2/PageSettingsServerInfo.qml

@@ -71,17 +71,15 @@ PageType {
                     }
 
                     actionButtonFunction: function() {
-                        serverNameEditDrawer.open()
+                        serverNameEditDrawer.visible = true
                     }
                 }
 
-                Drawer2Type {
+                DrawerType {
                     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) {
@@ -90,8 +88,6 @@ PageType {
                     }
 
                     ColumnLayout {
-                        parent: serverNameEditDrawer.contentParent
-
                         anchors.top: parent.top
                         anchors.left: parent.left
                         anchors.right: parent.right
@@ -99,7 +95,6 @@ PageType {
                         anchors.leftMargin: 16
                         anchors.rightMargin: 16
 
-
                         TextFieldWithHeaderType {
                             id: serverName
 
@@ -169,7 +164,6 @@ 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.close()
+                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
                     questionDrawer.noButtonFunction = function() {
-                        questionDrawer.close()
+                        questionDrawer.visible = false
                     }
-                    questionDrawer.open()
+                    questionDrawer.visible = true
                 }
 
                 MouseArea {
@@ -141,7 +141,6 @@ PageType {
 
         QuestionDrawer {
             id: questionDrawer
-            parent: root
         }
     }
 }

client/ui/qml/Pages2/PageSettingsSplitTunneling.qml

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

client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml

@@ -97,20 +97,15 @@ PageType {
                             }
                         }
 
-                        Drawer2Type {
+                        DrawerType {
                             id: showDetailsDrawer
 
                             width: parent.width
-                            height: parent.height
+                            height: parent.height * 0.9
-                            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
@@ -122,8 +117,6 @@ 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.open()
+                    connectionTypeSelection.visible = true
                 }
             }
 
@@ -140,7 +140,6 @@ PageType {
 
         ConnectionTypeSelectionDrawer {
             id: connectionTypeSelection
-            parent: root
         }
     }
 

client/ui/qml/Pages2/PageShare.qml

@@ -179,8 +179,6 @@ PageType {
             DropDownType {
                 id: serverSelector
 
-                drawerParent: root
-
                 signal severSelectorIndexChanged
                 property int currentIndex: 0
 
@@ -243,8 +241,6 @@ PageType {
             DropDownType {
                 id: protocolSelector
 
-                drawerParent: root
-
                 visible: accessTypeSelector.currentIndex === 0
 
                 Layout.fillWidth: true
@@ -334,8 +330,6 @@ PageType {
             DropDownType {
                 id: exportTypeSelector
 
-                drawerParent: root
-
                 property int currentIndex: 0
 
                 Layout.fillWidth: true
@@ -377,7 +371,6 @@ PageType {
 
             ShareConnectionDrawer {
                 id: shareConnectionDrawer
-                parent: root
             }
 
             BasicButtonType {

client/ui/qml/Pages2/PageStart.qml

@@ -135,8 +135,6 @@ PageType {
             var pagePath = PageController.getPagePath(PageEnum.PageHome)
             ServersModel.currentlyProcessedIndex = ServersModel.defaultIndex
             tabBarStackView.push(pagePath, { "objectName" : pagePath })
-
-            connectionTypeSelection.parent = tabBarStackView
         }
 
 //        onWidthChanged: {
@@ -176,12 +174,6 @@ PageType {
                 strokeColor: "#2C2D30"
                 fillColor: "#1C1D21"
             }
-
-            MouseArea {
-                id: noPropagateMouseEvent
-                anchors.fill: parent
-                enabled: true
-            }
         }
 
         TabImageButtonType {
@@ -252,9 +244,7 @@ PageType {
     ConnectionTypeSelectionDrawer {
         id: connectionTypeSelection
 
-        z: 1
+        onAboutToHide: {
-
-        onDrawerClosed: {
             tabBar.setCurrentIndex(tabBar.previousIndex)
         }
     }