From 8d3ac9cd488369efa55e64b51e0a769c90e61496 Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Sat, 6 Jun 2020 21:42:49 -0400
Subject: [PATCH] HTextField: support radius, have a fancier border

---
 src/gui/Base/HRectangleBottomBorder.qml | 28 +++++++++++++++++++++++++
 src/gui/Base/HTextField.qml             | 22 ++++++++++++++++---
 2 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/gui/Base/HRectangleBottomBorder.qml

diff --git a/src/gui/Base/HRectangleBottomBorder.qml b/src/gui/Base/HRectangleBottomBorder.qml
new file mode 100644
index 00000000..1be00180
--- /dev/null
+++ b/src/gui/Base/HRectangleBottomBorder.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.12
+
+Item {
+    id: root
+
+    property Rectangle rectangle: parent
+    property alias borderHeight: clipArea.height
+    property alias color: borderRectangle.color
+
+    implicitWidth: rectangle.width
+    implicitHeight: rectangle.height
+
+    Item {
+        id: clipArea
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: 0
+        clip: true
+
+        Rectangle {
+            id: borderRectangle
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: root.height
+            radius: rectangle.radius
+        }
+    }
+}
diff --git a/src/gui/Base/HTextField.qml b/src/gui/Base/HTextField.qml
index 2f6c0c83..8f1859c1 100644
--- a/src/gui/Base/HTextField.qml
+++ b/src/gui/Base/HTextField.qml
@@ -24,11 +24,27 @@ TextField {
 
     background: Rectangle {
         id: textFieldBackground
+        radius: theme.radius
         color: field.activeFocus ? focusedBackgroundColor : backgroundColor
-        border.color: error ? errorBorder :
-                      field.activeFocus ? focusedBorderColor : borderColor
+
         border.width: bordered ? theme.controls.textField.borderWidth : 0
-        radius: bordered ? theme.radius : 0
+        border.color: borderColor
+
+        HRectangleBottomBorder {
+            id: bottomBorder
+            borderHeight: theme.controls.textField.borderWidth
+            color: error ? errorBorder : focusedBorderColor
+
+            transform: Scale {
+                origin.x: bottomBorder.width / 2
+                origin.y: bottomBorder.height / 2
+                xScale: field.activeFocus ? 1 : 0
+
+                Behavior on xScale { HNumberAnimation {} }
+            }
+
+            Behavior on color { HColorAnimation {} }
+        }
     }
 
     // Set it only on component creation to avoid binding loops