From d8295302a5810696df2d2a2bde2c98fdee3341fb Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Thu, 18 Jul 2019 01:53:28 -0400
Subject: [PATCH] HTextField active color, HColorAnimation + factor

---
 TODO.md                              |  1 +
 src/qml/Base/HBaseButton.qml         |  8 ++------
 src/qml/Base/HColorAnimation.qml     |  9 +++++++++
 src/qml/Base/HHighlightRectangle.qml |  4 +---
 src/qml/Base/HNumberAnimation.qml    |  3 ++-
 src/qml/Base/HTextField.qml          | 22 ++++++++++++++++------
 src/qml/Theme.qml                    |  6 ++++--
 7 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 src/qml/Base/HColorAnimation.qml

diff --git a/TODO.md b/TODO.md
index 8e525a70..df236486 100644
--- a/TODO.md
+++ b/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
diff --git a/src/qml/Base/HBaseButton.qml b/src/qml/Base/HBaseButton.qml
index ee98adb8..7eb4f172 100644
--- a/src/qml/Base/HBaseButton.qml
+++ b/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 } }
         }
     }
 
diff --git a/src/qml/Base/HColorAnimation.qml b/src/qml/Base/HColorAnimation.qml
new file mode 100644
index 00000000..abe77112
--- /dev/null
+++ b/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
+}
diff --git a/src/qml/Base/HHighlightRectangle.qml b/src/qml/Base/HHighlightRectangle.qml
index 5e094507..424012bf 100644
--- a/src/qml/Base/HHighlightRectangle.qml
+++ b/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 }
diff --git a/src/qml/Base/HNumberAnimation.qml b/src/qml/Base/HNumberAnimation.qml
index 85016ad5..34798c4e 100644
--- a/src/qml/Base/HNumberAnimation.qml
+++ b/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
 }
diff --git a/src/qml/Base/HTextField.qml b/src/qml/Base/HTextField.qml
index b42db833..27f45b66 100644
--- a/src/qml/Base/HTextField.qml
+++ b/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
diff --git a/src/qml/Theme.qml b/src/qml/Theme.qml
index 95d10eb7..214a514b 100644
--- a/src/qml/Theme.qml
+++ b/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
         }