From d4350f6e86eaf4b2f0283dfd9fce6147afeb2d41 Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Sat, 6 Jun 2020 21:54:13 -0400
Subject: [PATCH] Borders for HTextArea

---
 src/gui/Base/HTextArea.qml                  | 28 ++++++++++++++++++++-
 src/gui/Pages/Chat/Composer/MessageArea.qml |  1 +
 src/themes/Glass.qpl                        |  8 +++++-
 src/themes/Midnight.qpl                     |  8 +++++-
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/gui/Base/HTextArea.qml b/src/gui/Base/HTextArea.qml
index e4561e61..dfa1057a 100644
--- a/src/gui/Base/HTextArea.qml
+++ b/src/gui/Base/HTextArea.qml
@@ -11,12 +11,19 @@ TextArea {
     property var saveId: "ALL"
     property var saveProperties: ["text"]
 
+    property bool error: false
+    property alias radius: textAreaBackground.radius
+    property bool bordered: true
+
     property var focusItemOnTab: null
     property var disabledText: null
     property string defaultText: ""
     readonly property bool changed: text !== defaultText
 
     property alias backgroundColor: textAreaBackground.color
+    property color borderColor: theme.controls.textArea.border
+    property color errorBorder: theme.controls.textArea.errorBorder
+    property color focusedBorderColor: theme.controls.textArea.focusedBorder
 
 
     function reset() { clear(); text = Qt.binding(() => defaultText) }
@@ -42,8 +49,27 @@ TextArea {
 
     background: Rectangle {
         id: textAreaBackground
-        color: theme.controls.textArea.background
         radius: theme.radius
+        color: theme.controls.textArea.background
+
+        border.width: bordered ? theme.controls.textArea.borderWidth : 0
+        border.color: borderColor
+
+        HRectangleBottomBorder {
+            id: bottomBorder
+            borderHeight: theme.controls.textArea.borderWidth
+            color: error ? errorBorder : focusedBorderColor
+
+            transform: Scale {
+                origin.x: bottomBorder.width / 2
+                origin.y: bottomBorder.height / 2
+                xScale: textArea.activeFocus ? 1 : 0
+
+                Behavior on xScale { HNumberAnimation {} }
+            }
+
+            Behavior on color { HColorAnimation {} }
+        }
     }
 
     // Set it only on component creation to avoid binding loops
diff --git a/src/gui/Pages/Chat/Composer/MessageArea.qml b/src/gui/Pages/Chat/Composer/MessageArea.qml
index 6755bc64..02e15421 100644
--- a/src/gui/Pages/Chat/Composer/MessageArea.qml
+++ b/src/gui/Pages/Chat/Composer/MessageArea.qml
@@ -97,6 +97,7 @@ HTextArea {
     placeholderText: qsTr("Type a message...")
 
     backgroundColor: "transparent"
+    focusedBorderColor: "transparent"
     tabStopDistance: 4 * 4  // 4 spaces
     focus: true
 
diff --git a/src/themes/Glass.qpl b/src/themes/Glass.qpl
index a4a7b4a1..6dbfcfcd 100644
--- a/src/themes/Glass.qpl
+++ b/src/themes/Glass.qpl
@@ -176,7 +176,13 @@ controls:
         color placeholderText: colors.dimText
 
     textArea:
-        color background:      colors.strongBackground
+        color background: colors.strongBackground
+
+        int borderWidth:     1
+        color border:        "transparent"
+        color focusedBorder: colors.accentElement
+        color errorBorder:   colors.negativeBackground
+
         color text:            colors.text
         color placeholderText: controls.textField.placeholderText
 
diff --git a/src/themes/Midnight.qpl b/src/themes/Midnight.qpl
index f716d2ca..93cac19a 100644
--- a/src/themes/Midnight.qpl
+++ b/src/themes/Midnight.qpl
@@ -182,7 +182,13 @@ controls:
         color placeholderText: colors.dimText
 
     textArea:
-        color background:      colors.strongBackground
+        color background: colors.strongBackground
+
+        int borderWidth:     1
+        color border:        "transparent"
+        color focusedBorder: colors.accentElement
+        color errorBorder:   colors.negativeBackground
+
         color text:            colors.text
         color placeholderText: controls.textField.placeholderText