Merge pull request #717 from amnezia-vpn/feature/page-home-drawer

changed the way the drawer is displayed on the pageHome

client/ui/qml/Controls2/DrawerType2.qml

@@ -86,13 +86,6 @@ Item {
         }
     }
 
-    /** 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
 
@@ -186,7 +179,7 @@ Item {
         y: root.height - drawerContent.height
         state: root.drawerCollapsed
 
-        implicitHeight: root.isCollapsed ? collapsedLoader.implicitHeight : expandedLoader.implicitHeight
+        implicitHeight: root.isCollapsed ? collapsedHeight : expandedHeight
 
         onStateChanged: {
             if (root.isCollapsed) {
@@ -246,7 +239,6 @@ Item {
         Loader {
             id: collapsedLoader
 
-            visible: root.isCollapsed
             sourceComponent: root.collapsedContent
 
             anchors.right: parent.right

client/ui/qml/Pages2/PageHome.qml

@@ -107,131 +107,128 @@ PageType {
         id: drawer
         anchors.fill: parent
 
-        collapsedContent:  ColumnLayout {
+        collapsedContent:  Item {
-            DividerType {
+            implicitHeight: Qt.platform.os !== "ios" ? root.height * 0.9 : screen.height * 0.77
-                Layout.topMargin: 10
+            Component.onCompleted: {
-                Layout.fillWidth: false
+                drawer.expandedHeight = implicitHeight
-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 2
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             }
+            ColumnLayout {
+                id: collapsed
 
-            RowLayout {
+                anchors.left: parent.left
-                Layout.topMargin: 14
+                anchors.right: parent.right
-                Layout.leftMargin: 24
-                Layout.rightMargin: 24
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-                spacing: 0
+                Component.onCompleted: {
-
+                    drawer.collapsedHeight = collapsed.implicitHeight
-                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 {
+                DividerType {
-                    id: collapsedButtonHeader
+                    Layout.topMargin: 10
-                    Layout.maximumWidth: drawer.width - 48 - 18 - 12 // todo
+                    Layout.fillWidth: false
-
+                    Layout.preferredWidth: 20
-                    maximumLineCount: 2
+                    Layout.preferredHeight: 2
-                    elide: Qt.ElideRight
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                    text: ServersModel.defaultServerName
-                    horizontalAlignment: Qt.AlignHCenter
-
-                    Behavior on opacity {
-                        PropertyAnimation { duration: 200 }
-                    }
                 }
 
-                ImageButtonType {
+                RowLayout {
-                    id: collapsedButtonChevron
+                    Layout.topMargin: 14
+                    Layout.leftMargin: 24
+                    Layout.rightMargin: 24
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-                    Layout.leftMargin: 8
+                    spacing: 0
 
-                    hoverEnabled: false
+                    Connections {
-                    image: "qrc:/images/controls/chevron-down.svg"
+                        target: drawer
-                    imageColor: "#d7d8db"
+                        function onEntered() {
+                            if (drawer.isCollapsed) {
+                                collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
+                                collapsedButtonHeader.opacity = 0.8
+                            } else {
+                                collapsedButtonHeader.opacity = 1
+                            }
+                        }
 
-                    icon.width: 18
+                        function onExited() {
-                    icon.height: 18
+                            if (drawer.isCollapsed) {
-                    backgroundRadius: 16
+                                collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
-                    horizontalPadding: 4
+                                collapsedButtonHeader.opacity = 1
-                    topPadding: 4
+                            } else {
-                    bottomPadding: 3
+                                collapsedButtonHeader.opacity = 1
+                            }
+                        }
 
-                    onClicked: {
+                        function onPressed(pressed, entered) {
-                        if (drawer.isCollapsed) {
+                            if (drawer.isCollapsed) {
-                            drawer.open()
+                                collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
+                                collapsedButtonHeader.opacity = 0.7
+                            } else {
+                                collapsedButtonHeader.opacity = 1
+                            }
+                        }
+                    }
+
+                    Header1TextType {
+                        id: collapsedButtonHeader
+                        Layout.maximumWidth: drawer.isCollapsed ? drawer.width - 48 - 18 - 12 : drawer.width// todo
+
+                        maximumLineCount: 2
+                        elide: Qt.ElideRight
+
+                        text: ServersModel.defaultServerName
+                        horizontalAlignment: Qt.AlignHCenter
+
+                        Behavior on opacity {
+                            PropertyAnimation { duration: 200 }
+                        }
+                    }
+
+                    ImageButtonType {
+                        id: collapsedButtonChevron
+
+                        Layout.leftMargin: 8
+
+                        visible: drawer.isCollapsed
+
+                        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 (drawer.isCollapsed) {
+                                drawer.open()
+                            }
                         }
                     }
                 }
-            }
 
-            LabelTextType {
+                LabelTextType {
-                id: collapsedServerMenuDescription
+                    id: collapsedServerMenuDescription
-                Layout.bottomMargin: 44
+                    Layout.bottomMargin: drawer.isCollapsed ? 44 : ServersModel.isDefaultServerFromApi ? 89 : 44
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                text: ServersModel.defaultServerDescriptionCollapsed
+                    text: drawer.isCollapsed ? ServersModel.defaultServerDescriptionCollapsed : ServersModel.defaultServerDescriptionExpanded
-            }
+                }
-        }
-        expandedContent: Item {
-            id: serverMenuContainer
-
-            implicitHeight: Qt.platform.os !== "ios" ? root.height * 0.9 : screen.height * 0.77
-
-            Component.onCompleted: {
-                drawer.expandedHeight = serverMenuContainer.implicitHeight
             }
 
             ColumnLayout {
                 id: serversMenuHeader
 
-                anchors.top: parent.top
+                anchors.top: collapsed.bottom
                 anchors.right: parent.right
                 anchors.left: parent.left
 
-
-                Header1TextType {
-                    Layout.fillWidth: true
-                    Layout.topMargin: 14
-                    Layout.leftMargin: 16
-                    Layout.rightMargin: 16
-
-                    text: ServersModel.defaultServerName
-                    horizontalAlignment: Qt.AlignHCenter
-                    maximumLineCount: 2
-                    elide: Qt.ElideRight
-                }
-
-                LabelTextType {
-                    id: expandedServersMenuDescription
-                    Layout.bottomMargin: ServersModel.isDefaultServerFromApi ? 69 : 24
-                    Layout.fillWidth: true
-                    horizontalAlignment: Qt.AlignHCenter
-                    verticalAlignment: Qt.AlignVCenter
-                    text: ServersModel.defaultServerDescriptionExpanded
-                }
-
                 RowLayout {
                     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                     spacing: 8
 
                     visible: !ServersModel.isDefaultServerFromApi
-                    onVisibleChanged: expandedServersMenuDescription.Layout
 
                     DropDownType {
                         id: containersDropDown
@@ -299,7 +296,6 @@ PageType {
                 }
             }
 
-
             ButtonGroup {
                 id: serversRadioButtonGroup
             }