Init Contact Panel (#206)

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -13,12 +13,14 @@
       class="user-thumbnail"
       background-color="#1f93ff"
       color="white"
+      :size="avatarSize"
     >
     </Avatar>
     <img
       v-if="badge === 'Facebook'"
       id="badge"
       class="source-badge"
+      :style="badgeStyle"
       src="~dashboard/assets/images/fb-badge.png"
     />
   </div>
@@ -58,6 +60,15 @@ export default {
       imgError: false,
     };
   },
+  computed: {
+    avatarSize() {
+      return Number(this.size.replace(/\D+/g, ''));
+    },
+    badgeStyle() {
+      const badgeSize = `${this.avatarSize / 3}px`;
+      return { width: badgeSize, height: badgeSize };
+    },
+  },
   methods: {
     onImgError() {
       this.imgError = true;

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

@@ -1,7 +1,11 @@
 <template>
-  <div class="medium-8 columns conversation-wrap">
+  <div :class="conversationClass">
     <div v-if="currentChat.id !== null" class="view-box columns">
-      <conversation-header :chat="currentChat" />
+      <conversation-header
+        :chat="currentChat"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contactPanelToggle="onToggleContactPanel"
+      />
       <ul class="conversation-panel">
         <transition name="slide-up">
           <li>
@@ -104,6 +108,10 @@ export default {
       type: [Number, String],
       required: true,
     },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -124,6 +132,11 @@ export default {
       fetchingInboxes: 'getInboxLoadingStatus',
       loadingChatList: 'getChatListLoadingStatus',
     }),
+    conversationClass() {
+      return `medium-${
+        this.isContactPanelOpen ? '5' : '8'
+      } columns conversation-wrap`;
+    },
     // Loading indicator
     // Returns corresponding loading message
     loadingIndicatorMessage() {
@@ -193,6 +206,10 @@ export default {
       }, 0);
     },
 
+    onToggleContactPanel() {
+      this.$emit('contactPanelToggle');
+    },
+
     attachListner() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
       this.heightBeforeLoad =

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

@@ -7,9 +7,17 @@
         :badge="chat.meta.sender.channel"
         :username="chat.meta.sender.name"
       />
-      <h3 class="user--name">
-        {{ chat.meta.sender.name }}
-      </h3>
+      <div class="user--profile__meta">
+        <h3 class="user--name">
+          {{ chat.meta.sender.name }}
+        </h3>
+        <button
+          class="user--profile__button"
+          @click="$emit('contactPanelToggle')"
+        >
+          {{ viewProfileButtonLabel }}
+        </button>
+      </div>
     </div>
     <div class="flex-container">
       <div class="multiselect-box ion-headphone">
@@ -49,7 +57,16 @@ export default {
     ResolveButton,
   },
 
-  props: ['chat'],
+  props: {
+    chat: {
+      type: Object,
+      default: () => {},
+    },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -75,6 +92,9 @@ export default {
         ...this.agents,
       ];
     },
+    viewProfileButtonLabel() {
+      return `${this.isContactPanelOpen ? 'Hide' : 'View'}  Profile`;
+    },
   },
 
   methods: {
@@ -89,9 +109,7 @@ export default {
         });
     },
 
-    removeAgent(agent) {
-      console.log(agent.email);
-    },
+    removeAgent() {},
   },
 };
 </script>