animate validation

1 files changed, 18 insertions, 1 deletions

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
+        }
     }
 }