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,10 +50,14 @@ Row {
         border.width: 0
     }
 
+    Row {
+        width: parent.width - Theme.paddingSmall - inReplyToMessageRectangle.width
+        spacing: Theme.paddingSmall
+
         Column {
             id: inReplyToMessageColumn
             spacing: Theme.paddingSmall
-        width: parent.width - Theme.paddingSmall - inReplyToMessageRectangle.width
+            width: parent.width - ( inReplyToRow.editable ? ( Theme.paddingSmall + removeInReplyToIconButton.width ) : 0 )
 
             Text {
                 id: inReplyToUserText
@@ -82,4 +89,14 @@ Row {
             }
         }
 
+        IconButton {
+            id: removeInReplyToIconButton
+            icon.source: "image://theme/icon-m-clear"
+            visible: inReplyToRow.editable
+            onClicked: {
+                inReplyToRow.clearRequested();
+            }
+        }
+    }
+
 }

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
+                    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
-                    visible: newMessageColumn.editMessageId !== "0"
+                    }
+
+                    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();