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,50 +24,39 @@ Base.HGlassRectangle {
             dimension: root.Layout.minimumHeight
         }
 
-        ScrollView {
+        Base.HScrollableTextArea {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            id: sendBoxScrollView
-            clip: true
 
-            TextArea {
+            id: textArea
-                property string typedText: text
+            placeholderText: qsTr("Type a message...")
+            area.focus: true
 
-                id: textArea
+            function setTyping(typing) {
-                placeholderText: qsTr("Type a message...")
+                Backend.clientManager.clients[chatPage.userId]
-                wrapMode: TextEdit.Wrap
+                       .setTypingState(chatPage.roomId, typing)
-                selectByMouse: true
-                readOnly: ! visible
-                font.family: "Roboto"
-                font.pixelSize: 16
-                focus: true
-
-                function setTyping(typing) {
-                    Backend.clientManager.clients[chatPage.userId]
-                           .setTypingState(chatPage.roomId, typing)
-                }
-
-                onTypedTextChanged: setTyping(Boolean(text))
-                onEditingFinished: setTyping(false)  // when lost focus
-
-                Keys.onReturnPressed: {
-                    event.accepted = true
-
-                    if (event.modifiers & Qt.ShiftModifier ||
-                        event.modifiers & Qt.ControlModifier ||
-                        event.modifiers & Qt.AltModifier) {
-                        textArea.insert(textArea.cursorPosition, "\n")
-                        return
-                    }
-
-                    if (textArea.text === "") { return }
-                    Backend.clientManager.clients[chatPage.userId]
-                           .sendMarkdown(chatPage.roomId, textArea.text)
-                    textArea.clear()
-                }
-
-                Keys.onEnterPressed: Keys.onReturnPressed(event)  // numpad enter
             }
+
+            onTextChanged: setTyping(Boolean(text))
+            area.onEditingFinished: setTyping(false)  // when lost focus
+
+            Keys.onReturnPressed: {
+                event.accepted = true
+
+                if (event.modifiers & Qt.ShiftModifier ||
+                    event.modifiers & Qt.ControlModifier ||
+                    event.modifiers & Qt.AltModifier) {
+                    textArea.insert(textArea.cursorPosition, "\n")
+                    return
+                }
+
+                if (textArea.text === "") { return }
+                Backend.clientManager.clients[chatPage.userId]
+                       .sendMarkdown(chatPage.roomId, textArea.text)
+                textArea.clear()
+            }
+
+            Keys.onEnterPressed: Keys.onReturnPressed(event)  // numpad enter
         }
     }
 }