Restyle the lock input to match the AGS widgets
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user