diff options
Diffstat (limited to 'modules/lock/LockSurface.qml')
| -rw-r--r-- | modules/lock/LockSurface.qml | 242 |
1 files changed, 118 insertions, 124 deletions
diff --git a/modules/lock/LockSurface.qml b/modules/lock/LockSurface.qml index ed6895b..7e3f593 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 @@ -11,170 +13,162 @@ WlSessionLockSurface { required property WlSessionLock lock - 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 - - interval: Appearance.anim.durations.large - onTriggered: root.lock.locked = false - } - Connections { target: root.lock - function onUnlockedChanged(): void { - background.opacity = 0; + function onUnlock(): void { + root.locked = false; + unlockAnim.start(); } } - ScreencopyView { - id: background - - anchors.fill: parent - captureSource: root.screen - - layer.enabled: true - layer.effect: MultiEffect { - autoPaddingEnabled: false - blurEnabled: true - blur: root.locked ? 1 : 0 - blurMax: 64 - blurMultiplier: 1 + SequentialAnimation { + id: unlockAnim - Behavior on blur { - Anim {} + ParallelAnimation { + Anim { + target: lockBg + properties: "implicitWidth,implicitHeight" + to: lockBg.size + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + } + Anim { + target: lockBg + property: "radius" + to: lockBg.size / 4 + } + Anim { + targets: [background, lockBg] + property: "opacity" + to: 0 } } - - Behavior on opacity { - Anim {} + PropertyAction { + target: root.lock + property: "locked" + value: false } } - 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 + ParallelAnimation { + running: true - layer.enabled: true - layer.effect: MultiEffect { - shadowEnabled: true - blurMax: 15 - shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7) + Anim { + target: background + property: "opacity" + to: 1 + duration: Appearance.anim.durations.large } - } - - 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 - } - - Loader { - id: media - - active: root.screen.width > Config.lock.sizes.smallScreenWidth - asynchronous: true - - state: root.screen.width > Config.lock.sizes.largeScreenWidth ? "tl" : "br" - states: [ - State { - name: "tl" - - AnchorChanges { - target: media - anchors.bottom: media.parent.top - anchors.right: media.parent.left + SequentialAnimation { + ParallelAnimation { + Anim { + target: lockBg + property: "scale" + to: 1 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } - - PropertyChanges { - media.anchors.bottomMargin: -backgrounds.mediaY - media.anchors.rightMargin: -backgrounds.mediaX + Anim { + target: lockBg + property: "rotation" + to: 180 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.standardAccel } - }, - State { - name: "br" - - AnchorChanges { - target: media - anchors.top: media.parent.bottom - anchors.left: media.parent.right + } + ParallelAnimation { + Anim { + target: lockIcon + property: "rotation" + to: 180 + easing.bezierCurve: Appearance.anim.curves.standardDecel } - - PropertyChanges { - media.anchors.topMargin: -backgrounds.mediaY - media.anchors.leftMargin: -backgrounds.mediaX + Anim { + target: lockBg + property: "radius" + to: Appearance.rounding.large + } + Anim { + target: lockBg + property: "implicitWidth" + to: root.width * 0.8 + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + Anim { + target: lockBg + property: "implicitHeight" + to: root.height * 0.8 + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - ] - - sourceComponent: MediaPlaying { - isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth } } - Loader { - id: buttons + ScreencopyView { + id: background - active: root.screen.width > Config.lock.sizes.largeScreenWidth - asynchronous: true + anchors.fill: parent + captureSource: root.screen + opacity: 0 - anchors.top: parent.bottom - anchors.left: parent.right - anchors.topMargin: -backgrounds.buttonsTop - anchors.leftMargin: -backgrounds.buttonsLeft + layer.enabled: true + layer.effect: MultiEffect { + id: backgroundBlur - sourceComponent: Buttons {} + autoPaddingEnabled: false + blurEnabled: true + blur: 1 + blurMax: 64 + blurMultiplier: 1 + } } - Status { - id: status + StyledRect { + id: lockBg + + readonly property int size: lockIcon.implicitHeight + Appearance.padding.large * 4 - anchors.bottom: parent.top - anchors.left: parent.right - anchors.bottomMargin: -backgrounds.statusBottom - anchors.leftMargin: -backgrounds.statusLeft + anchors.centerIn: parent + implicitWidth: size + implicitHeight: size - showNotifs: root.screen.width > Config.lock.sizes.largeScreenWidth + color: Colours.tPalette.m3surface + radius: size / 4 + scale: 0 + + Elevation { + anchors.fill: parent + radius: parent.radius + z: -1 + level: 3 + offset.y: 0 + } + + MaterialIcon { + id: lockIcon + + anchors.centerIn: parent + text: "lock" + font.pointSize: Appearance.font.size.extraLarge * 4 + font.bold: true + } } component Anim: NumberAnimation { - duration: Appearance.anim.durations.large + duration: Appearance.anim.durations.normal easing.type: Easing.BezierSpline easing.bezierCurve: Appearance.anim.curves.standard } |