Added overlay and UI changes

resources/qml/ForwardCompleter.qml

@@ -7,14 +7,18 @@ import QtQuick 2.9
 import QtQuick.Controls 2.3
 import im.nheko 1.0
 
-Dialog {
+Popup {
     id: forwardMessagePopup
-    title: qsTr("Forward Message")
+    palette: colors
+    parent: Overlay.overlay
+    modal: true
     x: 400
-    y: 400
+    y: 200
 
-    width: 200
-    height: replyPreview.height + roomTextInput.height + completerPopup.height + implicitFooterHeight + implicitHeaderHeight
+    width: implicitWidth >= 300 ? implicitWidth : 300
+    height: implicitHeight + completerPopup.height + padding * 2
+    leftPadding: 10
+    rightPadding: 10
 
     property var mid
 
@@ -31,11 +35,19 @@ Dialog {
         mid = mid_in;
     }
 
+    Column {
+        id: forwardColumn
+        spacing: 5
+
+        Label {
+            id: titleLabel
+            text: qsTr("Forward Message")
+            font.bold: true
+            bottomPadding: 10
+        }
+
         Reply {
             id: replyPreview
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
             modelData: TimelineManager.timeline ? TimelineManager.timeline.getDump(mid, "") : {
             }
             userColor: TimelineManager.userColor(modelData.userId, colors.window)
@@ -45,9 +57,6 @@ Dialog {
             id: roomTextInput
 
             width: forwardMessagePopup.width - forwardMessagePopup.leftPadding * 2
-
-        anchors.top: replyPreview.bottom
-
             color: colors.text
             onTextEdited: {
                 completerPopup.completer.searchString = text;
@@ -65,14 +74,16 @@ Dialog {
                 }
             }
         }
+    }
 
     Completer {
         id: completerPopup
 
-        y: replyPreview.height + roomTextInput.height + roomTextInput.bottomPadding
-
+        y: titleLabel.height + replyPreview.height + roomTextInput.height + roomTextInput.bottomPadding + forwardColumn.spacing * 3
         width: forwardMessagePopup.width - forwardMessagePopup.leftPadding * 2
         completerName: "room"
+        fullWidth: true
+        centerRowContent: false
         avatarHeight: 24
         avatarWidth: 24
         bottomToTop: false
@@ -90,4 +101,8 @@ Dialog {
         }
         target: completerPopup
     }
+
+    Overlay.modal: Rectangle {
+        color: "#aa1E1E1E"
+    }
 }