chore: Move conversation header above sidebar (#1835)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -43,10 +43,6 @@ $resolve-button-width: 13.2rem;
     @include flex;
     @include flex-align($x: center, $y: middle);
 
-    &.hide {
-      visibility: hidden;
-    }
-
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;

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

@@ -42,7 +42,7 @@
   }
 }
 
-.conversations-sidebar {
+.conversations-list-wrap {
   @include flex;
   flex-direction: column;
 
@@ -92,44 +92,6 @@
   }
 }
 
-.conversation-wrap {
-  @include margin(0);
-  @include border-normal-left;
-  background: var(--color-background-light);
-
-  .current-chat {
-    @include flex;
-    @include full-height;
-    @include flex-align(center, middle);
-    flex-direction: column;
-
-    div {
-      @include flex;
-      @include full-height;
-      @include flex-align(center, middle);
-      flex-direction: column;
-
-      img {
-        @include margin($space-normal);
-        width: 10rem;
-      }
-
-      span {
-        font-size: $font-size-small;
-        font-weight: $font-weight-medium;
-        text-align: center;
-      }
-    }
-  }
-
-  .conv-empty-state {
-    @include flex;
-    @include full-height;
-    @include flex-align(center, middle);
-    flex-direction: column;
-  }
-}
-
 .conversation-panel {
   @include flex;
   @include flex-weight(1);

app/javascript/dashboard/components/ChatList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="conversations-sidebar  medium-4 columns">
+  <div class="conversations-list-wrap">
     <slot></slot>
     <div class="chat-list__top">
       <h1 class="page-title text-truncate" :title="pageTitle">
@@ -218,9 +218,24 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/app.scss';
 .spinner {
-  margin-top: $space-normal;
+  margin-top: var(--space-normal);
-  margin-bottom: $space-normal;
+  margin-bottom: var(--space-normal);
+}
+
+.conversations-list-wrap {
+  flex-shrink: 0;
+  width: 34rem;
+
+  @include breakpoint(large up) {
+    width: 36rem;
+  }
+  @include breakpoint(xlarge up) {
+    width: 33rem;
+  }
+  @include breakpoint(xxlarge up) {
+    width: 42rem;
+  }
 }
 </style>

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

@@ -1,5 +1,12 @@
 <template>
-  <div :class="conversationClass">
+  <div class="conversation-details-wrap">
+    <conversation-header
+      v-if="currentChat.id"
+      :chat="currentChat"
+      :is-contact-panel-open="isContactPanelOpen"
+      @contact-panel-toggle="onToggleContactPanel"
+    />
+    <div class="messages-and-sidebar">
       <messages-view
         v-if="currentChat.id"
         :inbox-id="inboxId"
@@ -7,10 +14,21 @@
         @contact-panel-toggle="onToggleContactPanel"
       />
       <empty-state v-else />
+
+      <div v-show="showContactPanel" class="conversation-sidebar-wrap">
+        <contact-panel
+          v-if="showContactPanel"
+          :conversation-id="currentChat.id"
+          :on-toggle="onToggleContactPanel"
+        />
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel';
+import ConversationHeader from './ConversationHeader';
 import EmptyState from './EmptyState';
 import MessagesView from './MessagesView';
 
@@ -18,6 +36,8 @@ export default {
   components: {
     EmptyState,
     MessagesView,
+    ContactPanel,
+    ConversationHeader,
   },
 
   props: {
@@ -35,10 +55,8 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
     }),
-    conversationClass() {
+    showContactPanel() {
-      return `medium-${
+      return this.isContactPanelOpen && this.currentChat.id;
-        this.isContactPanelOpen ? '5' : '8'
-      } columns conversation-wrap`;
     },
   },
   methods: {
@@ -48,3 +66,50 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/app.scss';
+
+.conversation-details-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-left: 1px solid var(--color-border);
+}
+
+.messages-and-sidebar {
+  display: flex;
+  background: var(--color-background-light);
+  margin: 0;
+  height: auto;
+  flex: 1 1;
+  overflow: hidden;
+}
+
+.conversation-sidebar-wrap {
+  height: auto;
+  flex: 0 1;
+  overflow: hidden;
+  overflow: auto;
+  background: white;
+  flex-shrink: 0;
+  flex-basis: 28rem;
+
+  @include breakpoint(large up) {
+    flex-basis: 31em;
+  }
+
+  @include breakpoint(xlarge up) {
+    flex-basis: 32em;
+  }
+
+  @include breakpoint(xxlarge up) {
+    flex-basis: 36rem;
+  }
+
+  &::v-deep .contact--panel {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+  }
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="conv-header">
-    <div class="user" :class="{ hide: isContactPanelOpen }">
+    <div class="user">
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
@@ -9,7 +9,7 @@
         :status="currentContact.availability_status"
       />
       <div class="user--profile__meta">
-        <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
+        <h3 class="user--name text-truncate">
           {{ currentContact.name }}
         </h3>
         <button
@@ -17,9 +17,11 @@
           @click="$emit('contact-panel-toggle')"
         >
           {{
-            `${$t('CONVERSATION.HEADER.OPEN')} ${$t(
+            `${
-              'CONVERSATION.HEADER.DETAILS'
+              isContactPanelOpen
-            )}`
+                ? $t('CONVERSATION.HEADER.CLOSE')
+                : $t('CONVERSATION.HEADER.OPEN')
+            } ${$t('CONVERSATION.HEADER.DETAILS')}`
           }}
         </button>
       </div>

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

@@ -77,14 +77,49 @@ export default {
       ) {
         return 'inbox-empty-state';
       }
-      return 'columns full-height conv-empty-state';
+      return 'columns conv-empty-state';
     },
   },
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .inbox-empty-state {
   height: 100%;
   overflow: auto;
 }
+
+.current-chat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    img {
+      margin: var(--space-normal);
+      width: 10rem;
+    }
+
+    span {
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
+      text-align: center;
+    }
+  }
+}
+
+.conv-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
 </style>

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

@@ -1,10 +1,5 @@
 <template>
-  <div class="view-box columns">
+  <div class="view-box fill-height">
-    <conversation-header
-      :chat="currentChat"
-      :is-contact-panel-open="isContactPanelOpen"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
     <div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
       <span>
         {{ $t('CONVERSATION.CANNOT_REPLY') }}
@@ -86,7 +81,6 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import ConversationHeader from './ConversationHeader';
 import ReplyBox from './ReplyBox';
 import Message from './Message';
 import conversationMixin from '../../../mixins/conversations';
@@ -95,7 +89,6 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
-    ConversationHeader,
     Message,
     ReplyBox,
   },
@@ -316,4 +309,9 @@ export default {
 .spinner--container {
   min-height: var(--space-jumbo);
 }
+
+.view-box.fill-height {
+  height: auto;
+  flex-grow: 1;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="app-content columns">
+  <section class="conversation-page">
     <chat-list
       :conversation-inbox="inboxId"
       :label="label"
@@ -24,11 +24,6 @@
       @contact-panel-toggle="onToggleContactPanel"
     >
     </conversation-box>
-    <contact-panel
-      v-if="isContactPanelOpen"
-      :conversation-id="conversationId"
-      :on-toggle="onToggleContactPanel"
-    />
   </section>
 </template>
 
@@ -36,7 +31,6 @@
 import { mapGetters } from 'vuex';
 
 import ChatList from '../../../components/ChatList';
-import ContactPanel from './ContactPanel';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
 import Search from './search/Search.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
@@ -44,7 +38,6 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 export default {
   components: {
     ChatList,
-    ContactPanel,
     ConversationBox,
     Search,
   },
@@ -177,4 +170,10 @@ export default {
   font-size: var(--font-size-large);
   padding-right: var(--space-small);
 }
+
+.conversation-page {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
 </style>