Add HScrollableTextArea and make SendBox use it

harmonyqml/components/base/HScrollableTextArea.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+
+ScrollView {
+    property alias placeholderText: textArea.placeholderText
+    property alias text: textArea.text
+    property alias area: textArea
+
+    default property alias textAreaData: textArea.data
+
+    clip: true
+
+    TextArea {
+        id: textArea
+        readOnly: ! visible
+        selectByMouse: true
+
+        wrapMode: TextEdit.Wrap
+        font.family: HStyle.fontFamily.sans
+        font.pixelSize: HStyle.fontSize.normal
+        color: HStyle.colors.foreground
+    }
+}
+

harmonyqml/components/chat/SendBox.qml

@@ -14,7 +14,7 @@ Base.HGlassRectangle {
     Layout.maximumHeight: pageStack.height / 2
     color: Base.HStyle.chat.sendBox.background
 
-    RowLayout {
+    Base.HRowLayout {
         anchors.fill: parent
         spacing: 0
 
@@ -24,31 +24,21 @@ Base.HGlassRectangle {
             dimension: root.Layout.minimumHeight
         }
 
-        ScrollView {
+        Base.HScrollableTextArea {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            id: sendBoxScrollView
-            clip: true
-
-            TextArea {
-                property string typedText: text
 
             id: textArea
             placeholderText: qsTr("Type a message...")
-                wrapMode: TextEdit.Wrap
-                selectByMouse: true
-                readOnly: ! visible
-                font.family: "Roboto"
-                font.pixelSize: 16
-                focus: true
+            area.focus: true
 
             function setTyping(typing) {
                 Backend.clientManager.clients[chatPage.userId]
                        .setTypingState(chatPage.roomId, typing)
             }
 
-                onTypedTextChanged: setTyping(Boolean(text))
-                onEditingFinished: setTyping(false)  // when lost focus
+            onTextChanged: setTyping(Boolean(text))
+            area.onEditingFinished: setTyping(false)  // when lost focus
 
             Keys.onReturnPressed: {
                 event.accepted = true
@@ -69,5 +59,4 @@ Base.HGlassRectangle {
             Keys.onEnterPressed: Keys.onReturnPressed(event)  // numpad enter
         }
     }
-    }
 }