Introduce explicit clear button for in-reply-to and edit message, fixes #69

qml/components/InReplyToRow.qml

@@ -31,6 +31,9 @@ Row {
 
     property string myUserId;
     property variant inReplyToMessage;
+    property bool editable: false;
+
+    signal clearRequested()
 
     onInReplyToMessageChanged: {
         if (inReplyToMessage) {
@@ -47,37 +50,51 @@ Row {
         border.width: 0
     }
 
-    Column {
+    Row {
-        id: inReplyToMessageColumn
-        spacing: Theme.paddingSmall
         width: parent.width - Theme.paddingSmall - inReplyToMessageRectangle.width
+        spacing: Theme.paddingSmall
 
-        Text {
+        Column {
-            id: inReplyToUserText
+            id: inReplyToMessageColumn
+            spacing: Theme.paddingSmall
+            width: parent.width - ( inReplyToRow.editable ? ( Theme.paddingSmall + removeInReplyToIconButton.width ) : 0 )
 
-            width: parent.width
+            Text {
-            font.pixelSize: Theme.fontSizeExtraSmall
+                id: inReplyToUserText
-            font.weight: Font.ExtraBold
+
-            color: Theme.primaryColor
+                width: parent.width
-            maximumLineCount: 1
+                font.pixelSize: Theme.fontSizeExtraSmall
-            elide: Text.ElideRight
+                font.weight: Font.ExtraBold
-            textFormat: Text.StyledText
+                color: Theme.primaryColor
-            horizontalAlignment: Text.AlignLeft
+                maximumLineCount: 1
+                elide: Text.ElideRight
+                textFormat: Text.StyledText
+                horizontalAlignment: Text.AlignLeft
+            }
+
+            Text {
+                id: inReplyToMessageText
+                font.pixelSize: Theme.fontSizeExtraSmall
+                color: Theme.primaryColor
+                width: parent.width
+                elide: Text.ElideRight
+                textFormat: Text.StyledText
+                onTruncatedChanged: {
+                    // There is obviously a bug in QML in truncating text with images.
+                    // We simply remove Emojis then...
+                    if (truncated) {
+                        text = text.replace(/\<img [^>]+\/\>/g, "");
+                    }
+                }
+            }
         }
 
-        Text {
+        IconButton {
-            id: inReplyToMessageText
+            id: removeInReplyToIconButton
-            font.pixelSize: Theme.fontSizeExtraSmall
+            icon.source: "image://theme/icon-m-clear"
-            color: Theme.primaryColor
+            visible: inReplyToRow.editable
-            width: parent.width
+            onClicked: {
-            elide: Text.ElideRight
+                inReplyToRow.clearRequested();
-            textFormat: Text.StyledText
-            onTruncatedChanged: {
-                // There is obviously a bug in QML in truncating text with images.
-                // We simply remove Emojis then...
-                if (truncated) {
-                    text = text.replace(/\<img [^>]+\/\>/g, "");
-                }
             }
         }
     }

qml/pages/ChatPage.qml

@@ -175,6 +175,8 @@ Page {
             }
         }
         controlSendButton();
+        newMessageInReplyToRow.inReplyToMessage = null;
+        newMessageColumn.editMessageId = "0";
     }
 
     function getWordBoundaries(text, cursorPosition) {
@@ -1088,6 +1090,12 @@ Page {
                         }
                     }
 
+                    editable: true
+
+                    onClearRequested: {
+                        newMessageInReplyToRow.inReplyToMessage = null;
+                    }
+
                     id: newMessageInReplyToRow
                     myUserId: chatPage.myUserId
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -1265,15 +1273,31 @@ Page {
                     }
                 }
 
-                Text {
+                Row {
                     width: parent.width
-
+                    spacing: Theme.paddingSmall
-                    id: editMessageText
-                    font.pixelSize: Theme.fontSizeSmall
-                    font.bold: true
-                    text: qsTr("Edit Message")
-                    color: Theme.secondaryColor
                     visible: newMessageColumn.editMessageId !== "0"
+
+                    Text {
+                        width: parent.width - Theme.paddingSmall - removeEditMessageIconButton.width
+
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        id: editMessageText
+                        font.pixelSize: Theme.fontSizeSmall
+                        font.bold: true
+                        text: qsTr("Edit Message")
+                        color: Theme.secondaryColor
+                    }
+
+                    IconButton {
+                        id: removeEditMessageIconButton
+                        icon.source: "image://theme/icon-m-clear"
+                        onClicked: {
+                            newMessageColumn.editMessageId = "0";
+                            newMessageTextField.text = "";
+                        }
+                    }
                 }
 
                 Row {
@@ -1291,15 +1315,6 @@ Page {
                         labelVisible: false
                         textLeftMargin: 0
                         textTopMargin: 0
-                        onFocusChanged: {
-                            if (!focus) {
-                                newMessageInReplyToRow.inReplyToMessage = null;
-                                if (newMessageColumn.editMessageId !== "0") {
-                                    newMessageColumn.editMessageId = "0";
-                                    newMessageTextField.text = "";
-                                }
-                            }
-                        }
                         EnterKey.onClicked: {
                             if (appSettings.sendByEnter) {
                                 sendMessage();