From a76b50b48e790625d1089f38483f18ffa62b935b Mon Sep 17 00:00:00 2001
From: Malte E <malte.e@mailbox.org>
Date: Fri, 11 Mar 2022 21:32:32 +0100
Subject: [PATCH] small rework of the reply popup

---
 resources/icons/ui/dismiss_edit.svg | 15 +++++++++++++++
 resources/qml/MessageInput.qml      |  1 -
 resources/qml/ReplyPopup.qml        | 30 ++++++++++++++++-------------
 resources/res.qrc                   |  1 +
 4 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 resources/icons/ui/dismiss_edit.svg

diff --git a/resources/icons/ui/dismiss_edit.svg b/resources/icons/ui/dismiss_edit.svg
new file mode 100644
index 00000000..c78a55c7
--- /dev/null
+++ b/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>
diff --git a/resources/qml/MessageInput.qml b/resources/qml/MessageInput.qml
index f8ab494b..9a21ac05 100644
--- a/resources/qml/MessageInput.qml
+++ b/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: {
diff --git a/resources/qml/ReplyPopup.qml b/resources/qml/ReplyPopup.qml
index ef0d7c60..914f5d33 100644
--- a/resources/qml/ReplyPopup.qml
+++ b/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.right: closeReplyButton.left
-        anchors.rightMargin: 2 * 22 + 3 * 16
-        anchors.bottom: parent.bottom
+        anchors.leftMargin: replyPopup.width < 450? Nheko.paddingSmall : (CallManager.callsSupported? 2*(22+16) : 1*(22+16))
+        anchors.right: parent.right
+        anchors.rightMargin: replyPopup.width < 450? 2*(22+16) : 3*(22+16)
+        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.rightMargin: 16
+        anchors.right: replyPreview.right
         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.rightMargin: 16
-        anchors.topMargin: 10
+        anchors.right: parent.right
+        anchors.margins: 8
         anchors.top: parent.top
-        //height: 16
-        text: qsTr("Cancel edit")
+        hoverEnabled: true
+        image: ":/icons/icons/ui/dismiss_edit.svg"
+        width: 22
+        height: 22
+        ToolTip.visible: closeEditButton.hovered
+        ToolTip.text: qsTr("Cancel Edit")
         onClicked: room.edit = undefined
     }
 
diff --git a/resources/res.qrc b/resources/res.qrc
index c8659150..a383f805 100644
--- a/resources/res.qrc
+++ b/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>