From 7ecb92d3dde8bad74159f3953e745b63b32133ed Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Thu, 26 May 2022 18:11:01 -0400 Subject: [PATCH] actiondrawer: Improve openToPinnedMode to have drawer already maximized when dragging --- .../qml/actiondrawer/ActionDrawer.qml | 32 ++++++++++++------- .../actiondrawer/PortraitContentContainer.qml | 24 +++++++++++--- 2 files changed, 41 insertions(+), 15 deletions(-) diff --git a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml index 675806d7..1ed2863e 100644 --- a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml +++ b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml @@ -115,10 +115,6 @@ Item { offset = 0; } - if (offset >= contentContainerLoader.minimizedQuickSettingsOffset && !openToPinnedMode) { - root.opened = true; - } - root.direction = (oldOffset === offset) ? MobileShell.Direction.None : (offset > oldOffset ? MobileShell.Direction.Down : MobileShell.Direction.Up); @@ -136,23 +132,32 @@ Item { closeAnim.stop(); openAnim.stop(); } + function open() { cancelAnimations(); - openAnim.restart(); + if (openToPinnedMode) { + openAnim.restart(); // go to pinned height + } else { + expandAnim.restart(); // go to maximized height + } } + function closeImmediately() { cancelAnimations(); offset = 0; closeAnim.finished(); } + function close() { cancelAnimations(); closeAnim.restart(); } + function expand() { cancelAnimations(); expandAnim.restart(); } + function updateState() { cancelAnimations(); let openThreshold = PlasmaCore.Units.gridUnit; @@ -162,22 +167,27 @@ Item { root.visible = false; close(); } else if (root.direction === MobileShell.Direction.None || !root.opened) { - if (root.offset < openThreshold) { - close(); - } else { - open(); - } + + // if the panel has not been opened yet, run open animation only if drag passed threshold + (root.offset < openThreshold) ? close() : open(); + } else if (root.offset > contentContainerLoader.maximizedQuickSettingsOffset) { + // if drag has gone past the fully expanded view expand(); } else if (root.offset > contentContainerLoader.minimizedQuickSettingsOffset) { + // if drag is between pinned view and fully expanded view if (root.direction === MobileShell.Direction.Down) { expand(); } else { - open(); + // go back to pinned, or close if pinned mode is disabled + openToPinnedMode ? open() : close(); } + } else if (root.direction === MobileShell.Direction.Down) { + // if drag is between pinned view and open view, and dragging down open(); } else { + // if drag is between pinned view and open view, and dragging up close(); } } diff --git a/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml b/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml index 87029325..6ddd5a8e 100644 --- a/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml +++ b/components/mobileshell/qml/actiondrawer/PortraitContentContainer.qml @@ -24,7 +24,10 @@ PlasmaCore.ColorScope { required property var actionDrawer + // pinned position (disabled when openToPinnedMode is false) readonly property real minimizedQuickSettingsOffset: quickSettings.minimizedHeight + + // fully open position readonly property real maximizedQuickSettingsOffset: minimizedQuickSettingsOffset + quickSettings.maxAddedHeight colorGroup: PlasmaCore.Theme.ViewColorGroup @@ -54,25 +57,38 @@ PlasmaCore.ColorScope { actionDrawer: root.actionDrawer - // opacity and move animation + // opacity and move animation (disabled when openToPinnedMode is false) property real offsetDist: actionDrawer.offset - minimizedQuickSettingsOffset property real totalOffsetDist: maximizedQuickSettingsOffset - minimizedQuickSettingsOffset - minimizedToFullProgress: actionDrawer.opened ? applyMinMax(offsetDist / totalOffsetDist) : 0 + minimizedToFullProgress: actionDrawer.openToPinnedMode ? (actionDrawer.opened ? applyMinMax(offsetDist / totalOffsetDist) : 0) : 1 + // this drawer opens in two stages when pinned mode is enabled: + // --- + // stage 1: the transform effect is used, the drawer physically moves down to the pinned mode + // stage 2: the rectangle increases height to reveal content, but the content stays still + // when pinned mode is disabled, only stage 1 happens + + // increase height of drawer when between pinned mode <-> maximized mode addedHeight: { - if (!actionDrawer.opened) { + if (!actionDrawer.openToPinnedMode) { + // if pinned mode disabled, just go to full height + return quickSettings.maxAddedHeight; + } else if (!actionDrawer.opened) { // over-scroll effect for initial opening let progress = (root.actionDrawer.offset - minimizedQuickSettingsOffset) / quickSettings.maxAddedHeight; let effectProgress = Math.atan(Math.max(0, progress)); return quickSettings.maxAddedHeight * 0.25 * effectProgress; } else { + // as the drawer opens, add height to the rectangle, revealing content return Math.max(0, Math.min(quickSettings.maxAddedHeight, root.actionDrawer.offset - minimizedQuickSettingsOffset)); } } + // physically move the drawer when between closed <-> pinned mode transform: Translate { id: translate - y: Math.min(root.actionDrawer.offset - minimizedQuickSettingsOffset, 0) + readonly property real offsetHeight: actionDrawer.openToPinnedMode ? minimizedQuickSettingsOffset : maximizedQuickSettingsOffset + y: Math.min(root.actionDrawer.offset - offsetHeight, 0) } }