From 6162c3f63ad12655295f4bc9502392bfe2394b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Mon, 2 Oct 2023 14:12:14 +0200
Subject: [PATCH] fix(StatusTextArea): readOnly mode fixes

- use the correct background and outline colors when we are in read-only
mode
- detect active focus using `cursorVisible`; we can have focus even when
being readOnly
- do not hardcode impicit size, TextArea/TextEdit already has its own;
this way we can also properly display a one line text
---
 ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml
index 4a754d1c01..47ae7ee76d 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml
@@ -6,13 +6,13 @@ import StatusQ.Components 0.1
 
 /*!
       \qmltype StatusTextArea
-      \inherits Item
+      \inherits TextArea
       \inqmlmodule StatusQ.Controls
       \since StatusQ.Controls 0.1
       \brief Displays a multi line text input component.
       Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-textarea.html}{QQC.TextArea}.
 
-      The \c StatusTextArea displays a styled TextArea for users to type multiple lines of text.
+      The \c StatusTextArea displays a styled TextArea for users to type or display multiple lines of text.
       For example:
 
       \qml
@@ -55,9 +55,6 @@ TextArea {
     */
     property bool valid: true
 
-    implicitWidth: 448 // by design
-    implicitHeight: 108
-
     leftPadding: 16
     rightPadding: 16
     topPadding: 10
@@ -82,12 +79,14 @@ TextArea {
 
     background: Rectangle {
         radius: 8
-        color: root.enabled ? Theme.palette.baseColor2 : Theme.palette.baseColor4
+        color: root.readOnly ? "transparent" : root.enabled ? Theme.palette.baseColor2 : Theme.palette.baseColor4
         border.width: 1
         border.color: {
             if (!root.valid)
                 return Theme.palette.dangerColor1
-            if (root.activeFocus)
+            if (root.readOnly)
+                return Theme.palette.baseColor2
+            if (root.cursorVisible)
                 return Theme.palette.primaryColor1
             if (root.hovered)
                 return Theme.palette.primaryColor2