From 7c3069817bfa783976770dc6ba9e0215b6d92567 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 23 Aug 2023 21:18:45 +0530
Subject: [PATCH] =?UTF-8?q?fix:=C2=A0made=20common=20header=20so=20that=20?=
 =?UTF-8?q?minimized=20call=20window=20can=20be=20shown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AppSidebar.vue    |  1 -
 frontend/src/components/CallUI.vue        | 10 ++++----
 frontend/src/components/DesktopLayout.vue |  4 +++
 frontend/src/components/LayoutHeader.vue  | 31 ++++++++---------------
 frontend/src/pages/Contacts.vue           | 12 +++++----
 frontend/src/pages/Dashboard.vue          | 10 +++++---
 frontend/src/pages/Deals.vue              | 12 +++++----
 frontend/src/pages/Inbox.vue              | 12 +++++----
 frontend/src/pages/Leads.vue              | 12 +++++----
 9 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 61bc1bea..de33b2ee 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -27,7 +27,6 @@
         </nav>
       </div>
     </div>
-    <div id="call-area"></div>
   </div>
 </template>
 
diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/CallUI.vue
index aa62493a..a8c6e264 100644
--- a/frontend/src/components/CallUI.vue
+++ b/frontend/src/components/CallUI.vue
@@ -119,16 +119,16 @@
   <Teleport to="#call-area">
     <div
       v-show="showSmallCallWindow"
-      class="flex items-center justify-between p-1.5 gap-2 bg-gray-900 rounded m-2 cursor-pointer select-none"
+      class="flex items-center justify-between -ml-3 mr-2 p-1.5 gap-2 bg-gray-900 rounded cursor-pointer select-none"
       @click="toggleCallWindow"
     >
-      <div class="inline-flex items-center gap-1.5 truncate">
+      <div class="inline-flex items-center gap-1.5">
         <UserAvatar
           :user="getUser().name"
           class="flex items-center justify-center"
         />
-        <div class="text-base font-medium text-white truncate">
-          Shariq Ansari
+        <div class="text-base font-medium text-white truncate max-w-[120px]">
+          {{ getUser().full_name }}
         </div>
       </div>
       <div v-if="onCall" class="flex items-center gap-1.5">
@@ -191,12 +191,12 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import DialpadIcon from '@/components/Icons/DialpadIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import CountUpTimer from '@/components/CountUpTimer.vue'
 import { Device } from '@twilio/voice-sdk'
 import { useDraggable, useWindowSize } from '@vueuse/core'
 import { usersStore } from '@/stores/users'
 import { call } from 'frappe-ui'
 import { onMounted, provide, ref, watch } from 'vue'
-import CountUpTimer from './CountUpTimer.vue'
 
 const { getUser } = usersStore()
 
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 682f671b..46ee7c6d 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -4,6 +4,10 @@
       <AppSidebar />
     </div>
     <div class="flex-1 flex flex-col h-full overflow-auto">
+      <div id="app-header" class="flex">
+        <div id="header-area" class="flex-1"></div>
+        <div id="call-area" class="flex items-center justify-center"></div>
+      </div>
       <slot />
     </div>
   </div>
diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
index 55add86f..795b2b04 100644
--- a/frontend/src/components/LayoutHeader.vue
+++ b/frontend/src/components/LayoutHeader.vue
@@ -1,22 +1,13 @@
 <template>
-  <header class="flex justify-between items-center px-5 py-3">
-    <div class="flex items-center gap-2">
-      <slot name="left-header" />
-    </div>
-    <div class="flex items-center gap-2">
-      <slot name="right-header" class="flex items-center gap-2" />
-    </div>
-  </header>
-  <div
-    v-if="$slots['left-subheader'] || $slots['right-subheader']"
-    id="sub-header"
-    class="flex justify-between items-center px-5 pb-2.5 border-b"
-  >
-    <div class="flex items-center gap-2">
-      <slot name="left-subheader" />
-    </div>
-    <div class="flex items-center gap-2">
-      <slot name="right-subheader" />
-    </div>
-  </div>
+  <Teleport to="#header-area">
+    <header class="flex justify-between items-center px-5 py-3">
+      <div class="flex items-center gap-2">
+        <slot name="left-header" />
+      </div>
+      <div class="flex items-center gap-2">
+        <slot name="right-header" class="flex items-center gap-2" />
+        <slot name="call-area"></slot>
+      </div>
+    </header>
+  </Teleport>
 </template>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index b203a096..57eae4d6 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -8,7 +8,9 @@
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
-    <template #left-subheader>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
@@ -23,8 +25,8 @@
           </Button>
         </template>
       </Dropdown>
-    </template>
-    <template #right-subheader>
+    </div>
+    <div class="flex items-center gap-2">
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>
       </Button>
@@ -32,8 +34,8 @@
         <template #prefix><FilterIcon class="h-4" /></template>
       </Button>
       <Button icon="more-horizontal" />
-    </template>
-  </LayoutHeader>
+    </div>
+  </div>
   <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
 </template>
 
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
index 7334e7eb..646bfad4 100644
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="px-5 py-4 font-semibold text-xl">
-    <h1>{{ title }}</h1>
-  </div>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: title }]" />
+    </template>
+  </LayoutHeader>
 </template>
 
 <script setup>
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 let title = 'Dashboard'
 </script>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 08234068..5f27a9f1 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -8,7 +8,9 @@
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
-    <template #left-subheader>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
@@ -23,8 +25,8 @@
           </Button>
         </template>
       </Dropdown>
-    </template>
-    <template #right-subheader>
+    </div>
+    <div class="flex items-center gap-2">
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>
       </Button>
@@ -32,8 +34,8 @@
         <template #prefix><FilterIcon class="h-4" /></template>
       </Button>
       <Button icon="more-horizontal" />
-    </template>
-  </LayoutHeader>
+    </div>
+  </div>
   <ListView :list="list" row-key="name" />
 </template>
 
diff --git a/frontend/src/pages/Inbox.vue b/frontend/src/pages/Inbox.vue
index 86592fbd..870c3bec 100644
--- a/frontend/src/pages/Inbox.vue
+++ b/frontend/src/pages/Inbox.vue
@@ -8,7 +8,9 @@
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
-    <template #left-subheader>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
@@ -23,8 +25,8 @@
           </Button>
         </template>
       </Dropdown>
-    </template>
-    <template #right-subheader>
+    </div>
+    <div class="flex items-center gap-2">
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>
       </Button>
@@ -32,8 +34,8 @@
         <template #prefix><FilterIcon class="h-4" /></template>
       </Button>
       <Button icon="more-horizontal" />
-    </template>
-  </LayoutHeader>
+    </div>
+  </div>
   <ListView :list="list" />
 </template>
 
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index d2b5a1ed..9b9e2c7b 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -8,7 +8,9 @@
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
-    <template #left-subheader>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
@@ -23,13 +25,13 @@
           </Button>
         </template>
       </Dropdown>
-    </template>
-    <template #right-subheader>
+    </div>
+    <div class="flex items-center gap-2">
       <Filter doctype="CRM Lead" />
       <SortBy doctype="CRM Lead" />
       <Button icon="more-horizontal" />
-    </template>
-  </LayoutHeader>
+    </div>
+  </div>
   <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
   <Dialog
     v-model="showNewDialog"