diff --git a/shell/plugins/lock/LockView.qml b/shell/plugins/lock/LockView.qml index 8853039b04..d8752d850a 100644 --- a/shell/plugins/lock/LockView.qml +++ b/shell/plugins/lock/LockView.qml @@ -16,6 +16,7 @@ Item { property bool loadBackground: true property string passwordText: "" property bool syncingPasswordText: false + property real inputBorderPulseWidth: 0 readonly property string placeholderText: "Enter Password" readonly property int fieldWidth: 381 @@ -29,6 +30,16 @@ Item { readonly property var inputBorderSpec: errorState ? Border.surfaceSpec("lock", "border-error", Color.lock.borderError, root.outlineThickness, "border-alpha") : Border.surfaceSpec("lock", "border-active", Color.lock.borderActive, root.outlineThickness, "border-alpha") + readonly property var pulsedInputBorderSpec: ({ + color: root.inputBorderSpec.color, + gradient: root.inputBorderSpec.gradient, + widths: { + top: root.inputBorderSpec.widths.top + root.inputBorderPulseWidth, + right: root.inputBorderSpec.widths.right + root.inputBorderPulseWidth, + bottom: root.inputBorderSpec.widths.bottom + root.inputBorderPulseWidth, + left: root.inputBorderSpec.widths.left + root.inputBorderPulseWidth, + }, + }) signal submitPassword(string password) signal passwordTextEdited(string password) @@ -59,7 +70,14 @@ Item { syncingPasswordText = false } - onPasswordTextChanged: syncPasswordText() + function pulseInputField() { + inputBorderPulse.restart() + } + + onPasswordTextChanged: { + syncPasswordText() + if (passwordText.length > 0) pulseInputField() + } onInputEnabledChanged: { if (inputEnabled) Qt.callLater(forcePasswordFocus) } @@ -107,10 +125,20 @@ Item { height: root.fieldHeight anchors.centerIn: parent color: Color.lock.background - borderSpec: root.inputBorderSpec + borderSpec: root.inputBorderPulseWidth > 0 && !root.errorState + ? root.pulsedInputBorderSpec + : root.inputBorderSpec radius: Style.cornerRadius clip: true + SequentialAnimation { + id: inputBorderPulse + running: false + + PropertyAnimation { target: root; property: "inputBorderPulseWidth"; to: 1.1; duration: 40; easing.type: Easing.OutCubic } + PropertyAnimation { target: root; property: "inputBorderPulseWidth"; to: 0; duration: 240; easing.type: Easing.OutCubic } + } + TextInput { id: passwordInput anchors.fill: parent