feat(StatusTextArea): Implement StatusTextArea

Implements a standard QQC2 TextArea control with Status styling

Closes #236

sandbox/main.qml

@@ -197,6 +197,11 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title);
                     }
+                    StatusNavigationListItem {
+                        title: "StatusTextArea"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
                     StatusNavigationListItem {
                         title: "StatusSelect"
                         selected: viewLoader.source.toString().includes(title)

sandbox/pages/StatusTextAreaPage.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Column {
+    id: root
+
+    spacing: 8
+
+    Component.onCompleted: {
+        focusedTextArea.forceActiveFocus()
+    }
+
+    StatusTextArea {
+        id: focusedTextArea
+        width: parent.width
+        placeholderText: "Initially focused text area"
+        KeyNavigation.tab: unfocusedTextArea
+    }
+
+    StatusTextArea {
+        id: unfocusedTextArea
+        width: parent.width
+        placeholderText: "Unfocused text area (hover me to see the color change)"
+        KeyNavigation.tab: invalidTextArea
+    }
+
+    StatusTextArea {
+        id: invalidTextArea
+        width: parent.width
+        valid: false
+        placeholderText: "Invalid text area, should display red border"
+        KeyNavigation.tab: longTextArea
+    }
+
+    StatusScrollView {
+        padding: 0 // use our own (StatusTextArea) padding
+        width: parent.width
+        height: 120
+        TextArea.flickable: longTextArea
+        StatusTextArea {
+            id: longTextArea
+            text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet lectus quis justo. Sed vel lectus. \
+            Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Morbi scelerisque luctus velit. Nunc auctor. Nullam at \
+            arcu a est sollicitudin euismod. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, \
+            per inceptos hymenaeos. Fusce aliquam vestibulum ipsum. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. \
+            Nullam sit amet magna in magna gravida vehicula. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nullam faucibus \
+            mi quis velit. Nam sed tellus id magna elementum tincidunt. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, \
+            eget facilisis enim ipsum id lacus. Maecenas aliquet accumsan leo. Aliquam erat volutpat."
+            KeyNavigation.tab: focusedTextArea
+        }
+    }
+
+    StatusTextArea {
+        enabled: false
+        placeholderText: "Disabled text area"
+    }
+}

src/StatusQ/Controls/StatusTextArea.qml

@@ -0,0 +1,111 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+
+/*!
+      \qmltype StatusTextArea
+      \inherits Item
+      \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.
+      For example:
+
+      \qml
+      StatusTextArea {
+        width: parent.width
+        placeholderText: qsTr("Search")
+      }
+      \endqml
+
+      Note: if you want to alter the TAB key behavior, just override it like this:
+      \qml
+      StatusTextArea {
+        width: parent.width
+        KeyNavigation.tab: otherItemThatAcceptsFocus
+      }
+      \endqml
+
+      Note 2: if scrolling is required, just wrap the StatusTextArea inside a StatusScrollView, e.g.:
+      \qml
+      StatusScrollView {
+        padding: 0 // use our own (StatusTextArea) padding
+        width: parent.width
+        height: 120
+        TextArea.flickable: longTextArea
+        StatusTextArea {
+          id: longTextArea
+          text: "Very\nlong\ntext\nwith\nmany\nlinebreaks"
+        }
+      }
+      \endqml
+
+      For a list of components available see StatusQ.
+*/
+
+TextArea {
+    id: root
+
+    /*!
+        \qmlproperty bool StatusTextArea::valid
+        This property sets the valid state. Default value is true.
+    */
+    property bool valid: true
+
+    implicitWidth: 448 // by design
+    implicitHeight: 108
+
+    leftPadding: 16
+    rightPadding: 16
+    topPadding: 10
+    bottomPadding: 10
+
+    color: Theme.palette.directColor1
+    selectedTextColor: color
+    selectionColor: Theme.palette.primaryColor2
+    placeholderTextColor: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor9
+
+    font {
+        family: Theme.palette.baseFont.name
+        pixelSize: 15
+    }
+
+    selectByMouse: true
+    wrapMode: TextEdit.WordWrap
+
+    activeFocusOnTab: enabled
+    KeyNavigation.priority: KeyNavigation.BeforeItem
+
+    background: Rectangle {
+        radius: 8
+        color: root.enabled ? Theme.palette.baseColor2 : Theme.palette.baseColor4
+        border.width: 1
+        border.color: {
+            if (!root.valid)
+                return Theme.palette.dangerColor1
+            if (root.activeFocus)
+                return Theme.palette.primaryColor1
+            if (root.hovered)
+                return Theme.palette.primaryColor2
+            return "transparent"
+        }
+    }
+
+    cursorDelegate: Rectangle {
+        color: Theme.palette.primaryColor1
+        implicitWidth: 2
+        implicitHeight: 22
+        radius: 1
+        visible: root.cursorVisible
+
+        SequentialAnimation on visible {
+            loops: Animation.Infinite
+            running: root.cursorVisible
+            PropertyAnimation { to: false; duration: 600 }
+            PropertyAnimation { to: true; duration: 600 }
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -50,3 +50,4 @@ StatusIconTextButton 0.1 StatusIconTextButton.qml
 StatusScrollBar 0.1 StatusScrollBar.qml
 StatusComboBox 0.1 StatusComboBox.qml
 StatusItemDelegate 0.1 StatusItemDelegate.qml
+StatusTextArea 0.1 StatusTextArea.qml

src/StatusQ/Layout/StatusAppTwoPanelLayout.qml

@@ -5,7 +5,7 @@ import QtQuick.Controls 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-Item {
+FocusScope {
     id: statusAppTwoPanelLayout
 
     implicitWidth: 822

src/statusq.qrc

@@ -112,6 +112,7 @@
         <file>StatusQ/Controls/StatusToolTip.qml</file>
         <file>StatusQ/Controls/StatusWalletColorButton.qml</file>
         <file>StatusQ/Controls/StatusWalletColorSelect.qml</file>
+        <file>StatusQ/Controls/StatusTextArea.qml</file>
         <file>StatusQ/Core/Backpressure/Backpressure.qml</file>
         <file>StatusQ/Core/Backpressure/LICENSE</file>
         <file>StatusQ/Core/Backpressure/qmldir</file>