diff --git a/Modules/Lock/LockSurface.qml b/Modules/Lock/LockSurface.qml index 6b578f1..da9e17a 100644 --- a/Modules/Lock/LockSurface.qml +++ b/Modules/Lock/LockSurface.qml @@ -17,9 +17,24 @@ WlSessionLockSurface { required property WlSessionLock lock required property Pam pam + property string buffer color: "transparent" + Connections { + target: root.pam + + function onBufferChanged(): void { + if (root.pam.buffer.length > root.buffer.length) { + charList.bindImWidth(); + } else if (root.pam.buffer.length === 0) { + charList.implicitWidth = charList.implicitWidth; + } + + root.buffer = root.pam.buffer; + } + } + TextInput { id: hiddenInput focus: true @@ -65,15 +80,12 @@ WlSessionLockSurface { id: contentBox anchors.centerIn: parent - // Material Design 3: Use surfaceContainer for elevated surfaces color: DynamicColors.tPalette.m3surfaceContainer radius: 28 - // M3 spacing: 24px horizontal, 32px vertical padding implicitWidth: Math.floor(childrenRect.width + 48) implicitHeight: Math.floor(childrenRect.height + 64) - // M3 Elevation 2 shadow effect layer.enabled: true layer.effect: MultiEffect { source: contentBox @@ -92,21 +104,12 @@ WlSessionLockSurface { width: childrenRect.width spacing: 0 - // Title: M3 Display Small (32sp, 400 weight) - Text { - id: titleText + LockTime { Layout.alignment: Qt.AlignHCenter Layout.bottomMargin: 8 - - text: "Session Locked" - font.pixelSize: 32 - font.weight: Font.Normal - font.letterSpacing: 0.5 - color: DynamicColors.palette.m3onSurface } - // Support text: M3 Body Medium (14sp, 500 weight) - Text { + CustomText { id: supportText Layout.alignment: Qt.AlignHCenter Layout.bottomMargin: 24 @@ -117,7 +120,6 @@ WlSessionLockSurface { color: DynamicColors.palette.m3onSurfaceVariant } - // Input field container Rectangle { id: inputContainer Layout.alignment: Qt.AlignHCenter @@ -137,6 +139,8 @@ WlSessionLockSurface { return DynamicColors.palette.m3outline; } + clip: true + Behavior on border.color { ColorAnimation { duration: 150 } } @@ -144,7 +148,7 @@ WlSessionLockSurface { ListView { id: charList - readonly property int fullWidth: count * (implicitHeight + spacing) - spacing + readonly property int fullWidth: count * (implicitHeight + spacing) function bindImWidth(): void { imWidthBehavior.enabled = false; @@ -153,7 +157,7 @@ WlSessionLockSurface { } anchors.centerIn: parent - anchors.horizontalCenterOffset: implicitWidth > root.width ? -(implicitWidth - root.width) / 2 : 0 + anchors.horizontalCenterOffset: implicitWidth > inputContainer.width ? -(implicitWidth - inputContainer.width) / 2 : 0 implicitWidth: fullWidth implicitHeight: 16 @@ -229,7 +233,6 @@ WlSessionLockSurface { } } - // Input focus indicator (M3 focused state) Rectangle { anchors.fill: parent radius: 12 @@ -249,8 +252,7 @@ WlSessionLockSurface { } } - // Message display: M3 Body Small (12sp, 500 weight) for error messages - Text { + CustomText { id: messageDisplay Layout.alignment: Qt.AlignHCenter diff --git a/Modules/Lock/LockTime.qml b/Modules/Lock/LockTime.qml new file mode 100644 index 0000000..a42096a --- /dev/null +++ b/Modules/Lock/LockTime.qml @@ -0,0 +1,95 @@ +import Quickshell +import QtQuick +import QtQuick.Layouts +import qs.Modules +import qs.Components +import qs.Config + +RowLayout { + id: root + + property list time: Time.longTime.split("") + + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + animate: true + + text: root.time[0] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + animate: true + + text: root.time[1] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.bottomMargin: 8 + animate: true + + text: root.time[2] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + animate: true + + text: root.time[3] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + animate: true + + text: root.time[4] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.bottomMargin: 8 + animate: true + + text: root.time[5] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + animate: true + + text: root.time[6] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } + CustomText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + animate: true + + text: root.time[7] + font.pixelSize: 64 + font.weight: Font.Normal + font.letterSpacing: 0.5 + color: DynamicColors.palette.m3onSurface + } +} diff --git a/Modules/Time.qml b/Modules/Time.qml index 438fbea..4da6649 100644 --- a/Modules/Time.qml +++ b/Modules/Time.qml @@ -9,6 +9,14 @@ Singleton { Qt.formatDateTime(clock.date, "ddd d MMM - hh:mm:ss") } + readonly property string shortTime: { + Qt.formatDateTime(clock.date, "hh:mm") + } + + readonly property string longTime: { + Qt.formatDateTime(clock.date, "hh:mm:ss") + } + SystemClock { id: clock precision: SystemClock.Seconds