Added overlay and UI changes

1 files changed, 49 insertions, 34 deletions

diff --git a/resources/qml/ForwardCompleter.qml b/resources/qml/ForwardCompleter.qml

index 22d6e5b0..4cc2e09d 100644
--- a/resources/qml/ForwardCompleter.qml
+++ b/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,37 +35,43 @@ Dialog {
         mid = mid_in;
     }
 
-    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)
-    }
+    Column {
+        id: forwardColumn
+        spacing: 5
 
-    MatrixTextField {
-        id: roomTextInput
+        Label {
+            id: titleLabel
+            text: qsTr("Forward Message")
+            font.bold: true
+            bottomPadding: 10
+        }
 
-        width: forwardMessagePopup.width - forwardMessagePopup.leftPadding * 2
+        Reply {
+            id: replyPreview
+            modelData: TimelineManager.timeline ? TimelineManager.timeline.getDump(mid, "") : {
+            }
+            userColor: TimelineManager.userColor(modelData.userId, colors.window)
+        }
 
-        anchors.top: replyPreview.bottom
+        MatrixTextField {
+            id: roomTextInput
 
-        color: colors.text
-        onTextEdited: {
-            completerPopup.completer.searchString = text;
-        }
-        Keys.onPressed: {
-            if (event.key == Qt.Key_Up && completerPopup.opened) {
-                event.accepted = true;
-                completerPopup.up();
-            } else if (event.key == Qt.Key_Down && completerPopup.opened) {
-                event.accepted = true;
-                completerPopup.down();
-            } else if (event.matches(StandardKey.InsertParagraphSeparator)) {
-                completerPopup.finishCompletion();
-                event.accepted = true;
+            width: forwardMessagePopup.width - forwardMessagePopup.leftPadding * 2
+            color: colors.text
+            onTextEdited: {
+                completerPopup.completer.searchString = text;
+            }
+            Keys.onPressed: {
+                if (event.key == Qt.Key_Up && completerPopup.opened) {
+                    event.accepted = true;
+                    completerPopup.up();
+                } else if (event.key == Qt.Key_Down && completerPopup.opened) {
+                    event.accepted = true;
+                    completerPopup.down();
+                } else if (event.matches(StandardKey.InsertParagraphSeparator)) {
+                    completerPopup.finishCompletion();
+                    event.accepted = true;
+                }
             }
         }
     }
@@ -69,10 +79,11 @@ 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"
+    }
 }
\ No newline at end of file