feature/custom-drawer (#563)

Replaced all the DrawerType with DrawerType2

client/resources.qrc

@@ -160,7 +160,6 @@
         <file>ui/qml/Components/SettingsContainersListView.qml</file>
         <file>ui/qml/Controls2/TextTypes/ListItemTitleType.qml</file>
         <file>ui/qml/Controls2/DividerType.qml</file>
-        <file>ui/qml/Controls2/DrawerType.qml</file>
         <file>ui/qml/Controls2/StackViewType.qml</file>
         <file>ui/qml/Pages2/PageSettings.qml</file>
         <file>images/controls/amnezia.svg</file>
@@ -225,5 +224,6 @@
         <file>ui/qml/Pages2/PageShareFullAccess.qml</file>
         <file>images/controls/close.svg</file>
         <file>images/controls/search.svg</file>
+        <file>ui/qml/Controls2/DrawerType2.qml</file>
     </qresource>
 </RCC>

client/ui/controllers/pageController.cpp

@@ -118,36 +118,6 @@ void PageController::showOnStartup()
     }
 }
 
-void PageController::updateDrawerRootPage(PageLoader::PageEnum page)
-{
-    m_drawerLayer = 0;
-    m_currentRootPage = page;
-}
-
-void PageController::goToDrawerRootPage()
-{
-
-    m_drawerLayer = 0;
-
-    emit showTopCloseButton(false);
-    emit forceCloseDrawer();
-}
-
-void PageController::drawerOpen()
-{
-    m_drawerLayer = m_drawerLayer + 1;
-    emit showTopCloseButton(true);
-}
-
-void PageController::drawerClose()
-{
-    m_drawerLayer = m_drawerLayer -1;
-    if (m_drawerLayer <= 0) {
-        emit showTopCloseButton(false);
-        m_drawerLayer = 0;
-    }
-}
-
 bool PageController::isTriggeredByConnectButton()
 {
     return m_isTriggeredByConnectButton;

client/ui/controllers/pageController.h

@@ -82,11 +82,6 @@ public slots:
 
     void showOnStartup();
 
-    void updateDrawerRootPage(PageLoader::PageEnum page);
-    void goToDrawerRootPage();
-    void drawerOpen();
-    void drawerClose();
-
     bool isTriggeredByConnectButton();
     void setTriggeredBtConnectButton(bool trigger);
 
@@ -118,17 +113,11 @@ signals:
     void showPassphraseRequestDrawer();
     void passphraseRequestDrawerClosed(QString passphrase);
 
-    void showTopCloseButton(bool visible);
-    void forceCloseDrawer();
-
 private:
     QSharedPointer<ServersModel> m_serversModel;
 
     std::shared_ptr<Settings> m_settings;
 
-    PageLoader::PageEnum m_currentRootPage;
-    int m_drawerLayer;
-
     bool m_isTriggeredByConnectButton;
 };
 

client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml

@@ -8,18 +8,24 @@ import "../Controls2"
 import "../Controls2/TextTypes"
 import "../Config"
 
-DrawerType {
+DrawerType2 {
     id: root
 
     width: parent.width
-    height: parent.height * 0.4375
+    height: parent.height
+
+    expandedContent: ColumnLayout {
+        id: content
 
-    ColumnLayout {
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         spacing: 0
 
+        Component.onCompleted: {
+            root.expandedHeight = content.implicitHeight + 32
+        }
+
         Header2Type {
             Layout.fillWidth: true
             Layout.topMargin: 24
@@ -40,7 +46,7 @@ DrawerType {
 
             clickedFunction: function() {
                 PageController.goToPage(PageEnum.PageSetupWizardCredentials)
-                root.visible = false
+                root.close()
             }
         }
 
@@ -54,7 +60,7 @@ DrawerType {
 
             clickedFunction: function() {
                 PageController.goToPage(PageEnum.PageSetupWizardConfigSource)
-                root.visible = false
+                root.close()
             }
         }
 

client/ui/qml/Components/HomeContainersListView.qml

@@ -60,7 +60,7 @@ ListView {
                     }
 
                     if (checked) {
-                        containersDropDown.menuVisible = false
+                        containersDropDown.close()
                         ServersModel.setDefaultContainer(ServersModel.defaultIndex, proxyContainersModel.mapToSource(index))
                     } else {
                         if (!isSupported && isInstalled) {
@@ -71,7 +71,7 @@ ListView {
                         ContainersModel.setCurrentlyProcessedContainerIndex(proxyContainersModel.mapToSource(index))
                         InstallController.setShouldCreateServer(false)
                         PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings)
-                        containersDropDown.menuVisible = false
+                        containersDropDown.close()
                     }
                 }
 

client/ui/qml/Components/QuestionDrawer.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts
 import "../Controls2"
 import "../Controls2/TextTypes"
 
-DrawerType {
+DrawerType2 {
     id: root
 
     property string headerText
@@ -16,23 +16,24 @@ DrawerType {
     property var yesButtonFunction
     property var noButtonFunction
 
-    width: parent.width
+    expandedContent: ColumnLayout {
-    height: content.implicitHeight + 32
-
-    ColumnLayout {
         id: content
 
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.topMargin: 16
-        anchors.rightMargin: 16
-        anchors.leftMargin: 16
 
         spacing: 8
 
+        onImplicitHeightChanged: {
+            root.expandedHeight = content.implicitHeight + 32
+        }
+
         Header2TextType {
             Layout.fillWidth: true
+            Layout.topMargin: 16
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
 
             text: headerText
         }
@@ -40,6 +41,8 @@ DrawerType {
         ParagraphTextType {
             Layout.fillWidth: true
             Layout.topMargin: 8
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
 
             text: descriptionText
         }
@@ -47,6 +50,8 @@ DrawerType {
         BasicButtonType {
             Layout.fillWidth: true
             Layout.topMargin: 16
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
 
             text: yesButtonText
 
@@ -59,6 +64,8 @@ DrawerType {
 
         BasicButtonType {
             Layout.fillWidth: true
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
 
             defaultColor: "transparent"
             hoveredColor: Qt.rgba(1, 1, 1, 0.08)

client/ui/qml/Components/SelectLanguageDrawer.qml

@@ -5,11 +5,17 @@ import QtQuick.Layouts
 import "../Controls2"
 import "../Controls2/TextTypes"
 
-DrawerType {
+DrawerType2 {
     id: root
 
-    width: parent.width
+    expandedContent: Item {
-    height: parent.height * 0.9
+        id: container
+
+        implicitHeight: root.height * 0.9
+
+        Component.onCompleted: {
+            root.expandedHeight = container.implicitHeight
+        }
 
         ColumnLayout {
             id: backButton
@@ -135,4 +141,5 @@ DrawerType {
                 }
             }
         }
+    }
 }

client/ui/qml/Components/ShareConnectionDrawer.qml

@@ -16,19 +16,18 @@ import "../Controls2/TextTypes"
 import "../Config"
 import "../Components"
 
-DrawerType {
+DrawerType2 {
     id: root
 
-    property alias headerText: header.headerText
+    property string headerText
-    property alias configContentHeaderText: configContentHeader.headerText
+    property string configContentHeaderText
-    property alias contentVisible: content.visible
+    property string contentVisible
 
     property string configExtension: ".vpn"
     property string configCaption: qsTr("Save AmneziaVPN config")
     property string configFileName: "amnezia_config"
 
-    width: parent.width
+    expandedHeight: parent.height * 0.9
-    height: parent.height * 0.9
 
     onClosed: {
         configExtension = ".vpn"
@@ -36,8 +35,8 @@ DrawerType {
         configFileName = "amnezia_config"
     }
 
-    Item {
+    expandedContent: Item {
-        anchors.fill: parent
+        implicitHeight: root.expandedHeight
 
         Header2Type {
             id: header
@@ -47,6 +46,8 @@ DrawerType {
             anchors.topMargin: 20
             anchors.leftMargin: 16
             anchors.rightMargin: 16
+
+            headerText: root.headerText
         }
 
         FlickableType {
@@ -64,6 +65,8 @@ DrawerType {
                 anchors.leftMargin: 16
                 anchors.rightMargin: 16
 
+                visible: root.contentVisible
+
                 BasicButtonType {
                     Layout.fillWidth: true
                     Layout.topMargin: 16
@@ -91,6 +94,7 @@ DrawerType {
                 }
 
                 BasicButtonType {
+                    id: copyConfigTextButton
                     Layout.fillWidth: true
                     Layout.topMargin: 8
 
@@ -103,20 +107,14 @@ DrawerType {
 
                     text: qsTr("Copy")
                     imageSource: "qrc:/images/controls/copy.svg"
-
-                    onClicked: {
-                        configText.selectAll()
-                        configText.copy()
-                        configText.select(0, 0)
-                        PageController.showNotificationMessage(qsTr("Copied"))
-                    }
                 }
 
                 BasicButtonType {
+                    id: copyNativeConfigStringButton
                     Layout.fillWidth: true
                     Layout.topMargin: 8
 
-                    visible: nativeConfigString.text !== ""
+                    visible: false
 
                     defaultColor: "transparent"
                     hoveredColor: Qt.rgba(1, 1, 1, 0.08)
@@ -127,13 +125,6 @@ DrawerType {
 
                     text: qsTr("Copy config string")
                     imageSource: "qrc:/images/controls/copy.svg"
-
-                    onClicked: {
-                        nativeConfigString.selectAll()
-                        nativeConfigString.copy()
-                        nativeConfigString.select(0, 0)
-                        PageController.showNotificationMessage(qsTr("Copied"))
-                    }
                 }
 
                 BasicButtonType {
@@ -150,15 +141,42 @@ DrawerType {
                     text: qsTr("Show connection settings")
 
                     onClicked: {
-                        configContentDrawer.visible = true
+                        configContentDrawer.open()
                     }
                 }
 
-                DrawerType {
+                DrawerType2 {
                     id: configContentDrawer
 
-                    width: parent.width
+                    parent: root.parent
-                    height: parent.height * 0.9
+
+                    anchors.fill: parent
+                    expandedHeight: parent.height * 0.9
+
+                    expandedContent: Item {
+                        id: configContentContainer
+
+                        implicitHeight: configContentDrawer.expandedHeight
+
+                        Connections {
+                            target: copyNativeConfigStringButton
+                            function onClicked() {
+                                nativeConfigString.selectAll()
+                                nativeConfigString.copy()
+                                nativeConfigString.select(0, 0)
+                                PageController.showNotificationMessage(qsTr("Copied"))
+                            }
+                        }
+
+                        Connections {
+                            target: copyConfigTextButton
+                            function onClicked() {
+                                configText.selectAll()
+                                configText.copy()
+                                configText.select(0, 0)
+                                PageController.showNotificationMessage(qsTr("Copied"))
+                            }
+                        }
 
                         BackButtonType {
                             id: backButton
@@ -169,7 +187,7 @@ DrawerType {
                             anchors.topMargin: 16
 
                             backButtonFunction: function() {
-                            configContentDrawer.visible = false
+                                configContentDrawer.open()
                             }
                         }
 
@@ -191,12 +209,18 @@ DrawerType {
                                     id: configContentHeader
                                     Layout.fillWidth: true
                                     Layout.topMargin: 16
+
+                                    headerText: root.configContentHeaderText
                                 }
 
                                 TextField {
                                     id: nativeConfigString
                                     visible: false
                                     text: ExportController.nativeConfigString
+
+                                    onTextChanged: {
+                                        copyNativeConfigStringButton.visible = nativeConfigString.text !== ""
+                                    }
                                 }
 
                                 TextArea {
@@ -231,6 +255,7 @@ DrawerType {
                             }
                         }
                     }
+                }
 
                 Rectangle {
                     Layout.fillWidth: true

client/ui/qml/Controls2/DrawerType.qml

@@ -1,84 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-
-import "../Config"
-
-Drawer {
-    id: drawer
-    property bool needCloseButton: true
-
-    Connections {
-        target: PageController
-
-        function onForceCloseDrawer() {
-            visible = false
-        }
-    }
-
-    edge: Qt.BottomEdge
-
-    clip: true
-    modal: true
-    dragMargin: -10
-
-    enter: Transition {
-        SmoothedAnimation {
-            velocity: 4
-        }
-    }
-
-    exit: Transition {
-        SmoothedAnimation {
-            velocity: 4
-        }
-    }
-
-    background: Rectangle {
-        anchors.fill: parent
-        anchors.bottomMargin: -radius
-        radius: 16
-        color: "#1C1D21"
-
-        border.color: "#2C2D30"
-        border.width: 1
-
-        Rectangle {
-            visible: GC.isMobile()
-
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: 10
-
-            width: 20
-            height: 2
-            color: "#2C2D30"
-        }
-    }
-
-    Overlay.modal: Rectangle {
-        color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
-    }
-
-    onAboutToShow: {
-        if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
-            PageController.updateNavigationBarColor(0xFF1C1D21)
-        }
-    }
-
-    onOpened: {
-        if (needCloseButton) {
-            PageController.drawerOpen()
-        }
-    }
-
-    onClosed: {
-        if (needCloseButton) {
-            PageController.drawerClose()
-        }
-
-        var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
-        if (initialPageNavigationBarColor !== 0xFF1C1D21) {
-            PageController.updateNavigationBarColor(initialPageNavigationBarColor)
-        }
-    }
-}

client/ui/qml/Controls2/DrawerType2.qml

@@ -0,0 +1,241 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import "TextTypes"
+
+Item {
+    id: root
+
+    readonly property string drawerExpanded: "expanded"
+    readonly property string drawerCollapsed: "collapsed"
+
+    readonly property bool isOpened: drawerContent.state === root.drawerExpanded || (drawerContent.state === root.drawerCollapsed && dragArea.drag.active === true)
+    readonly property bool isClosed: drawerContent.state === root.drawerCollapsed && dragArea.drag.active === false
+
+    readonly property bool isExpanded: drawerContent.state === root.drawerExpanded
+    readonly property bool isCollapsed: drawerContent.state === root.drawerCollapsed
+
+    property Component collapsedContent
+    property Component expandedContent
+
+    property string defaultColor: "#1C1D21"
+    property string borderColor: "#2C2D30"
+
+    property real expandedHeight
+    property real collapsedHeight: 0
+
+    signal entered
+    signal exited
+    signal pressed(bool pressed, bool entered)
+
+    signal aboutToHide
+    signal aboutToShow
+    signal close
+    signal open
+    signal closed
+    signal opened
+
+    Connections {
+        target: root
+
+        function onClose() {
+            if (isCollapsed) {
+                return
+            }
+
+            aboutToHide()
+
+            drawerContent.state = root.drawerCollapsed
+            closed()
+        }
+
+        function onOpen() {
+            if (isExpanded) {
+                return
+            }
+
+            aboutToShow()
+
+            drawerContent.state = root.drawerExpanded
+            opened()
+        }
+    }
+
+    /** Set once based on first implicit height change once all children are layed out */
+    Component.onCompleted: {
+        if (root.isCollapsed && root.collapsedHeight == 0) {
+            root.collapsedHeight = drawerContent.implicitHeight
+        }
+    }
+
+    Rectangle {
+        id: background
+
+        anchors.fill: parent
+        color: root.isCollapsed ? "transparent" : Qt.rgba(14/255, 14/255, 17/255, 0.8)
+
+        Behavior on color {
+            PropertyAnimation { duration: 200 }
+        }
+    }
+
+    MouseArea {
+        id: emptyArea
+        anchors.fill: parent
+        enabled: root.isExpanded
+        onClicked: {
+            root.close()
+        }
+    }
+
+    MouseArea {
+        id: dragArea
+
+        anchors.fill: drawerContentBackground
+        cursorShape: root.isCollapsed ? Qt.PointingHandCursor : Qt.ArrowCursor
+        hoverEnabled: true
+
+        enabled: drawerContent.implicitHeight > 0
+
+        drag.target: drawerContent
+        drag.axis: Drag.YAxis
+        drag.maximumY: root.height - root.collapsedHeight
+        drag.minimumY: root.height - root.expandedHeight
+
+        /** If drag area is released at any point other than min or max y, transition to the other state */
+        onReleased: {
+            if (root.isCollapsed && drawerContent.y < dragArea.drag.maximumY) {
+                root.open()
+                return
+            }
+            if (root.isExpanded && drawerContent.y > dragArea.drag.minimumY) {
+                root.close()
+                return
+            }
+        }
+
+        onEntered: {
+            root.entered()
+        }
+        onExited: {
+            root.exited()
+        }
+        onPressedChanged: {
+            root.pressed(pressed, entered)
+        }
+
+        onClicked: {
+            if (root.isCollapsed) {
+                root.open()
+            }
+        }
+    }
+
+    Rectangle {
+        id: drawerContentBackground
+
+        anchors { left: drawerContent.left; right: drawerContent.right; top: drawerContent.top }
+        height: root.height
+        radius: 16
+        color: root.defaultColor
+        border.color: root.borderColor
+        border.width: 1
+
+        Rectangle {
+            width: parent.radius
+            height: parent.radius
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.left: parent.left
+            color: parent.color
+        }
+    }
+
+    Item {
+        id: drawerContent
+
+        Drag.active: dragArea.drag.active
+        anchors.right: root.right
+        anchors.left: root.left
+        y: root.height - drawerContent.height
+        state: root.drawerCollapsed
+
+        implicitHeight: root.isCollapsed ? collapsedLoader.implicitHeight : expandedLoader.implicitHeight
+
+        onStateChanged: {
+            if (root.isCollapsed) {
+                var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
+                if (initialPageNavigationBarColor !== 0xFF1C1D21) {
+                    PageController.updateNavigationBarColor(initialPageNavigationBarColor)
+                }
+                return
+            }
+            if (root.isExpanded) {
+                if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
+                    PageController.updateNavigationBarColor(0xFF1C1D21)
+                }
+                return
+            }
+        }
+
+        states: [
+            State {
+                name: root.drawerCollapsed
+                PropertyChanges {
+                    target: drawerContent
+                    y: root.height - root.collapsedHeight
+                }
+            },
+            State {
+                name: root.drawerExpanded
+                PropertyChanges {
+                    target: drawerContent
+                    y: dragArea.drag.minimumY
+
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: root.drawerCollapsed
+                to: root.drawerExpanded
+                PropertyAnimation {
+                    target: drawerContent
+                    properties: "y"
+                    duration: 200
+                }
+            },
+            Transition {
+                from: root.drawerExpanded
+                to: root.drawerCollapsed
+                PropertyAnimation {
+                    target: drawerContent
+                    properties: "y"
+                    duration: 200
+                }
+            }
+        ]
+
+        Loader {
+            id: collapsedLoader
+
+            visible: root.isCollapsed
+            sourceComponent: root.collapsedContent
+
+            anchors.right: parent.right
+            anchors.left: parent.left
+        }
+
+        Loader {
+            id: expandedLoader
+
+            visible: root.isExpanded
+            sourceComponent: root.expandedContent
+
+            anchors.right: parent.right
+            anchors.left: parent.left
+        }
+    }
+}

client/ui/qml/Controls2/DropDownType.qml

@@ -36,19 +36,23 @@ Item {
     property int rootButtonTextBottomMargin: 16
 
     property real drawerHeight: 0.9
+    property Item drawerParent
     property Component listView
 
-    property alias menuVisible: menu.visible
+    signal open
+    signal close
 
     implicitWidth: rootButtonContent.implicitWidth
     implicitHeight: rootButtonContent.implicitHeight
 
-    onMenuVisibleChanged: {
+    onOpen: {
-        if (menuVisible) {
+        menu.open()
         rootButtonBackground.border.color = rootButtonPressedBorderColor
-        } else {
-            rootButtonBackground.border.color = rootButtonDefaultBorderColor
     }
+
+    onClose: {
+        menu.close()
+        rootButtonBackground.border.color = rootButtonDefaultBorderColor
     }
 
     onEnabledChanged: {
@@ -133,21 +137,21 @@ Item {
         hoverEnabled: root.enabled ? true : false
 
         onEntered: {
-            if (menu.visible === false) {
+            if (menu.isClosed) {
                 rootButtonBackground.border.color = rootButtonHoveredBorderColor
                 rootButtonBackground.color = rootButtonBackgroundHoveredColor
             }
         }
 
         onExited: {
-            if (menu.visible === false) {
+            if (menu.isClosed) {
                 rootButtonBackground.border.color = rootButtonDefaultBorderColor
                 rootButtonBackground.color = rootButtonBackgroundColor
             }
         }
 
         onPressed: {
-            if (menu.visible === false) {
+            if (menu.isClosed) {
                 rootButtonBackground.color = pressed ? rootButtonBackgroundPressedColor : entered ? rootButtonHoveredBorderColor : rootButtonDefaultBorderColor
             }
         }
@@ -156,16 +160,23 @@ Item {
             if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
                 rootButtonClickedFunction()
             } else {
-                menu.visible = true
+                menu.open()
             }
         }
     }
 
-    DrawerType {
+    DrawerType2 {
         id: menu
 
-        width: parent.width
+        parent: drawerParent
-        height: parent.height * drawerHeight
+
+        anchors.fill: parent
+        expandedHeight: drawerParent.height * drawerHeight
+
+        expandedContent: Item {
+            id: container
+
+            implicitHeight: menu.expandedHeight
 
             ColumnLayout {
                 id: header
@@ -178,7 +189,7 @@ Item {
                 BackButtonType {
                     backButtonImage: root.headerBackButtonImage
                     backButtonFunction: function() {
-                    root.menuVisible = false
+                        menu.close()
                     }
                 }
             }
@@ -214,4 +225,5 @@ Item {
                 }
             }
         }
+    }
 }

client/ui/qml/Pages2/PageHome.qml

@@ -18,199 +18,38 @@ import "../Components"
 PageType {
     id: root
 
-    property string defaultColor: "#1C1D21"
-
-    property string borderColor: "#2C2D30"
-
     Connections {
         target: PageController
 
         function onRestorePageHomeState(isContainerInstalled) {
-            buttonContent.state = "expanded"
+            drawer.open()
             if (isContainerInstalled) {
                 containersDropDown.rootButtonClickedFunction()
             }
         }
-
-        function onForceCloseDrawer() {
-            buttonContent.state = "collapsed"
-        }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        enabled: buttonContent.state === "expanded"
-        onClicked: {
-            buttonContent.state = "collapsed"
-        }
     }
 
     Item {
         anchors.fill: parent
-        anchors.bottomMargin: buttonContent.collapsedHeight
+        anchors.bottomMargin: drawer.collapsedHeight
 
         ConnectButton {
             anchors.centerIn: parent
         }
     }
 
-    MouseArea {
-        id: dragArea
 
-        anchors.fill: buttonBackground
+    DrawerType2 {
-        cursorShape: buttonContent.state === "collapsed" ? Qt.PointingHandCursor : Qt.ArrowCursor
+        id: drawer
-        hoverEnabled: true
+        anchors.fill: parent
-
-        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
-        border.width: 1
-
-        Rectangle {
-            width: parent.radius
-            height: parent.radius
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            anchors.left: parent.left
-            color: parent.color
-        }
-    }
-
-    ColumnLayout {
-        id: buttonContent
-
-        /** 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)
-        /** True when collapsed objects should be visible */
-        property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false
-
-        Drag.active: dragArea.drag.active
-        anchors.right: root.right
-        anchors.left: root.left
-        y: root.height - buttonContent.height
-
-        Component.onCompleted: {
-            buttonContent.state = "collapsed"
-        }
-
-        /** Set once based on first implicit height change once all children are layed out */
-        onImplicitHeightChanged: {
-            if (buttonContent.state === "collapsed" && collapsedHeight == 0) {
-                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
-                }
-            }
-        ]
 
+        collapsedContent:  ColumnLayout {
             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 {
@@ -218,13 +57,30 @@ PageType {
                 Layout.leftMargin: 24
                 Layout.rightMargin: 24
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            visible: buttonContent.collapsedVisibility
 
                 spacing: 0
 
+                Connections {
+                    target: drawer
+                    function onEntered() {
+                        collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
+                        collapsedButtonHeader.opacity = 0.8
+                    }
+
+                    function onExited() {
+                        collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
+                        collapsedButtonHeader.opacity = 1
+                    }
+
+                    function onPressed(pressed, entered) {
+                        collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
+                        collapsedButtonHeader.opacity = 0.7
+                    }
+                }
+
                 Header1TextType {
                     id: collapsedButtonHeader
-                Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo
+                    Layout.maximumWidth: drawer.width - 48 - 18 - 12 // todo
 
                     maximumLineCount: 2
                     elide: Qt.ElideRight
@@ -254,8 +110,8 @@ PageType {
                     bottomPadding: 3
 
                     onClicked: {
-                    if (buttonContent.state === "collapsed") {
+                        if (drawer.isCollapsed) {
-                        buttonContent.state = "expanded"
+                            drawer.open()
                         }
                     }
                 }
@@ -265,16 +121,26 @@ PageType {
                 id: collapsedServerMenuDescription
                 Layout.bottomMargin: 44
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            visible: buttonContent.collapsedVisibility
                 text: ServersModel.defaultServerDescriptionCollapsed
             }
 
+        }
+        expandedContent:  Item {
+            id: serverMenuContainer
+
+            implicitHeight: root.height * 0.9
+
+            Component.onCompleted: {
+                drawer.expandedHeight = serverMenuContainer.implicitHeight
+            }
+
             ColumnLayout {
                 id: serversMenuHeader
 
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+                anchors.top: parent.top
-            Layout.fillWidth: true
+                anchors.right: parent.right
-            visible: buttonContent.expandedVisibility
+                anchors.left: parent.left
+
 
                 Header1TextType {
                     Layout.fillWidth: true
@@ -320,9 +186,11 @@ PageType {
 
                         rootButtonClickedFunction: function() {
                             ServersModel.currentlyProcessedIndex = serversMenuContent.currentIndex
-                        containersDropDown.menuVisible = true
+                            containersDropDown.open()
                         }
 
+                        drawerParent: root
+
                         listView: HomeContainersListView {
                             rootWidth: root.width
 
@@ -357,7 +225,6 @@ PageType {
                     Layout.topMargin: 48
                     Layout.leftMargin: 16
                     Layout.rightMargin: 16
-                visible: buttonContent.expandedVisibility
 
                     headerText: qsTr("Servers")
                 }
@@ -365,12 +232,14 @@ PageType {
 
             Flickable {
                 id: serversContainer
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+
-            Layout.fillWidth: true
+                anchors.top: serversMenuHeader.bottom
-            Layout.topMargin: 16
+                anchors.right: parent.right
-            contentHeight: col.implicitHeight
+                anchors.left: parent.left
-            implicitHeight: root.height - (root.height * 0.1) - serversMenuHeader.implicitHeight - 52 //todo 52 is tabbar height
+                anchors.topMargin: 16
-            visible: buttonContent.expandedVisibility
+
+                contentHeight: col.height + col.anchors.bottomMargin
+                implicitHeight: parent.height - serversMenuHeader.implicitHeight
                 clip: true
 
                 ScrollBar.vertical: ScrollBar {
@@ -386,6 +255,7 @@ PageType {
                     anchors.top: parent.top
                     anchors.left: parent.left
                     anchors.right: parent.right
+                    anchors.bottomMargin: 32
 
                     spacing: 16
 
@@ -487,7 +357,7 @@ PageType {
                                         onClicked: function() {
                                             ServersModel.currentlyProcessedIndex = index
                                             PageController.goToPage(PageEnum.PageSettingsServerInfo)
-                                        buttonContent.state = "collapsed"
+                                            drawer.close()
                                         }
                                     }
                                 }
@@ -503,4 +373,5 @@ PageType {
                 }
             }
         }
+    }
 }

client/ui/qml/Pages2/PageProtocolAwgSettings.qml

@@ -275,20 +275,18 @@ PageType {
                             text: qsTr("Remove AmneziaWG")
 
                             onClicked: {
-                                questionDrawer.headerText = qsTr("Remove AmneziaWG from server?")
+                                var headerText = qsTr("Remove AmneziaWG from server?")
-                                questionDrawer.descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
+                                var descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
-                                questionDrawer.yesButtonText = qsTr("Continue")
+                                var yesButtonText = qsTr("Continue")
-                                questionDrawer.noButtonText = qsTr("Cancel")
+                                var noButtonText = qsTr("Cancel")
 
-                                questionDrawer.yesButtonFunction = function() {
+                                var yesButtonFunction = function() {
-                                    questionDrawer.visible = false
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
-                                questionDrawer.noButtonFunction = function() {
+                                var noButtonFunction = function() {
-                                    questionDrawer.visible = false
                                 }
-                                questionDrawer.visible = true
+                                showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                             }
                         }
 
@@ -320,9 +318,5 @@ PageType {
                 }
             }
         }
-
-        QuestionDrawer {
-            id: questionDrawer
-        }
     }
 }

client/ui/qml/Pages2/PageProtocolCloakSettings.qml

@@ -122,6 +122,8 @@ PageType {
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 
+                            drawerParent: root
+
                             listView: ListViewWithRadioButtonType {
                                 id: cipherListView
 
@@ -138,7 +140,7 @@ PageType {
                                 clickedFunction: function() {
                                     cipherDropDown.text = selectedText
                                     cipher = cipherDropDown.text
-                                    cipherDropDown.menuVisible = false
+                                    cipherDropDown.close()
                                 }
 
                                 Component.onCompleted: {

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

@@ -162,6 +162,8 @@ PageType {
                             descriptionText: qsTr("Hash")
                             headerText: qsTr("Hash")
 
+                            drawerParent: root
+
                             listView: ListViewWithRadioButtonType {
                                 id: hashListView
 
@@ -183,7 +185,7 @@ PageType {
                                 clickedFunction: function() {
                                     hashDropDown.text = selectedText
                                     hash = hashDropDown.text
-                                    hashDropDown.menuVisible = false
+                                    hashDropDown.close()
                                 }
 
                                 Component.onCompleted: {
@@ -208,6 +210,8 @@ PageType {
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 
+                            drawerParent: root
+
                             listView: ListViewWithRadioButtonType {
                                 id: cipherListView
 
@@ -229,7 +233,7 @@ PageType {
                                 clickedFunction: function() {
                                     cipherDropDown.text = selectedText
                                     cipher = cipherDropDown.text
-                                    cipherDropDown.menuVisible = false
+                                    cipherDropDown.close()
                                 }
 
                                 Component.onCompleted: {
@@ -364,20 +368,19 @@ PageType {
                             text: qsTr("Remove OpenVPN")
 
                             onClicked: {
-                                questionDrawer.headerText = qsTr("Remove OpenVpn from server?")
+                                var headerText = qsTr("Remove OpenVpn from server?")
-                                questionDrawer.descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
+                                var descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
-                                questionDrawer.yesButtonText = qsTr("Continue")
+                                var yesButtonText = qsTr("Continue")
-                                questionDrawer.noButtonText = qsTr("Cancel")
+                                var noButtonText = qsTr("Cancel")
 
-                                questionDrawer.yesButtonFunction = function() {
+                                var yesButtonFunction = function() {
-                                    questionDrawer.visible = false
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
-                                questionDrawer.noButtonFunction = function() {
+                                var noButtonFunction = function() {
-                                    questionDrawer.visible = false
                                 }
-                                questionDrawer.visible = true
+
+                                showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                             }
                         }
 
@@ -398,9 +401,5 @@ PageType {
                 }
             }
         }
-
-        QuestionDrawer {
-            id: questionDrawer
-        }
     }
 }

client/ui/qml/Pages2/PageProtocolRaw.qml

@@ -90,11 +90,16 @@ PageType {
 
                         DividerType {}
 
-                        DrawerType {
+                        DrawerType2 {
                             id: configContentDrawer
 
-                            width: parent.width
+                            expandedHeight: root.height * 0.9
-                            height: parent.height * 0.9
+
+                            parent: root
+                            anchors.fill: parent
+
+                            expandedContent: Item {
+                                implicitHeight: configContentDrawer.expandedHeight
 
                                 BackButtonType {
                                     id: backButton
@@ -105,7 +110,7 @@ PageType {
                                     anchors.topMargin: 16
 
                                     backButtonFunction: function() {
-                                    configContentDrawer.visible = false
+                                        configContentDrawer.close()
                                     }
                                 }
 
@@ -163,6 +168,7 @@ PageType {
                         }
                     }
                 }
+            }
 
             LabelWithButtonType {
                 id: removeButton
@@ -175,20 +181,19 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getCurrentlyProcessedContainerName())
+                    var headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getCurrentlyProcessedContainerName())
-                    questionDrawer.descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
+                    var descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
 
                 MouseArea {
@@ -200,9 +205,5 @@ PageType {
 
             DividerType {}
         }
-
-        QuestionDrawer {
-            id: questionDrawer
-        }
     }
 }

client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml

@@ -100,6 +100,8 @@ PageType {
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 
+                            drawerParent: root
+
                             listView: ListViewWithRadioButtonType {
                                 id: cipherListView
 
@@ -116,7 +118,7 @@ PageType {
                                 clickedFunction: function() {
                                     cipherDropDown.text = selectedText
                                     cipher = cipherDropDown.text
-                                    cipherDropDown.menuVisible = false
+                                    cipherDropDown.close()
                                 }
 
                                 Component.onCompleted: {

client/ui/qml/Pages2/PageServiceDnsSettings.qml

@@ -63,19 +63,18 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getCurrentlyProcessedContainerName())
+                    var headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getCurrentlyProcessedContainerName())
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
 
                 MouseArea {
@@ -86,10 +85,6 @@ PageType {
             }
 
             DividerType {}
-
-            QuestionDrawer {
-                id: questionDrawer
-            }
         }
     }
 }

client/ui/qml/Pages2/PageServiceSftpSettings.qml

@@ -248,28 +248,23 @@ PageType {
                             text: qsTr("Remove SFTP and all data stored there")
 
                             onClicked: {
-                                questionDrawer.headerText = qsTr("Remove SFTP and all data stored there?")
+                                var headerText = qsTr("Remove SFTP and all data stored there?")
-                                questionDrawer.yesButtonText = qsTr("Continue")
+                                var yesButtonText = qsTr("Continue")
-                                questionDrawer.noButtonText = qsTr("Cancel")
+                                var noButtonText = qsTr("Cancel")
 
-                                questionDrawer.yesButtonFunction = function() {
+                                var yesButtonFunction = function() {
-                                    questionDrawer.visible = false
                                     PageController.goToPage(PageEnum.PageDeinstalling)
                                     InstallController.removeCurrentlyProcessedContainer()
                                 }
-                                questionDrawer.noButtonFunction = function() {
+                                var noButtonFunction = function() {
-                                    questionDrawer.visible = false
-                                }
-                                questionDrawer.visible = true
-                            }
-                        }
-                    }
-                }
-            }
                                 }
 
-        QuestionDrawer {
+                                showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
-            id: questionDrawer
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }

client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml

@@ -126,25 +126,20 @@ PageType {
                 text: qsTr("Remove website")
 
                 onClicked: {
-                    questionDrawer.headerText = qsTr("The site with all data will be removed from the tor network.")
+                    var headerText = qsTr("The site with all data will be removed from the tor network.")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
-                    }
-                    questionDrawer.visible = true
-                }
-            }
                     }
 
-        QuestionDrawer {
+                    showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
-            id: questionDrawer
+                }
+            }
         }
     }
 }

client/ui/qml/Pages2/PageSettingsApplication.qml

@@ -117,10 +117,6 @@ PageType {
                 }
             }
 
-            SelectLanguageDrawer {
-                id: selectLanguageDrawer
-            }
-
 
             DividerType {}
 
@@ -145,28 +141,30 @@ PageType {
                 rightImageSource: "qrc:/images/controls/chevron-right.svg"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Reset settings and remove all data from the application?")
+                    var headerText = qsTr("Reset settings and remove all data from the application?")
-                    questionDrawer.descriptionText = qsTr("All settings will be reset to default. All installed AmneziaVPN services will still remain on the server.")
+                    var descriptionText = qsTr("All settings will be reset to default. All installed AmneziaVPN services will still remain on the server.")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         SettingsController.clearSettings()
                         PageController.replaceStartPage()
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
             DividerType {}
+        }
+    }
 
-            QuestionDrawer {
+    SelectLanguageDrawer {
-                id: questionDrawer
+        id: selectLanguageDrawer
-            }
+
-        }
+        width: root.width
+        height: root.height
     }
 }

client/ui/qml/Pages2/PageSettingsBackup.qml

@@ -133,24 +133,19 @@ PageType {
     }
 
     function restoreBackup(filePath) {
-        questionDrawer.headerText = qsTr("Import settings from a backup file?")
+        var headerText = qsTr("Import settings from a backup file?")
-        questionDrawer.descriptionText = qsTr("All current settings will be reset");
+        var descriptionText = qsTr("All current settings will be reset");
-        questionDrawer.yesButtonText = qsTr("Continue")
+        var yesButtonText = qsTr("Continue")
-        questionDrawer.noButtonText = qsTr("Cancel")
+        var noButtonText = qsTr("Cancel")
 
-        questionDrawer.yesButtonFunction = function() {
+        var yesButtonFunction = function() {
-            questionDrawer.visible = false
             PageController.showBusyIndicator(true)
             SettingsController.restoreAppConfig(filePath)
             PageController.showBusyIndicator(false)
         }
-        questionDrawer.noButtonFunction = function() {
+        var noButtonFunction = function() {
-            questionDrawer.visible = false
-        }
-        questionDrawer.visible = true
         }
 
-    QuestionDrawer {
+        showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
-        id: questionDrawer
     }
 }

client/ui/qml/Pages2/PageSettingsDns.qml

@@ -95,22 +95,21 @@ PageType {
                 text: qsTr("Restore default")
 
                 onClicked: function() {
-                    questionDrawer.headerText = qsTr("Restore default DNS settings?")
+                    var headerText = qsTr("Restore default DNS settings?")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         SettingsController.primaryDns = "1.1.1.1"
                         primaryDns.textFieldText = SettingsController.primaryDns
                         SettingsController.secondaryDns = "1.0.0.1"
                         secondaryDns.textFieldText = SettingsController.secondaryDns
                         PageController.showNotificationMessage(qsTr("Settings have been reset"))
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
@@ -130,8 +129,5 @@ PageType {
                 }
             }
         }
-        QuestionDrawer {
-            id: questionDrawer
-        }
     }
 }

client/ui/qml/Pages2/PageSettingsLogging.qml

@@ -143,21 +143,20 @@ PageType {
                         image: "qrc:/images/controls/delete.svg"
 
                         onClicked: function() {
-                            questionDrawer.headerText = qsTr("Clear logs?")
+                            var headerText = qsTr("Clear logs?")
-                            questionDrawer.yesButtonText = qsTr("Continue")
+                            var yesButtonText = qsTr("Continue")
-                            questionDrawer.noButtonText = qsTr("Cancel")
+                            var noButtonText = qsTr("Cancel")
 
-                            questionDrawer.yesButtonFunction = function() {
+                            var yesButtonFunction = function() {
-                                questionDrawer.visible = false
                                 PageController.showBusyIndicator(true)
                                 SettingsController.clearLogs()
                                 PageController.showBusyIndicator(false)
                                 PageController.showNotificationMessage(qsTr("Logs have been cleaned up"))
                             }
-                            questionDrawer.noButtonFunction = function() {
+                            var noButtonFunction = function() {
-                                questionDrawer.visible = false
                             }
-                            questionDrawer.visible = true
+
+                            showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                         }
                     }
 
@@ -170,10 +169,6 @@ PageType {
                     }
                 }
             }
-
-            QuestionDrawer {
-                id: questionDrawer
-            }
         }
     }
 }

client/ui/qml/Pages2/PageSettingsServerData.qml

@@ -92,21 +92,20 @@ PageType {
                 descriptionText: qsTr("May be needed when changing other settings")
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Clear cached profiles?")
+                    var headerText = qsTr("Clear cached profiles?")
-                    questionDrawer.descriptionText = qsTr("")
+                    var descriptionText = qsTr("")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.showBusyIndicator(true)
                         SettingsController.clearCachedProfiles()
                         PageController.showBusyIndicator(false)
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
@@ -140,13 +139,12 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Do you want to reboot the server?")
+                    var headerText = qsTr("Do you want to reboot the server?")
-                    questionDrawer.descriptionText = qsTr("The reboot process may take approximately 30 seconds. Are you sure you wish to proceed?")
+                    var descriptionText = qsTr("The reboot process may take approximately 30 seconds. Are you sure you wish to proceed?")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.showBusyIndicator(true)
                         if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) {
                             ConnectionController.closeConnection()
@@ -154,10 +152,10 @@ PageType {
                         InstallController.rebootCurrentlyProcessedServer()
                         PageController.showBusyIndicator(false)
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
@@ -172,13 +170,12 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Do you want to remove the server from application?")
+                    var headerText = qsTr("Do you want to remove the server from application?")
-                    questionDrawer.descriptionText = qsTr("All installed AmneziaVPN services will still remain on the server.")
+                    var descriptionText = qsTr("All installed AmneziaVPN services will still remain on the server.")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.showBusyIndicator(true)
                         if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) {
                             ConnectionController.closeConnection()
@@ -186,10 +183,10 @@ PageType {
                         InstallController.removeCurrentlyProcessedServer()
                         PageController.showBusyIndicator(false)
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
@@ -203,23 +200,22 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Do you want to clear server from Amnezia software?")
+                    var headerText = qsTr("Do you want to clear server from Amnezia software?")
-                    questionDrawer.descriptionText = qsTr("All containers will be deleted on the server. This means that configuration files, keys and certificates will be deleted.")
+                    var descriptionText = qsTr("All containers will be deleted on the server. This means that configuration files, keys and certificates will be deleted.")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) {
                             ConnectionController.closeConnection()
                         }
                         InstallController.removeAllContainers()
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
@@ -235,31 +231,26 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Do you want to reset API config?")
+                    var headerText = qsTr("Do you want to reset API config?")
-                    questionDrawer.descriptionText = ""
+                    var descriptionText = ""
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.showBusyIndicator(true)
                         ApiController.clearApiConfig()
                         PageController.showBusyIndicator(false)
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+                    
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
             }
 
             DividerType {
                 visible: ServersModel.isCurrentlyProcessedServerFromApi()
             }
-
-            QuestionDrawer {
-                id: questionDrawer
-            }
         }
     }
 }

client/ui/qml/Pages2/PageSettingsServerInfo.qml

@@ -71,30 +71,33 @@ PageType {
                     }
 
                     actionButtonFunction: function() {
-                        serverNameEditDrawer.visible = true
+                        serverNameEditDrawer.open()
                     }
                 }
 
-                DrawerType {
+                DrawerType2 {
                     id: serverNameEditDrawer
 
-                    width: root.width
+                    parent: root
-                    height: root.height * 0.35
 
-                    onVisibleChanged: {
+                    anchors.fill: parent
-                        if (serverNameEditDrawer.visible) {
+                    expandedHeight: root.height * 0.35
-                            serverName.textField.forceActiveFocus()
-                        }
-                    }
 
-                    ColumnLayout {
+                    expandedContent: ColumnLayout {
                         anchors.top: parent.top
                         anchors.left: parent.left
                         anchors.right: parent.right
-                        anchors.topMargin: 16
+                        anchors.topMargin: 32
                         anchors.leftMargin: 16
                         anchors.rightMargin: 16
 
+                        Connections {
+                            target: serverNameEditDrawer
+                            function onOpened() {
+                                serverName.textField.forceActiveFocus()
+                            }
+                        }
+
                         TextFieldWithHeaderType {
                             id: serverName
 
@@ -118,7 +121,7 @@ PageType {
                                 if (serverName.textFieldText !== name) {
                                     name = serverName.textFieldText
                                 }
-                                serverNameEditDrawer.visible = false
+                                serverNameEditDrawer.close()
                             }
                         }
                     }

client/ui/qml/Pages2/PageSettingsServerProtocol.qml

@@ -113,20 +113,19 @@ PageType {
                 textColor: "#EB5757"
 
                 clickedFunction: function() {
-                    questionDrawer.headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getCurrentlyProcessedContainerName())
+                    var headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getCurrentlyProcessedContainerName())
-                    questionDrawer.descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
+                    var descriptionText = qsTr("All users with whom you shared a connection will no longer be able to connect to it.")
-                    questionDrawer.yesButtonText = qsTr("Continue")
+                    var yesButtonText = qsTr("Continue")
-                    questionDrawer.noButtonText = qsTr("Cancel")
+                    var noButtonText = qsTr("Cancel")
 
-                    questionDrawer.yesButtonFunction = function() {
+                    var yesButtonFunction = function() {
-                        questionDrawer.visible = false
                         PageController.goToPage(PageEnum.PageDeinstalling)
                         InstallController.removeCurrentlyProcessedContainer()
                     }
-                    questionDrawer.noButtonFunction = function() {
+                    var noButtonFunction = function() {
-                        questionDrawer.visible = false
                     }
-                    questionDrawer.visible = true
+
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                 }
 
                 MouseArea {
@@ -138,9 +137,9 @@ PageType {
 
             DividerType {}
         }
+    }
 
     QuestionDrawer {
         id: questionDrawer
     }
-    }
 }

client/ui/qml/Pages2/PageSettingsSplitTunneling.qml

@@ -121,6 +121,7 @@ PageType {
             Layout.rightMargin: 16
 
             drawerHeight: 0.4375
+            drawerParent: root
 
             enabled: root.pageEnabled
 
@@ -135,7 +136,7 @@ PageType {
 
                 clickedFunction: function() {
                     selector.text = selectedText
-                    selector.menuVisible = false
+                    selector.close()
                     if (SitesModel.routeMode !== root.routeModesModel[currentIndex].type) {
                         SitesModel.routeMode = root.routeModesModel[currentIndex].type
                     }
@@ -202,26 +203,21 @@ PageType {
                             rightImageColor: "#D7D8DB"
 
                             clickedFunction: function() {
-                                questionDrawer.headerText = qsTr("Remove ") + url + "?"
+                                var headerText = qsTr("Remove ") + url + "?"
-                                questionDrawer.yesButtonText = qsTr("Continue")
+                                var yesButtonText = qsTr("Continue")
-                                questionDrawer.noButtonText = qsTr("Cancel")
+                                var noButtonText = qsTr("Cancel")
 
-                                questionDrawer.yesButtonFunction = function() {
+                                var yesButtonFunction = function() {
-                                    questionDrawer.visible = false
                                     SitesController.removeSite(index)
                                 }
-                                questionDrawer.noButtonFunction = function() {
+                                var noButtonFunction = function() {
-                                    questionDrawer.visible = false
                                 }
-                                questionDrawer.visible = true
+
+                                showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                             }
                         }
 
                         DividerType {}
-
-                        QuestionDrawer {
-                            id: questionDrawer
-                        }
                     }
                 }
             }
@@ -275,16 +271,13 @@ PageType {
         }
     }
 
-    DrawerType {
+    DrawerType2 {
         id: moreActionsDrawer
 
-        width: parent.width
-        height: parent.height * 0.4375
-
-        FlickableType {
         anchors.fill: parent
-            contentHeight: moreActionsDrawerContent.height
+        expandedHeight: parent.height * 0.4375
-            ColumnLayout {
+
+        expandedContent: ColumnLayout {
             id: moreActionsDrawerContent
 
             anchors.top: parent.top
@@ -338,13 +331,15 @@ PageType {
             DividerType {}
         }
     }
-    }
 
-    DrawerType {
+    DrawerType2 {
         id: importSitesDrawer
 
-        width: parent.width
+        anchors.fill: parent
-        height: parent.height * 0.4375
+        expandedHeight: parent.height * 0.4375
+
+        expandedContent: Item {
+            implicitHeight: importSitesDrawer.expandedHeight
 
             BackButtonType {
                 id: importSitesDrawerBackButton
@@ -422,4 +417,9 @@ PageType {
                 }
             }
         }
+    }
+
+    QuestionDrawer {
+        id: questionDrawer
+    }
 }

client/ui/qml/Pages2/PageSetupWizardEasy.qml

@@ -192,7 +192,6 @@ PageType {
                         return ContainersModel.isAnyContainerInstalled()
                     }
 
-
                     return  true
                 }
 

client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml

@@ -97,11 +97,14 @@ PageType {
                             }
                         }
 
-                        DrawerType {
+                        DrawerType2 {
                             id: showDetailsDrawer
+                            parent: root
 
-                            width: parent.width
+                            anchors.fill: parent
-                            height: parent.height * 0.9
+                            expandedHeight: parent.height * 0.9
+                            expandedContent: Item {
+                                implicitHeight: showDetailsDrawer.expandedHeight
 
                                 BackButtonType {
                                     id: showDetailsBackButton
@@ -172,6 +175,7 @@ PageType {
                                     }
                                 }
                             }
+                        }
 
                         ParagraphTextType {
                             id: transportProtoHeader

client/ui/qml/Pages2/PageSetupWizardStart.qml

@@ -116,7 +116,7 @@ PageType {
                 text: qsTr("I have the data to connect")
 
                 onClicked: {
-                    connectionTypeSelection.visible = true
+                    connectionTypeSelection.open()
                 }
             }
 
@@ -138,11 +138,11 @@ PageType {
                 onClicked: Qt.openUrlExternally(qsTr("https://amnezia.org/instructions/0_starter-guide"))
             }
         }
+    }
 
     ConnectionTypeSelectionDrawer {
         id: connectionTypeSelection
     }
-    }
 
     BusyIndicatorType {
         id: busyIndicator

client/ui/qml/Pages2/PageShare.qml

@@ -41,8 +41,6 @@ PageType {
             shareConnectionDrawer.headerText = qsTr("Connection to ") + serverSelector.text
             shareConnectionDrawer.configContentHeaderText = qsTr("File with connection settings to ") + serverSelector.text
 
-            shareConnectionDrawer.needCloseButton = false
-
             shareConnectionDrawer.open()
             shareConnectionDrawer.contentVisible = false
             PageController.showBusyIndicator(true)
@@ -80,11 +78,6 @@ PageType {
             }
 
             PageController.showBusyIndicator(false)
-
-            shareConnectionDrawer.needCloseButton = true
-            PageController.showTopCloseButton(true)
-
-            shareConnectionDrawer.contentVisible = true
         }
 
         function onExportErrorOccurred(errorMessage) {
@@ -154,14 +147,15 @@ PageType {
                     shareFullAccessDrawer.open()
                 }
 
-                DrawerType {
+                DrawerType2 {
                     id: shareFullAccessDrawer
 
-                    width: root.width
+                    parent: root
-                    height: root.height * 0.45
 
+                    anchors.fill: parent
+                    expandedHeight: root.height * 0.45
 
-                    ColumnLayout {
+                    expandedContent: ColumnLayout {
                         anchors.top: parent.top
                         anchors.left: parent.left
                         anchors.right: parent.right
@@ -276,6 +270,7 @@ PageType {
                 Layout.topMargin: 16
 
                 drawerHeight: 0.4375
+                drawerParent: root
 
                 descriptionText: qsTr("Server")
                 headerText: qsTr("Server")
@@ -305,7 +300,7 @@ PageType {
                             serverSelector.severSelectorIndexChanged()
                         }
 
-                        serverSelector.menuVisible = false
+                        serverSelector.close()
                     }
 
                     Component.onCompleted: {
@@ -328,6 +323,7 @@ PageType {
                 Layout.topMargin: 16
 
                 drawerHeight: 0.5
+                drawerParent: root
 
                 descriptionText: qsTr("Protocol")
                 headerText: qsTr("Protocol")
@@ -358,7 +354,7 @@ PageType {
                     clickedFunction: function() {
                         handler()
 
-                        protocolSelector.menuVisible = false
+                        protocolSelector.close()
                     }
 
                     Connections {
@@ -423,6 +419,7 @@ PageType {
                 Layout.topMargin: 16
 
                 drawerHeight: 0.4375
+                drawerParent: root
 
                 visible: accessTypeSelector.currentIndex === 0
                 enabled: root.connectionTypesModel.length > 1
@@ -446,7 +443,7 @@ PageType {
                     clickedFunction: function() {
                         exportTypeSelector.text = selectedText
                         exportTypeSelector.currentIndex = currentIndex
-                        exportTypeSelector.menuVisible = false
+                        exportTypeSelector.close()
                     }
 
                     Component.onCompleted: {
@@ -456,10 +453,6 @@ PageType {
                 }
             }
 
-            ShareConnectionDrawer {
-                id: shareConnectionDrawer
-            }
-
             BasicButtonType {
                 Layout.fillWidth: true
                 Layout.topMargin: 40
@@ -561,13 +554,15 @@ PageType {
 
                         DividerType {}
 
-                        DrawerType {
+                        DrawerType2 {
                             id: clientInfoDrawer
 
-                            width: root.width
+                            parent: root
-                            height: root.height * 0.5
 
-                            ColumnLayout {
+                            anchors.fill: parent
+                            expandedHeight: root.height * 0.5
+
+                            expandedContent: ColumnLayout {
                                 anchors.top: parent.top
                                 anchors.left: parent.left
                                 anchors.right: parent.right
@@ -602,26 +597,29 @@ PageType {
                                         clientNameEditDrawer.open()
                                     }
 
-                                    DrawerType {
+                                    DrawerType2 {
                                         id: clientNameEditDrawer
 
-                                        width: root.width
+                                        parent: root
-                                        height: root.height * 0.35
 
-                                        onVisibleChanged: {
+                                        anchors.fill: parent
-                                            if (clientNameEditDrawer.visible) {
+                                        expandedHeight: root.height * 0.35
-                                                clientNameEditor.textField.forceActiveFocus()
-                                            }
-                                        }
 
-                                        ColumnLayout {
+                                        expandedContent: ColumnLayout {
                                             anchors.top: parent.top
                                             anchors.left: parent.left
                                             anchors.right: parent.right
-                                            anchors.topMargin: 16
+                                            anchors.topMargin: 32
                                             anchors.leftMargin: 16
                                             anchors.rightMargin: 16
 
+                                            Connections {
+                                                target: clientNameEditDrawer
+                                                function onOpened() {
+                                                    clientNameEditor.textField.forceActiveFocus()
+                                                }
+                                            }
+
                                             TextFieldWithHeaderType {
                                                 id: clientNameEditor
                                                 Layout.fillWidth: true
@@ -669,20 +667,21 @@ PageType {
                                     text: qsTr("Revoke")
 
                                     onClicked: function() {
-                                        questionDrawer.headerText = qsTr("Revoke the config for a user - %1?").arg(clientName)
+                                        var headerText = qsTr("Revoke the config for a user - %1?").arg(clientName)
-                                        questionDrawer.descriptionText = qsTr("The user will no longer be able to connect to your server.")
+                                        var descriptionText = qsTr("The user will no longer be able to connect to your server.")
-                                        questionDrawer.yesButtonText = qsTr("Continue")
+                                        var yesButtonText = qsTr("Continue")
-                                        questionDrawer.noButtonText = qsTr("Cancel")
+                                        var noButtonText = qsTr("Cancel")
 
-                                        questionDrawer.yesButtonFunction = function() {
+                                        var yesButtonFunction = function() {
-                                            questionDrawer.close()
                                             clientInfoDrawer.close()
                                             root.revokeConfig(index)
                                         }
-                                        questionDrawer.noButtonFunction = function() {
+                                        var noButtonFunction = function() {
-                                            questionDrawer.close()
+                                        }
+
+                                        showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
+                                    }
                                 }
-                                        questionDrawer.open()
                             }
                         }
                     }
@@ -691,11 +690,12 @@ PageType {
         }
     }
 
-            QuestionDrawer {
+    ShareConnectionDrawer {
-                id: questionDrawer
+        id: shareConnectionDrawer
-            }
+
-        }
+        anchors.fill: parent
     }
+
     MouseArea {
         anchors.fill: parent
         onPressed: function(mouse) {

client/ui/qml/Pages2/PageShareFullAccess.qml

@@ -69,6 +69,7 @@ PageType {
                 Layout.topMargin: 16
 
                 drawerHeight: 0.4375
+                drawerParent: root
 
                 descriptionText: qsTr("Server")
                 headerText: qsTr("Server")
@@ -99,7 +100,7 @@ PageType {
 
                         shareConnectionDrawer.headerText = qsTr("Accessing ") + serverSelector.text
                         shareConnectionDrawer.configContentHeaderText = qsTr("File with accessing settings to ") + serverSelector.text
-                        serverSelector.menuVisible = false
+                        serverSelector.close()
                     }
 
                     Component.onCompleted: {
@@ -126,8 +127,6 @@ PageType {
                     shareConnectionDrawer.headerText = qsTr("Connection to ") + serverSelector.text
                     shareConnectionDrawer.configContentHeaderText = qsTr("File with connection settings to ") + serverSelector.text
 
-                    shareConnectionDrawer.needCloseButton = false
-
                     shareConnectionDrawer.open()
                     shareConnectionDrawer.contentVisible = false
                     PageController.showBusyIndicator(true)
@@ -140,16 +139,15 @@ PageType {
 
                     PageController.showBusyIndicator(false)
 
-                    shareConnectionDrawer.needCloseButton = true
-                    PageController.showTopCloseButton(true)
-
                     shareConnectionDrawer.contentVisible = true
                 }
             }
+        }
+    }
 
     ShareConnectionDrawer {
         id: shareConnectionDrawer
-            }
+
-        }
+        anchors.fill: parent
     }
 }

client/ui/qml/Pages2/PageStart.qml

@@ -20,22 +20,16 @@ PageType {
         function onGoToPageHome() {
             tabBar.setCurrentIndex(0)
             tabBarStackView.goToTabBarPage(PageEnum.PageHome)
-
-            PageController.updateDrawerRootPage(PageEnum.PageHome)
         }
 
         function onGoToPageSettings() {
             tabBar.setCurrentIndex(2)
             tabBarStackView.goToTabBarPage(PageEnum.PageSettings)
-
-            PageController.updateDrawerRootPage(PageEnum.PageSettings)
         }
 
         function onGoToPageViewConfig() {
             var pagePath = PageController.getPagePath(PageEnum.PageSetupWizardViewConfig)
             tabBarStackView.push(pagePath, { "objectName" : pagePath }, StackView.PushTransition)
-
-            PageController.updateDrawerRootPage(PageEnum.PageSetupWizardViewConfig)
         }
 
         function onShowBusyIndicator(visible) {
@@ -44,10 +38,6 @@ PageType {
             tabBar.enabled = !visible
         }
 
-//        function onShowTopCloseButton(visible) {
-//            topCloseButton.visible = visible
-//        }
-
         function onEnableTabBar(enabled) {
             tabBar.enabled = enabled
         }
@@ -66,8 +56,6 @@ PageType {
             } else {
                 tabBarStackView.push(pagePath, { "objectName" : pagePath }, StackView.Immediate)
             }
-
-            PageController.updateDrawerRootPage(page)
         }
 
         function onGoToStartPage() {
@@ -146,8 +134,6 @@ PageType {
             var pagePath = PageController.getPagePath(page)
             tabBarStackView.clear(StackView.Immediate)
             tabBarStackView.replace(pagePath, { "objectName" : pagePath }, StackView.Immediate)
-
-            PageController.updateDrawerRootPage(page)
         }
 
         Component.onCompleted: {
@@ -155,11 +141,6 @@ PageType {
             ServersModel.currentlyProcessedIndex = ServersModel.defaultIndex
             tabBarStackView.push(pagePath, { "objectName" : pagePath })
         }
-
-//        onWidthChanged: {
-//            topCloseButton.x = tabBarStackView.x + tabBarStackView.width -
-//                    topCloseButton.buttonWidth - topCloseButton.rightPadding
-//        }
     }
 
     TabBar {
@@ -253,13 +234,6 @@ PageType {
         z: 1
     }
 
-//    TopCloseButtonType {
-//        id: topCloseButton
-
-//        x: tabBarStackView.width - topCloseButton.buttonWidth - topCloseButton.rightPadding
-//        z: 1
-//    }
-
     ConnectionTypeSelectionDrawer {
         id: connectionTypeSelection
 

client/ui/qml/main2.qml

@@ -8,6 +8,7 @@ import PageEnum 1.0
 
 import "Config"
 import "Controls2"
+import "Components"
 
 Window  {
     id: root
@@ -130,32 +131,15 @@ Window  {
     }
 
     Item {
-        anchors.right: parent.right
+        anchors.fill: parent
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
 
-        implicitHeight: popupErrorMessage.height
+        DrawerType2 {
-
-        DrawerType {
             id: privateKeyPassphraseDrawer
 
-            width: root.width
+            anchors.fill: parent
-            height: root.height * 0.35
+            expandedHeight: root.height * 0.35
 
-            onVisibleChanged: {
+            expandedContent: ColumnLayout {
-                if (privateKeyPassphraseDrawer.visible) {
-                    passphrase.textFieldText = ""
-                    passphrase.textField.forceActiveFocus()
-                }
-            }
-            onAboutToHide: {
-                PageController.showBusyIndicator(true)
-            }
-            onAboutToShow: {
-                PageController.showBusyIndicator(false)
-            }
-
-            ColumnLayout {
                 anchors.top: parent.top
                 anchors.left: parent.left
                 anchors.right: parent.right
@@ -163,6 +147,24 @@ Window  {
                 anchors.leftMargin: 16
                 anchors.rightMargin: 16
 
+                Connections {
+                    target: privateKeyPassphraseDrawer
+                    function onOpened() {
+                        passphrase.textFieldText = ""
+                        passphrase.textField.forceActiveFocus()
+                    }
+
+                    function onAboutToHide() {
+                        if (passphrase.textFieldText !== "") {
+                            PageController.showBusyIndicator(true)
+                        }
+                    }
+
+                    function onAboutToShow() {
+                        PageController.showBusyIndicator(false)
+                    }
+                }
+
                 TextFieldWithHeaderType {
                     id: passphrase
 
@@ -199,6 +201,37 @@ Window  {
         }
     }
 
+    Item {
+        anchors.fill: parent
+
+        QuestionDrawer {
+            id: questionDrawer
+
+            anchors.fill: parent
+        }
+    }
+
+    function showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction) {
+        questionDrawer.headerText = headerText
+        questionDrawer.descriptionText = descriptionText
+        questionDrawer.yesButtonText = yesButtonText
+        questionDrawer.noButtonText = noButtonText
+
+        questionDrawer.yesButtonFunction = function() {
+            questionDrawer.close()
+            if (yesButtonFunction && typeof yesButtonFunction === "function") {
+                yesButtonFunction()
+            }
+        }
+        questionDrawer.noButtonFunction = function() {
+            questionDrawer.close()
+            if (noButtonFunction && typeof noButtonFunction === "function") {
+                noButtonFunction()
+            }
+        }
+        questionDrawer.open()
+    }
+
     FileDialog {
         id: mainFileDialog