HTextField active color, HColorAnimation + factor

TODO.md

@@ -1,6 +1,7 @@
 - HTextField focus effect
 - Devices and client settings in edit account page
 - If avatar is set, name color from average color?
+- Accent color from background
 - Reduce messages ListView cacheBuffer height once http thumbnails
   downloading is implemented 
 - Button can get "hoverEnabled: false" to let HoverHandlers work

src/qml/Base/HBaseButton.qml

@@ -33,9 +33,7 @@ Button {
         )
         radius: circle ? height : 0
 
-        Behavior on color {
-            ColorAnimation { duration: theme.animationDuration / 2 }
-        }
+        Behavior on color { HColorAnimation { factor: 0.5 } }
 
         Rectangle {
             id: buttonBackgroundOverlay
@@ -44,9 +42,7 @@ Button {
             color: "black"
             opacity: 0
 
-            Behavior on opacity {
-                HNumberAnimation { duration: theme.animationDuration / 2 }
-            }
+            Behavior on opacity { HNumberAnimation { factor: 0.5 } }
         }
     }
 

src/qml/Base/HColorAnimation.qml

@@ -0,0 +1,9 @@
+// Copyright 2019 miruka
+// This file is part of harmonyqml, licensed under LGPLv3.
+
+import QtQuick 2.12
+
+ColorAnimation {
+    property real factor: 1.0
+    duration: theme.animationDuration * factor
+}

src/qml/Base/HHighlightRectangle.qml

@@ -17,9 +17,7 @@ HRectangle {
            hover.hovered ? hoveredColor :
            normalColor
 
-    Behavior on color {
-        ColorAnimation { duration: theme.animationDuration / 1.5 }
-    }
+    Behavior on color { HColorAnimation { factor: 0.66 } }
 
     HoverHandler { id: hover }
     TapHandler { id: tap }

src/qml/Base/HNumberAnimation.qml

@@ -4,5 +4,6 @@
 import QtQuick 2.12
 
 NumberAnimation {
-    duration: theme.animationDuration
+    property real factor: 1.0
+    duration: theme.animationDuration * factor
 }

src/qml/Base/HTextField.qml

@@ -5,19 +5,29 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 
 TextField {
-    property bool bordered: false
-    property alias backgroundColor: textFieldBackground.color
-    property alias radius: textFieldBackground.radius
-
+    id: field
     font.family: theme.fontFamily.sans
     font.pixelSize: theme.fontSize.normal
 
+    readonly property QtObject _tf: theme.controls.textField
+
+    property bool bordered: false
+    property color backgroundColor: _tf.background
+    property color borderColor: _tf.border
+    property color focusedBackgroundColor: _tf.focusedBackground
+    property color focusedBorderColor: _tf.focusedBorder
+    property alias radius: textFieldBackground.radius
+
     color: theme.colors.foreground
     background: Rectangle {
         id: textFieldBackground
-        color: theme.controls.textField.background
-        border.color: theme.controls.textField.borderColor
+        color: field.activeFocus ? focusedBackgroundColor : backgroundColor
+        border.color: field.activeFocus ? focusedBorderColor : borderColor
         border.width: bordered ? theme.controls.textField.borderWidth : 0
+
+        Behavior on color { HColorAnimation {} }
+        Behavior on border.color { HColorAnimation {} }
+        Behavior on border.width { HNumberAnimation {} }
     }
 
     selectByMouse: true

src/qml/Theme.qml

@@ -45,7 +45,7 @@ QtObject {
         property color foregroundDim2: Ut.hsl(0, 0, 30)
         property color foregroundError: Ut.hsl(342, 64, 32)
         property color textBorder: Ut.hsla(0, 0, 0, 0.07)
-        property color accent: Ut.hsl(160, 62, 55)
+        property color accent: Ut.hsl(25, 60, 50)
     }
 
     property QtObject controls: QtObject {
@@ -62,7 +62,9 @@ QtObject {
 
         property QtObject textField: QtObject {
             property color background: colors.background2
-            property color borderColor: "black"
+            property color border: "black"
+            property color focusedBackground: background
+            property color focusedBorder: colors.accent
             property int borderWidth: 1
         }