From 384ce9853b92b99f060a566257f1e0b701f9272d Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sat, 14 Oct 2023 23:00:31 +0800 Subject: [PATCH 01/16] added new drawer2type for replacing drawertype --- client/resources.qrc | 1 + .../ConnectionTypeSelectionDrawer.qml | 2 +- client/ui/qml/Components/QuestionDrawer.qml | 2 +- .../qml/Components/SelectLanguageDrawer.qml | 2 +- .../qml/Components/ShareConnectionDrawer.qml | 11 +- client/ui/qml/Controls2/Drawer2Type.qml | 266 ++++++++++++++++++ client/ui/qml/Controls2/DropDownType.qml | 5 +- .../Pages2/PageProtocolOpenVpnSettings.qml | 7 +- client/ui/qml/Pages2/PageProtocolRaw.qml | 10 +- .../ui/qml/Pages2/PageServiceDnsSettings.qml | 7 +- .../ui/qml/Pages2/PageServiceSftpSettings.qml | 7 +- .../Pages2/PageServiceTorWebsiteSettings.qml | 7 +- .../ui/qml/Pages2/PageSettingsApplication.qml | 8 +- client/ui/qml/Pages2/PageSettingsBackup.qml | 6 +- client/ui/qml/Pages2/PageSettingsDns.qml | 7 +- client/ui/qml/Pages2/PageSettingsLogging.qml | 7 +- .../ui/qml/Pages2/PageSettingsServerData.qml | 12 +- .../ui/qml/Pages2/PageSettingsServerInfo.qml | 6 +- .../qml/Pages2/PageSettingsServerProtocol.qml | 6 +- .../qml/Pages2/PageSettingsSplitTunneling.qml | 15 +- .../PageSetupWizardProtocolSettings.qml | 4 +- client/ui/qml/Pages2/PageSetupWizardStart.qml | 3 +- client/ui/qml/Pages2/PageShare.qml | 1 + client/ui/qml/Pages2/PageStart.qml | 4 +- 24 files changed, 350 insertions(+), 56 deletions(-) create mode 100644 client/ui/qml/Controls2/Drawer2Type.qml diff --git a/client/resources.qrc b/client/resources.qrc index f04948524..d7f8ff7ad 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -216,5 +216,6 @@ ui/qml/Pages2/PageServiceDnsSettings.qml ui/qml/Controls2/TopCloseButtonType.qml images/controls/x-circle.svg + ui/qml/Controls2/Drawer2Type.qml diff --git a/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml b/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml index ecde15540..a368d45c9 100644 --- a/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml +++ b/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml @@ -8,7 +8,7 @@ import "../Controls2" import "../Controls2/TextTypes" import "../Config" -DrawerType { +Drawer2Type { id: root width: parent.width diff --git a/client/ui/qml/Components/QuestionDrawer.qml b/client/ui/qml/Components/QuestionDrawer.qml index a79f91403..06f4ae248 100644 --- a/client/ui/qml/Components/QuestionDrawer.qml +++ b/client/ui/qml/Components/QuestionDrawer.qml @@ -5,7 +5,7 @@ import QtQuick.Layouts import "../Controls2" import "../Controls2/TextTypes" -DrawerType { +Drawer2Type { id: root property string headerText diff --git a/client/ui/qml/Components/SelectLanguageDrawer.qml b/client/ui/qml/Components/SelectLanguageDrawer.qml index d318aab89..f27fce6c7 100644 --- a/client/ui/qml/Components/SelectLanguageDrawer.qml +++ b/client/ui/qml/Components/SelectLanguageDrawer.qml @@ -5,7 +5,7 @@ import QtQuick.Layouts import "../Controls2" import "../Controls2/TextTypes" -DrawerType { +Drawer2Type { id: root width: parent.width diff --git a/client/ui/qml/Components/ShareConnectionDrawer.qml b/client/ui/qml/Components/ShareConnectionDrawer.qml index 1158dadc3..cb74f42e0 100644 --- a/client/ui/qml/Components/ShareConnectionDrawer.qml +++ b/client/ui/qml/Components/ShareConnectionDrawer.qml @@ -16,7 +16,7 @@ import "../Controls2/TextTypes" import "../Config" import "../Components" -DrawerType { +Drawer2Type { id: root property alias headerText: header.headerText @@ -30,7 +30,7 @@ DrawerType { width: parent.width height: parent.height * 0.9 - onClosed: { + onClose: { configExtension = ".vpn" configCaption = qsTr("Save AmneziaVPN config") configFileName = "amnezia_config" @@ -126,13 +126,14 @@ DrawerType { text: qsTr("Show connection settings") onClicked: { - configContentDrawer.visible = true + configContentDrawer.open() } } - DrawerType { + Drawer2Type { id: configContentDrawer + parent: root width: parent.width height: parent.height * 0.9 @@ -145,7 +146,7 @@ DrawerType { anchors.topMargin: 16 backButtonFunction: function() { - configContentDrawer.visible = false + configContentDrawer.close() } } diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml new file mode 100644 index 000000000..eae288462 --- /dev/null +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -0,0 +1,266 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Shapes + +Item { + id: root + + Connections { + target: PageController + + function onForceCloseDrawer() { + root.state = "closed" + } + } + + visible: false + + parent: Overlay.overlay + + signal close() + + property bool needCloseButton: true + + property string defaultColor: "#1C1D21" + property string borderColor: "#2C2D30" + property int collapsedHeight: 0 + + property bool needCollapsed: false + + + y: parent.height - root.height + + state: "closed" + + Rectangle { + id: draw2Background + + anchors { left: root.left; right: root.right; top: root.top } + height: root.height + radius: 16 + color: root.defaultColor + border.color: root.borderColor + border.width: 1 + + Rectangle { + width: parent.radius + height: parent.radius + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.left: parent.left + color: parent.color + } + } + + MouseArea { + anchors.fill: parent + enabled: (root.state === "expanded" || root.state === "opened") + onClicked: { + if (root.state === "expanded") { + root.state = "collapsed" + return + } + + if (root.state === "opened") { + root.state = "closed" + return + } + } + } + + Drag.active: dragArea.drag.active + + MouseArea { + id: dragArea + + anchors.fill: parent + cursorShape: (root.state === "opened" || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor + hoverEnabled: true + + drag.target: parent + drag.axis: Drag.YAxis + drag.maximumY: parent.height + drag.minimumY: parent.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" && 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 === "opened") { + root.state = "closed" + } + + if (root.state == "expanded") { + root.state == "collapsed" + } + } + } + + onStateChanged: { + if (root.state === "closed" || root.state === "collapsed") { + var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() + if (initialPageNavigationBarColor !== 0xFF1C1D21) { + PageController.updateNavigationBarColor(initialPageNavigationBarColor) + } + + PageController.drawerClose() + return + } + if (root.state === "expanded" || root.state === "opened") { + 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: root + y: root.height - collapsedHeight + } + }, + State { + name: "expanded" + PropertyChanges { + target: root + y: dragArea.drag.minimumY + } + }, + + State { + name: "closed" + PropertyChanges { + target: root + y: parent.height + } + }, + + State { + name: "opend" + PropertyChanges { + target: root + y: dragArea.drag.minimumY + } + } + ] + + 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" + PropertyAnimation { + target: root + properties: "y" + duration: 200 + } + }, + + Transition { + from: "closed" + to: "opened" + PropertyAnimation { + target: root + properties: "y" + duration: 200 + } + } + ] + + NumberAnimation { + id: animationVisible + target: root + property: "y" + from: parent.height + to: parent.height - root.height + duration: 200 + } + + function open() { + if (root.visible && root.state !== "closed") { + return + } + + root.state = "opened" + root.visible = true + root.y = parent.height - root.height + + dragArea.drag.maximumY = parent.height + dragArea.drag.minimumY = parent.height - root.height + + + animationVisible.running = true + + if (needCloseButton) { + PageController.drawerOpen() + } + + if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { + PageController.updateNavigationBarColor(0xFF1C1D21) + } + } + + function onClose() { + if (needCloseButton) { + PageController.drawerClose() + } + + var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() + if (initialPageNavigationBarColor !== 0xFF1C1D21) { + PageController.updateNavigationBarColor(initialPageNavigationBarColor) + } + + root.visible = false + } + + onVisibleChanged: { + if (!visible) { + close() + } + } +} diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml index b91f0b7a7..cab2ef4ea 100644 --- a/client/ui/qml/Controls2/DropDownType.qml +++ b/client/ui/qml/Controls2/DropDownType.qml @@ -156,17 +156,20 @@ Item { if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") { rootButtonClickedFunction() } else { - menu.visible = true + menu.open() } } } + // Drawer2Type { DrawerType { id: menu width: parent.width height: parent.height * drawerHeight + // parent: root.parent.parent + ColumnLayout { id: header diff --git a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml index c8469dcb8..f03cfc077 100644 --- a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml +++ b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml @@ -365,14 +365,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -397,6 +397,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageProtocolRaw.qml b/client/ui/qml/Pages2/PageProtocolRaw.qml index 2324c091e..3e0fe5ab9 100644 --- a/client/ui/qml/Pages2/PageProtocolRaw.qml +++ b/client/ui/qml/Pages2/PageProtocolRaw.qml @@ -90,8 +90,9 @@ PageType { DividerType {} - DrawerType { + Drawer2Type { id: configContentDrawer + parent: root width: parent.width height: parent.height * 0.9 @@ -179,14 +180,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } MouseArea { @@ -201,6 +202,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageServiceDnsSettings.qml b/client/ui/qml/Pages2/PageServiceDnsSettings.qml index 10fe6f569..70aba8e2d 100644 --- a/client/ui/qml/Pages2/PageServiceDnsSettings.qml +++ b/client/ui/qml/Pages2/PageServiceDnsSettings.qml @@ -68,14 +68,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } MouseArea { @@ -89,6 +89,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageServiceSftpSettings.qml b/client/ui/qml/Pages2/PageServiceSftpSettings.qml index 61ba663d6..0af47cddb 100644 --- a/client/ui/qml/Pages2/PageServiceSftpSettings.qml +++ b/client/ui/qml/Pages2/PageServiceSftpSettings.qml @@ -265,14 +265,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } } @@ -282,6 +282,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml b/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml index 04d7076c9..deff35ebe 100644 --- a/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml +++ b/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml @@ -143,20 +143,21 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } } QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageSettingsApplication.qml b/client/ui/qml/Pages2/PageSettingsApplication.qml index c5536fdb9..225e2b14a 100644 --- a/client/ui/qml/Pages2/PageSettingsApplication.qml +++ b/client/ui/qml/Pages2/PageSettingsApplication.qml @@ -119,6 +119,7 @@ PageType { SelectLanguageDrawer { id: selectLanguageDrawer + parent: root } @@ -151,14 +152,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() SettingsController.clearSettings() PageController.replaceStartPage() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -166,6 +167,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageSettingsBackup.qml b/client/ui/qml/Pages2/PageSettingsBackup.qml index 96214893b..61370dab8 100644 --- a/client/ui/qml/Pages2/PageSettingsBackup.qml +++ b/client/ui/qml/Pages2/PageSettingsBackup.qml @@ -138,15 +138,15 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.showBusyIndicator(true) SettingsController.restoreAppConfig(filePath) PageController.showBusyIndicator(false) } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } QuestionDrawer { diff --git a/client/ui/qml/Pages2/PageSettingsDns.qml b/client/ui/qml/Pages2/PageSettingsDns.qml index 58ec0783d..917c69924 100644 --- a/client/ui/qml/Pages2/PageSettingsDns.qml +++ b/client/ui/qml/Pages2/PageSettingsDns.qml @@ -91,7 +91,7 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() SettingsController.primaryDns = "1.1.1.1" primaryDns.textFieldText = SettingsController.primaryDns SettingsController.secondaryDns = "1.0.0.1" @@ -99,9 +99,9 @@ PageType { PageController.showNotificationMessage(qsTr("Settings have been reset")) } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -123,6 +123,7 @@ PageType { } QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageSettingsLogging.qml b/client/ui/qml/Pages2/PageSettingsLogging.qml index 4141f51fd..1532d1dca 100644 --- a/client/ui/qml/Pages2/PageSettingsLogging.qml +++ b/client/ui/qml/Pages2/PageSettingsLogging.qml @@ -146,16 +146,16 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.showBusyIndicator(true) SettingsController.clearLogs() PageController.showBusyIndicator(false) PageController.showNotificationMessage(qsTr("Logs have been cleaned up")) } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -171,6 +171,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } diff --git a/client/ui/qml/Pages2/PageSettingsServerData.qml b/client/ui/qml/Pages2/PageSettingsServerData.qml index 3eb07ce99..c90e66b36 100644 --- a/client/ui/qml/Pages2/PageSettingsServerData.qml +++ b/client/ui/qml/Pages2/PageSettingsServerData.qml @@ -94,15 +94,15 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.showBusyIndicator(true) SettingsController.clearCachedProfiles() PageController.showBusyIndicator(false) } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -172,7 +172,7 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) { ConnectionController.closeConnection() @@ -180,9 +180,9 @@ PageType { InstallController.removeAllContainers() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } diff --git a/client/ui/qml/Pages2/PageSettingsServerInfo.qml b/client/ui/qml/Pages2/PageSettingsServerInfo.qml index e2e7868cc..d534b509b 100644 --- a/client/ui/qml/Pages2/PageSettingsServerInfo.qml +++ b/client/ui/qml/Pages2/PageSettingsServerInfo.qml @@ -71,13 +71,14 @@ PageType { } actionButtonFunction: function() { - serverNameEditDrawer.visible = true + serverNameEditDrawer.open() } } - DrawerType { + Drawer2Type { id: serverNameEditDrawer + parent: root width: root.width height: root.height * 0.35 @@ -95,6 +96,7 @@ PageType { anchors.leftMargin: 16 anchors.rightMargin: 16 + TextFieldWithHeaderType { id: serverName diff --git a/client/ui/qml/Pages2/PageSettingsServerProtocol.qml b/client/ui/qml/Pages2/PageSettingsServerProtocol.qml index 30758da47..594e4520b 100644 --- a/client/ui/qml/Pages2/PageSettingsServerProtocol.qml +++ b/client/ui/qml/Pages2/PageSettingsServerProtocol.qml @@ -119,14 +119,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } MouseArea { diff --git a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml index b79d5d226..406fae66b 100644 --- a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml +++ b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml @@ -200,13 +200,13 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() SitesController.removeSite(index) } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.onClose() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -214,6 +214,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } @@ -259,12 +260,14 @@ PageType { } } - DrawerType { + Drawer2Type { id: moreActionsDrawer width: parent.width height: parent.height * 0.4375 + parent: root + FlickableType { anchors.fill: parent contentHeight: moreActionsDrawerContent.height @@ -324,12 +327,14 @@ PageType { } } - DrawerType { + Drawer2Type { id: importSitesDrawer width: parent.width height: parent.height * 0.4375 + parent: root + BackButtonType { id: importSitesDrawerBackButton diff --git a/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml b/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml index 7535464ae..794ec90bf 100644 --- a/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml +++ b/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml @@ -97,12 +97,14 @@ PageType { } } - DrawerType { + Drawer2Type { id: showDetailsDrawer width: parent.width height: parent.height * 0.9 + parent: root + BackButtonType { id: showDetailsBackButton diff --git a/client/ui/qml/Pages2/PageSetupWizardStart.qml b/client/ui/qml/Pages2/PageSetupWizardStart.qml index 9f5e57a57..17aa860f0 100644 --- a/client/ui/qml/Pages2/PageSetupWizardStart.qml +++ b/client/ui/qml/Pages2/PageSetupWizardStart.qml @@ -115,7 +115,7 @@ PageType { text: qsTr("I have the data to connect") onClicked: { - connectionTypeSelection.visible = true + connectionTypeSelection.open() } } @@ -140,6 +140,7 @@ PageType { ConnectionTypeSelectionDrawer { id: connectionTypeSelection + parent: root } } diff --git a/client/ui/qml/Pages2/PageShare.qml b/client/ui/qml/Pages2/PageShare.qml index 2fa5e4a12..6c641ea6b 100644 --- a/client/ui/qml/Pages2/PageShare.qml +++ b/client/ui/qml/Pages2/PageShare.qml @@ -371,6 +371,7 @@ PageType { ShareConnectionDrawer { id: shareConnectionDrawer + parent: root } BasicButtonType { diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 4af774fa0..923d1e79e 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -135,6 +135,8 @@ PageType { var pagePath = PageController.getPagePath(PageEnum.PageHome) ServersModel.currentlyProcessedIndex = ServersModel.defaultIndex tabBarStackView.push(pagePath, { "objectName" : pagePath }) + + connectionTypeSelection.parent = tabBarStackView } onWidthChanged: { @@ -243,7 +245,7 @@ PageType { ConnectionTypeSelectionDrawer { id: connectionTypeSelection - onAboutToHide: { + onClose: function() { tabBar.setCurrentIndex(tabBar.previousIndex) } } From 8c1835950bf64ebdf188769359bc908d501ba6d1 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sun, 15 Oct 2023 15:17:04 +0800 Subject: [PATCH 02/16] added transparent-background, for blocking clicked event --- .../ConnectionTypeSelectionDrawer.qml | 5 +- client/ui/qml/Components/QuestionDrawer.qml | 7 +- .../qml/Components/SelectLanguageDrawer.qml | 6 +- .../qml/Components/ShareConnectionDrawer.qml | 16 ++++- client/ui/qml/Controls2/Drawer2Type.qml | 64 ++++++++++++++----- client/ui/qml/Controls2/DropDownType.qml | 17 +++-- .../qml/Pages2/PageProtocolCloakSettings.qml | 2 + .../Pages2/PageProtocolOpenVpnSettings.qml | 4 ++ client/ui/qml/Pages2/PageProtocolRaw.qml | 5 +- .../PageProtocolShadowSocksSettings.qml | 2 + .../ui/qml/Pages2/PageSettingsServerData.qml | 8 ++- .../ui/qml/Pages2/PageSettingsServerInfo.qml | 5 +- .../qml/Pages2/PageSettingsSplitTunneling.qml | 14 +++- .../PageSetupWizardProtocolSettings.qml | 7 +- client/ui/qml/Pages2/PageShare.qml | 6 ++ 15 files changed, 134 insertions(+), 34 deletions(-) diff --git a/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml b/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml index a368d45c9..ac04e444d 100644 --- a/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml +++ b/client/ui/qml/Components/ConnectionTypeSelectionDrawer.qml @@ -12,9 +12,12 @@ Drawer2Type { id: root width: parent.width - height: parent.height * 0.4375 + height: parent.height + contentHeight: parent.height * 0.4375 ColumnLayout { + parent: root.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Components/QuestionDrawer.qml b/client/ui/qml/Components/QuestionDrawer.qml index 06f4ae248..edc8df9ec 100644 --- a/client/ui/qml/Components/QuestionDrawer.qml +++ b/client/ui/qml/Components/QuestionDrawer.qml @@ -17,9 +17,12 @@ Drawer2Type { property var noButtonFunction width: parent.width - height: parent.height * 0.5 + height: parent.height + contentHeight: parent.height * 0.5 ColumnLayout { + parent: root.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -27,6 +30,8 @@ Drawer2Type { anchors.rightMargin: 16 anchors.leftMargin: 16 + // visible: false + spacing: 8 Header2TextType { diff --git a/client/ui/qml/Components/SelectLanguageDrawer.qml b/client/ui/qml/Components/SelectLanguageDrawer.qml index f27fce6c7..e6fdc2b59 100644 --- a/client/ui/qml/Components/SelectLanguageDrawer.qml +++ b/client/ui/qml/Components/SelectLanguageDrawer.qml @@ -9,11 +9,14 @@ Drawer2Type { id: root width: parent.width - height: parent.height * 0.9 + height: parent.height + contentHeight: parent.height * 0.9 ColumnLayout { id: backButton + parent: root.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -28,6 +31,7 @@ Drawer2Type { } FlickableType { + parent: root.contentParent anchors.top: backButton.bottom anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Components/ShareConnectionDrawer.qml b/client/ui/qml/Components/ShareConnectionDrawer.qml index cb74f42e0..22c567a8d 100644 --- a/client/ui/qml/Components/ShareConnectionDrawer.qml +++ b/client/ui/qml/Components/ShareConnectionDrawer.qml @@ -28,7 +28,8 @@ Drawer2Type { property string configFileName: "amnezia_config.vpn" width: parent.width - height: parent.height * 0.9 + height: parent.height + contentHeight: parent.height * 0.9 onClose: { configExtension = ".vpn" @@ -41,6 +42,9 @@ Drawer2Type { Header2Type { id: header + + parent: root.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -50,6 +54,8 @@ Drawer2Type { } FlickableType { + parent: root.contentParent + anchors.top: header.bottom anchors.bottom: parent.bottom contentHeight: content.height + 32 @@ -135,11 +141,15 @@ Drawer2Type { parent: root width: parent.width - height: parent.height * 0.9 + height: parent.height + + contentHeight: parent.height * 0.9 BackButtonType { id: backButton + parent: configContentDrawer.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -151,6 +161,8 @@ Drawer2Type { } FlickableType { + parent: configContentDrawer.contentParent + anchors.top: backButton.bottom anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index eae288462..3f8779000 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -16,8 +16,6 @@ Item { visible: false - parent: Overlay.overlay - signal close() property bool needCloseButton: true @@ -27,7 +25,10 @@ Item { property int collapsedHeight: 0 property bool needCollapsed: false - + property double scaely + property int contentHeight: 0 + property Item contentParent: contentArea + // property bool inContentArea: false y: parent.height - root.height @@ -37,23 +38,49 @@ Item { id: draw2Background anchors { left: root.left; right: root.right; top: root.top } - height: root.height + height: root.parent.height + width: parent.width radius: 16 - color: root.defaultColor - border.color: root.borderColor + color: "transparent" + border.color: "transparent" //"green" border.width: 1 + visible: true Rectangle { - width: parent.radius - height: parent.radius - anchors.bottom: parent.bottom + id: semiArea + anchors.top: parent.top + height: parent.height - contentHeight anchors.right: parent.right anchors.left: parent.left - color: parent.color + visible: true + color: "transparent" + } + + Rectangle { + id: contentArea + anchors.top: semiArea.bottom + height: contentHeight + radius: 16 + color: root.defaultColor + border.width: 1 + border.color: root.borderColor + width: parent.width + visible: true + + Rectangle { + width: parent.radius + height: parent.radius + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.left: parent.left + color: parent.color + } } } + MouseArea { + id: fullArea anchors.fill: parent enabled: (root.state === "expanded" || root.state === "opened") onClicked: { @@ -75,6 +102,7 @@ Item { id: dragArea anchors.fill: parent + cursorShape: (root.state === "opened" || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor hoverEnabled: true @@ -108,12 +136,14 @@ Item { } onClicked: { - if (root.state === "opened") { - root.state = "closed" + if (root.state === "expanded") { + root.state = "collapsed" + return } - if (root.state == "expanded") { - root.state == "collapsed" + if (root.state === "opened") { + root.state = "closed" + return } } } @@ -217,7 +247,7 @@ Item { target: root property: "y" from: parent.height - to: parent.height - root.height + to: 0 duration: 200 } @@ -226,9 +256,11 @@ Item { return } + root.y = 0 root.state = "opened" root.visible = true - root.y = parent.height - root.height + root.height = parent.height + contentArea.height = contentHeight dragArea.drag.maximumY = parent.height dragArea.drag.minimumY = parent.height - root.height diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml index cab2ef4ea..83518bef1 100644 --- a/client/ui/qml/Controls2/DropDownType.qml +++ b/client/ui/qml/Controls2/DropDownType.qml @@ -40,6 +40,8 @@ Item { property alias menuVisible: menu.visible + property Item drawerParent: root + implicitWidth: rootButtonContent.implicitWidth implicitHeight: rootButtonContent.implicitHeight @@ -161,18 +163,21 @@ Item { } } - // Drawer2Type { - DrawerType { + //DrawerType { + Drawer2Type { id: menu - width: parent.width - height: parent.height * drawerHeight + parent: drawerParent - // parent: root.parent.parent + width: parent.width + height: parent.height + contentHeight: parent.height * drawerHeight ColumnLayout { id: header + parent: menu.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -187,6 +192,8 @@ Item { } FlickableType { + parent: menu.contentParent + anchors.top: header.bottom anchors.topMargin: 16 contentHeight: col.implicitHeight diff --git a/client/ui/qml/Pages2/PageProtocolCloakSettings.qml b/client/ui/qml/Pages2/PageProtocolCloakSettings.qml index 78e666a7e..b0f369718 100644 --- a/client/ui/qml/Pages2/PageProtocolCloakSettings.qml +++ b/client/ui/qml/Pages2/PageProtocolCloakSettings.qml @@ -117,6 +117,8 @@ PageType { Layout.fillWidth: true Layout.topMargin: 16 + drawerParent: root + descriptionText: qsTr("Cipher") headerText: qsTr("Cipher") diff --git a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml index f03cfc077..2861ece33 100644 --- a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml +++ b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml @@ -156,6 +156,8 @@ PageType { Layout.fillWidth: true Layout.topMargin: 20 + drawerParent: root + enabled: !autoNegotiateEncryprionSwitcher.checked descriptionText: qsTr("Hash") @@ -202,6 +204,8 @@ PageType { Layout.fillWidth: true Layout.topMargin: 16 + drawerParent: root + enabled: !autoNegotiateEncryprionSwitcher.checked descriptionText: qsTr("Cipher") diff --git a/client/ui/qml/Pages2/PageProtocolRaw.qml b/client/ui/qml/Pages2/PageProtocolRaw.qml index 3e0fe5ab9..f2a176861 100644 --- a/client/ui/qml/Pages2/PageProtocolRaw.qml +++ b/client/ui/qml/Pages2/PageProtocolRaw.qml @@ -95,11 +95,14 @@ PageType { parent: root width: parent.width - height: parent.height * 0.9 + height: parent.height + contentHeight: parent.height * 0.9 BackButtonType { id: backButton + parent: configContentDrawer.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml b/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml index 2453281fe..75853d1f8 100644 --- a/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml +++ b/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml @@ -95,6 +95,8 @@ PageType { Layout.fillWidth: true Layout.topMargin: 20 + drawerParent: root + descriptionText: qsTr("Cipher") headerText: qsTr("Cipher") diff --git a/client/ui/qml/Pages2/PageSettingsServerData.qml b/client/ui/qml/Pages2/PageSettingsServerData.qml index c90e66b36..5e3f19393 100644 --- a/client/ui/qml/Pages2/PageSettingsServerData.qml +++ b/client/ui/qml/Pages2/PageSettingsServerData.qml @@ -141,7 +141,7 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.close() PageController.showBusyIndicator(true) if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) { ConnectionController.closeConnection() @@ -150,9 +150,9 @@ PageType { PageController.showBusyIndicator(false) } questionDrawer.noButtonFunction = function() { - questionDrawer.visible = false + questionDrawer.close() } - questionDrawer.visible = true + questionDrawer.open() } } @@ -192,6 +192,8 @@ PageType { QuestionDrawer { id: questionDrawer + + parent: root } } } diff --git a/client/ui/qml/Pages2/PageSettingsServerInfo.qml b/client/ui/qml/Pages2/PageSettingsServerInfo.qml index d534b509b..f6d569dd3 100644 --- a/client/ui/qml/Pages2/PageSettingsServerInfo.qml +++ b/client/ui/qml/Pages2/PageSettingsServerInfo.qml @@ -80,7 +80,8 @@ PageType { parent: root width: root.width - height: root.height * 0.35 + height: root.height // * 0.35 + contentHeight: root.height * 0.35 onVisibleChanged: { if (serverNameEditDrawer.visible) { @@ -89,6 +90,8 @@ PageType { } ColumnLayout { + parent: serverNameEditDrawer.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml index 406fae66b..a88c576b3 100644 --- a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml +++ b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml @@ -108,6 +108,8 @@ PageType { DropDownType { id: selector + drawerParent: root + Layout.fillWidth: true Layout.topMargin: 32 Layout.leftMargin: 16 @@ -264,11 +266,14 @@ PageType { id: moreActionsDrawer width: parent.width - height: parent.height * 0.4375 + height: parent.height + contentHeight: parent.height * 0.4375 parent: root FlickableType { + parent: moreActionsDrawer.contentParent + anchors.fill: parent contentHeight: moreActionsDrawerContent.height ColumnLayout { @@ -331,13 +336,16 @@ PageType { id: importSitesDrawer width: parent.width - height: parent.height * 0.4375 + height: parent.height + contentHeight: parent.height * 0.4375 parent: root BackButtonType { id: importSitesDrawerBackButton + parent: importSitesDrawer.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -349,6 +357,8 @@ PageType { } FlickableType { + parent: importSitesDrawer.contentParent + anchors.top: importSitesDrawerBackButton.bottom anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml b/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml index 794ec90bf..6cdda3648 100644 --- a/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml +++ b/client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml @@ -101,13 +101,16 @@ PageType { id: showDetailsDrawer width: parent.width - height: parent.height * 0.9 + height: parent.height + contentHeight: parent.height * 0.9 parent: root BackButtonType { id: showDetailsBackButton + parent: showDetailsDrawer.contentParent + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -119,6 +122,8 @@ PageType { } FlickableType { + parent: showDetailsDrawer.contentParent + anchors.top: showDetailsBackButton.bottom anchors.left: parent.left anchors.right: parent.right diff --git a/client/ui/qml/Pages2/PageShare.qml b/client/ui/qml/Pages2/PageShare.qml index 6c641ea6b..963991537 100644 --- a/client/ui/qml/Pages2/PageShare.qml +++ b/client/ui/qml/Pages2/PageShare.qml @@ -179,6 +179,8 @@ PageType { DropDownType { id: serverSelector + drawerParent: root + signal severSelectorIndexChanged property int currentIndex: 0 @@ -241,6 +243,8 @@ PageType { DropDownType { id: protocolSelector + drawerParent: root + visible: accessTypeSelector.currentIndex === 0 Layout.fillWidth: true @@ -330,6 +334,8 @@ PageType { DropDownType { id: exportTypeSelector + drawerParent: root + property int currentIndex: 0 Layout.fillWidth: true From a75bd07cd8b604bbe5f6894ac8e861f57efe8df5 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sun, 15 Oct 2023 15:54:05 +0800 Subject: [PATCH 03/16] fixed the clicked event --- client/ui/qml/Controls2/Drawer2Type.qml | 192 ++++++++++++------------ 1 file changed, 100 insertions(+), 92 deletions(-) diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index 3f8779000..2f10ec5d4 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -34,6 +34,8 @@ Item { state: "closed" + Drag.active: dragArea.drag.active + Rectangle { id: draw2Background @@ -46,104 +48,110 @@ Item { border.width: 1 visible: true - Rectangle { - id: semiArea - anchors.top: parent.top - height: parent.height - contentHeight - anchors.right: parent.right - anchors.left: parent.left - visible: true - color: "transparent" - } - - Rectangle { - id: contentArea - anchors.top: semiArea.bottom - height: contentHeight - radius: 16 - color: root.defaultColor - border.width: 1 - border.color: root.borderColor - width: parent.width - visible: true + MouseArea { + id: fullArea + anchors.fill: parent + enabled: (root.state === "expanded" || root.state === "opened") + onClicked: { + if (root.state === "expanded") { + root.state = "collapsed" + return + } + + if (root.state === "opened") { + root.state = "closed" + return + } + } Rectangle { - width: parent.radius - height: parent.radius - anchors.bottom: parent.bottom + id: semiArea + anchors.top: parent.top + height: parent.height - contentHeight anchors.right: parent.right anchors.left: parent.left - color: parent.color - } - } - } - - - MouseArea { - id: fullArea - anchors.fill: parent - enabled: (root.state === "expanded" || root.state === "opened") - onClicked: { - if (root.state === "expanded") { - root.state = "collapsed" - return - } - - if (root.state === "opened") { - root.state = "closed" - return + visible: true + color: "transparent" } - } - } - - Drag.active: dragArea.drag.active - MouseArea { - id: dragArea - - anchors.fill: parent - - cursorShape: (root.state === "opened" || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor - hoverEnabled: true - - drag.target: parent - drag.axis: Drag.YAxis - drag.maximumY: parent.height - drag.minimumY: parent.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" && 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") { - root.state = "collapsed" - return - } - - if (root.state === "opened") { - root.state = "closed" - return + Rectangle { + id: contentArea + + anchors.top: semiArea.bottom + height: contentHeight + radius: 16 + color: root.defaultColor + border.width: 1 + border.color: root.borderColor + width: parent.width + visible: true + + Rectangle { + width: parent.radius + height: parent.radius + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.left: parent.left + color: parent.color + } + + MouseArea { + id: dragArea + + anchors.fill: parent + + cursorShape: (root.state === "opened" || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor + hoverEnabled: true + + drag.target: root + 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" && 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") { + root.state = "collapsed" + return + } + + if (root.state === "opened") { + root.state = "closed" + return + } + } + +// onEntered: { +// fullArea.enabled = false +// } + +// onExited: { +// fullArea.enabled = true +// } + } } } } From d0f83584313d60c4c0507b60d5d78118ffb9cbdf Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sun, 15 Oct 2023 17:29:22 +0800 Subject: [PATCH 04/16] removed invalid code, and fixed top button hidden-shown --- client/ui/qml/Controls2/Drawer2Type.qml | 67 +++++++++---------- .../Pages2/PageProtocolOpenVpnSettings.qml | 4 +- client/ui/qml/Pages2/PageProtocolRaw.qml | 4 +- .../ui/qml/Pages2/PageServiceDnsSettings.qml | 4 +- .../ui/qml/Pages2/PageServiceSftpSettings.qml | 4 +- .../Pages2/PageServiceTorWebsiteSettings.qml | 4 +- .../ui/qml/Pages2/PageSettingsApplication.qml | 4 +- client/ui/qml/Pages2/PageSettingsBackup.qml | 4 +- client/ui/qml/Pages2/PageSettingsDns.qml | 4 +- client/ui/qml/Pages2/PageSettingsLogging.qml | 4 +- .../ui/qml/Pages2/PageSettingsServerData.qml | 8 +-- .../qml/Pages2/PageSettingsServerProtocol.qml | 4 +- .../qml/Pages2/PageSettingsSplitTunneling.qml | 4 +- client/ui/qml/Pages2/PageStart.qml | 2 +- 14 files changed, 58 insertions(+), 63 deletions(-) diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index 2f10ec5d4..2daae7427 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -14,9 +14,9 @@ Item { } } - visible: false + signal closed - signal close() + visible: false property bool needCloseButton: true @@ -28,7 +28,6 @@ Item { property double scaely property int contentHeight: 0 property Item contentParent: contentArea - // property bool inContentArea: false y: parent.height - root.height @@ -44,7 +43,7 @@ Item { width: parent.width radius: 16 color: "transparent" - border.color: "transparent" //"green" + border.color: "transparent" border.width: 1 visible: true @@ -52,6 +51,8 @@ Item { id: fullArea anchors.fill: parent enabled: (root.state === "expanded" || root.state === "opened") + hoverEnabled: true + onClicked: { if (root.state === "expanded") { root.state = "collapsed" @@ -65,7 +66,7 @@ Item { } Rectangle { - id: semiArea + id: placeAreaHolder anchors.top: parent.top height: parent.height - contentHeight anchors.right: parent.right @@ -77,7 +78,7 @@ Item { Rectangle { id: contentArea - anchors.top: semiArea.bottom + anchors.top: placeAreaHolder.bottom height: contentHeight radius: 16 color: root.defaultColor @@ -112,13 +113,13 @@ Item { onReleased: { if (root.state === "closed" && root.y < dragArea.drag.maximumY) { root.state = "opened" - PageController.drawerOpen() + // PageController.drawerOpen() return } if (root.state === "opened" && root.y > dragArea.drag.minimumY) { root.state = "closed" - PageController.drawerClose() + // PageController.drawerClose() return } @@ -134,23 +135,17 @@ Item { onClicked: { if (root.state === "expanded") { + // PageController.drawerOpen() root.state = "collapsed" return } if (root.state === "opened") { + // PageController.drawerClose() root.state = "closed" return } } - -// onEntered: { -// fullArea.enabled = false -// } - -// onExited: { -// fullArea.enabled = true -// } } } } @@ -163,14 +158,23 @@ Item { PageController.updateNavigationBarColor(initialPageNavigationBarColor) } - PageController.drawerClose() + if (needCloseButton) { + PageController.drawerClose() + } + + closed() + return } if (root.state === "expanded" || root.state === "opened") { if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { PageController.updateNavigationBarColor(0xFF1C1D21) } - PageController.drawerOpen() + + if (needCloseButton) { + PageController.drawerOpen() + } + return } } @@ -275,31 +279,22 @@ Item { animationVisible.running = true - - if (needCloseButton) { - PageController.drawerOpen() - } - - if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { - PageController.updateNavigationBarColor(0xFF1C1D21) - } } - function onClose() { - if (needCloseButton) { - PageController.drawerClose() - } - - var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() - if (initialPageNavigationBarColor !== 0xFF1C1D21) { - PageController.updateNavigationBarColor(initialPageNavigationBarColor) - } - + function close() { root.visible = false + root.state = "closed" } onVisibleChanged: { + // e.g cancel, ...... if (!visible) { + if (root.state === "opened") { + if (needCloseButton) { + PageController.drawerClose() + } + } + close() } } diff --git a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml index 2861ece33..3e75474b3 100644 --- a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml +++ b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml @@ -369,12 +369,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageProtocolRaw.qml b/client/ui/qml/Pages2/PageProtocolRaw.qml index f2a176861..23f192c75 100644 --- a/client/ui/qml/Pages2/PageProtocolRaw.qml +++ b/client/ui/qml/Pages2/PageProtocolRaw.qml @@ -183,12 +183,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageServiceDnsSettings.qml b/client/ui/qml/Pages2/PageServiceDnsSettings.qml index 70aba8e2d..9ad3b2899 100644 --- a/client/ui/qml/Pages2/PageServiceDnsSettings.qml +++ b/client/ui/qml/Pages2/PageServiceDnsSettings.qml @@ -68,12 +68,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageServiceSftpSettings.qml b/client/ui/qml/Pages2/PageServiceSftpSettings.qml index 0af47cddb..189267afa 100644 --- a/client/ui/qml/Pages2/PageServiceSftpSettings.qml +++ b/client/ui/qml/Pages2/PageServiceSftpSettings.qml @@ -265,12 +265,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml b/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml index deff35ebe..b69f5f633 100644 --- a/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml +++ b/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml @@ -143,12 +143,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsApplication.qml b/client/ui/qml/Pages2/PageSettingsApplication.qml index 225e2b14a..bd6026367 100644 --- a/client/ui/qml/Pages2/PageSettingsApplication.qml +++ b/client/ui/qml/Pages2/PageSettingsApplication.qml @@ -152,12 +152,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() SettingsController.clearSettings() PageController.replaceStartPage() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsBackup.qml b/client/ui/qml/Pages2/PageSettingsBackup.qml index 61370dab8..1fb160a17 100644 --- a/client/ui/qml/Pages2/PageSettingsBackup.qml +++ b/client/ui/qml/Pages2/PageSettingsBackup.qml @@ -138,13 +138,13 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.showBusyIndicator(true) SettingsController.restoreAppConfig(filePath) PageController.showBusyIndicator(false) } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsDns.qml b/client/ui/qml/Pages2/PageSettingsDns.qml index 917c69924..553eeacdb 100644 --- a/client/ui/qml/Pages2/PageSettingsDns.qml +++ b/client/ui/qml/Pages2/PageSettingsDns.qml @@ -91,7 +91,7 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() SettingsController.primaryDns = "1.1.1.1" primaryDns.textFieldText = SettingsController.primaryDns SettingsController.secondaryDns = "1.0.0.1" @@ -99,7 +99,7 @@ PageType { PageController.showNotificationMessage(qsTr("Settings have been reset")) } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsLogging.qml b/client/ui/qml/Pages2/PageSettingsLogging.qml index 1532d1dca..9b9899ab4 100644 --- a/client/ui/qml/Pages2/PageSettingsLogging.qml +++ b/client/ui/qml/Pages2/PageSettingsLogging.qml @@ -146,14 +146,14 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.showBusyIndicator(true) SettingsController.clearLogs() PageController.showBusyIndicator(false) PageController.showNotificationMessage(qsTr("Logs have been cleaned up")) } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsServerData.qml b/client/ui/qml/Pages2/PageSettingsServerData.qml index 5e3f19393..b130eef94 100644 --- a/client/ui/qml/Pages2/PageSettingsServerData.qml +++ b/client/ui/qml/Pages2/PageSettingsServerData.qml @@ -94,13 +94,13 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.showBusyIndicator(true) SettingsController.clearCachedProfiles() PageController.showBusyIndicator(false) } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } @@ -172,7 +172,7 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) if (ServersModel.isDefaultServerCurrentlyProcessed() && ConnectionController.isConnected) { ConnectionController.closeConnection() @@ -180,7 +180,7 @@ PageType { InstallController.removeAllContainers() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsServerProtocol.qml b/client/ui/qml/Pages2/PageSettingsServerProtocol.qml index 594e4520b..d1c8b22bf 100644 --- a/client/ui/qml/Pages2/PageSettingsServerProtocol.qml +++ b/client/ui/qml/Pages2/PageSettingsServerProtocol.qml @@ -119,12 +119,12 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() PageController.goToPage(PageEnum.PageDeinstalling) InstallController.removeCurrentlyProcessedContainer() } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml index a88c576b3..5bbd1003e 100644 --- a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml +++ b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml @@ -202,11 +202,11 @@ PageType { questionDrawer.noButtonText = qsTr("Cancel") questionDrawer.yesButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() SitesController.removeSite(index) } questionDrawer.noButtonFunction = function() { - questionDrawer.onClose() + questionDrawer.close() } questionDrawer.open() } diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 923d1e79e..557954652 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -245,7 +245,7 @@ PageType { ConnectionTypeSelectionDrawer { id: connectionTypeSelection - onClose: function() { + onClosed: { tabBar.setCurrentIndex(tabBar.previousIndex) } } From 29b4966119a57bb4631bb8ea289a5a27444471d6 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sun, 15 Oct 2023 17:34:35 +0800 Subject: [PATCH 05/16] shown ConnectionTypeSelectionDrawer on top level alway --- client/ui/qml/Pages2/PageStart.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 557954652..8afad3928 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -245,6 +245,8 @@ PageType { ConnectionTypeSelectionDrawer { id: connectionTypeSelection + z: 1 + onClosed: { tabBar.setCurrentIndex(tabBar.previousIndex) } From cb5c09d9679753785ecf3159e23a66bd877c9773 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sun, 15 Oct 2023 21:29:01 +0800 Subject: [PATCH 06/16] adapted questionDrawer --- client/ui/qml/Components/QuestionDrawer.qml | 3 ++- client/ui/qml/Components/ShareConnectionDrawer.qml | 2 +- client/ui/qml/Pages2/PageSettingsBackup.qml | 1 + client/ui/qml/Pages2/PageSettingsServerData.qml | 2 ++ client/ui/qml/Pages2/PageSettingsServerProtocol.qml | 1 + 5 files changed, 7 insertions(+), 2 deletions(-) diff --git a/client/ui/qml/Components/QuestionDrawer.qml b/client/ui/qml/Components/QuestionDrawer.qml index edc8df9ec..72067f979 100644 --- a/client/ui/qml/Components/QuestionDrawer.qml +++ b/client/ui/qml/Components/QuestionDrawer.qml @@ -15,10 +15,11 @@ Drawer2Type { property var yesButtonFunction property var noButtonFunction + property real drawerHeight: 0.5 width: parent.width height: parent.height - contentHeight: parent.height * 0.5 + contentHeight: parent.height * drawerHeight ColumnLayout { parent: root.contentParent diff --git a/client/ui/qml/Components/ShareConnectionDrawer.qml b/client/ui/qml/Components/ShareConnectionDrawer.qml index 22c567a8d..ae0df0e2a 100644 --- a/client/ui/qml/Components/ShareConnectionDrawer.qml +++ b/client/ui/qml/Components/ShareConnectionDrawer.qml @@ -31,7 +31,7 @@ Drawer2Type { height: parent.height contentHeight: parent.height * 0.9 - onClose: { + onClosed: { configExtension = ".vpn" configCaption = qsTr("Save AmneziaVPN config") configFileName = "amnezia_config" diff --git a/client/ui/qml/Pages2/PageSettingsBackup.qml b/client/ui/qml/Pages2/PageSettingsBackup.qml index 1fb160a17..2caaf914c 100644 --- a/client/ui/qml/Pages2/PageSettingsBackup.qml +++ b/client/ui/qml/Pages2/PageSettingsBackup.qml @@ -151,5 +151,6 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } diff --git a/client/ui/qml/Pages2/PageSettingsServerData.qml b/client/ui/qml/Pages2/PageSettingsServerData.qml index b130eef94..2e401c672 100644 --- a/client/ui/qml/Pages2/PageSettingsServerData.qml +++ b/client/ui/qml/Pages2/PageSettingsServerData.qml @@ -193,6 +193,8 @@ PageType { QuestionDrawer { id: questionDrawer + drawerHeight: 0.8 + parent: root } } diff --git a/client/ui/qml/Pages2/PageSettingsServerProtocol.qml b/client/ui/qml/Pages2/PageSettingsServerProtocol.qml index d1c8b22bf..a518167cc 100644 --- a/client/ui/qml/Pages2/PageSettingsServerProtocol.qml +++ b/client/ui/qml/Pages2/PageSettingsServerProtocol.qml @@ -141,6 +141,7 @@ PageType { QuestionDrawer { id: questionDrawer + parent: root } } } From 7cc0f39d3ca12fd05fde3d7b6c06030d66e01c55 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Mon, 16 Oct 2023 22:21:01 +0800 Subject: [PATCH 07/16] adapted pagehome by new custom drawer type --- client/resources.qrc | 1 + .../qml/Components/HomeContainersListView.qml | 2 +- .../ui/qml/Components/HomeRootMenuButton.qml | 140 ++++++++++ client/ui/qml/Controls2/Drawer2Type.qml | 68 +---- client/ui/qml/Controls2/DropDownType.qml | 9 +- client/ui/qml/Pages2/PageHome.qml | 242 +++--------------- 6 files changed, 194 insertions(+), 268 deletions(-) create mode 100644 client/ui/qml/Components/HomeRootMenuButton.qml diff --git a/client/resources.qrc b/client/resources.qrc index d7f8ff7ad..ac6e5a6d6 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -217,5 +217,6 @@ ui/qml/Controls2/TopCloseButtonType.qml images/controls/x-circle.svg ui/qml/Controls2/Drawer2Type.qml + ui/qml/Components/HomeRootMenuButton.qml diff --git a/client/ui/qml/Components/HomeContainersListView.qml b/client/ui/qml/Components/HomeContainersListView.qml index 86a755c16..1436c747c 100644 --- a/client/ui/qml/Components/HomeContainersListView.qml +++ b/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 && diff --git a/client/ui/qml/Components/HomeRootMenuButton.qml b/client/ui/qml/Components/HomeRootMenuButton.qml new file mode 100644 index 000000000..b2ca98dc3 --- /dev/null +++ b/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() + } + } + } +} diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index 2daae7427..3f3cf54b6 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/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" diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml index 83518bef1..0506bdc70 100644 --- a/client/ui/qml/Controls2/DropDownType.qml +++ b/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() } + + menu.open() } } - //DrawerType { Drawer2Type { id: menu @@ -186,7 +187,7 @@ Item { BackButtonType { backButtonImage: root.headerBackButtonImage backButtonFunction: function() { - root.menuVisible = false + menu.state = "closed" } } } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index 519c17a51..dafa3bdce 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/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() - - MouseArea { - anchors.fill: parent - enabled: buttonContent.state === "expanded" - onClicked: { - buttonContent.state = "collapsed" - } + Component.onCompleted: { + updateDescriptions() } 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 { - id: buttonContent + HomeRootMenuButton { + id: defaultServerInfo + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom - /** 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 + text: root.defaultServerName + rightImageSource: "qrc:/images/controls/chevron-down.svg" - Drag.active: dragArea.drag.active - anchors.right: root.right - anchors.left: root.left - y: root.height - buttonContent.height + defaultContainerName: root.defaultContainerName + defaultServerHostName: root.defaultServerHostName - 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 - } + clickedFunction: function() { + menu.open() } + } - 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 - - Behavior on opacity { - PropertyAnimation { duration: 200 } - } - } - - ImageButtonType { - id: collapsedButtonChevron - - Layout.leftMargin: 8 - - hoverEnabled: false - image: "qrc:/images/controls/chevron-down.svg" - imageColor: "#d7d8db" + Drawer2Type { + id: menu + parent: root - icon.width: 18 - icon.height: 18 - backgroundRadius: 16 - horizontalPadding: 4 - topPadding: 4 - bottomPadding: 3 + width: parent.width + height: parent.height + contentHeight: parent.height * 0.9 - 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 - Layout.fillWidth: true - visible: buttonContent.expandedVisibility + parent: menu.contentParent + + 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 - Layout.topMargin: 16 + + parent: menu.contentParent + + 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() } } } From 03171e474331eec48be2717851a77359663c3139 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Tue, 17 Oct 2023 19:34:34 +0800 Subject: [PATCH 08/16] update background color and drag-effect, moved dulicated code --- .../qml/Components/HomeContainersListView.qml | 2 +- client/ui/qml/Controls2/Drawer2Type.qml | 27 ++++++++++--------- client/ui/qml/Controls2/DropDownType.qml | 2 +- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/client/ui/qml/Components/HomeContainersListView.qml b/client/ui/qml/Components/HomeContainersListView.qml index 1436c747c..c6c4125a7 100644 --- a/client/ui/qml/Components/HomeContainersListView.qml +++ b/client/ui/qml/Components/HomeContainersListView.qml @@ -69,7 +69,7 @@ ListView { isDefault = true menuContent.currentIndex = index - containersDropDown.menu.state = "closed" + containersDropDown.menu.close() if (needReconnected && diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index 3f3cf54b6..fcd773a85 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -10,7 +10,7 @@ Item { target: PageController function onForceCloseDrawer() { - root.state = "closed" + close() } } @@ -32,8 +32,6 @@ Item { state: "closed" - Drag.active: dragArea.drag.active - Rectangle { id: draw2Background @@ -41,7 +39,7 @@ Item { height: root.parent.height width: parent.width radius: 16 - color: "transparent" + color: "#90000000" border.color: "transparent" border.width: 1 visible: true @@ -54,6 +52,7 @@ Item { onClicked: { if (root.state === "opened") { + draw2Background.color = "transparent" root.state = "closed" return } @@ -61,14 +60,16 @@ Item { Rectangle { id: placeAreaHolder - anchors.top: parent.top height: parent.height - contentHeight anchors.right: parent.right anchors.left: parent.left visible: true color: "transparent" + + Drag.active: dragArea.drag.active } + Rectangle { id: contentArea @@ -98,27 +99,27 @@ Item { cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor hoverEnabled: true - drag.target: root + 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" && root.y < dragArea.drag.maximumY) { + if (root.state === "closed" && placeAreaHolder.y < dragArea.drag.maximumY) { root.state = "opened" return } - if (root.state === "opened" && root.y > dragArea.drag.minimumY) { - root.state = "closed" + if (root.state === "opened" && placeAreaHolder.y > dragArea.drag.minimumY) { + close() return } } onClicked: { if (root.state === "opened") { - root.state = "closed" + close() return } } @@ -209,22 +210,24 @@ Item { if (root.visible && root.state !== "closed") { return } + draw2Background.color = "#90000000" root.y = 0 root.state = "opened" root.visible = true root.height = parent.height contentArea.height = contentHeight + placeAreaHolder.height = parent.height - contentHeight + placeAreaHolder.y = parent.height - root.height dragArea.drag.maximumY = parent.height dragArea.drag.minimumY = parent.height - root.height - animationVisible.running = true } function close() { - root.visible = false + draw2Background.color = "transparent" root.state = "closed" } diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml index 0506bdc70..c666408a7 100644 --- a/client/ui/qml/Controls2/DropDownType.qml +++ b/client/ui/qml/Controls2/DropDownType.qml @@ -187,7 +187,7 @@ Item { BackButtonType { backButtonImage: root.headerBackButtonImage backButtonFunction: function() { - menu.state = "closed" + menu.close() } } } From a83cd29f725136094bfb5d8855b9167b761bb125 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Tue, 17 Oct 2023 22:00:19 +0800 Subject: [PATCH 09/16] fixed the cursorShape, and some minor issues --- client/ui/qml/Controls2/Drawer2Type.qml | 45 ++++++++++++++----------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index fcd773a85..988b41722 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -28,15 +28,13 @@ Item { property int contentHeight: 0 property Item contentParent: contentArea - y: parent.height - root.height - state: "closed" Rectangle { id: draw2Background - anchors { left: root.left; right: root.right; top: root.top } - height: root.parent.height + anchors.fill: parent + height: parent.height width: parent.width radius: 16 color: "#90000000" @@ -45,15 +43,14 @@ Item { visible: true MouseArea { - id: fullArea + id: fullMouseArea anchors.fill: parent enabled: (root.state === "opened") hoverEnabled: true onClicked: { if (root.state === "opened") { - draw2Background.color = "transparent" - root.state = "closed" + close() return } } @@ -106,15 +103,17 @@ Item { /** 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 < dragArea.drag.maximumY) { + if (root.state === "closed" && placeAreaHolder.y < root.height * 0.9) { root.state = "opened" return } - if (root.state === "opened" && placeAreaHolder.y > dragArea.drag.minimumY) { + if (root.state === "opened" && placeAreaHolder.y > (root.height - root.height * 0.9)) { close() return } + + placeAreaHolder.y = 0 } onClicked: { @@ -161,15 +160,15 @@ Item { State { name: "closed" PropertyChanges { - target: root + target: placeAreaHolder y: parent.height } }, State { - name: "opend" + name: "opened" PropertyChanges { - target: root + target: placeAreaHolder y: dragArea.drag.minimumY } } @@ -180,7 +179,7 @@ Item { from: "opened" to: "closed" PropertyAnimation { - target: root + target: placeAreaHolder properties: "y" duration: 200 } @@ -190,7 +189,7 @@ Item { from: "closed" to: "opened" PropertyAnimation { - target: root + target: placeAreaHolder properties: "y" duration: 200 } @@ -199,7 +198,7 @@ Item { NumberAnimation { id: animationVisible - target: root + target: placeAreaHolder property: "y" from: parent.height to: 0 @@ -212,21 +211,29 @@ Item { } draw2Background.color = "#90000000" + fullMouseArea.visible = true + dragArea.visible = true + root.y = 0 root.state = "opened" root.visible = true root.height = parent.height + contentArea.height = contentHeight - placeAreaHolder.height = parent.height - contentHeight - placeAreaHolder.y = parent.height - root.height - dragArea.drag.maximumY = parent.height - dragArea.drag.minimumY = parent.height - root.height + placeAreaHolder.height = root.height - contentHeight + placeAreaHolder.y = root.height - root.height + + dragArea.drag.maximumY = root.height + dragArea.drag.minimumY = 0 animationVisible.running = true } function close() { + fullMouseArea.visible = false + dragArea.visible = false + draw2Background.color = "transparent" root.state = "closed" } From c461e00c5c378e5ed6ade5291b2233947a94fe60 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Wed, 18 Oct 2023 16:17:57 +0800 Subject: [PATCH 10/16] keeping parent's cusorshape and Drawer2Type's close-animation --- client/ui/qml/Controls2/Drawer2Type.qml | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index 988b41722..b34390ac7 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -183,6 +183,12 @@ Item { properties: "y" duration: 200 } + + onRunningChanged: { + if (!running) { + visibledMouseArea(false) + } + } }, Transition { @@ -211,8 +217,7 @@ Item { } draw2Background.color = "#90000000" - fullMouseArea.visible = true - dragArea.visible = true + visibledMouseArea(true) root.y = 0 root.state = "opened" @@ -231,9 +236,6 @@ Item { } function close() { - fullMouseArea.visible = false - dragArea.visible = false - draw2Background.color = "transparent" root.state = "closed" } @@ -250,4 +252,9 @@ Item { close() } } + + function visibledMouseArea(visbile) { + fullMouseArea.visible = visbile + dragArea.visible = visbile + } } From 366e27a321050119df3e1c8ca912a5bd113c7497 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 19 Oct 2023 09:27:39 +0800 Subject: [PATCH 11/16] re-adatped pagehome --- client/resources.qrc | 1 - .../ui/qml/Components/HomeRootMenuButton.qml | 140 ---------- client/ui/qml/Controls2/Drawer2Type.qml | 261 +++++++++++++----- client/ui/qml/Pages2/PageHome.qml | 119 ++++++-- client/ui/qml/Pages2/PageStart.qml | 2 +- 5 files changed, 288 insertions(+), 235 deletions(-) delete mode 100644 client/ui/qml/Components/HomeRootMenuButton.qml diff --git a/client/resources.qrc b/client/resources.qrc index ac6e5a6d6..d7f8ff7ad 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -217,6 +217,5 @@ ui/qml/Controls2/TopCloseButtonType.qml images/controls/x-circle.svg ui/qml/Controls2/Drawer2Type.qml - ui/qml/Components/HomeRootMenuButton.qml diff --git a/client/ui/qml/Components/HomeRootMenuButton.qml b/client/ui/qml/Components/HomeRootMenuButton.qml deleted file mode 100644 index b2ca98dc3..000000000 --- a/client/ui/qml/Components/HomeRootMenuButton.qml +++ /dev/null @@ -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() - } - } - } -} diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index b34390ac7..fc486744d 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/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 - height: parent.height - contentHeight + width: parent.radius + height: parent.radius + anchors.bottom: parent.bottom anchors.right: parent.right anchors.left: parent.left - visible: true - color: "transparent" - - Drag.active: dragArea.drag.active + color: parent.color } + MouseArea { + id: dragArea - 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 { - width: parent.radius - height: parent.radius - anchors.bottom: parent.bottom - anchors.right: parent.right - anchors.left: parent.left - color: parent.color - } + anchors.fill: parent + + cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor // ? + hoverEnabled: true - MouseArea { - id: dragArea + drag.target: placeAreaHolder + drag.axis: Drag.YAxis + drag.maximumY: (root.collapsed() || root.expanded()) ? (root.height - collapsedHeight) : root.height + drag.minimumY: (root.collapsed() || root.expanded()) ? (root.height - root.height * 0.9) : (root.height - root.height) - anchors.fill: parent + /** If drag area is released at any point other than min or max y, transition to the other state */ + onReleased: { + if (root.closed() && placeAreaHolder.y < root.height * 0.9) { + root.state = "opened" + return + } + + if (root.opened() && placeAreaHolder.y > (root.height - root.height * 0.9)) { + close() + 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 (root.collapsed() && placeAreaHolder.y < (root.height - collapsedHeight)) { + root.state = "expanded" + return + } - /** 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.expanded() && placeAreaHolder.y > (root.height - root.height * 0.9)) { + root.state = "collapsed" + return + } - if (root.state === "opened" && placeAreaHolder.y > (root.height - root.height * 0.9)) { - close() - return - } + if (root.opened()) { placeAreaHolder.y = 0 } + } + + onClicked: { + if (root.opened()) { + close() + return + } + + if (root.expanded()) { + collapse() + return + } - onClicked: { - if (root.state === "opened") { - close() - 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" } + function collapse() { + draw2Background.color = "transparent" + root.state = "collapsed" + } + + + 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.state === "opened") { + if (root.opened()) { if (needCloseButton) { PageController.drawerClose() } + + close() } - close() - } - } + if (root.expanded()) { + if (needCloseButton) { + PageController.drawerClose() + } - function visibledMouseArea(visbile) { - fullMouseArea.visible = visbile - dragArea.visible = visbile + collapse() + } + } } } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index dafa3bdce..a3a3ed9d0 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/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 + Drawer2Type { + id: buttonContent + visible: true - clickedFunction: function() { - menu.open() - } - } + fullMouseAreaVisible: false - Drawer2Type { - id: menu - parent: root + /** 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() } } } diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 8afad3928..4ccd40d8d 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -247,7 +247,7 @@ PageType { z: 1 - onClosed: { + onDrawerClosed: { tabBar.setCurrentIndex(tabBar.previousIndex) } } From 6ec773079cef7fd8b39711801296f1120bdc0d06 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 19 Oct 2023 11:22:52 +0800 Subject: [PATCH 12/16] added hovering effect of button --- .../qml/Components/ShareConnectionDrawer.qml | 2 +- client/ui/qml/Controls2/Drawer2Type.qml | 32 +++++++++++++------ client/ui/qml/Pages2/PageHome.qml | 25 ++++++++++++++- 3 files changed, 48 insertions(+), 11 deletions(-) diff --git a/client/ui/qml/Components/ShareConnectionDrawer.qml b/client/ui/qml/Components/ShareConnectionDrawer.qml index ae0df0e2a..03e7b500c 100644 --- a/client/ui/qml/Components/ShareConnectionDrawer.qml +++ b/client/ui/qml/Components/ShareConnectionDrawer.qml @@ -31,7 +31,7 @@ Drawer2Type { height: parent.height contentHeight: parent.height * 0.9 - onClosed: { + onDrawerClosed: { configExtension = ".vpn" configCaption = qsTr("Save AmneziaVPN config") configFileName = "amnezia_config" diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index fc486744d..f10fac21f 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -22,6 +22,11 @@ Item { } signal drawerClosed + signal collapsedEntered + signal collapsedExited + signal collapsedEnter + signal collapsedPressChanged + visible: false @@ -41,6 +46,7 @@ Item { property int collapsedHeight: 0 property bool fullMouseAreaVisible: true + property MouseArea drawerDragArea: dragArea state: "closed" @@ -165,6 +171,18 @@ Item { root.state = "expanded" } } + + onExited: { + collapsedExited() + } + + onEntered: { + collapsedEnter() + } + + onPressedChanged: { + collapsedPressChanged() + } } } @@ -306,7 +324,6 @@ Item { } function open() { - //if (root.visible && !root.closed()) { if (root.opened()) { return } @@ -341,6 +358,11 @@ Item { root.state = "collapsed" } + function expand() { + draw2Background.color = "#90000000" + root.state = "expanded" + } + function visibledMouseArea(visbile) { fullMouseArea.visible = visbile @@ -374,14 +396,6 @@ Item { close() } - - if (root.expanded()) { - if (needCloseButton) { - PageController.drawerClose() - } - - collapse() - } } } } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index a3a3ed9d0..13148a806 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -122,7 +122,7 @@ PageType { ColumnLayout { - id: content + id: collapsedButtonContent parent: buttonContent.contentParent @@ -178,6 +178,12 @@ PageType { PropertyAnimation { duration: 200 } } } + + onClicked: { + if (buttonContent.collapsed()) { + buttonContent.expand() + } + } } } @@ -424,5 +430,22 @@ PageType { } } } + + onCollapsedEnter: { + collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor + collapsedButtonHeader.opacity = 0.8 + } + + onCollapsedExited: { + collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor + collapsedButtonHeader.opacity = 1 + } + + onCollapsedPressChanged: { + collapsedButtonChevron.backgroundColor = buttonContent.drawerDragArea.pressed ? + collapsedButtonChevron.pressedColor : buttonContent.drawerDragArea.entered ? + collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor + collapsedButtonHeader.opacity = 0.7 + } } } From f7bed04ab217baad98a72854c57578592718a812 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 19 Oct 2023 19:32:15 +0800 Subject: [PATCH 13/16] removed invalid function code --- client/ui/qml/Controls2/Drawer2Type.qml | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index f10fac21f..fd6406ee5 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -34,6 +34,7 @@ Item { property string defaultColor: "#1C1D21" property string borderColor: "#2C2D30" + property string semitransparentColor: "#90000000" property bool needCollapsed: false @@ -57,7 +58,7 @@ Item { height: parent.height width: parent.width radius: 16 - color: "transparent" //"#90000000" + color: "transparent" border.color: "transparent" border.width: 1 visible: true @@ -264,7 +265,7 @@ Item { onRunningChanged: { if (!running) { - visibledMouseArea(false) + fullMouseArea.visible = false } } }, @@ -307,8 +308,8 @@ Item { onRunningChanged: { if (!running) { - draw2Background.color = "#90000000" - visibledMouseArea(true) + draw2Background.color = semitransparentColor + fullMouseArea.visible = true } } } @@ -328,9 +329,8 @@ Item { return } - draw2Background.color = "#90000000" - - visibledMouseArea(true) + draw2Background.color = semitransparentColor + fullMouseArea.visible = true root.y = 0 root.state = "opened" @@ -359,16 +359,10 @@ Item { } function expand() { - draw2Background.color = "#90000000" + draw2Background.color = semitransparentColor root.state = "expanded" } - - function visibledMouseArea(visbile) { - fullMouseArea.visible = visbile - dragArea.visible = visbile - } - function opened() { return root.state === "opened" ? true : false } From a6949bd3aefeb3e90852d85be5a5028d0aff4b50 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 19 Oct 2023 19:45:22 +0800 Subject: [PATCH 14/16] resized questiondrawer of page serverdata --- client/ui/qml/Pages2/PageSettingsServerData.qml | 6 ++++-- client/ui/qml/Pages2/PageSettingsServerInfo.qml | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/ui/qml/Pages2/PageSettingsServerData.qml b/client/ui/qml/Pages2/PageSettingsServerData.qml index 2e401c672..09066ccb3 100644 --- a/client/ui/qml/Pages2/PageSettingsServerData.qml +++ b/client/ui/qml/Pages2/PageSettingsServerData.qml @@ -14,6 +14,8 @@ import "../Components" PageType { id: root + property Item questionDrawerParent + Connections { target: InstallController @@ -193,9 +195,9 @@ PageType { QuestionDrawer { id: questionDrawer - drawerHeight: 0.8 + drawerHeight: 0.5 - parent: root + parent: questionDrawerParent } } } diff --git a/client/ui/qml/Pages2/PageSettingsServerInfo.qml b/client/ui/qml/Pages2/PageSettingsServerInfo.qml index f6d569dd3..e14c6ab58 100644 --- a/client/ui/qml/Pages2/PageSettingsServerInfo.qml +++ b/client/ui/qml/Pages2/PageSettingsServerInfo.qml @@ -169,6 +169,7 @@ PageType { } PageSettingsServerData { stackView: root.stackView + questionDrawerParent: root } } } From 6c78b4ec8f8bad64ee2f936096dd421c47192af6 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 19 Oct 2023 23:01:03 +0800 Subject: [PATCH 15/16] enabled drag-pagehome-drawer in tabBar --- client/ui/qml/Pages2/PageStart.qml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 4ccd40d8d..12c83e061 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -176,6 +176,12 @@ PageType { strokeColor: "#2C2D30" fillColor: "#1C1D21" } + + MouseArea { + id: noPropagateMouseEvent + anchors.fill: parent + enabled: true + } } TabImageButtonType { From 0a15f44193fb7be45dd57e3a19babfb295175a95 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Fri, 20 Oct 2023 10:38:12 +0800 Subject: [PATCH 16/16] removed states 'opened', 'closed' --- client/ui/qml/Controls2/Drawer2Type.qml | 131 +++++------------------- 1 file changed, 25 insertions(+), 106 deletions(-) diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml index fd6406ee5..fa393982f 100644 --- a/client/ui/qml/Controls2/Drawer2Type.qml +++ b/client/ui/qml/Controls2/Drawer2Type.qml @@ -10,11 +10,6 @@ Item { target: PageController function onForceCloseDrawer() { - if (root.opened()) { - close() - return - } - if (root.expanded()) { collapse() } @@ -43,13 +38,12 @@ Item { property bool dragActive: dragArea.drag.active - /** Initial height of button content */ property int collapsedHeight: 0 property bool fullMouseAreaVisible: true property MouseArea drawerDragArea: dragArea - state: "closed" + state: "collapsed" Rectangle { id: draw2Background @@ -66,16 +60,11 @@ Item { MouseArea { id: fullMouseArea anchors.fill: parent - enabled: (root.opened() || root.expanded()) + enabled: root.expanded() hoverEnabled: true visible: fullMouseAreaVisible onClicked: { - if (root.opened()) { - close() - return - } - if (root.expanded()) { collapse() } @@ -84,7 +73,10 @@ Item { Rectangle { id: placeAreaHolder - height: (!root.opened()) ? 0 : parent.height - contentHeight + + // for apdating home drawer, normal drawer will reset it + height: 0 + anchors.right: parent.right anchors.left: parent.left visible: true @@ -120,49 +112,27 @@ Item { anchors.fill: parent - cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor // ? + cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor hoverEnabled: true drag.target: placeAreaHolder drag.axis: Drag.YAxis - drag.maximumY: (root.collapsed() || root.expanded()) ? (root.height - collapsedHeight) : root.height - drag.minimumY: (root.collapsed() || root.expanded()) ? (root.height - root.height * 0.9) : (root.height - root.height) + drag.maximumY: root.height - root.collapsedHeight + drag.minimumY: root.collapsedHeight > 0 ? root.height - root.height * 0.9 : 0 /** If drag area is released at any point other than min or max y, transition to the other state */ onReleased: { - if (root.closed() && placeAreaHolder.y < root.height * 0.9) { - root.state = "opened" - return - } - - if (root.opened() && placeAreaHolder.y > (root.height - root.height * 0.9)) { - close() - return - } - - - if (root.collapsed() && placeAreaHolder.y < (root.height - collapsedHeight)) { + if (root.collapsed() && placeAreaHolder.y < drag.maximumY) { root.state = "expanded" return } - - if (root.expanded() && placeAreaHolder.y > (root.height - root.height * 0.9)) { + if (root.expanded() && placeAreaHolder.y > drag.minimumY) { root.state = "collapsed" return } - - - if (root.opened()) { - placeAreaHolder.y = 0 - } } onClicked: { - if (root.opened()) { - close() - return - } - if (root.expanded()) { collapse() return @@ -186,11 +156,10 @@ Item { } } } - } onStateChanged: { - if (root.closed() || root.collapsed()) { + if (root.collapsed()) { var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() if (initialPageNavigationBarColor !== 0xFF1C1D21) { PageController.updateNavigationBarColor(initialPageNavigationBarColor) @@ -205,7 +174,7 @@ Item { return } - if (root.opened() || root.expanded()) { + if (root.expanded()) { if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { PageController.updateNavigationBarColor(0xFF1C1D21) } @@ -220,27 +189,11 @@ Item { /** Two states of buttonContent, great place to add any future animations for the drawer */ states: [ - State { - name: "closed" - PropertyChanges { - target: placeAreaHolder - y: root.height - } - }, - - State { - name: "opened" - PropertyChanges { - target: placeAreaHolder - y: dragArea.drag.minimumY - } - }, - State { name: "collapsed" PropertyChanges { target: placeAreaHolder - y: root.height - collapsedHeight + y: dragArea.drag.maximumY } }, @@ -248,38 +201,12 @@ Item { name: "expanded" PropertyChanges { target: placeAreaHolder - y: root.height - root.height * 0.9 + y: dragArea.drag.minimumY } } ] transitions: [ - Transition { - from: "opened" - to: "closed" - PropertyAnimation { - target: placeAreaHolder - properties: "y" - duration: 200 - } - - onRunningChanged: { - if (!running) { - fullMouseArea.visible = false - } - } - }, - - Transition { - from: "closed" - to: "opened" - PropertyAnimation { - target: placeAreaHolder - properties: "y" - duration: 200 - } - }, - Transition { from: "expanded" to: "collapsed" @@ -324,33 +251,32 @@ Item { duration: 200 } + // for normal drawer function open() { - if (root.opened()) { + if (root.expanded()) { return } draw2Background.color = semitransparentColor fullMouseArea.visible = true + collapsedHeight = 0 + root.y = 0 - root.state = "opened" + root.state = "expanded" root.visible = true root.height = parent.height contentArea.height = contentHeight - placeAreaHolder.height = root.height - contentHeight - placeAreaHolder.y = root.height - root.height - - dragArea.drag.maximumY = root.height - dragArea.drag.minimumY = 0 + placeAreaHolder.y = 0 + placeAreaHolder.height = root.height - contentHeight animationVisible.running = true } function close() { - draw2Background.color = "transparent" - root.state = "closed" + collapse() } function collapse() { @@ -358,23 +284,16 @@ Item { root.state = "collapsed" } + // for page home function expand() { draw2Background.color = semitransparentColor root.state = "expanded" } - 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 } @@ -383,7 +302,7 @@ Item { onVisibleChanged: { // e.g cancel, ...... if (!visible) { - if (root.opened()) { + if (root.expanded()) { if (needCloseButton) { PageController.drawerClose() }