test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: made common header so that minimized call window can be shown

Browse Source
This commit is contained in:
Shariq Ansari 2023-08-23 21:18:45 +05:30
parent 23093efc96
commit 7c3069817b
9 changed files with 55 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/AppSidebar.vue
View File

@ -27,7 +27,6 @@
</nav>
</div>
</div>
<div id="call-area"></div>
</div>
</template>

10
frontend/src/components/CallUI.vue
View File

@ -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()

4
frontend/src/components/DesktopLayout.vue
View File

@ -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>

31
frontend/src/components/LayoutHeader.vue
View File

@ -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>

12
frontend/src/pages/Contacts.vue
View File

@ -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>

10
frontend/src/pages/Dashboard.vue
View File

@ -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>

12
frontend/src/pages/Deals.vue
View File

@ -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>

12
frontend/src/pages/Inbox.vue
View File

@ -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>

12
frontend/src/pages/Leads.vue
View File

@ -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"