re-adatped pagehome

client/resources.qrc

@@ -217,6 +217,5 @@
         <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/HomeRootMenuButton.qml

@@ -1,140 +0,0 @@
-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

@@ -10,11 +10,18 @@ Item {
         target: PageController
 
         function onForceCloseDrawer() {
-            close()
+            if (root.opened()) {
+                close()
+                return
+            }
+
+            if (root.expanded()) {
+                collapse()
+            }
         }
     }
 
-    signal closed
+    signal drawerClosed
 
     visible: false
 
@@ -28,6 +35,13 @@ Item {
     property int contentHeight: 0
     property Item contentParent: contentArea
 
+    property bool dragActive: dragArea.drag.active
+
+    /** Initial height of button content */
+    property int collapsedHeight: 0
+
+    property bool fullMouseAreaVisible: true
+
     state: "closed"
 
     Rectangle {
@@ -37,7 +51,7 @@ Item {
         height: parent.height
         width: parent.width
         radius: 16
-        color:  "#90000000"
+        color: "transparent" //"#90000000"
         border.color: "transparent"
         border.width: 1
         visible: true
@@ -45,90 +59,119 @@ Item {
         MouseArea {
             id: fullMouseArea
             anchors.fill: parent
-            enabled: (root.state === "opened")
+            enabled: (root.opened() || root.expanded())
             hoverEnabled: true
+            visible: fullMouseAreaVisible
 
             onClicked: {
-                if (root.state === "opened") {
+                if (root.opened()) {
                     close()
                     return
                 }
+
+                if (root.expanded()) {
+                    collapse()
+                }
             }
+        }
+
+        Rectangle {
+            id: placeAreaHolder
+            height: (!root.opened())  ? 0 :  parent.height - contentHeight
+            anchors.right: parent.right
+            anchors.left: parent.left
+            visible: true
+            color: "transparent"
+
+            Drag.active: dragArea.drag.active
+        }
+
+
+        Rectangle {
+            id: contentArea
+
+            anchors.top: placeAreaHolder.bottom
+            height: contentHeight
+            radius: 16
+            color: root.defaultColor
+            border.width: 1
+            border.color: root.borderColor
+            width: parent.width
+            visible: true
 
             Rectangle {
-                id: placeAreaHolder
+                width: parent.radius
-                height: parent.height - contentHeight
+                height: parent.radius
+                anchors.bottom: parent.bottom
                 anchors.right: parent.right
                 anchors.left: parent.left
-                visible: true
+                color: parent.color
-                color: "transparent"
-
-                Drag.active: dragArea.drag.active
             }
 
+            MouseArea {
+                id: dragArea
 
-            Rectangle {
+                anchors.fill: parent
-                id: contentArea
 
-                anchors.top: placeAreaHolder.bottom
+                cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor // ?
-                height: contentHeight
+                hoverEnabled: true
-                radius: 16
-                color: root.defaultColor
-                border.width: 1
-                border.color: root.borderColor
-                width: parent.width
-                visible: true
 
-                Rectangle {
+                drag.target: placeAreaHolder
-                    width: parent.radius
+                drag.axis: Drag.YAxis
-                    height: parent.radius
+                drag.maximumY: (root.collapsed() || root.expanded()) ? (root.height - collapsedHeight) : root.height
-                    anchors.bottom: parent.bottom
+                drag.minimumY: (root.collapsed() || root.expanded()) ? (root.height - root.height * 0.9) : (root.height - root.height)
-                    anchors.right: parent.right
-                    anchors.left: parent.left
-                    color: parent.color
-                }
 
-                MouseArea {
+                /** If drag area is released at any point other than min or max y, transition to the other state */
-                    id: dragArea
+                onReleased: {
-
+                    if (root.closed() && placeAreaHolder.y < root.height * 0.9) {
-                    anchors.fill: parent
+                        root.state = "opened"
-
+                        return
-                    cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor
-                    hoverEnabled: true
-
-                    drag.target: placeAreaHolder
-                    drag.axis: Drag.YAxis
-                    drag.maximumY: root.height
-                    drag.minimumY: root.height - root.height
-
-                    /** If drag area is released at any point other than min or max y, transition to the other state */
-                    onReleased: {
-                        if (root.state === "closed" && placeAreaHolder.y < root.height * 0.9) {
-                            root.state = "opened"
-                            return
-                        }
-
-                        if (root.state === "opened" && placeAreaHolder.y > (root.height - root.height * 0.9)) {
-                            close()
-                            return
-                        }
-
-                        placeAreaHolder.y = 0
                     }
 
-                    onClicked: {
+                    if (root.opened() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
-                        if (root.state === "opened") {
+                        close()
-                            close()
+                        return
-                            return
+                    }
-                        }
+
+
+                    if (root.collapsed() && placeAreaHolder.y < (root.height - collapsedHeight)) {
+                        root.state = "expanded"
+                        return
+                    }
+
+                    if (root.expanded() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
+                        root.state = "collapsed"
+                        return
+                    }
+
+
+                    if (root.opened()) {
+                        placeAreaHolder.y = 0
+                    }
+                }
+
+                onClicked: {
+                    if (root.opened()) {
+                        close()
+                        return
+                    }
+
+                    if (root.expanded()) {
+                        collapse()
+                        return
+                    }
+
+                    if (root.collapsed()) {
+                        root.state = "expanded"
                     }
                 }
             }
         }
+
     }
 
     onStateChanged: {
-        if (root.state === "closed") {
+        if (root.closed() || root.collapsed()) {
             var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
             if (initialPageNavigationBarColor !== 0xFF1C1D21) {
                 PageController.updateNavigationBarColor(initialPageNavigationBarColor)
@@ -138,11 +181,12 @@ Item {
                 PageController.drawerClose()
             }
 
-            closed()
+            drawerClosed()
 
             return
         }
-        if (root.state === "opened") {
+
+        if (root.opened() || root.expanded()) {
             if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
                 PageController.updateNavigationBarColor(0xFF1C1D21)
             }
@@ -161,7 +205,7 @@ Item {
             name: "closed"
             PropertyChanges {
                 target: placeAreaHolder
-                y: parent.height
+                y: root.height
             }
         },
 
@@ -171,6 +215,22 @@ Item {
                 target: placeAreaHolder
                 y: dragArea.drag.minimumY
             }
+        },
+
+        State {
+            name: "collapsed"
+            PropertyChanges {
+                target: placeAreaHolder
+                y: root.height - collapsedHeight
+            }
+        },
+
+        State {
+            name: "expanded"
+            PropertyChanges {
+                target: placeAreaHolder
+                y: root.height - root.height * 0.9
+            }
         }
     ]
 
@@ -199,6 +259,40 @@ Item {
                 properties: "y"
                 duration: 200
             }
+        },
+
+        Transition {
+            from: "expanded"
+            to: "collapsed"
+            PropertyAnimation {
+                target: placeAreaHolder
+                properties: "y"
+                duration: 200
+            }
+
+            onRunningChanged: {
+                if (!running) {
+                    draw2Background.color = "transparent"
+                    fullMouseArea.visible = false
+                }
+            }
+        },
+
+        Transition {
+            from: "collapsed"
+            to: "expanded"
+            PropertyAnimation {
+                target: placeAreaHolder
+                properties: "y"
+                duration: 200
+            }
+
+            onRunningChanged: {
+                if (!running) {
+                    draw2Background.color = "#90000000"
+                    visibledMouseArea(true)
+                }
+            }
         }
     ]
 
@@ -212,9 +306,11 @@ Item {
     }
 
     function open() {
-        if (root.visible && root.state !== "closed") {
+        //if (root.visible && !root.closed()) {
+        if (root.opened()) {
             return
         }
+
         draw2Background.color = "#90000000"
 
         visibledMouseArea(true)
@@ -240,21 +336,52 @@ Item {
         root.state = "closed"
     }
 
-    onVisibleChanged: {
+    function collapse() {
-        // e.g cancel, ......
+        draw2Background.color = "transparent"
-        if (!visible) {
+        root.state = "collapsed"
-            if (root.state === "opened") {
-                if (needCloseButton) {
-                    PageController.drawerClose()
-                }
-            }
-
-            close()
-        }
     }
 
+
     function visibledMouseArea(visbile) {
         fullMouseArea.visible = visbile
         dragArea.visible = visbile
     }
+
+    function opened() {
+        return root.state === "opened" ? true : false
+    }
+
+    function expanded() {
+        return root.state === "expanded" ? true : false
+    }
+
+    function closed() {
+        return root.state === "closed" ? true : false
+    }
+
+    function collapsed() {
+        return root.state === "collapsed" ? true : false
+    }
+
+
+    onVisibleChanged: {
+        // e.g cancel, ......
+        if (!visible) {
+            if (root.opened()) {
+                if (needCloseButton) {
+                    PageController.drawerClose()
+                }
+
+                close()
+            }
+
+            if (root.expanded()) {
+                if (needCloseButton) {
+                    PageController.drawerClose()
+                }
+
+                collapse()
+            }
+        }
+    }
 }

client/ui/qml/Pages2/PageHome.qml

@@ -30,13 +30,13 @@ PageType {
         target: PageController
 
         function onRestorePageHomeState(isContainerInstalled) {
-            menu.close()
+            buttonContent.collapse()
             if (isContainerInstalled) {
                 containersDropDown.menuVisible = true
             }
         }
         function onForceCloseDrawer() {
-            menu.close()
+            buttonContent.collapse()
         }
     }
 
@@ -69,7 +69,7 @@ PageType {
             }
         }
 
-        // collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
+        collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
         expandedServersMenuDescription.text = description + root.defaultServerHostName
     }
 
@@ -79,7 +79,7 @@ PageType {
 
     Item {
         anchors.fill: parent
-        anchors.bottomMargin: defaultServerInfo.implicitHeight
+        anchors.bottomMargin: buttonContent.collapsedHeight
 
         ConnectButton {
             anchors.centerIn: parent
@@ -88,7 +88,7 @@ PageType {
 
     Rectangle {
         id: buttonBackground
-        anchors.fill: defaultServerInfo
+        anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
 
         radius: 16
         color: root.defaultColor
@@ -105,41 +105,105 @@ PageType {
         }
     }
 
-    HomeRootMenuButton {
-        id: defaultServerInfo
-        anchors.right: parent.right
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-
-        text: root.defaultServerName
-        rightImageSource: "qrc:/images/controls/chevron-down.svg"
-
-        defaultContainerName: root.defaultContainerName
-        defaultServerHostName: root.defaultServerHostName
-
-        clickedFunction: function() {
-             menu.open()
-        }
-    }
-
     Drawer2Type {
-        id: menu
+        id: buttonContent
-        parent: root
+        visible: true
+
+        fullMouseAreaVisible: false
+
+        /** True when expanded objects should be visible */
+        property bool expandedVisibility: buttonContent.expanded() || (buttonContent.collapsed() && buttonContent.dragActive)
+        /** True when collapsed objects should be visible */
+        property bool collapsedVisibility: buttonContent.collapsed() && !buttonContent.dragActive
 
         width: parent.width
         height: parent.height
         contentHeight: parent.height * 0.9
 
 
+        ColumnLayout {
+            id: content
+
+            parent: buttonContent.contentParent
+
+            visible: buttonContent.collapsedVisibility
+
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.top: parent.top
+
+            onImplicitHeightChanged: {
+                if (buttonContent.collapsed() && buttonContent.collapsedHeight === 0) {
+                    buttonContent.collapsedHeight = implicitHeight
+                }
+            }
+
+            RowLayout {
+                Layout.topMargin: 24
+                Layout.leftMargin: 24
+                Layout.rightMargin: 24
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+                Header1TextType {
+                    id: collapsedButtonHeader
+                    Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
+
+                    maximumLineCount: 2
+                    elide: Qt.ElideRight
+
+                    text: root.defaultServerName
+
+                    Layout.alignment: Qt.AlignLeft
+                }
+
+
+                ImageButtonType {
+                    id: collapsedButtonChevron
+
+                    hoverEnabled: false
+                    image: "qrc:/images/controls/chevron-down.svg"
+                    imageColor: "#d7d8db"
+
+                    horizontalPadding: 0
+                    padding: 0
+                    spacing: 0
+
+                    Rectangle {
+                        id: rightImageBackground
+                        anchors.fill: parent
+                        radius: 16
+                        color: "transparent"
+
+                        Behavior on color {
+                            PropertyAnimation { duration: 200 }
+                        }
+                    }
+                }
+            }
+
+            LabelTextType {
+                id: collapsedServerMenuDescription
+                Layout.bottomMargin: 44
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                visible: buttonContent.collapsedVisibility
+            }
+        }
+
+        Component.onCompleted: {
+            buttonContent.collapse()
+        }
+
         ColumnLayout {
             id: serversMenuHeader
 
-            parent: menu.contentParent
+            parent: buttonContent.contentParent
 
             anchors.top: parent.top
             anchors.right: parent.right
             anchors.left: parent.left
 
+            visible: buttonContent.expandedVisibility
+
             Header1TextType {
                 Layout.fillWidth: true
                 Layout.topMargin: 24
@@ -222,6 +286,7 @@ PageType {
                 Layout.topMargin: 48
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
+                visible: buttonContent.expandedVisibility
 
                 headerText: qsTr("Servers")
             }
@@ -230,7 +295,7 @@ PageType {
         Flickable {
             id: serversContainer
 
-            parent: menu.contentParent
+            parent: buttonContent.contentParent
 
             anchors.top: serversMenuHeader.bottom
             anchors.right: parent.right
@@ -239,6 +304,8 @@ PageType {
             anchors.topMargin: 16
             contentHeight: col.implicitHeight
 
+            visible: buttonContent.expandedVisibility
+
             clip: true
 
             ScrollBar.vertical: ScrollBar {
@@ -342,7 +409,7 @@ PageType {
                                     onClicked: function() {
                                         ServersModel.currentlyProcessedIndex = index
                                         PageController.goToPage(PageEnum.PageSettingsServerInfo)
-                                        menu.close()
+                                        buttonContent.collapse()
                                     }
                                 }
                             }

client/ui/qml/Pages2/PageStart.qml

@@ -247,7 +247,7 @@ PageType {
 
         z: 1
 
-        onClosed: {
+        onDrawerClosed: {
             tabBar.setCurrentIndex(tabBar.previousIndex)
         }
     }