adapted pagehome by new custom drawer type

client/resources.qrc

@@ -217,5 +217,6 @@
         <file>ui/qml/Controls2/TopCloseButtonType.qml</file>
         <file>images/controls/x-circle.svg</file>
         <file>ui/qml/Controls2/Drawer2Type.qml</file>
+        <file>ui/qml/Components/HomeRootMenuButton.qml</file>
     </qresource>
 </RCC>

client/ui/qml/Components/HomeContainersListView.qml

@@ -69,7 +69,7 @@ ListView {
                         isDefault = true
 
                         menuContent.currentIndex = index
-                        containersDropDown.menuVisible = false
+                        containersDropDown.menu.state = "closed"
 
 
                         if (needReconnected &&

client/ui/qml/Components/HomeRootMenuButton.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import "../Controls2/TextTypes"
+import "../Controls2"
+
+Item {
+    id: root
+
+    property string text
+    property int textMaximumLineCount: 2
+    property int textElide: Qt.ElideRight
+
+    property string descriptionText
+
+    property var clickedFunction
+
+    property string rightImageSource
+
+    property string textColor: "#d7d8db"
+    property string descriptionColor: "#878B91"
+    property real textOpacity: 1.0
+
+    property string rightImageColor: "#d7d8db"
+
+    property bool descriptionOnTop: false
+
+    property string defaultServerHostName
+    property string defaultContainerName
+
+    implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
+    implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
+
+    ColumnLayout {
+        id: content
+
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+
+        RowLayout {
+            Layout.topMargin: 24
+            Layout.leftMargin: 24
+            Layout.rightMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            Header1TextType {
+                Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
+
+                maximumLineCount: 2
+                elide: Qt.ElideRight
+
+                text: root.text
+                Layout.alignment: Qt.AlignLeft
+            }
+
+
+            ImageButtonType {
+                id: rightImage
+
+                hoverEnabled: false
+                image: rightImageSource
+                imageColor: rightImageColor
+                visible: rightImageSource ? true : false
+
+//                implicitSize: 18
+//                backGroudRadius: 5
+                horizontalPadding: 0
+                padding: 0
+                spacing: 0
+
+
+                Rectangle {
+                    id: rightImageBackground
+                    anchors.fill: parent
+                    radius: 16
+                    color: "transparent"
+
+                    Behavior on color {
+                        PropertyAnimation { duration: 200 }
+                    }
+                }
+            }
+        }
+
+        LabelTextType {
+            Layout.bottomMargin: 44
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            text: {
+                var description = ""
+                if (ServersModel.isDefaultServerHasWriteAccess()) {
+                    if (SettingsController.isAmneziaDnsEnabled()
+                            && ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) {
+                        description += "Amnezia DNS | "
+                    }
+                } else {
+                    if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) {
+                        description += "Amnezia DNS | "
+                    }
+                }
+
+                description += root.defaultContainerName + " | " + root.defaultServerHostName
+                return description
+            }
+        }
+    }
+
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+
+        onEntered: {
+            rightImageBackground.color = rightImage.hoveredColor
+
+            root.textOpacity = 0.8
+        }
+
+        onExited: {
+            rightImageBackground.color = rightImage.defaultColor
+
+            root.textOpacity = 1
+        }
+
+        onPressedChanged: {
+            rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
+
+            root.textOpacity = 0.7
+        }
+
+        onClicked: {
+            if (clickedFunction && typeof clickedFunction === "function") {
+                clickedFunction()
+            }
+        }
+    }
+}

client/ui/qml/Controls2/Drawer2Type.qml

@@ -22,10 +22,9 @@ Item {
 
     property string defaultColor: "#1C1D21"
     property string borderColor: "#2C2D30"
-    property int collapsedHeight: 0
 
     property bool needCollapsed: false
-    property double scaely
+
     property int contentHeight: 0
     property Item contentParent: contentArea
 
@@ -50,15 +49,10 @@ Item {
         MouseArea {
             id: fullArea
             anchors.fill: parent
-            enabled: (root.state === "expanded" || root.state === "opened")
+            enabled: (root.state === "opened")
             hoverEnabled: true
 
             onClicked: {
-                if (root.state === "expanded") {
-                    root.state = "collapsed"
-                    return
-                }
-
                 if (root.state === "opened") {
                     root.state = "closed"
                     return
@@ -101,7 +95,7 @@ Item {
 
                     anchors.fill: parent
 
-                    cursorShape: (root.state === "opened"  || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor
                     hoverEnabled: true
 
                     drag.target: root
@@ -113,35 +107,17 @@ Item {
                     onReleased: {
                         if (root.state === "closed" && root.y < dragArea.drag.maximumY) {
                             root.state = "opened"
-                            // PageController.drawerOpen()
                             return
                         }
 
                         if (root.state === "opened" && root.y > dragArea.drag.minimumY) {
                             root.state = "closed"
-                            // PageController.drawerClose()
-                            return
-                        }
-
-                        if (root.state === "collapsed" && root.y < dragArea.drag.maximumY) {
-                            root.state = "expanded"
-                            return
-                        }
-                        if (root.state === "expanded" && root.y > dragArea.drag.minimumY) {
-                            root.state = "collapsed"
                             return
                         }
                     }
 
                     onClicked: {
-                        if (root.state === "expanded") {
-                            // PageController.drawerOpen()
-                            root.state = "collapsed"
-                            return
-                        }
-
                         if (root.state === "opened") {
-                            // PageController.drawerClose()
                             root.state = "closed"
                             return
                         }
@@ -152,7 +128,7 @@ Item {
     }
 
     onStateChanged: {
-        if (root.state === "closed" || root.state === "collapsed") {
+        if (root.state === "closed") {
             var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
             if (initialPageNavigationBarColor !== 0xFF1C1D21) {
                 PageController.updateNavigationBarColor(initialPageNavigationBarColor)
@@ -166,7 +142,7 @@ Item {
 
             return
         }
-        if (root.state === "expanded" || root.state === "opened") {
+        if (root.state === "opened") {
             if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
                 PageController.updateNavigationBarColor(0xFF1C1D21)
             }
@@ -181,21 +157,6 @@ Item {
 
     /** Two states of buttonContent, great place to add any future animations for the drawer */
     states: [
-        State {
-            name: "collapsed"
-            PropertyChanges {
-                target: root
-                y: root.height - collapsedHeight
-            }
-        },
-        State {
-            name: "expanded"
-            PropertyChanges {
-                target: root
-                y: dragArea.drag.minimumY
-            }
-        },
-
         State {
             name: "closed"
             PropertyChanges {
@@ -214,25 +175,6 @@ Item {
     ]
 
     transitions: [
-        Transition {
-            from: "collapsed"
-            to: "expanded"
-            PropertyAnimation {
-                target: root
-                properties: "y"
-                duration: 200
-            }
-        },
-        Transition {
-            from: "expanded"
-            to: "collapsed"
-            PropertyAnimation {
-                target: root
-                properties: "y"
-                duration: 200
-            }
-        },
-
         Transition {
             from: "opened"
             to: "closed"

client/ui/qml/Controls2/DropDownType.qml

@@ -42,6 +42,8 @@ Item {
 
     property Item drawerParent: root
 
+    property Drawer2Type menu: menu
+
     implicitWidth: rootButtonContent.implicitWidth
     implicitHeight: rootButtonContent.implicitHeight
 
@@ -157,13 +159,12 @@ Item {
         onClicked: {
             if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
                 rootButtonClickedFunction()
-            } else {
+            }
+
             menu.open()
         }
     }
-    }
 
-    //DrawerType {
     Drawer2Type {
         id: menu
 
@@ -186,7 +187,7 @@ Item {
             BackButtonType {
                 backButtonImage: root.headerBackButtonImage
                 backButtonFunction: function() {
-                    root.menuVisible = false
+                    menu.state = "closed"
                 }
             }
         }

client/ui/qml/Pages2/PageHome.qml

@@ -30,13 +30,13 @@ PageType {
         target: PageController
 
         function onRestorePageHomeState(isContainerInstalled) {
-            buttonContent.state = "expanded"
+            menu.close()
             if (isContainerInstalled) {
                 containersDropDown.menuVisible = true
             }
         }
         function onForceCloseDrawer() {
-            buttonContent.state = "collapsed"
+            menu.close()
         }
     }
 
@@ -69,79 +69,27 @@ PageType {
             }
         }
 
-        collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
+        // collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
         expandedServersMenuDescription.text = description + root.defaultServerHostName
     }
 
-    Component.onCompleted: updateDescriptions()
+    Component.onCompleted: {
-
+        updateDescriptions()
-    MouseArea {
-        anchors.fill: parent
-        enabled: buttonContent.state === "expanded"
-        onClicked: {
-            buttonContent.state = "collapsed"
-        }
     }
 
     Item {
         anchors.fill: parent
-        anchors.bottomMargin: buttonContent.collapsedHeight
+        anchors.bottomMargin: defaultServerInfo.implicitHeight
 
         ConnectButton {
             anchors.centerIn: parent
         }
     }
 
-    MouseArea {
-        id: dragArea
-
-        anchors.fill: buttonBackground
-        cursorShape: buttonContent.state === "collapsed" ? Qt.PointingHandCursor : Qt.ArrowCursor
-        hoverEnabled: true
-
-        drag.target: buttonContent
-        drag.axis: Drag.YAxis
-        drag.maximumY: root.height - buttonContent.collapsedHeight
-        drag.minimumY: root.height - root.height * 0.9
-
-        /** If drag area is released at any point other than min or max y, transition to the other state */
-        onReleased: {
-            if (buttonContent.state === "collapsed" && buttonContent.y < dragArea.drag.maximumY) {
-                buttonContent.state = "expanded"
-                return
-            }
-            if (buttonContent.state === "expanded" && buttonContent.y > dragArea.drag.minimumY) {
-                buttonContent.state = "collapsed"
-                return
-            }
-        }
-
-        onEntered: {
-            collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
-            collapsedButtonHeader.opacity = 0.8
-        }
-        onExited: {
-            collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
-            collapsedButtonHeader.opacity = 1
-        }
-        onPressedChanged: {
-            collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
-            collapsedButtonHeader.opacity = 0.7
-        }
-
-
-        onClicked: {
-            if (buttonContent.state === "collapsed") {
-                buttonContent.state = "expanded"
-            }
-        }
-    }
-
     Rectangle {
         id: buttonBackground
+        anchors.fill: defaultServerInfo
 
-        anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
-        height: root.height
         radius: 16
         color: root.defaultColor
         border.color: root.borderColor
@@ -157,151 +105,40 @@ PageType {
         }
     }
 
-    ColumnLayout {
+    HomeRootMenuButton {
-        id: buttonContent
+        id: defaultServerInfo
-
+        anchors.right: parent.right
-        /** Initial height of button content */
+        anchors.left: parent.left
-        property int collapsedHeight: 0
+        anchors.bottom: parent.bottom
-        /** 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
-                }
-            }
-        ]
-
-        RowLayout {
-            Layout.topMargin: 24
-            Layout.leftMargin: 24
-            Layout.rightMargin: 24
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            visible: buttonContent.collapsedVisibility
-
-            spacing: 0
-
-            Header1TextType {
-                id: collapsedButtonHeader
-                Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo
-
-                maximumLineCount: 2
-                elide: Qt.ElideRight
 
         text: root.defaultServerName
-                horizontalAlignment: Qt.AlignHCenter
+        rightImageSource: "qrc:/images/controls/chevron-down.svg"
 
-                Behavior on opacity {
+        defaultContainerName: root.defaultContainerName
-                    PropertyAnimation { duration: 200 }
+        defaultServerHostName: root.defaultServerHostName
+
+        clickedFunction: function() {
+             menu.open()
         }
     }
 
-            ImageButtonType {
+    Drawer2Type {
-                id: collapsedButtonChevron
+        id: menu
+        parent: root
 
-                Layout.leftMargin: 8
+        width: parent.width
+        height: parent.height
+        contentHeight: parent.height * 0.9
 
-                hoverEnabled: false
-                image: "qrc:/images/controls/chevron-down.svg"
-                imageColor: "#d7d8db"
-
-                icon.width: 18
-                icon.height: 18
-                backgroundRadius: 16
-                horizontalPadding: 4
-                topPadding: 4
-                bottomPadding: 3
-
-                onClicked: {
-                    if (buttonContent.state === "collapsed") {
-                        buttonContent.state = "expanded"
-                    }
-                }
-            }
-        }
-
-        LabelTextType {
-            id: collapsedServerMenuDescription
-            Layout.bottomMargin: 44
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            visible: buttonContent.collapsedVisibility
-        }
 
         ColumnLayout {
             id: serversMenuHeader
 
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            parent: menu.contentParent
-            Layout.fillWidth: true
+
-            visible: buttonContent.expandedVisibility
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.left: parent.left
 
             Header1TextType {
                 Layout.fillWidth: true
@@ -330,6 +167,8 @@ PageType {
                 DropDownType {
                     id: containersDropDown
 
+                    drawerParent: root
+
                     rootButtonImageColor: "#0E0E11"
                     rootButtonBackgroundColor: "#D7D8DB"
                     rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
@@ -383,7 +222,6 @@ PageType {
                 Layout.topMargin: 48
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                visible: buttonContent.expandedVisibility
 
                 headerText: qsTr("Servers")
             }
@@ -391,12 +229,16 @@ PageType {
 
         Flickable {
             id: serversContainer
-            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+
-            Layout.fillWidth: true
+            parent: menu.contentParent
-            Layout.topMargin: 16
+
+            anchors.top: serversMenuHeader.bottom
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.topMargin: 16
             contentHeight: col.implicitHeight
-            implicitHeight: root.height - (root.height * 0.1) - serversMenuHeader.implicitHeight - 52 //todo 52 is tabbar height
+
-            visible: buttonContent.expandedVisibility
             clip: true
 
             ScrollBar.vertical: ScrollBar {
@@ -500,7 +342,7 @@ PageType {
                                     onClicked: function() {
                                         ServersModel.currentlyProcessedIndex = index
                                         PageController.goToPage(PageEnum.PageSettingsServerInfo)
-                                        buttonContent.state = "collapsed"
+                                        menu.close()
                                     }
                                 }
                             }