nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

lock: add content + better unlock anim

Browse source
This commit is contained in:
2 * r + 2 * t 2025-08-10 17:17:51 +10:00
parent feb7647110
commit ba1c6fda43
4 changed files with 172 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
config/LockConfig.qml
View file

@ -5,12 +5,11 @@ JsonObject {
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property int border: 100
property int clockWidth: 800
property int clockHeight: 200
property int inputWidth: 600
property int inputHeight: 200
property int faceSize: 100
property int faceSize: 200
property int weatherWidth: 400
property int weatherHeight: 100
property int mediaWidth: 600

105
modules/lock/Content.qml Normal file
View file

@ -0,0 +1,105 @@
pragma ComponentBehavior: Bound
import qs.components
import qs.components.images
import qs.services
import qs.config
import qs.utils
import QtQuick
import QtQuick.Layouts
GridLayout {
id: root
required property var lock
anchors.fill: parent
anchors.margins: Appearance.padding.large
rowSpacing: Appearance.spacing.large
columnSpacing: Appearance.spacing.large
rows: 2
columns: 3
StyledRect {
Layout.row: 0
Layout.column: 0
Layout.fillWidth: true
Layout.fillHeight: true
radius: Appearance.rounding.small
color: Colours.tPalette.m3surfaceContainer
}
StyledRect {
Layout.row: 1
Layout.column: 0
Layout.fillWidth: true
Layout.fillHeight: true
radius: Appearance.rounding.small
color: Colours.tPalette.m3surfaceContainer
}
StyledClippingRect {
Layout.row: 0
Layout.column: 1
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
implicitWidth: Config.lock.sizes.faceSize
implicitHeight: Config.lock.sizes.faceSize
radius: Appearance.rounding.large
color: Colours.tPalette.m3surfaceContainer
MaterialIcon {
anchors.centerIn: parent
text: "person"
fill: 1
grade: 200
font.pointSize: Math.floor(Config.lock.sizes.faceSize / 2)
}
CachingImage {
id: pfp
anchors.fill: parent
path: `${Paths.stringify(Paths.home)}/.face`
}
}
Input {
Layout.row: 1
Layout.column: 1
lock: root.lock
}
StyledRect {
Layout.row: 0
Layout.column: 2
Layout.fillWidth: true
Layout.fillHeight: true
radius: Appearance.rounding.small
color: Colours.tPalette.m3surfaceContainer
}
StyledRect {
Layout.row: 1
Layout.column: 2
Layout.fillWidth: true
Layout.fillHeight: true
radius: Appearance.rounding.small
color: Colours.tPalette.m3surfaceContainer
}
component Anim: NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}

60
modules/lock/Input.qml
View file

@ -12,60 +12,40 @@ import QtQuick.Layouts
ColumnLayout {
id: root
required property WlSessionLockSurface lock
required property var lock
property string passwordBuffer
Layout.preferredWidth: Config.lock.sizes.faceSize * 2
Layout.fillWidth: false
spacing: Appearance.spacing.large * 2
RowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Appearance.padding.large * 3
Layout.maximumWidth: Config.lock.sizes.inputWidth - Appearance.rounding.large * 2
StyledRect {
Layout.fillWidth: true
implicitHeight: user.implicitHeight + Appearance.padding.small * 2
spacing: Appearance.spacing.large
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.small
StyledClippingRect {
Layout.alignment: Qt.AlignVCenter
implicitWidth: Config.lock.sizes.faceSize
implicitHeight: Config.lock.sizes.faceSize
RowLayout {
id: user
radius: Appearance.rounding.large
color: Colours.tPalette.m3surfaceContainer
anchors.centerIn: parent
spacing: Appearance.spacing.normal
MaterialIcon {
anchors.centerIn: parent
text: "person"
fill: 1
grade: 200
font.pointSize: Config.lock.sizes.faceSize / 2
}
CachingImage {
anchors.fill: parent
path: `${Paths.stringify(Paths.home)}/.face`
}
}
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
spacing: Appearance.spacing.small
StyledText {
Layout.fillWidth: true
text: qsTr("Welcome back, %1").arg(Quickshell.env("USER"))
font.pointSize: Appearance.font.size.extraLarge
text: "account_circle"
font.pointSize: Appearance.font.size.large * 1.4
font.weight: 500
elide: Text.ElideRight
}
StyledText {
Layout.fillWidth: true
text: qsTr("Logging in to %1").arg(Quickshell.env("XDG_CURRENT_DESKTOP") || Quickshell.env("XDG_SESSION_DESKTOP"))
color: Colours.palette.m3tertiary
// Layout.fillWidth: true
text: Quickshell.env("USER")
font.pointSize: Appearance.font.size.large
// font.capitalization: Font.Capitalize
font.weight: 500
elide: Text.ElideRight
}
}
@ -121,7 +101,7 @@ ColumnLayout {
onCompleted: res => {
if (res === PamResult.Success)
return root.lock.unlock();
return root.lock.lock.unlock();
if (res === PamResult.Error)
placeholder.pamState = "error";

55
modules/lock/LockSurface.qml
View file

@ -15,10 +15,6 @@ WlSessionLockSurface {
property bool locked
function unlock(): void {
lock.unlocked = true;
}
Component.onCompleted: locked = true
color: "transparent"
@ -40,8 +36,8 @@ WlSessionLockSurface {
target: lockBg
properties: "implicitWidth,implicitHeight"
to: lockBg.size
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
duration: Appearance.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
}
Anim {
target: lockBg
@ -49,9 +45,31 @@ WlSessionLockSurface {
to: lockBg.size / 4
}
Anim {
targets: [background, lockBg]
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 {
@ -82,7 +100,7 @@ WlSessionLockSurface {
Anim {
target: lockBg
property: "rotation"
to: 180
to: 360
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.standardAccel
}
@ -91,9 +109,19 @@ WlSessionLockSurface {
Anim {
target: lockIcon
property: "rotation"
to: 180
to: 360
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
Anim {
target: lockIcon
property: "opacity"
to: 0
}
Anim {
target: content
property: "opacity"
to: 1
}
Anim {
target: lockBg
property: "radius"
@ -147,6 +175,7 @@ WlSessionLockSurface {
color: Colours.tPalette.m3surface
radius: size / 4
rotation: 180
scale: 0
Elevation {
@ -164,6 +193,14 @@ WlSessionLockSurface {
text: "lock"
font.pointSize: Appearance.font.size.extraLarge * 4
font.bold: true
rotation: 180
}
Content {
id: content
lock: root
opacity: 0
}
}