diff options
Diffstat (limited to 'modules/lock/LockSurface.qml')
| -rw-r--r-- | modules/lock/LockSurface.qml | 292 |
1 files changed, 166 insertions, 126 deletions
diff --git a/modules/lock/LockSurface.qml b/modules/lock/LockSurface.qml index ed6895b..88bd1af 100644 --- a/modules/lock/LockSurface.qml +++ b/modules/lock/LockSurface.qml @@ -1,5 +1,7 @@ pragma ComponentBehavior: Bound +import qs.components +import qs.components.effects import qs.services import qs.config import Quickshell.Wayland @@ -10,31 +12,144 @@ WlSessionLockSurface { id: root required property WlSessionLock lock + required property Pam pam - property bool thisLocked - readonly property bool locked: thisLocked && !lock.unlocked + property bool locked - function unlock(): void { - lock.unlocked = true; - animDelay.start(); - } - - Component.onCompleted: thisLocked = true + Component.onCompleted: locked = true color: "transparent" - Timer { - id: animDelay + Connections { + target: root.lock - interval: Appearance.anim.durations.large - onTriggered: root.lock.locked = false + function onUnlock(): void { + root.locked = false; + unlockAnim.start(); + } } - Connections { - target: root.lock + SequentialAnimation { + id: unlockAnim + + ParallelAnimation { + Anim { + target: lockBg + properties: "implicitWidth,implicitHeight" + to: lockBg.size + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + Anim { + target: lockBg + property: "radius" + to: lockBg.size / 4 + } + Anim { + target: content + property: "opacity" + to: 0 + duration: Appearance.anim.durations.small + } + Anim { + target: lockIcon + property: "opacity" + to: 1 + } + Anim { + target: background + property: "opacity" + to: 0 + duration: Appearance.anim.durations.large + } + SequentialAnimation { + PauseAnimation { + duration: Appearance.anim.durations.small + } + Anim { + target: lockBg + property: "opacity" + to: 0 + } + } + } + PropertyAction { + target: root.lock + property: "locked" + value: false + } + } + + ParallelAnimation { + running: true - function onUnlockedChanged(): void { - background.opacity = 0; + Anim { + target: background + property: "opacity" + to: 1 + duration: Appearance.anim.durations.large + } + SequentialAnimation { + ParallelAnimation { + Anim { + target: lockBg + property: "scale" + to: 1 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + } + Anim { + target: lockBg + property: "rotation" + to: 360 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.standardAccel + } + } + ParallelAnimation { + Anim { + target: lockIcon + property: "rotation" + to: 360 + easing.bezierCurve: Appearance.anim.curves.standardDecel + } + Anim { + target: lockIcon + property: "opacity" + to: 0 + } + Anim { + target: content + property: "opacity" + to: 1 + } + Anim { + target: content + property: "centerScale" + to: 1 + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + Anim { + target: lockBg + property: "radius" + to: Appearance.rounding.large * 1.5 + } + Anim { + target: lockBg + property: "implicitWidth" + to: root.screen.height * Config.lock.sizes.heightMult * Config.lock.sizes.ratio + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + Anim { + target: lockBg + property: "implicitHeight" + to: root.screen.height * Config.lock.sizes.heightMult + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + } } } @@ -43,138 +158,63 @@ WlSessionLockSurface { anchors.fill: parent captureSource: root.screen + opacity: 0 layer.enabled: true layer.effect: MultiEffect { + id: backgroundBlur + autoPaddingEnabled: false blurEnabled: true - blur: root.locked ? 1 : 0 + blur: 1 blurMax: 64 blurMultiplier: 1 - - Behavior on blur { - Anim {} - } - } - - Behavior on opacity { - Anim {} } } - Backgrounds { - id: backgrounds - - locked: root.locked - weatherWidth: weather.implicitWidth - buttonsWidth: buttons.item?.nonAnimWidth ?? 0 - buttonsHeight: buttons.item?.nonAnimHeight ?? 0 - statusWidth: status.nonAnimWidth ?? 0 - statusHeight: status.nonAnimHeight ?? 0 - isNormal: root.screen.width > Config.lock.sizes.smallScreenWidth - isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth - - layer.enabled: true - layer.effect: MultiEffect { - shadowEnabled: true - blurMax: 15 - shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7) - } - } - - Clock { - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.top - anchors.bottomMargin: -backgrounds.clockBottom - } - - Input { - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.bottom - anchors.topMargin: -backgrounds.inputTop - - lock: root - } - - WeatherInfo { - id: weather - - anchors.top: parent.bottom - anchors.right: parent.left - anchors.topMargin: -backgrounds.weatherTop - anchors.rightMargin: -backgrounds.weatherRight - } + StyledRect { + id: lockBg - Loader { - id: media + readonly property int size: lockIcon.implicitHeight + Appearance.padding.large * 4 - active: root.screen.width > Config.lock.sizes.smallScreenWidth - asynchronous: true + anchors.centerIn: parent + implicitWidth: size + implicitHeight: size - state: root.screen.width > Config.lock.sizes.largeScreenWidth ? "tl" : "br" - states: [ - State { - name: "tl" + clip: true + color: Colours.tPalette.m3surface + radius: size / 4 + rotation: 180 + scale: 0 - AnchorChanges { - target: media - anchors.bottom: media.parent.top - anchors.right: media.parent.left - } - - PropertyChanges { - media.anchors.bottomMargin: -backgrounds.mediaY - media.anchors.rightMargin: -backgrounds.mediaX - } - }, - State { - name: "br" - - AnchorChanges { - target: media - anchors.top: media.parent.bottom - anchors.left: media.parent.right - } - - PropertyChanges { - media.anchors.topMargin: -backgrounds.mediaY - media.anchors.leftMargin: -backgrounds.mediaX - } - } - ] - - sourceComponent: MediaPlaying { - isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth + Elevation { + anchors.fill: parent + radius: parent.radius + z: -1 + level: 3 + offset.y: 0 } - } - - Loader { - id: buttons - - active: root.screen.width > Config.lock.sizes.largeScreenWidth - asynchronous: true - anchors.top: parent.bottom - anchors.left: parent.right - anchors.topMargin: -backgrounds.buttonsTop - anchors.leftMargin: -backgrounds.buttonsLeft + MaterialIcon { + id: lockIcon - sourceComponent: Buttons {} - } - - Status { - id: status + anchors.centerIn: parent + text: "lock" + font.pointSize: Appearance.font.size.extraLarge * 4 + font.bold: true + rotation: 180 + } - anchors.bottom: parent.top - anchors.left: parent.right - anchors.bottomMargin: -backgrounds.statusBottom - anchors.leftMargin: -backgrounds.statusLeft + Content { + id: content - showNotifs: root.screen.width > Config.lock.sizes.largeScreenWidth + lock: root + opacity: 0 + } } component Anim: NumberAnimation { - duration: Appearance.anim.durations.large + duration: Appearance.anim.durations.normal easing.type: Easing.BezierSpline easing.bezierCurve: Appearance.anim.curves.standard } |