fix: make all screens mobile compatable with layout header

frappe · Aug 31, 2024 · 175602d · 175602d
1 parent 36d0352
commit 175602d
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 53 deletions.
diff --git a/desk/src/components/LayoutHeader.vue b/desk/src/components/LayoutHeader.vue
@@ -1,24 +1,22 @@
 <template>
-  <header class="flex h-12 items-center justify-between border-b py-2.5 pl-5">
-    <div class="left-header flex max-w-[60%] items-center gap-2">
-      <slot name="left-header" />
-    </div>
-    <div class="flex items-center gap-2 px-5">
-      <slot name="right-header" class="flex items-center gap-2" />
-    </div>
-  </header>
+  <Teleport to="#app-header" v-if="showHeader">
+    <slot>
+      <header class="flex h-10.5 items-center justify-between py-[7px] pl-5">
+        <div class="flex items-center gap-2 max-w-[50%]">
+          <slot name="left-header" />
+        </div>
+        <div class="flex items-center gap-2">
+          <slot name="right-header" class="flex items-center gap-2" />
+        </div>
+      </header>
+    </slot>
+  </Teleport>
 </template>
-
 <script setup>
-import { onMounted } from "vue";
-
-onMounted(() => {
-  const leftHeader = document.querySelector(".left-header");
-
-  const currentRoute = leftHeader.querySelector('[aria-current="page"]');
-  currentRoute.classList.add("truncate");
+import { ref, nextTick } from "vue";
+const showHeader = ref(false);
 
-  const span = currentRoute.querySelector("span");
-  span.classList.add("truncate");
+nextTick(() => {
+  showHeader.value = true;
 });
 </script>
diff --git a/desk/src/components/layouts/AppHeader.vue b/desk/src/components/layouts/AppHeader.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="flex border-b pr-5">
+    <div id="app-header" class="flex-1"></div>
+  </div>
+</template>
+
+<script setup></script>
diff --git a/desk/src/components/layouts/DesktopLayout.vue b/desk/src/components/layouts/DesktopLayout.vue
@@ -2,10 +2,12 @@
   <div class="flex h-screen w-screen">
     <Sidebar />
     <div class="flex-1 flex flex-col h-full overflow-auto">
+      <AppHeader />
       <slot />
     </div>
   </div>
 </template>
 <script setup>
+import AppHeader from "./AppHeader.vue";
 import Sidebar from "./Sidebar.vue";
 </script>
diff --git a/desk/src/components/layouts/MobileAppHeader.vue b/desk/src/components/layouts/MobileAppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex border-b pr-3 h-12">
+  <div class="flex border-b pr-3 h-12 items-center">
     <div class="z-20 -mr-4 ml-1 flex items-center justify-center">
       <Button variant="ghosted" @click="sidebarOpened = !sidebarOpened">
         <FeatherIcon name="menu" class="size-4" />

diff --git a/desk/src/pages/desk/agent/AgentList.vue b/desk/src/pages/desk/agent/AgentList.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col">
-    <PageTitle title="Agents">
-      <template #right>
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Agents</div>
+      </template>
+      <template #right-header>
         <Button
           label="New agent"
           theme="gray"
@@ -13,7 +16,7 @@
           </template>
         </Button>
       </template>
-    </PageTitle>
+    </LayoutHeader>
     <ListView
       :columns="columns"
       :resource="agents"
@@ -54,8 +57,8 @@ import { AGENT_PORTAL_TICKET_LIST } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import { useFilter } from "@/composables/filter";
 import AddNewAgentsDialog from "@/components/desk/global/AddNewAgentsDialog.vue";
-import PageTitle from "@/components/PageTitle.vue";
 import { ListView } from "@/components";
+import LayoutHeader from "@/components/LayoutHeader.vue";
 
 const { apply, storage } = useFilter("HD Ticket");
 const isDialogVisible = ref(false);

diff --git a/desk/src/pages/desk/contact/ContactList.vue b/desk/src/pages/desk/contact/ContactList.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col">
-    <PageTitle title="Contacts">
-      <template #right>
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Contacts</div>
+      </template>
+      <template #right-header>
         <Button
           label="New contact"
           theme="gray"
@@ -13,7 +16,7 @@
           </template>
         </Button>
       </template>
-    </PageTitle>
+    </LayoutHeader>
     <ListView
       :columns="columns"
       :resource="contacts"
@@ -45,7 +48,7 @@ import { ref } from "vue";
 import { usePageMeta, Avatar } from "frappe-ui";
 import { createListManager } from "@/composables/listManager";
 import NewContactDialog from "@/components/desk/global/NewContactDialog.vue";
-import PageTitle from "@/components/PageTitle.vue";
+import LayoutHeader from "@/components/LayoutHeader.vue";
 import { ListView } from "@/components";
 import ContactDialog from "./ContactDialog.vue";
 import { createToast } from "@/utils";

diff --git a/desk/src/pages/desk/customer/CustomerList.vue b/desk/src/pages/desk/customer/CustomerList.vue
@@ -1,19 +1,22 @@
 <template>
   <div class="flex flex-col">
-    <PageTitle title="Customers">
-      <template #right>
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Customers</div>
+      </template>
+      <template #right-header>
         <Button
           label="New customer"
           theme="gray"
           variant="solid"
           @click="isDialogVisible = !isDialogVisible"
         >
           <template #prefix>
-            <IconPlus class="h-4 w-4" />
+            <LucidePlus class="h-4 w-4" />
           </template>
         </Button>
       </template>
-    </PageTitle>
+    </LayoutHeader>
     <ListView
       :columns="columns"
       :resource="customers"
@@ -45,10 +48,9 @@ import { ref } from "vue";
 import { usePageMeta, Avatar } from "frappe-ui";
 import { createListManager } from "@/composables/listManager";
 import NewCustomerDialog from "@/components/desk/global/NewCustomerDialog.vue";
-import PageTitle from "@/components/PageTitle.vue";
 import { ListView } from "@/components";
 import CustomerDialog from "./CustomerDialog.vue";
-import IconPlus from "~icons/lucide/plus";
+import LayoutHeader from "@/components/LayoutHeader.vue";
 
 const isDialogVisible = ref(false);
 const isCustomerDialogVisible = ref(false);

diff --git a/desk/src/pages/desk/team/TeamList.vue b/desk/src/pages/desk/team/TeamList.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col">
-    <PageTitle title="Teams">
-      <template #right>
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Teams</div>
+      </template>
+      <template #right-header>
         <Button
           label="New team"
           theme="gray"
@@ -13,7 +16,7 @@
           </template>
         </Button>
       </template>
-    </PageTitle>
+    </LayoutHeader>
     <ListView
       :columns="columns"
       :resource="teams"
@@ -54,7 +57,7 @@ import { isEmpty } from "lodash";
 import { AGENT_PORTAL_TEAM_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import { useError } from "@/composables/error";
-import PageTitle from "@/components/PageTitle.vue";
+import LayoutHeader from "@/components/LayoutHeader.vue";
 import { ListView } from "@/components";
 import IconPlus from "~icons/lucide/plus";
 

diff --git a/desk/src/pages/desk/team/TeamSingle.vue b/desk/src/pages/desk/team/TeamSingle.vue
@@ -1,8 +1,8 @@
 <template>
   <span>
     <div class="flex flex-col">
-      <PageTitle class="border-b">
-        <template #title>
+      <LayoutHeader>
+        <template #left-header>
           <Breadcrumbs
             :items="[
               {
@@ -20,8 +20,15 @@
             ]"
           />
         </template>
-        <template #right>
+        <template #right-header>
           <div class="flex items-center gap-2">
+            <Dropdown :options="docOptions">
+              <Button variant="ghost">
+                <template #icon>
+                  <IconMoreHorizontal class="h-4 w-4" />
+                </template>
+              </Button>
+            </Dropdown>
             <Button
               label="Add member"
               theme="gray"
@@ -32,17 +39,10 @@
                 <IconPlus class="h-4 w-4" />
               </template>
             </Button>
-            <Dropdown :options="docOptions">
-              <Button variant="ghost">
-                <template #icon>
-                  <IconMoreHorizontal class="h-4 w-4" />
-                </template>
-              </Button>
-            </Dropdown>
           </div>
         </template>
-      </PageTitle>
-      <div class="my-6">
+      </LayoutHeader>
+      <div class="m-2 my-4">
         <div class="container">
           <div class="space-y-4">
             <div class="text-lg font-medium">Members</div>
@@ -147,10 +147,10 @@ import { isEmpty } from "lodash";
 import { AGENT_PORTAL_TEAM_LIST, AGENT_PORTAL_TEAM_SINGLE } from "@/router";
 import { useAgentStore } from "@/stores/agent";
 import { useError } from "@/composables/error";
-import { PageTitle } from "@/components";
 import IconMoreHorizontal from "~icons/lucide/more-horizontal";
 import IconPlus from "~icons/lucide/plus";
 import Pill from "@/components/Pill.vue";
+import LayoutHeader from "@/components/LayoutHeader.vue";
 
 const props = defineProps({
   teamId: {

diff --git a/desk/src/pages/knowledge-base/KnowledgeBase.vue b/desk/src/pages/knowledge-base/KnowledgeBase.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="flex flex-col">
-    <PageTitle title="Knowledge base" />
-    <div class="flex grow border-t">
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Knowledge base</div>
+      </template>
+    </LayoutHeader>
+    <div class="flex grow">
       <KnowledgeBaseSidebar />
       <RouterView :key="$route.fullPath" v-slot="{ Component }">
         <component :is="Component" v-if="Component" />
@@ -13,9 +17,9 @@
 
 <script setup lang="ts">
 import { usePageMeta } from "frappe-ui";
-import PageTitle from "@/components/PageTitle.vue";
 import EmptyMessage from "@/components/EmptyMessage.vue";
 import KnowledgeBaseSidebar from "./KnowledgeBaseSidebar.vue";
+import LayoutHeader from "@/components/LayoutHeader.vue";
 
 usePageMeta(() => {
   return {