From 2ef5cd455118824e23f3228dc0e2287d4827fdf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Wolker?= <woljiri@gmail.com>
Date: Thu, 23 Apr 2020 17:22:36 -0700
Subject: [PATCH] [SMS App] Make SMS message field scrollable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

This patch makes SMS message field scrollable and limits its height to ⅓
of window height (or ⅔ for smaller windows) so messages in conversation
are shown even when writing very long messages.

## Test Plan (and screenshots)

<small>These screenshots are in APNG and WEBP formats. Download them if
your browser does not support this format.</small>

### Before:

Message field height was not limited. Message field could be even higher
than window. That makes first lines of this field and messages in
conversation inaccessible.

![grab-noscroll.apng](/uploads/70a44ec3abd0e0707cf69f53ee832542/grab-noscroll.apng)

### After:

Message field height is limited to ⅓ or ⅔ of window height. When text
content reaches this threshold, scroll bars will show up.

![grab-scroll.webp](/uploads/489b9bb197a092f715bc2160acc7fd42/grab-scroll.webp)
---
 smsapp/qml/ConversationDisplay.qml | 40 +++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/smsapp/qml/ConversationDisplay.qml b/smsapp/qml/ConversationDisplay.qml
index d3aa1a684..199905b80 100644
--- a/smsapp/qml/ConversationDisplay.qml
+++ b/smsapp/qml/ConversationDisplay.qml
@@ -199,28 +199,38 @@ Kirigami.ScrollablePage
         RowLayout {
             anchors.fill: parent
 
-            TextArea {
-                id: messageField
+            ScrollView {
                 Layout.fillWidth: true
-                placeholderText: page.isMultitarget ? i18nd("kdeconnect-sms", "Replying to multitarget messages is not supported") : i18nd("kdeconnect-sms", "Compose message")
-                wrapMode: TextArea.Wrap
-                topPadding: Kirigami.Units.gridUnit * 0.5
-                bottomPadding: topPadding
-                selectByMouse: true
-                background: Item {}
-                Keys.onReturnPressed: {
-                    if (event.key === Qt.Key_Return) {
-                        if (event.modifiers & Qt.ShiftModifier) {
-                            messageField.append("")
-                        } else {
-                            sendButton.onClicked()
-                            event.accepted = true
+                Layout.maximumHeight: page.height > 300 ? page.height / 3 : 2 * page.height / 3
+                contentWidth: page.width - sendButtonArea.width
+                clip: true
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+                TextArea {
+                    anchors.fill: parent
+                    id: messageField
+                    placeholderText: page.isMultitarget ? i18nd("kdeconnect-sms", "Replying to multitarget messages is not supported") : i18nd("kdeconnect-sms", "Compose message")
+                    wrapMode: TextArea.Wrap
+                    topPadding: Kirigami.Units.gridUnit * 0.5
+                    bottomPadding: topPadding
+                    selectByMouse: true
+                    topInset: height * 2 // This removes background (frame) of the TextArea. Setting `background: Item {}` would cause segfault.
+                    Keys.onReturnPressed: {
+                        if (event.key === Qt.Key_Return) {
+                            if (event.modifiers & Qt.ShiftModifier) {
+                                messageField.append("")
+                            } else {
+                                sendButton.onClicked()
+                                event.accepted = true
+                            }
                         }
                     }
                 }
             }
             
             ColumnLayout {
+                id: sendButtonArea
+
                 ToolButton {
                     id: sendButton
                     Layout.preferredWidth: Kirigami.Units.gridUnit * 2