From f949ea7fdfe819a5aad40efd93daa7a40fa44745 Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Fri, 29 Sep 2023 22:57:58 -0700 Subject: [PATCH] lockscreen: Port from Flickable to SwipeArea --- .../contents/lockscreen/FlickContainer.qml | 44 +--- .../contents/lockscreen/LockScreen.qml | 206 +++++++++--------- 2 files changed, 107 insertions(+), 143 deletions(-) diff --git a/lookandfeel/contents/lockscreen/FlickContainer.qml b/lookandfeel/contents/lockscreen/FlickContainer.qml index 521c6ec8..a58d6432 100644 --- a/lookandfeel/contents/lockscreen/FlickContainer.qml +++ b/lookandfeel/contents/lockscreen/FlickContainer.qml @@ -5,8 +5,9 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.20 as Kirigami +import org.kde.plasma.private.mobileshell as MobileShell -Flickable { +MobileShell.SwipeArea { id: root property int position: 0 @@ -52,14 +53,6 @@ Flickable { } } - // we use flickable solely for capturing flicks, not positioning elements - contentWidth: width - contentHeight: height * 2 - contentX: 0 - contentY: startContentY - - readonly property real startContentY: contentHeight / 2 - property int oldPosition: position property bool movingUp: false @@ -68,38 +61,15 @@ Flickable { oldPosition = position; } - // update position from flickable movement - property real oldContentY - onContentYChanged: { - position = Math.max(0, Math.min(keypadHeight, position + (contentY - oldContentY))); - oldContentY = contentY; - } - - onMovementStarted: cancelAnimations(); - onMovementEnded: { + onSwipeStarted: cancelAnimations(); + onSwipeEnded: { if (!positionAnim.running) { updateState(); } - resetPosition(); } - - onFlickStarted: root.cancelFlick() - onFlickEnded: resetPosition(); - - onDraggingChanged: { - if (!dragging) { - resetPosition(); - if (!positionAnim.running) { - root.updateState(); - } - } else { - cancelAnimations(); - } - } - - function resetPosition() { - oldContentY = startContentY; - contentY = startContentY; + + onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => { + position = Math.max(0, Math.min(keypadHeight, position + deltaY)); } } diff --git a/lookandfeel/contents/lockscreen/LockScreen.qml b/lookandfeel/contents/lockscreen/LockScreen.qml index ab875ac6..9c391927 100644 --- a/lookandfeel/contents/lockscreen/LockScreen.qml +++ b/lookandfeel/contents/lockscreen/LockScreen.qml @@ -108,131 +108,125 @@ Item { } } - Item { - width: flickable.width - height: flickable.height - y: flickable.contentY // effectively anchored to the screen + LockScreenNarrowContent { + id: phoneComponent - LockScreenNarrowContent { - id: phoneComponent + visible: !isWidescreen + active: visible + opacity: 1 - flickable.openFactor - visible: !isWidescreen - active: visible + fullHeight: root.height + + lockScreenState: root.lockScreenState + notificationsModel: root.notifModel + onNotificationsShownChanged: root.notificationsShown = notificationsShown + + onPasswordRequested: flickable.goToOpenPosition() + + anchors.top: parent.top + anchors.bottom: scrollUpIconLoader.top + anchors.left: parent.left + anchors.right: parent.right + + // move while swiping up + transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) } + } + + LockScreenWideScreenContent { + id: tabletComponent + + visible: isWidescreen + active: visible + opacity: 1 - flickable.openFactor + + lockScreenState: root.lockScreenState + notificationsModel: root.notifModel + onNotificationsShownChanged: root.notificationsShown = notificationsShown + + onPasswordRequested: flickable.goToOpenPosition() + + anchors.topMargin: headerBarLoader.statusBarHeight + anchors.top: parent.top + anchors.bottom: scrollUpIconLoader.top + anchors.left: parent.left + anchors.right: parent.right + + // move while swiping up + transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) } + } + + // scroll up icon + Loader { + id: scrollUpIconLoader + asynchronous: true + + anchors.bottom: parent.bottom + anchors.bottomMargin: Kirigami.Units.gridUnit + flickable.position * 0.5 + anchors.horizontalCenter: parent.horizontalCenter + + sourceComponent: Kirigami.Icon { + id: scrollUpIcon + implicitWidth: Kirigami.Units.iconSizes.smallMedium + implicitHeight: Kirigami.Units.iconSizes.smallMedium opacity: 1 - flickable.openFactor - fullHeight: root.height - - lockScreenState: root.lockScreenState - notificationsModel: root.notifModel - onNotificationsShownChanged: root.notificationsShown = notificationsShown - - onPasswordRequested: flickable.goToOpenPosition() - - anchors.top: parent.top - anchors.bottom: scrollUpIconLoader.top - anchors.left: parent.left - anchors.right: parent.right - - // move while swiping up - transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) } + Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup + source: "arrow-up" } + } - LockScreenWideScreenContent { - id: tabletComponent + // password keypad + Loader { + id: keypadLoader + width: parent.width + asynchronous: true + active: !root.lockScreenState.passwordless // only load keypad if not passwordless - visible: isWidescreen - active: visible - opacity: 1 - flickable.openFactor + anchors.bottom: parent.bottom - lockScreenState: root.lockScreenState - notificationsModel: root.notifModel - onNotificationsShownChanged: root.notificationsShown = notificationsShown + sourceComponent: ColumnLayout { + property alias passwordBar: keypad.passwordBar - onPasswordRequested: flickable.goToOpenPosition() + transform: Translate { y: flickable.keypadHeight - flickable.position } + spacing: 0 - anchors.topMargin: headerBarLoader.statusBarHeight - anchors.top: parent.top - anchors.bottom: scrollUpIconLoader.top - anchors.left: parent.left - anchors.right: parent.right + // info notification text + Label { + Layout.fillWidth: true + Layout.rightMargin: Kirigami.Units.gridUnit + Layout.leftMargin: Kirigami.Units.gridUnit + Layout.bottomMargin: Kirigami.Units.smallSpacing * 2 + font.pointSize: 9 - // move while swiping up - transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) } - } + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + text: root.lockScreenState.info + opacity: (root.lockScreenState.info.length === 0 || flickable.openFactor < 1) ? 0 : 1 + color: 'white' - // scroll up icon - Loader { - id: scrollUpIconLoader - asynchronous: true + Behavior on opacity { + NumberAnimation { duration: 200 } + } + } - anchors.bottom: parent.bottom - anchors.bottomMargin: Kirigami.Units.gridUnit + flickable.position * 0.5 - anchors.horizontalCenter: parent.horizontalCenter - - sourceComponent: Kirigami.Icon { - id: scrollUpIcon + // scroll down icon + Kirigami.Icon { + Layout.alignment: Qt.AlignHCenter + Layout.bottomMargin: Kirigami.Units.gridUnit implicitWidth: Kirigami.Units.iconSizes.smallMedium implicitHeight: Kirigami.Units.iconSizes.smallMedium - opacity: 1 - flickable.openFactor - Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup - source: "arrow-up" + source: "arrow-down" + opacity: Math.sin((Math.PI / 2) * flickable.openFactor + 1.5 * Math.PI) + 1 } - } - // password keypad - Loader { - id: keypadLoader - width: parent.width - asynchronous: true - active: !root.lockScreenState.passwordless // only load keypad if not passwordless + Keypad { + id: keypad + Layout.fillWidth: true + focus: true - anchors.bottom: parent.bottom - - sourceComponent: ColumnLayout { - property alias passwordBar: keypad.passwordBar - - transform: Translate { y: flickable.keypadHeight - flickable.position } - spacing: 0 - - // info notification text - Label { - Layout.fillWidth: true - Layout.rightMargin: Kirigami.Units.gridUnit - Layout.leftMargin: Kirigami.Units.gridUnit - Layout.bottomMargin: Kirigami.Units.smallSpacing * 2 - font.pointSize: 9 - - elide: Text.ElideRight - horizontalAlignment: Text.AlignHCenter - text: root.lockScreenState.info - opacity: (root.lockScreenState.info.length === 0 || flickable.openFactor < 1) ? 0 : 1 - color: 'white' - - Behavior on opacity { - NumberAnimation { duration: 200 } - } - } - - // scroll down icon - Kirigami.Icon { - Layout.alignment: Qt.AlignHCenter - Layout.bottomMargin: Kirigami.Units.gridUnit - implicitWidth: Kirigami.Units.iconSizes.smallMedium - implicitHeight: Kirigami.Units.iconSizes.smallMedium - Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup - source: "arrow-down" - opacity: Math.sin((Math.PI / 2) * flickable.openFactor + 1.5 * Math.PI) + 1 - } - - Keypad { - id: keypad - Layout.fillWidth: true - focus: true - - lockScreenState: root.lockScreenState - swipeProgress: flickable.openFactor - } + lockScreenState: root.lockScreenState + swipeProgress: flickable.openFactor } } }