Merge pull request #328 from amnezia-vpn/bugfix/add_top_close_button

added close button when drawer shown in the topright corner

client/resources.qrc

@@ -213,5 +213,6 @@
         <file>images/controls/trash.svg</file>
         <file>images/controls/more-vertical.svg</file>
         <file>ui/qml/Controls2/ListViewWithLabelsType.qml</file>
+        <file>ui/qml/Controls2/TopCloseButtonType.qml</file>
     </qresource>
 </RCC>

client/ui/controllers/pageController.cpp

@@ -115,3 +115,33 @@ void PageController::showOnStartup()
 #endif
     }
 }
+
+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;
+    }
+}

client/ui/controllers/pageController.h

@@ -78,6 +78,11 @@ public slots:
 
     void showOnStartup();
 
+    void updateDrawerRootPage(PageLoader::PageEnum page);
+    void goToDrawerRootPage();
+    void drawerOpen();
+    void drawerClose();
+
 signals:
     void goToPage(PageLoader::PageEnum page, bool slide = true);
     void goToStartPage();
@@ -104,10 +109,16 @@ 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;
 };
 
 #endif // PAGECONTROLLER_H

client/ui/qml/Controls2/DrawerType.qml

@@ -2,6 +2,16 @@ import QtQuick
 import QtQuick.Controls
 
 Drawer {
+    property bool needCloseButton: true
+
+    Connections {
+        target: PageController
+
+        function onForceCloseDrawer() {
+            visible = false
+        }
+    }
+
     edge: Qt.BottomEdge
 
     clip: true
@@ -38,6 +48,16 @@ Drawer {
         if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
             PageController.updateNavigationBarColor(0xFF1C1D21)
         }
+
+        if (needCloseButton) {
+            PageController.drawerOpen()
+        }
+    }
+
+    onAboutToHide: {
+        if (needCloseButton) {
+            PageController.drawerClose()
+        }
     }
 
     onClosed: {

client/ui/qml/Controls2/TopCloseButtonType.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Shapes
+
+Popup {
+    id: root
+
+    modal: false
+    closePolicy: Popup.NoAutoClose
+    padding: 4
+
+    visible: false
+
+    Overlay.modal: Rectangle {
+        color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
+    }
+
+    background: Rectangle {
+        color: "transparent"
+    }
+
+    ImageButtonType {
+        image: "qrc:/images/svg/close_black_24dp.svg"
+        imageColor: "#D7D8DB"
+
+        onClicked: {
+            PageController.goToDrawerRootPage()
+        }
+    }
+}

client/ui/qml/Pages2/PageShare.qml

@@ -27,6 +27,8 @@ PageType {
         target: ExportController
 
         function onGenerateConfig(type) {
+            shareConnectionDrawer.needCloseButton = false
+
             shareConnectionDrawer.open()
             shareConnectionDrawer.contentVisible = false
             PageController.showBusyIndicator(true)
@@ -58,6 +60,10 @@ PageType {
             }
 
             PageController.showBusyIndicator(false)
+
+            shareConnectionDrawer.needCloseButton = true
+            PageController.showTopCloseButton(true)
+
             shareConnectionDrawer.contentVisible = true
         }
 

client/ui/qml/Pages2/PageStart.qml

@@ -19,16 +19,22 @@ PageType {
         function onGoToPageHome() {
             tabBar.currentIndex = 0
             tabBarStackView.goToTabBarPage(PageEnum.PageHome)
+
+            PageController.updateDrawerRootPage(PageEnum.PageHome)
         }
 
         function onGoToPageSettings() {
             tabBar.currentIndex = 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) {
@@ -37,6 +43,10 @@ PageType {
             tabBar.enabled = !visible
         }
 
+        function onShowTopCloseButton(visible) {
+            topCloseButton.visible = visible
+        }
+
         function onEnableTabBar(enabled) {
             tabBar.enabled = enabled
         }
@@ -55,6 +65,8 @@ PageType {
             } else {
                 tabBarStackView.push(pagePath, { "objectName" : pagePath }, StackView.Immediate)
             }
+
+            PageController.updateDrawerRootPage(page)
         }
 
         function onGoToStartPage() {
@@ -111,6 +123,8 @@ PageType {
             var pagePath = PageController.getPagePath(page)
             tabBarStackView.clear(StackView.Immediate)
             tabBarStackView.replace(pagePath, { "objectName" : pagePath }, StackView.Immediate)
+
+            PageController.updateDrawerRootPage(page)
         }
 
         Component.onCompleted: {
@@ -195,4 +209,10 @@ PageType {
         anchors.centerIn: parent
         z: 1
     }
+
+    TopCloseButtonType {
+        id: topCloseButton
+        x: tabBarStackView.width - topCloseButton.width
+        z: 1
+    }
 }