From 058f8b544e5c16dd6128bc54d3d9c57d645e4785 Mon Sep 17 00:00:00 2001 From: Matthew Schwiebert Date: Thu, 28 Sep 2023 10:14:01 -0400 Subject: [PATCH 1/5] Limit Drawer positioning by dragHeight and total page height --- client/ui/qml/Controls2/DrawerType.qml | 5 ++++- client/ui/qml/Pages2/PageHome.qml | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/client/ui/qml/Controls2/DrawerType.qml b/client/ui/qml/Controls2/DrawerType.qml index c22d00c2..bb2ee4aa 100644 --- a/client/ui/qml/Controls2/DrawerType.qml +++ b/client/ui/qml/Controls2/DrawerType.qml @@ -5,6 +5,7 @@ Drawer { id: drawer property bool needCloseButton: true property bool isOpened: false + property int pageHeight Connections { target: PageController @@ -54,6 +55,7 @@ Drawer { if (needCloseButton) { PageController.drawerOpen() } + position = (dragMargin / pageHeight) } onAboutToHide: { @@ -77,9 +79,10 @@ Drawer { onPositionChanged: { - if (isOpened && (position <= 0.99 && position >= 0.95)) { + if (position < (dragMargin / root.height)) { mouseArea.canceled() drawer.close() + position = 0 mouseArea.exited() dropArea.exited() } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index d8796524..bfebbb21 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -148,6 +148,7 @@ PageType { width: parent.width height: parent.height * 0.9 + pageHeight: root.height ColumnLayout { id: serversMenuHeader From 3d999a503c865402cd38c22713071e001cc4f614 Mon Sep 17 00:00:00 2001 From: Matthew Schwiebert Date: Sun, 1 Oct 2023 20:35:05 -0400 Subject: [PATCH 2/5] Add custom drawer behavior to pageHome, for mobile and desktop --- client/ui/qml/Controls2/DrawerType.qml | 23 ++-- client/ui/qml/Pages2/PageHome.qml | 156 ++++++++++++++++++------- 2 files changed, 121 insertions(+), 58 deletions(-) diff --git a/client/ui/qml/Controls2/DrawerType.qml b/client/ui/qml/Controls2/DrawerType.qml index bb2ee4aa..4ea24091 100644 --- a/client/ui/qml/Controls2/DrawerType.qml +++ b/client/ui/qml/Controls2/DrawerType.qml @@ -5,7 +5,6 @@ Drawer { id: drawer property bool needCloseButton: true property bool isOpened: false - property int pageHeight Connections { target: PageController @@ -51,26 +50,23 @@ Drawer { if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { PageController.updateNavigationBarColor(0xFF1C1D21) } - - if (needCloseButton) { - PageController.drawerOpen() - } - position = (dragMargin / pageHeight) - } - - onAboutToHide: { - if (needCloseButton) { - PageController.drawerClose() - } } onOpened: { isOpened = true + + if (needCloseButton) { + PageController.drawerOpen() + } } onClosed: { isOpened = false + if (needCloseButton) { + PageController.drawerClose() + } + var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() if (initialPageNavigationBarColor !== 0xFF1C1D21) { PageController.updateNavigationBarColor(initialPageNavigationBarColor) @@ -79,10 +75,9 @@ Drawer { onPositionChanged: { - if (position < (dragMargin / root.height)) { + if (isOpened && (position <= 0.99 && position >= 0.95)) { mouseArea.canceled() drawer.close() - position = 0 mouseArea.exited() dropArea.exited() } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index bfebbb21..d38cec15 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -27,10 +27,8 @@ PageType { property string defaultContainerName: ContainersModel.defaultContainerName Item { - anchors.top: parent.top - anchors.bottom: buttonBackground.top - anchors.right: parent.right - anchors.left: parent.left + anchors.fill: parent + anchors.bottomMargin: buttonContent.collapsedHeight ConnectButton { anchors.centerIn: parent @@ -41,17 +39,45 @@ PageType { target: PageController function onRestorePageHomeState(isContainerInstalled) { - menu.visible = true + buttonContent.state = "expanded" if (isContainerInstalled) { containersDropDown.menuVisible = true } } + function onForceCloseDrawer() { + buttonContent.state = "collapsed" + } + } + + MouseArea { + id: dragArea + + anchors.fill: buttonBackground + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + + drag.target: buttonContent + drag.axis: Drag.YAxis + drag.maximumY: root.height - buttonContent.collapsedHeight + drag.minimumY: 100 + + 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 + } + } } Rectangle { id: buttonBackground - anchors.fill: buttonContent + anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top } + height: root.height radius: 16 color: root.defaultColor border.color: root.borderColor @@ -69,15 +95,67 @@ PageType { ColumnLayout { id: buttonContent - anchors.right: parent.right - anchors.left: parent.left - anchors.bottom: parent.bottom + + property int collapsedHeight: 0 + property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active == true) + property bool collapsedVisibility: (buttonContent.state === "collapsed" && dragArea.drag.active == false) || buttonContent.state === "collapsed" + + Drag.active: dragArea.drag.active + anchors.right: root.right + anchors.left: root.left + y: root.height - buttonContent.height + + Component.onCompleted: { + buttonContent.state = "collapsed" + } + + 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 + } + } + + states: [ + State { + name: "collapsed" + PropertyChanges { + target: buttonContent + y: root.height - collapsedHeight + } + }, + State { + name: "expanded" + PropertyChanges { + target: buttonContent + y: dragArea.drag.minimumY + + } + }] RowLayout { Layout.topMargin: 24 Layout.leftMargin: 24 Layout.rightMargin: 24 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + visible: buttonContent.collapsedVisibility spacing: 0 @@ -104,6 +182,7 @@ PageType { LabelTextType { Layout.bottomMargin: 44 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + visible: buttonContent.collapsedVisibility text: { var description = "" @@ -122,39 +201,13 @@ PageType { return description } } - } - - MouseArea { - anchors.fill: buttonBackground - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - - onClicked: { - menu.visible = true - } - } - - DrawerType { - id: menu - - interactive: { - if (stackView && stackView.currentItem) { - return (stackView.currentItem.objectName === PageController.getPagePath(PageEnum.PageHome)) ? true : false - } else { - return false - } - } - dragMargin: buttonBackground.height + 56 // page start tabBar height - - width: parent.width - height: parent.height * 0.9 - pageHeight: root.height ColumnLayout { id: serversMenuHeader - anchors.top: parent.top - anchors.right: parent.right - anchors.left: parent.left + + Layout.alignment: Qt.AlignTop | Qt.AlignHCenter + Layout.fillWidth: true + visible: buttonContent.expandedVisibility Header1TextType { Layout.fillWidth: true @@ -233,13 +286,14 @@ PageType { Layout.topMargin: 48 Layout.leftMargin: 16 Layout.rightMargin: 16 + visible: buttonContent.expandedVisibility actionButtonImage: "qrc:/images/controls/plus.svg" headerText: qsTr("Servers") actionButtonFunction: function() { - menu.visible = false + buttonContent.state = "collapsed" connectionTypeSelection.visible = true } } @@ -249,10 +303,23 @@ PageType { } } - FlickableType { - anchors.top: serversMenuHeader.bottom - anchors.topMargin: 16 + Flickable { + id: serversContainer + Layout.alignment: Qt.AlignTop | Qt.AlignHCenter + Layout.fillWidth: true + Layout.topMargin: 16 contentHeight: col.implicitHeight + height: 500 + visible: buttonContent.expandedVisibility + clip: true + + ScrollBar.vertical: ScrollBar { + id: scrollBar + policy: serversContainer.height >= serversContainer.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn + } + + Keys.onUpPressed: scrollBar.decrease() + Keys.onDownPressed: scrollBar.increase() Column { id: col @@ -266,6 +333,7 @@ PageType { id: serversRadioButtonGroup } + ListView { id: serversMenuContent width: parent.width @@ -347,7 +415,7 @@ PageType { onClicked: function() { ServersModel.currentlyProcessedIndex = index PageController.goToPage(PageEnum.PageSettingsServerInfo) - menu.visible = false + buttonContent.state = "collapsed" } } } From a6134ca10f0611fdb7c2522b24c589231cf79931 Mon Sep 17 00:00:00 2001 From: Matthew Schwiebert Date: Sun, 1 Oct 2023 20:43:39 -0400 Subject: [PATCH 3/5] fix visibility bug of collapsed state --- client/ui/qml/Pages2/PageHome.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index d38cec15..61fff248 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -97,8 +97,8 @@ PageType { id: buttonContent property int collapsedHeight: 0 - property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active == true) - property bool collapsedVisibility: (buttonContent.state === "collapsed" && dragArea.drag.active == false) || buttonContent.state === "collapsed" + property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active === true) + property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false Drag.active: dragArea.drag.active anchors.right: root.right From 5bfc581ad2ba8bb10070ae769c33e6df0dd2b3fd Mon Sep 17 00:00:00 2001 From: Matthew Schwiebert Date: Mon, 2 Oct 2023 15:40:25 -0400 Subject: [PATCH 4/5] add documentation, remove uneeded changes of drawertype --- client/ui/qml/Controls2/DrawerType.qml | 16 +++++++++------- client/ui/qml/Pages2/PageHome.qml | 6 ++++++ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/client/ui/qml/Controls2/DrawerType.qml b/client/ui/qml/Controls2/DrawerType.qml index 4ea24091..c22d00c2 100644 --- a/client/ui/qml/Controls2/DrawerType.qml +++ b/client/ui/qml/Controls2/DrawerType.qml @@ -50,22 +50,24 @@ Drawer { if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { PageController.updateNavigationBarColor(0xFF1C1D21) } - } - - onOpened: { - isOpened = true if (needCloseButton) { PageController.drawerOpen() } } - onClosed: { - isOpened = false - + onAboutToHide: { if (needCloseButton) { PageController.drawerClose() } + } + + onOpened: { + isOpened = true + } + + onClosed: { + isOpened = false var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() if (initialPageNavigationBarColor !== 0xFF1C1D21) { diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index 61fff248..0d39a51e 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -61,6 +61,7 @@ PageType { drag.maximumY: root.height - buttonContent.collapsedHeight drag.minimumY: 100 + /** 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" @@ -96,8 +97,11 @@ PageType { 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 @@ -109,6 +113,7 @@ PageType { 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 @@ -133,6 +138,7 @@ PageType { } } + /** Two states of buttonContent, great place to add any future animations for the drawer */ states: [ State { name: "collapsed" From 617e772cc16ce843fec947b27c5479a717ed8f45 Mon Sep 17 00:00:00 2001 From: "vladimir.kuznetsov" Date: Tue, 3 Oct 2023 18:49:54 +0500 Subject: [PATCH 5/5] added transitions and open/close by clicking on an item for the center menu button --- client/ui/qml/Controls2/DrawerType.qml | 28 ------------- client/ui/qml/Pages2/PageHome.qml | 55 +++++++++++++++++++++----- 2 files changed, 45 insertions(+), 38 deletions(-) diff --git a/client/ui/qml/Controls2/DrawerType.qml b/client/ui/qml/Controls2/DrawerType.qml index 4ea24091..72765d78 100644 --- a/client/ui/qml/Controls2/DrawerType.qml +++ b/client/ui/qml/Controls2/DrawerType.qml @@ -4,7 +4,6 @@ import QtQuick.Controls Drawer { id: drawer property bool needCloseButton: true - property bool isOpened: false Connections { target: PageController @@ -53,16 +52,12 @@ Drawer { } onOpened: { - isOpened = true - if (needCloseButton) { PageController.drawerOpen() } } onClosed: { - isOpened = false - if (needCloseButton) { PageController.drawerClose() } @@ -72,27 +67,4 @@ Drawer { PageController.updateNavigationBarColor(initialPageNavigationBarColor) } } - - - onPositionChanged: { - if (isOpened && (position <= 0.99 && position >= 0.95)) { - mouseArea.canceled() - drawer.close() - mouseArea.exited() - dropArea.exited() - } - } - - DropArea { - id: dropArea - } - - MouseArea { - id: mouseArea - anchors.fill: parent - - onPressed: { - isOpened = true - } - } } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index 61fff248..8a015e4c 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -26,6 +26,14 @@ PageType { property string defaultServerHostName: ServersModel.defaultServerHostName property string defaultContainerName: ContainersModel.defaultContainerName + MouseArea { + anchors.fill: parent + enabled: buttonContent.state === "expanded" + onClicked: { + buttonContent.state = "collapsed" + } + } + Item { anchors.fill: parent anchors.bottomMargin: buttonContent.collapsedHeight @@ -59,7 +67,7 @@ PageType { drag.target: buttonContent drag.axis: Drag.YAxis drag.maximumY: root.height - buttonContent.collapsedHeight - drag.minimumY: 100 + drag.minimumY: root.height - root.height * 0.9 onReleased: { if (buttonContent.state === "collapsed" && buttonContent.y < dragArea.drag.maximumY) { @@ -71,6 +79,12 @@ PageType { return } } + + onClicked: { + if (buttonContent.state === "collapsed") { + buttonContent.state = "expanded" + } + } } Rectangle { @@ -135,12 +149,12 @@ PageType { states: [ State { - name: "collapsed" - PropertyChanges { - target: buttonContent - y: root.height - collapsedHeight - } - }, + name: "collapsed" + PropertyChanges { + target: buttonContent + y: root.height - collapsedHeight + } + }, State { name: "expanded" PropertyChanges { @@ -148,7 +162,29 @@ PageType { 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 @@ -309,7 +345,7 @@ PageType { Layout.fillWidth: true Layout.topMargin: 16 contentHeight: col.implicitHeight - height: 500 + implicitHeight: root.height - (root.height * 0.1) - serversMenuHeader.implicitHeight - 52 //todo 52 is tabbar height visible: buttonContent.expandedVisibility clip: true @@ -333,7 +369,6 @@ PageType { id: serversRadioButtonGroup } - ListView { id: serversMenuContent width: parent.width