lil tweaks

This commit is contained in:
2025-12-31 20:08:15 -08:00
parent 98416e2d27
commit 4281c3a8b7
5 changed files with 116 additions and 22 deletions

View File

@@ -137,7 +137,7 @@ PanelWindow {
gradient: Gradient { gradient: Gradient {
orientation: Gradient.Horizontal orientation: Gradient.Horizontal
GradientStop { GradientStop {
color: Qt.darker(button.color, 16) color: Qt.darker(button.color, 12)
position: 0 position: 0
} }
GradientStop { GradientStop {
@@ -167,7 +167,11 @@ PanelWindow {
y: (y_anim + y_off) % (entry_height + y_size) - y_size y: (y_anim + y_off) % (entry_height + y_size) - y_size
ShapePath { ShapePath {
strokeWidth: 2 strokeWidth: 2
strokeColor: Qt.darker(button.color, 2.5) strokeColor: Qt.hsla(
button.color.hslHue,
button.color.hslSaturation,
0.3, 1
)
fillColor: "transparent" fillColor: "transparent"
startX: tri.x_size/2 startX: tri.x_size/2

120
Lock.qml
View File

@@ -26,10 +26,6 @@ WlSessionLock {
easing.type: Easing.OutQuint easing.type: Easing.OutQuint
} }
} }
component Shear5: Shear {
required property real height
xFactor: height * Math.tan(5 * Math.PI/180) / -100
}
surface: WlSessionLockSurface { surface: WlSessionLockSurface {
id: surface id: surface
@@ -38,7 +34,8 @@ WlSessionLock {
id: content id: content
anchors.fill: parent anchors.fill: parent
layer.enabled: true layer.enabled: true
property bool idle: !passInput.text.length readonly property real angle: -1 * Math.tan(10 * Math.PI/180) // 10 degrees
property bool idle: true
Keys.onReturnPressed: { Keys.onReturnPressed: {
idle = false idle = false
if (!pam.active) { if (!pam.active) {
@@ -54,6 +51,13 @@ WlSessionLock {
width: surface.width width: surface.width
height: surface.height height: surface.height
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
PropertyAnimation on opacity {
running: exitAnimation.running
from: 1
to: 0
duration: 800
easing.type: Easing.Linear
}
} }
Item { Item {
@@ -88,6 +92,63 @@ WlSessionLock {
Item { Item {
anchors.fill: parent anchors.fill: parent
clip: true clip: true
Rectangle {
antialiasing: true
anchors {
top: inputBox.top
left: inputBox.right
bottom: inputBox.bottom
}
width: !content.idle * surface.width * 0.05
color: "#EEAA00"
transform: Shear { xFactor: content.angle }
ColorAnimation on color {
onStarted: lockIcon.source = "assets/unlocked.svg"
running: exitAnimation.running
from: Qt.lighter("#A5CE00", 2.5)
to: "#A5CE00"
duration: 400
}
SequentialAnimation on color {
id: failAnimation
running: false
ColorAnimation {
from: Qt.lighter("#CC3378", 2.5)
to: "#CC3378"
duration: 400
}
ColorAnimation { duration: 1500 }
ColorAnimation {
to: "#EEAA00"
duration: 600
easing.type: Easing.InOutQuint
}
}
Image {
id: lockIcon
anchors {
verticalCenter: parent.verticalCenter
horizontalCenter: parent.horizontalCenter
horizontalCenterOffset: content.angle * height * 0.5
}
width: parent.width/2
height: parent.width/2
layer.enabled: true
layer.effect: MultiEffect {
blurMax: 4
shadowEnabled: true
shadowOpacity: 0.4
shadowVerticalOffset: height * 0.04
}
source: "assets/locked.svg"
fillMode: Image.Pad
sourceSize {
width: width
height: height
}
transform: Shear { xFactor: content.angle * -1 }
}
}
RectangularShadow { RectangularShadow {
anchors { anchors {
top: inputBox.top top: inputBox.top
@@ -99,7 +160,7 @@ WlSessionLock {
blur: 16 blur: 16
width: blur width: blur
opacity: 0.8 opacity: 0.8
transform: Shear5 {height: inputBox.height} transform: Shear { xFactor: content.angle }
} }
Rectangle { Rectangle {
id: inputBox id: inputBox
@@ -109,15 +170,16 @@ WlSessionLock {
} }
antialiasing: true antialiasing: true
x: surface.width/3 + (surface.width/4) * content.idle x: surface.width/3 + (surface.width/4) * content.idle
width: (surface.width/3 + shear.xFactor) * !content.idle width: (surface.width/3) * !content.idle
OutQuint300 on x {} OutQuint300 on x {}
OutQuint300 on width {} OutQuint300 on width {}
color: "#5F46BB" color: "#5F46BB"
transform: Shear5 {height: inputBox.height; id: shear} transform: Shear { xFactor: content.angle }
} }
Column { Column {
anchors { anchors {
verticalCenter: inputBox.verticalCenter verticalCenter: inputBox.verticalCenter
verticalCenterOffset: pamMessage.height * 1/3
left: inputBox.right left: inputBox.right
leftMargin: surface.width/3 * -1 + logo.width * 0.29 leftMargin: surface.width/3 * -1 + logo.width * 0.29
} }
@@ -143,7 +205,7 @@ WlSessionLock {
color: Qt.darker(inputBox.color, 1.5) color: Qt.darker(inputBox.color, 1.5)
height: prompt.font.pixelSize + 20 height: prompt.font.pixelSize + 20
width: surface.width * 0.18 width: surface.width * 0.18
transform: Shear { xFactor: -0.15 } transform: Shear { xFactor: content.angle }
TextInput { TextInput {
id: passInput id: passInput
anchors.fill: passInputBg anchors.fill: passInputBg
@@ -152,10 +214,21 @@ WlSessionLock {
font: prompt.font font: prompt.font
color: "white" color: "white"
echoMode: TextInput.Password echoMode: TextInput.Password
transform: Shear { xFactor: 0.15 } transform: Shear { xFactor: content.angle * -1 }
onTextChanged: content.idle = !text.length onTextChanged: content.idle = !text.length
} }
} }
Text {
id: pamMessage
text: pam.responseRequired ? "" : pam.message
height: 20
width: 1
color: "white"
font: {
family: prompt.family
pixelSize: 12
}
}
} }
} }
} }
@@ -176,7 +249,7 @@ WlSessionLock {
transform: [ transform: [
Scale { Scale {
origin {x: logo.width/2; y: logo.height/2 } origin {x: logo.width/2; y: logo.height/2 }
xScale: (content.idle ? 1.0 : 0.5) * (1 + circleHover.hovered * 0.1) xScale: (content.idle ? 1.0 : 0.5)
yScale: xScale yScale: xScale
OutQuint300 on xScale {} OutQuint300 on xScale {}
}, },
@@ -191,7 +264,6 @@ WlSessionLock {
id: circleBg id: circleBg
layer.enabled: true layer.enabled: true
anchors.fill: parent anchors.fill: parent
containsMode: Shape.FillContains
preferredRendererType: Shape.CurveRenderer preferredRendererType: Shape.CurveRenderer
ShapePath { ShapePath {
fillGradient: LinearGradient { fillGradient: LinearGradient {
@@ -210,10 +282,6 @@ WlSessionLock {
sweepAngle: 360 sweepAngle: 360
} }
} }
HoverHandler { id: circleHover }
TapHandler {
onTapped: content.idle = !content.idle
}
} }
Item { Item {
id: triangles id: triangles
@@ -232,9 +300,11 @@ WlSessionLock {
x: Math.random() * (logo.width + x_size*2) - x_size x: Math.random() * (logo.width + x_size*2) - x_size
y: (y_anim + y_off) % (logo.height + y_size) - y_size y: (y_anim + y_off) % (logo.height + y_size) - y_size
ShapePath { ShapePath {
strokeWidth: 2 strokeWidth: content.idle ? 2 : 4
strokeColor: "#9A4272" strokeColor: "#9A4272"
fillColor: "transparent" fillColor: "transparent"
capStyle: ShapePath.FlatCap
joinStyle: ShapePath.MiterJoin
startX: tri.x_size/2 startX: tri.x_size/2
startY: 0 startY: 0
@@ -345,21 +415,31 @@ WlSessionLock {
} }
PropertyAnimation on progress { PropertyAnimation on progress {
id: exitAnimation id: exitAnimation
duration: 800
running: false running: false
from: 1 from: 1
to: 0 to: 0
easing.type: Easing.OutQuint easing.type: Easing.OutQuart
onStopped: lock.locked = false onStopped: lock.locked = false
} }
} }
} }
PamContext { PamContext {
id: pam id: pam
config: "system-auth" config: "pam.conf"
configDirectory: "."
onPamMessage: if (this.responseRequired) this.respond(passInput.text) onPamMessage: if (this.responseRequired) this.respond(passInput.text)
onCompleted: result => { switch (result) { onCompleted: result => { switch (result) {
case PamResult.Success: case PamResult.Success:
exitAnimation.start() exitAnimation.start();
break;
case PamResult.Failed:
case PamResult.Error:
case PamResult.MaxTries:
passInput.text = "";
content.idle = false;
failAnimation.start();
break;
}} }}
} }
} }

4
assets/locked.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14.5V16.5M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C15.9474 10 16.5286 10 17 10.0288M7 10.0288C6.41168 10.0647 5.99429 10.1455 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C18.0057 10.1455 17.5883 10.0647 17 10.0288M7 10.0288V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10.0288" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 979 B

4
assets/unlocked.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.584 6C15.8124 4.2341 14.0503 3 12 3C9.23858 3 7 5.23858 7 8V10.0288M12 14.5V16.5M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C16.8802 10 17.7202 10 18.362 10.327C18.9265 10.6146 19.3854 11.0735 19.673 11.638C20 12.2798 20 13.1198 20 14.8V16.2C20 17.8802 20 18.7202 19.673 19.362C19.3854 19.9265 18.9265 20.3854 18.362 20.673C17.7202 21 16.8802 21 15.2 21H8.8C7.11984 21 6.27976 21 5.63803 20.673C5.07354 20.3854 4.6146 19.9265 4.32698 19.362C4 18.7202 4 17.8802 4 16.2V14.8C4 13.1198 4 12.2798 4.32698 11.638C4.6146 11.0735 5.07354 10.6146 5.63803 10.327C5.99429 10.1455 6.41168 10.0647 7 10.0288Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 926 B

2
pam.conf Normal file
View File

@@ -0,0 +1,2 @@
auth sufficient pam_unix.so try_first_pass likeauth nullok
auth sufficient pam_fprintd.so