feat: Creates pop out reply box (#2832)

* enhancement: Creates draggable pop out replay box

* Review fixes

* Minor fixes

* codeclimate fixes

* Update z-index.scss

* Minor fixes

* Review fixes

* Minor fixes

* Update MessagesView.vue

* Review fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/assets/scss/_woot.scss

@@ -5,6 +5,7 @@
 @import 'shared/assets/stylesheets/font-weights';
 @import 'shared/assets/stylesheets/shadows';
 @import 'shared/assets/stylesheets/border-radius';
+@import 'shared/assets/stylesheets/z-index';
 
 @import 'variables';
 

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -26,6 +26,24 @@
         </span>
       </div>
     </div>
+    <woot-button
+      v-if="popoutReplyBox"
+      variant="clear"
+      size="large"
+      icon="ion-android-close"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
+    <woot-button
+      v-else
+      variant="clear"
+      size="large"
+      icon="ion-arrow-resize"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
   </div>
 </template>
 
@@ -60,6 +78,10 @@ export default {
       type: Number,
       default: () => 0,
     },
+    popoutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     replyButtonClass() {
@@ -167,4 +189,11 @@ export default {
     color: var(--s-600);
   }
 }
+
+.popout-button {
+  display: flex;
+  justify-content: flex-end;
+  height: auto;
+  padding-right: var(--space-normal);
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -78,7 +78,10 @@
         :is-a-tweet="isATweet"
       />
     </ul>
-    <div class="conversation-footer">
+    <div
+      class="conversation-footer"
+      :class="{ 'modal-mask': isPopoutReplyBox }"
+    >
       <div v-if="isAnyoneTyping" class="typing-indicator-wrap">
         <div class="typing-indicator">
           {{ typingUserNames }}
@@ -90,9 +93,12 @@
         </div>
       </div>
       <reply-box
+        v-on-clickaway="closePopoutReplyBox"
         :conversation-id="currentChat.id"
         :is-a-tweet="isATweet"
         :selected-tweet="selectedTweet"
+        :popout-reply-box="isPopoutReplyBox"
+        @click="showPopoutReplyBox"
         @scrollToMessage="scrollToBottom"
       />
     </div>
@@ -110,13 +116,16 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
+import { isEscape } from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Message,
     ReplyBox,
   },
-  mixins: [conversationMixin, inboxMixin],
+  mixins: [conversationMixin, inboxMixin, eventListenerMixins, clickaway],
   props: {
     isContactPanelOpen: {
       type: Boolean,
@@ -130,6 +139,7 @@ export default {
       heightBeforeLoad: null,
       conversationPanel: null,
       selectedTweetId: null,
+      isPopoutReplyBox: false,
     };
   },
 
@@ -252,6 +262,17 @@ export default {
   },
 
   methods: {
+    showPopoutReplyBox() {
+      this.isPopoutReplyBox = !this.isPopoutReplyBox;
+    },
+    closePopoutReplyBox() {
+      this.isPopoutReplyBox = false;
+    },
+    handleKeyEvents(e) {
+      if (isEscape(e)) {
+        this.closePopoutReplyBox();
+      }
+    },
     addScrollListener() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
       this.setScrollParams();
@@ -361,4 +382,39 @@ export default {
   flex-grow: 1;
   min-width: 0;
 }
+
+.modal-mask {
+  &::v-deep {
+    .ProseMirror-woot-style {
+      max-height: 40rem;
+    }
+
+    .reply-box {
+      border: 1px solid var(--color-border);
+      max-width: 120rem;
+      width: 70%;
+    }
+
+    .reply-box .reply-box__top {
+      position: relative;
+      min-height: 44rem;
+    }
+
+    .reply-box__top .input {
+      min-height: 44rem;
+    }
+
+    .emoji-dialog {
+      position: fixed;
+      left: unset;
+      position: absolute;
+    }
+
+    .emoji-dialog::before {
+      transform: rotate(0deg);
+      left: 5px;
+      bottom: var(--space-minus-slab);
+    }
+  }
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -5,6 +5,8 @@
       :set-reply-mode="setReplyMode"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
+      :popout-reply-box="popoutReplyBox"
+      @click="$emit('click')"
     />
     <div class="reply-box__top">
       <canned-response
@@ -122,6 +124,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    popoutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

app/javascript/shared/assets/stylesheets/z-index.scss

@@ -0,0 +1,11 @@
+:root {
+  // z-index
+  --z-index-minus: -1;
+  --z-index-zero: 0;
+  --z-index-low: 10;
+  --z-index-normal: 100;
+  --z-index-high: 1000;
+  --z-index-higher: 2000;
+  --z-index-much-higher: 5000;
+  --z-index-highest: 10000;
+}