Restyle the lock input to match the AGS widgets

This commit is contained in:
2026-08-21 14:59:31 -04:00
parent 96759d68fd
commit 000ff69560
2 changed files with 28 additions and 6 deletions
+10
View File
@@ -106,6 +106,16 @@ down to whatever room is left above the field, so a wider or taller
`screensaver.txt` cannot run off the screen, and an unreadable or missing file `screensaver.txt` cannot run off the screen, and an unreadable or missing file
leaves the lock unbranded rather than broken. leaves the lock unbranded rather than broken.
The password field is restyled to match the AGS widgets: a 2px border and
square corners in place of the shell's 3px rounded outline, an
`alpha(background, 0.6)` fill matching `.qs-tile`, and the `.theme-chip`
accent treatment - a translucent accent border while the field is empty that
goes solid once there is something in it, with `urgent` on a failed attempt.
Those come from `Color.accent`, `Color.background`, and `Color.urgent`, so the
field still follows a theme change; only the geometry and the alphas are fixed,
exactly as they are in `ags/style.css`. The `[lock]` tokens in a theme's
`shell.toml` no longer reach the border or the fill.
Unlike the other clones this one is load-bearing for security. The lock is a Unlike the other clones this one is load-bearing for security. The lock is a
`service` plugin, so it is enabled by its id appearing in `plugins[]` and the `service` plugin, so it is enabled by its id appearing in `plugins[]` and the
original is switched off through `disabledPlugins[]` - both are needed, because original is switched off through `disabledPlugins[]` - both are needed, because
+18 -6
View File
@@ -21,7 +21,10 @@ Item {
readonly property string placeholderText: "Enter Password" readonly property string placeholderText: "Enter Password"
readonly property int fieldWidth: 381 readonly property int fieldWidth: 381
readonly property int fieldHeight: 67 readonly property int fieldHeight: 67
readonly property int outlineThickness: 3 // AGS draws every surface with a 2px border and square corners; see the
// 2px/border-radius: 0 pairs throughout ags/style.css.
readonly property int outlineThickness: 2
readonly property int fieldRadius: 0
readonly property int fieldFontSize: Math.round(Style.font.heading * 1.125) readonly property int fieldFontSize: Math.round(Style.font.heading * 1.125)
readonly property int passwordDotFontSize: Math.round(Style.font.heading * 1.33) readonly property int passwordDotFontSize: Math.round(Style.font.heading * 1.33)
readonly property int passwordDotLetterSpacing: Math.round(Style.font.heading * 0.19) readonly property int passwordDotLetterSpacing: Math.round(Style.font.heading * 0.19)
@@ -42,9 +45,18 @@ Item {
readonly property bool showPasswordCursor: inputEnabled && !authenticatingPassword && failureMessage.length === 0 readonly property bool showPasswordCursor: inputEnabled && !authenticatingPassword && failureMessage.length === 0
readonly property bool errorState: failureMessage.length > 0 readonly property bool errorState: failureMessage.length > 0
readonly property var inputBorderSpec: errorState // An empty field reads as resting and a filled one as active, which is the
? Border.surfaceSpec("lock", "border-error", Color.lock.borderError, root.outlineThickness, "border-alpha") // .theme-chip treatment in ags/style.css: a translucent accent border that
: Border.surfaceSpec("lock", "border-active", Color.lock.borderActive, root.outlineThickness, "border-alpha") // goes solid once the tile is in use. The spec is built here rather than
// read from the [lock] theme tokens, since those carry the shell's own
// heavier look. Color.accent and Color.background still follow the theme,
// so this tracks a theme change exactly like the AGS widgets do.
readonly property bool inputActive: passwordText.length > 0 || authenticatingPassword
readonly property color inputBorderColor: errorState
? Color.urgent
: (inputActive ? Color.accent : Util.alpha(Color.accent, 0.6))
readonly property color inputBackground: Util.alpha(Color.background, 0.6)
readonly property var inputBorderSpec: Border.flat(root.inputBorderColor, root.outlineThickness)
signal submitPassword(string password) signal submitPassword(string password)
signal passwordTextEdited(string password) signal passwordTextEdited(string password)
@@ -155,9 +167,9 @@ Item {
width: root.fieldWidth width: root.fieldWidth
height: root.fieldHeight height: root.fieldHeight
anchors.centerIn: parent anchors.centerIn: parent
color: Color.lock.background color: root.inputBackground
borderSpec: root.inputBorderSpec borderSpec: root.inputBorderSpec
radius: Style.cornerRadius radius: root.fieldRadius
clip: true clip: true
TextInput { TextInput {