From 93ae0728d5b8dfa731bbcc00d8814fae1c70b44f Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 19 Jul 2021 10:33:25 +0200
Subject: [PATCH] Fix message operations popup styling

Issue #65.
---
 src/assets/css/chat.scss |  8 +++---
 src/components/Chat.vue  | 54 +++++++++++++++++++++++++---------------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 44ed99b..8af58d5 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -525,9 +525,9 @@ $admin-fg: white;
     position: absolute;
     width: fit-content;
     background-color: white;
-    height: 45px;
-    border-radius: 20px;
-    box-shadow: 4px 4px 8px #888888;
+    height: 44px;
+    border-radius: 22px;
+    box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
     // &.incoming {
     //     right: 30%;
     // }
@@ -544,7 +544,7 @@ $admin-fg: white;
     height: 40px;
     border-radius: 20px;
     padding: 0px 20px;
-    box-shadow: 4px 4px 8px #888888;
+    box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
 }
 
 .message-operations-picker {
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 4d21986..b429527 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -20,7 +20,7 @@
             showContextMenu = false;
             showContextMenuAnchor = null;
           "
-          v-if="selectedEvent && showContextMenu"
+          v-if="showMessageOperations"
           v-on:addreaction="addReaction"
           v-on:addquickreaction="addQuickReaction"
           v-on:addreply="addReply(selectedEvent)"
@@ -609,6 +609,9 @@ export default {
 
       /** An array of recent emojis. Used in the "message operations" popup. */
       recentEmojis: [],
+
+      /** Calculated style for message operations. We position the "popup" at the selected message. */
+      opStyle: "",
     };
   },
 
@@ -690,25 +693,8 @@ export default {
         return "";
       }
     },
-    opStyle() {
-      // Calculate where to show the context menu.
-      //
-      const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
-      var top = 0;
-      var left = 0;
-      if (ref && ref[0]) {
-        if (this.showContextMenuAnchor) {
-          var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
-          var rectChat =
-            this.$refs.messageOperationsStrut.getBoundingClientRect();
-          top = rectAnchor.top - rectChat.top;
-          left = rectAnchor.left - rectChat.left;
-          if (left + 250 > rectChat.right) {
-            left = rectChat.right - 250; // Pretty ugly, but we want to make sure it does not escape the screen, and we don't have the exakt width of it (yet)!
-          }
-        }
-      }
-      return "top:" + top + "px;left:" + left + "px";
+    showMessageOperations() {
+      return this.selectedEvent && this.showContextMenu;
     },
     avatarOpStyle() {
       // Calculate where to show the context menu.
@@ -783,6 +769,34 @@ export default {
         }
       },
     },
+    showMessageOperations() {
+      if (this.showMessageOperations) {
+        this.$nextTick(() => {
+          // Calculate where to show the context menu.
+          //
+          const ref =
+            this.selectedEvent && this.$refs[this.selectedEvent.getId()];
+          var top = 0;
+          var left = 0;
+          if (ref && ref[0]) {
+            if (this.showContextMenuAnchor) {
+              var rectAnchor =
+                this.showContextMenuAnchor.getBoundingClientRect();
+              var rectChat =
+                this.$refs.messageOperationsStrut.getBoundingClientRect();
+              var rectOps =
+                this.$refs.messageOperations.$el.getBoundingClientRect();
+              top = rectAnchor.top - rectChat.top;
+              left = rectAnchor.left - rectChat.left;
+              if (left + rectOps.width >= rectChat.right) {
+                left = rectChat.right - rectOps.width - 10; // No overflow
+              }
+            }
+          }
+          this.opStyle = "top:" + top + "px;left:" + left + "px";
+        });
+      }
+    },
   },
 
   methods: {