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

style: call window cosmetic changes

Browse Source
This commit is contained in:
Shariq Ansari 2023-08-23 22:22:24 +05:30
parent 7c3069817b
commit 3de1c6ae11
2 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,36 +23,35 @@
<div <div
v-show="showCallPopup" v-show="showCallPopup"
ref="callPopup" ref="callPopup"
class="fixed select-none z-10 bg-gray-900 rounded-lg shadow-lg p-4 flex flex-col w-60" class="fixed select-none z-10 bg-gray-900 text-gray-300 rounded-lg shadow-lg p-4 flex flex-col w-60"
:style="style" :style="style"
> >
<div class="flex items-center flex-row-reverse gap-1"> <div class="flex items-center flex-row-reverse gap-1">
<DragIcon1 ref="callPopupHandle" class="w-4 h-4 cursor-move text-white" /> <DragIcon1 ref="callPopupHandle" class="w-4 h-4 cursor-move" />
<MinimizeIcon <MinimizeIcon class="w-4 h-4 cursor-pointer" @click="toggleCallWindow" />
class="w-4 h-4 text-white cursor-pointer"
@click="toggleCallWindow"
/>
</div> </div>
<div class="flex flex-col justify-center items-center gap-2"> <div class="flex flex-col justify-center items-center gap-3">
<UserAvatar <UserAvatar
:user="getUser().name" :user="getUser().name"
class="flex items-center justify-center !h-24 !w-24 relative" class="flex items-center justify-center !h-24 !w-24 relative"
:class="onCall || calling ? '' : 'pulse'" :class="onCall || calling ? '' : 'pulse'"
/> />
<div class="text-xl font-medium text-white"> <div class="flex flex-col gap-1">
{{ getUser().full_name }} <div class="text-xl font-medium">
{{ getUser().full_name }}
</div>
<div class="text-sm text-gray-600">+917666980887</div>
</div> </div>
<div class="text-sm text-gray-500">+917666980887</div>
<CountUpTimer ref="counterUp"> <CountUpTimer ref="counterUp">
<div v-if="onCall" class="text-white text-base my-1"> <div v-if="onCall" class="text-base my-1">
{{ counterUp?.updatedTime }} {{ counterUp?.updatedTime }}
</div> </div>
</CountUpTimer> </CountUpTimer>
<div v-if="!onCall" class="text-white text-base my-1"> <div v-if="!onCall" class="text-base my-1">
{{ {{
callStatus == 'ringing' callStatus == 'ringing'
? 'Ringing...' ? 'Ringing...'
: callStatus == 'initiated' || callStatus == 'calling' : calling
? 'Calling...' ? 'Calling...'
: 'Incoming call...' : 'Incoming call...'
}} }}
@ -84,22 +83,24 @@
theme="red" theme="red"
label="Cancel" label="Cancel"
@click="cancelCall" @click="cancelCall"
class="rounded-lg"
> >
<template #prefix> <template #prefix>
<PhoneIcon class="text-white fill-white h-4 w-4 rotate-[135deg]" /> <PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
</template> </template>
</Button> </Button>
</div> </div>
<div v-else class="flex gap-2 text-sm mt-2"> <div v-else class="flex gap-2">
<Button <Button
size="md" size="md"
variant="solid" variant="solid"
theme="green" theme="green"
label="Accept" label="Accept"
class="rounded-lg"
@click="acceptIncomingCall" @click="acceptIncomingCall"
> >
<template #prefix> <template #prefix>
<PhoneIcon class="text-white fill-white h-4 w-4" /> <PhoneIcon class="fill-white h-4 w-4" />
</template> </template>
</Button> </Button>
<Button <Button
@ -107,10 +108,11 @@
variant="solid" variant="solid"
theme="red" theme="red"
label="Reject" label="Reject"
class="rounded-lg"
@click="rejectIncomingCall" @click="rejectIncomingCall"
> >
<template #prefix> <template #prefix>
<PhoneIcon class="text-white fill-white h-4 w-4 rotate-[135deg]" /> <PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
</template> </template>
</Button> </Button>
</div> </div>
@ -119,33 +121,33 @@
<Teleport to="#call-area"> <Teleport to="#call-area">
<div <div
v-show="showSmallCallWindow" v-show="showSmallCallWindow"
class="flex items-center justify-between -ml-3 mr-2 p-1.5 gap-2 bg-gray-900 rounded cursor-pointer select-none" class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 -ml-3 mr-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
@click="toggleCallWindow" @click="toggleCallWindow"
> >
<div class="inline-flex items-center gap-1.5"> <div class="flex items-center gap-2">
<UserAvatar <UserAvatar
:user="getUser().name" :user="getUser().name"
class="flex items-center justify-center" class="flex items-center justify-center !h-5 !w-5"
/> />
<div class="text-base font-medium text-white truncate max-w-[120px]"> <div class="truncate max-w-[120px]">
{{ getUser().full_name }} {{ getUser().full_name }}
</div> </div>
</div> </div>
<div v-if="onCall" class="flex items-center gap-1.5"> <div v-if="onCall" class="flex items-center gap-3">
<div class="text-white text-base my-1"> <div class="my-1">
{{ counterUp?.updatedTime }} {{ counterUp?.updatedTime }}
</div> </div>
<Button variant="solid" theme="red" class="rounded-full !h-6 !w-6"> <Button variant="solid" theme="red" class="rounded-full !h-6 !w-6">
<template #icon> <template #icon>
<PhoneIcon <PhoneIcon
class="text-white fill-white h-3 w-3 rotate-[135deg]" class="fill-white h-4 w-4 rotate-[135deg]"
@click.stop="hangUpCall" @click.stop="hangUpCall"
/> />
</template> </template>
</Button> </Button>
</div> </div>
<div v-else-if="calling" class="flex items-center gap-1.5"> <div v-else-if="calling" class="flex items-center gap-3">
<div class="text-white text-base my-1"> <div class="my-1">
{{ callStatus == 'ringing' ? 'Ringing...' : 'Calling...' }} {{ callStatus == 'ringing' ? 'Ringing...' : 'Calling...' }}
</div> </div>
<Button <Button
@ -155,11 +157,11 @@
@click.stop="cancelCall" @click.stop="cancelCall"
> >
<template #icon> <template #icon>
<PhoneIcon class="text-white fill-white h-3 w-3 rotate-[135deg]" /> <PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
</template> </template>
</Button> </Button>
</div> </div>
<div v-else class="flex gap-1.5 text-sm"> <div v-else class="flex items-center gap-2">
<Button <Button
variant="solid" variant="solid"
theme="green" theme="green"
@ -167,7 +169,7 @@
@click.stop="acceptIncomingCall" @click.stop="acceptIncomingCall"
> >
<template #icon> <template #icon>
<PhoneIcon class="text-white fill-white h-3 w-3 animate-pulse" /> <PhoneIcon class="fill-white h-4 w-4 animate-pulse" />
</template> </template>
</Button> </Button>
<Button <Button
@ -177,7 +179,7 @@
@click.stop="rejectIncomingCall" @click.stop="rejectIncomingCall"
> >
<template #icon> <template #icon>
<PhoneIcon class="text-white fill-white h-3 w-3 rotate-[135deg]" /> <PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
</template> </template>
</Button> </Button>
</div> </div>
@ -208,11 +210,12 @@ let showPhoneCall = ref(false)
let showCallPopup = ref(false) let showCallPopup = ref(false)
let showSmallCallWindow = ref(false) let showSmallCallWindow = ref(false)
let onCall = ref(false) let onCall = ref(false)
let calling = ref(false)
let muted = ref(false) let muted = ref(false)
let callPopup = ref(null) let callPopup = ref(null)
let callPopupHandle = ref(null) let callPopupHandle = ref(null)
let calling = ref(false)
let counterUp = ref(null) let counterUp = ref(null)
let callStatus = ref('')
const { width, height } = useWindowSize() const { width, height } = useWindowSize()
@ -330,8 +333,6 @@ function handleDisconnectedIncomingCall() {
counterUp.value.stop() counterUp.value.stop()
} }
let callStatus = ref('')
async function makeOutgoingCall(close) { async function makeOutgoingCall(close) {
close() close()
if (device) { if (device) {
@ -363,7 +364,6 @@ async function makeOutgoingCall(close) {
showCallPopup.value = true showCallPopup.value = true
calling.value = true calling.value = true
onCall.value = false onCall.value = false
callStatus.value = 'calling'
}) })
_call.value.on('disconnect', () => { _call.value.on('disconnect', () => {
log.value = `Call ended.` log.value = `Call ended.`

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

@ -6,7 +6,6 @@
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<slot name="right-header" class="flex items-center gap-2" /> <slot name="right-header" class="flex items-center gap-2" />
<slot name="call-area"></slot>
</div> </div>
</header> </header>
</Teleport> </Teleport>