From efd6f735dc19001c1124e7d21a14ac6244874689 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 9 Jul 2021 10:53:28 +0530
Subject: [PATCH] fix: Align delete message menu on twitter bubble correctly
 (#2591)

* fix: Aligns delete message menu on twitter bubble correctly

* Fixes alignment issues
---
 .../widgets/conversation/Message.vue          | 54 +++++++++++--------
 .../components/MessageContextMenu.vue         |  4 +-
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 6c319ee15..bc7dbb19c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -43,16 +43,6 @@
           :source-id="data.source_id"
         />
       </div>
-      <context-menu
-        v-if="isBubble"
-        :is-open="showContextMenu"
-        :show-copy="hasText"
-        :menu-position="contextMenuPosition"
-        @toggle="handleContextMenuClick"
-        @delete="handleDelete"
-        @copy="handleCopy"
-      />
-
       <spinner v-if="isPending" size="tiny" />
 
       <a
@@ -72,6 +62,15 @@
         </div>
       </a>
     </div>
+    <context-menu
+      v-if="isBubble"
+      :is-open="showContextMenu"
+      :show-copy="hasText"
+      :menu-position="contextMenuPosition"
+      @toggle="handleContextMenuClick"
+      @delete="handleDelete"
+      @copy="handleCopy"
+    />
   </li>
 </template>
 <script>
@@ -169,11 +168,17 @@ export default {
     alignBubble() {
       const { message_type: messageType } = this.data;
       const isCentered = messageType === MESSAGE_TYPE.ACTIVITY;
+      const isLeftAligned = messageType === MESSAGE_TYPE.INCOMING;
+      const isRightAligned =
+        messageType === MESSAGE_TYPE.OUTGOING ||
+        messageType === MESSAGE_TYPE.TEMPLATE;
+
       return {
         center: isCentered,
-        left: !messageType,
-        right: !!messageType,
+        left: isLeftAligned,
+        right: isRightAligned,
         'has-context-menu': this.showContextMenu,
+        'has-tweet-menu': this.isATweet,
       };
     },
     readableTime() {
@@ -350,22 +355,29 @@ export default {
   visibility: hidden;
 }
 
-.wrap {
-  display: flex;
-  align-items: flex-end;
-}
-
-li.right .wrap {
-  flex-direction: row-reverse;
-}
-
 li.left,
 li.right {
+  display: flex;
+  align-items: flex-end;
+
   &:hover .button--delete-message {
     visibility: visible;
   }
 }
 
+li.left.has-tweet-menu .context-menu {
+  margin-bottom: var(--space-medium);
+}
+
+li.right .context-menu {
+  margin-left: auto;
+}
+
+li.right {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
 .has-context-menu {
   background: var(--color-background);
   .button--delete-message {
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 9a7cd1d4c..d887ecf7c 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -5,7 +5,7 @@
       size="large"
       class="button--delete-message"
       color-scheme="secondary"
-      variant="clear"
+      variant="link"
       @click="handleContextMenuClick"
     />
     <div
@@ -82,7 +82,7 @@ export default {
 <style lang="scss" scoped>
 /* TDOD: Remove once MenuComponent supports postions */
 .dropdown-pane {
-  bottom: var(--space-large);
+  bottom: var(--space-medium);
 }
 .dropdown-pane--left {
   right: var(--space-small);