From fd8e8c7c87d68fbc60c8b0fa3a8729f056319175 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Sun, 23 Feb 2020 21:13:28 +0530
Subject: [PATCH] Enhancement: Add close button to the contact sidebar panel
 (#551)

---
 .../dashboard/conversation/ContactPanel.vue   | 20 +++++++++++++++++++
 .../conversation/ConversationView.vue         |  1 +
 2 files changed, 21 insertions(+)

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index a6018be94..f15d9149f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
     <div class="contact--profile">
+      <span class="close-button" @click="onPanelToggle">
+        <i class="ion-close-round"></i>
+      </span>
       <div class="contact--info">
         <thumbnail
           :src="contact.thumbnail"
@@ -101,6 +104,10 @@ export default {
       type: [Number, String],
       required: true,
     },
+    onToggle: {
+      type: Function,
+      default: () => {},
+    },
   },
   computed: {
     currentConversationMetaData() {
@@ -152,6 +159,11 @@ export default {
       id: this.currentConversationMetaData.contact_id,
     });
   },
+  methods: {
+    onPanelToggle() {
+      this.onToggle();
+    },
+  },
 };
 </script>
 
@@ -165,8 +177,16 @@ export default {
   overflow-y: auto;
   background: white;
   overflow: auto;
+  position: relative;
 }
 
+.close-button {
+  position: absolute;
+  right: $space-slab;
+  top: $space-slab;
+  font-size: $font-size-default;
+  color: $color-heading;
+}
 .contact--profile {
   padding: $space-medium $space-normal 0 $space-medium;
   align-items: center;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 9513ccd8e..fb75fbb01 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -14,6 +14,7 @@
     <contact-panel
       v-if="isContactPanelOpen"
       :conversation-id="conversationId"
+      :on-toggle="onToggleContactPanel"
     />
   </section>
 </template>