animate validation

2 files changed, 19 insertions, 2 deletions

diff --git a/framework/qml/PasswordField.qml b/framework/qml/PasswordField.qml
index fa1d1757..6fa48d44 100644
--- a/framework/qml/PasswordField.qml
+++ b/framework/qml/PasswordField.qml
@@ -19,7 +19,7 @@
 import QtQuick 2.7
 import org.kube.framework 1.0 as Kube
 
-Kube.RequiredTextField {
+Kube.TextField {
     id: root
 
     property bool showPassword
diff --git a/framework/qml/RequiredTextField.qml b/framework/qml/RequiredTextField.qml
index 7552ebfb..0c76d144 100644
--- a/framework/qml/RequiredTextField.qml
+++ b/framework/qml/RequiredTextField.qml
@@ -25,6 +25,7 @@ Kube.TextField {
     validator: RegExpValidator { regExp: /.*\S.*/ }
 
     Rectangle {
+        id: validIndicator
         anchors {
             left: parent.left
             right: parent.right
@@ -32,6 +33,22 @@ Kube.TextField {
             margins: 1
         }
         height: 3
-        color: acceptableInput ? root.activefocus ? Kube.Colors.positiveColor : "transparent" : Kube.Colors.warningColor
+        color: acceptableInput ? Kube.Colors.positiveColor : Kube.Colors.warningColor
+
+        OpacityAnimator {
+            target: validIndicator
+            from: opacity
+            to: 0
+            duration: 1000
+            running: acceptableInput
+        }
+
+        OpacityAnimator {
+            target: validIndicator
+            from: opacity
+            to: 1
+            duration: 100
+            running: !acceptableInput
+        }
     }
 }