chore: Refactor conversation info panel for RTL (#6526)

* chore: Refactor conversation info panel for RTL

* chore: Adds comments

* chore: Settings header icon fix

* chore: Toggle layout switch

* chore: Border fix in chat list

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -80,8 +80,8 @@
   // Settings header
   .settings-header {
     .header--icon {
-      margin-left: 0;
+      margin-left: var(--space-small);
-      margin-right: var(--space-small);
+      margin-right: var(--space-smaller);
     }
   }
 
@@ -246,8 +246,14 @@
       }
     }
 
-    .search-header--wrap .search--input {
+    .search-header--wrap {
-      text-align: right;
+      .search--input {
+        text-align: right;
+      }
+
+      .layout-switch__container {
+        transform: rotate(180deg);
+      }
     }
 
     // Card label

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -67,6 +67,7 @@
 
 .conversations-list-wrap {
   @include flex;
+  border-right: 1px solid var(--s-50);
   flex-direction: column;
 
   .load-more-conversations {

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -66,7 +66,7 @@
 
 .header--icon {
   display: block;
-  margin: 0 var(--space-normal);
+  margin: 0 var(--space-small) 0 var(--space-smaller);
 
   @media screen and (max-width: 1200px) {
     display: none;

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

@@ -27,7 +27,7 @@
       <emoji-input
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
-        :class="emojiDialogClassOnExpanedLayout"
+        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
         :on-click="emojiOnClick"
       />
       <reply-email-head
@@ -179,6 +179,7 @@ import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import rtlMixin from 'shared/mixins/rtlMixin';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -202,6 +203,7 @@ export default {
     uiSettingsMixin,
     alertMixin,
     messageFormatterMixin,
+    rtlMixin,
   ],
   props: {
     selectedTweet: {
@@ -422,10 +424,14 @@ export default {
       } = this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    emojiDialogClassOnExpanedLayout() {
+    emojiDialogClassOnExpandedLayoutAndRTLView() {
-      return this.isOnExpandedLayout || this.popoutReplyBox
+      if (this.isOnExpandedLayout || this.popoutReplyBox) {
-        ? 'emoji-dialog--expanded'
+        return 'emoji-dialog--expanded';
-        : '';
+      }
+      if (this.isRTLView) {
+        return 'emoji-dialog--rtl';
+      }
+      return '';
     },
     replyToUserLength() {
       const selectedTweet = this.selectedTweet || {};
@@ -1098,7 +1104,7 @@ export default {
 
 .emoji-dialog {
   top: unset;
-  bottom: var(--space-normal);
+  bottom: -40px;
   left: -320px;
   right: unset;
 
@@ -1109,6 +1115,19 @@ export default {
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
   }
 }
+
+.emoji-dialog--rtl {
+  left: unset;
+  right: -320px;
+  &::before {
+    left: var(--space-minus-normal);
+    transform: rotate(90deg);
+    right: 0;
+    bottom: var(--space-small);
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
+  }
+}
+
 .emoji-dialog--expanded {
   left: unset;
   bottom: var(--space-jumbo);

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -184,9 +184,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// For RTL direction view
+.app-rtl--wrapper {
+  .bulk-action__actions {
+    ::v-deep .button--only-icon:last-child {
+      margin-right: var(--space-smaller);
+    }
+  }
+}
+
 .bulk-action__container {
   border-bottom: 1px solid var(--s-100);
-  padding: var(--space-normal) var(--space-one);
+  padding: var(--space-normal);
   position: relative;
 }
 
@@ -195,7 +204,7 @@ export default {
 
   span {
     font-size: var(--font-size-mini);
-    margin-left: var(--space-smaller);
+    margin: 0 var(--space-smaller);
   }
 
   input[type='checkbox'] {

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -70,6 +70,7 @@ export default {
   flex-direction: column;
   flex-grow: 1;
   margin-left: var(--space-small);
+  margin-right: var(--space-small);
 }
 .option__body,
 .option__title {
@@ -93,10 +94,6 @@ export default {
   color: var(--s-700);
 }
 
-.email-icon-wrap {
-  margin-right: var(--space-normal);
-}
-
 .option__user-data .option__body {
   > .phone-icon-wrap,
   > .email-icon-wrap {

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -11,7 +11,7 @@
         <div class="date-wrap">
           <span class="fw-medium"> {{ noteAuthorName }} </span>
           <span> {{ $t('NOTES.LIST.LABEL') }} </span>
-          <span class="fw-medium"> {{ readableTime }} </span>
+          <span class="fw-medium time-stamp"> {{ readableTime }} </span>
         </div>
       </div>
       <div class="actions">
@@ -105,6 +105,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// For RTL direction view
+.app-rtl--wrapper {
+  .note__content {
+    ::v-deep {
+      p {
+        unicode-bidi: plaintext;
+      }
+    }
+  }
+}
+
 .note__content {
   margin-top: var(--space-normal);
 }
@@ -120,7 +131,7 @@ export default {
     align-items: center;
 
     .date-wrap {
-      margin-left: var(--space-smaller);
+      margin: 0 var(--space-smaller);
       padding: var(--space-micro);
       color: var(--color-body);
     }

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -3,13 +3,13 @@
     class="small-12 medium-3 bg-white contact--panel"
     :class="{ 'border-left': showAvatar }"
   >
-    <span v-if="showAvatar" class="close-button" @click="onClose">
-      <fluent-icon icon="dismiss" class="close-icon" />
-    </span>
     <contact-info
+      :show-close-button="showCloseButton"
       :show-avatar="showAvatar"
       :contact="contact"
+      close-icon-name="dismiss"
       @panel-close="onClose"
+      @toggle-panel="onClose"
     />
     <draggable
       :list="contactSidebarItems"
@@ -113,6 +113,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -164,19 +168,6 @@ export default {
   }
 }
 
-.close-button {
-  position: absolute;
-  right: var(--space-normal);
-  top: 3.6rem;
-  font-size: var(--font-size-big);
-  color: var(--s-500);
-  z-index: 1;
-
-  .close-icon {
-    margin-right: var(--space-smaller);
-  }
-}
-
 .conversation--details {
   padding: 0 var(--space-normal);
 }

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -29,7 +29,11 @@
       class="overflow-hidden column contact--dashboard-content"
     >
       <div class="row h-full">
-        <contact-info-panel :show-avatar="false" :contact="contact" />
+        <contact-info-panel
+          :show-close-button="false"
+          :show-avatar="false"
+          :contact="contact"
+        />
         <div class="small-12 medium-9 h-full">
           <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
             <woot-tabs-item

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -74,4 +74,11 @@ export default {
   margin-bottom: var(--space-normal);
   color: var(--b-500);
 }
+
+::v-deep .conversation {
+  padding-right: 0;
+  .conversation--details {
+    padding-left: var(--space-small);
+  }
+}
 </style>

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
-    <woot-button
+    <contact-info
-      icon="chevron-right"
+      :contact="contact"
-      class="close-button clear secondary"
+      :channel-type="channelType"
-      @click="onPanelToggle"
+      @toggle-panel="onPanelToggle"
     />
-    <contact-info :contact="contact" :channel-type="channelType" />
     <draggable
       :list="conversationSidebarItems"
       :disabled="!dragEnabled"
@@ -295,15 +294,6 @@ export default {
   }
 }
 
-.close-button {
-  position: absolute;
-  right: $space-two;
-  top: $space-slab;
-  font-size: $font-size-default;
-  color: $color-heading;
-  z-index: 9989;
-}
-
 .conversation--labels {
   padding: $space-medium;
 

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="contact--profile">
     <div class="contact--info">
-      <thumbnail
+      <div class="contact-info--header">
-        v-if="showAvatar"
+        <thumbnail
-        :src="contact.thumbnail"
+          v-if="showAvatar"
-        size="56px"
+          :src="contact.thumbnail"
-        :username="contact.name"
+          size="56px"
-        :status="contact.availability_status"
+          :username="contact.name"
-      />
+          :status="contact.availability_status"
+        />
+        <woot-button
+          v-if="showCloseButton"
+          :icon="closeIconName"
+          class="clear secondary close-button--rtl"
+          @click="onPanelToggle"
+        />
+      </div>
 
       <div class="contact--details">
         <div v-if="showAvatar" class="contact--name-wrap">
@@ -194,6 +202,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    closeIconName: {
+      type: String,
+      default: 'chevron-right',
+    },
   },
   data() {
     return {
@@ -244,6 +260,9 @@ export default {
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
+    onPanelToggle() {
+      this.$emit('toggle-panel');
+    },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
     },
@@ -295,10 +314,6 @@ export default {
   position: relative;
   align-items: flex-start;
   padding: var(--space-normal);
-
-  .user-thumbnail-box {
-    margin-right: var(--space-normal);
-  }
 }
 
 .contact--details {
@@ -310,6 +325,12 @@ export default {
   text-align: left;
 }
 
+.contact-info--header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
 .contact--name-wrap {
   display: flex;
   align-items: center;
@@ -319,7 +340,7 @@ export default {
 .contact--name {
   text-transform: capitalize;
   white-space: normal;
-  margin: 0 var(--space-smaller) 0 0;
+  margin: 0 var(--space-smaller) 0 var(--space-smaller);
 
   a {
     color: var(--color-body);
@@ -346,9 +367,10 @@ export default {
     margin-right: var(--space-small);
   }
 }
-.merege-summary--card {
+.merge-summary--card {
   padding: var(--space-normal);
 }
+
 .contact--bio {
   word-wrap: break-word;
 }

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -335,7 +335,6 @@ export default {
   align-items: center;
   height: 3.9rem;
   background: var(--color-background-light);
-
   border: 1px solid var(--color-border);
   padding: var(--space-smaller) var(--space-small);
   border-radius: var(--border-radius-small);
@@ -343,6 +342,7 @@ export default {
   .contact-name {
     margin: 0;
     margin-left: var(--space-small);
+    margin-right: var(--space-small);
   }
 }
 

app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue

@@ -43,6 +43,8 @@ export default {
 
 <style scoped lang="scss">
 .social--icons {
+  align-items: flex-end;
+  display: flex;
   margin: var(--space-small) 0 var(--space-smaller);
 }