Merge pull request #989 from maltee1/improve_reply_popup

small rework of the reply popup

resources/icons/ui/dismiss_edit.svg

@@ -0,0 +1,15 @@
+<svg
+   width="96"
+   height="96"
+   viewBox="0 0 32 32"
+   fill="none"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     d="M27.3138 4.68622C28.8759 6.24832 28.8759 8.78098 27.3138 10.3431L12.5409 25.116C11.9001 25.7568 11.0972 26.2114 10.218 26.4312L5.63602 27.5767C4.90364 27.7598 4.24025 27.0964 4.42335 26.364L5.56885 21.782C5.78864 20.9028 6.24323 20.0999 6.88402 19.4591L21.6569 4.68622C23.219 3.12412 25.7517 3.12412 27.3138 4.68622ZM20.2426 8.92865L8.29824 20.8734C7.91376 21.2578 7.641 21.7396 7.50913 22.2671L6.76786 25.2322L9.73295 24.4909C10.2604 24.359 10.7422 24.0863 11.1267 23.7018L23.0706 11.7566L20.2426 8.92865ZM23.0712 6.10043L21.6566 7.51465L24.4846 10.3426L25.8996 8.92886C26.6806 8.14781 26.6806 6.88148 25.8996 6.10043C25.1185 5.31939 23.8522 5.31939 23.0712 6.10043Z"
+     fill="#212121" />
+  <path
+     d="m 4.6851341,3.8419199 c 0.39052,-0.39053 1.02369,-0.39053 1.41421,0 22.0431099,22.0431801 0,0 22.0431099,22.0431801 0.3906,0.3905 0.3906,1.0237 0,1.4142 -0.3905,0.3905 -1.0236,0.3905 -1.4142,0 C 4.6851341,5.2561299 26.581382,27.152484 4.6851341,5.2561299 c -0.39053,-0.39052 -0.39053,-1.02369 0,-1.41421 z"
+     fill="#212121" />
+</svg>

resources/qml/MessageInput.qml

@@ -446,7 +446,6 @@ Rectangle {
             width: 22
             height: 22
             image: ":/icons/icons/ui/send.svg"
-            Layout.rightMargin: 8
             ToolTip.visible: hovered
             ToolTip.text: qsTr("Send")
             onClicked: {

resources/qml/ReplyPopup.qml

@@ -15,7 +15,7 @@ Rectangle {
     Layout.fillWidth: true
     visible: room && (room.reply || room.edit)
     // Height of child, plus margins, plus border
-    implicitHeight: (room && room.reply ? replyPreview.height : closeEditButton.height) + 10
+    implicitHeight: (room && room.reply ? replyPreview.height : closeEditButton.height) + Nheko.paddingSmall
     color: Nheko.colors.window
     z: 3
 
@@ -27,10 +27,11 @@ Rectangle {
 
         visible: room && room.reply
         anchors.left: parent.left
-        anchors.leftMargin: 2 * 22 + 3 * 16
+        anchors.leftMargin: replyPopup.width < 450? Nheko.paddingSmall : (CallManager.callsSupported? 2*(22+16) : 1*(22+16))
-        anchors.right: closeReplyButton.left
+        anchors.right: parent.right
-        anchors.rightMargin: 2 * 22 + 3 * 16
+        anchors.rightMargin: replyPopup.width < 450? 2*(22+16) : 3*(22+16)
-        anchors.bottom: parent.bottom
+        anchors.top: parent.top
+        anchors.topMargin: Nheko.paddingSmall
         userColor: TimelineManager.userColor(modelData.userId, Nheko.colors.window)
         blurhash: modelData.blurhash ?? ""
         body: modelData.body ?? ""
@@ -54,9 +55,9 @@ Rectangle {
         id: closeReplyButton
 
         visible: room && room.reply
-        anchors.right: parent.right
+        anchors.right: replyPreview.right
-        anchors.rightMargin: 16
         anchors.top: replyPreview.top
+        anchors.margins: Nheko.paddingSmall
         hoverEnabled: true
         width: 16
         height: 16
@@ -66,16 +67,19 @@ Rectangle {
         onClicked: room.reply = undefined
     }
 
-    Button {
+    ImageButton {
         id: closeEditButton
 
         visible: room && room.edit
-        anchors.left: parent.left
+        anchors.right: parent.right
-        anchors.rightMargin: 16
+        anchors.margins: 8
-        anchors.topMargin: 10
         anchors.top: parent.top
-        //height: 16
+        hoverEnabled: true
-        text: qsTr("Cancel edit")
+        image: ":/icons/icons/ui/dismiss_edit.svg"
+        width: 22
+        height: 22
+        ToolTip.visible: closeEditButton.hovered
+        ToolTip.text: qsTr("Cancel Edit")
         onClicked: room.edit = undefined
     }
 

resources/res.qrc

@@ -10,6 +10,7 @@
         <file>icons/ui/collapsed.svg</file>
         <file>icons/ui/delete.svg</file>
         <file>icons/ui/dismiss.svg</file>
+        <file>icons/ui/dismiss_edit.svg</file>
         <file>icons/ui/double-checkmark.svg</file>
         <file>icons/ui/download.svg</file>
         <file>icons/ui/edit.svg</file>