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

style: email content new design

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-15 17:10:36 +05:30
parent 9ee1b63ef6
commit b0237bc2c8
1 changed files with 65 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/components/Activities.vue
View File

@ -434,7 +434,7 @@
]" ]"
> >
<div <div
class="z-10 flex h-7 w-7 items-center justify-center rounded bg-gray-100" class="z-10 flex h-7 w-7 items-center justify-center bg-white"
:class="{ :class="{
'mt-3': [ 'mt-3': [
'communication', 'communication',
@ -446,7 +446,13 @@
), ),
}" }"
> >
<UserAvatar
v-if="activity.activity_type == 'communication'"
:user="activity.data.sender"
size="md"
/>
<component <component
v-else
:is="activity.icon" :is="activity.icon"
:class=" :class="
['added', 'removed', 'changed'].includes(activity.activity_type) ['added', 'removed', 'changed'].includes(activity.activity_type)
@ -458,18 +464,14 @@
</div> </div>
<div v-if="activity.activity_type == 'communication'" class="pb-6"> <div v-if="activity.activity_type == 'communication'" class="pb-6">
<div <div
class="cursor-pointer rounded-md bg-gray-50 p-3 text-base leading-6 transition-all duration-300 ease-in-out" class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
> >
<div class="mb-1 flex items-center justify-between gap-2"> <div class="-mb-0.5 flex items-center justify-between gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UserAvatar :user="activity.data.sender" size="md" />
<span>{{ activity.data.sender_full_name }}</span> <span>{{ activity.data.sender_full_name }}</span>
<span>&middot;</span> <span class="text-sm text-gray-600">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)"> {{ '<' + activity.data.sender + '>' }}
<div class="text-sm text-gray-600"> </span>
{{ __(timeAgo(activity.creation)) }}
</div>
</Tooltip>
<Badge <Badge
v-if="activity.communication_type == 'Automated Message'" v-if="activity.communication_type == 'Automated Message'"
:label="__('Notification')" :label="__('Notification')"
@ -477,56 +479,63 @@
theme="green" theme="green"
/> />
</div> </div>
<div class="flex gap-0.5"> <div class="flex items-center gap-2">
<Tooltip :text="__('Reply')"> <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<div> <div class="text-sm text-gray-600">
<Button {{ __(timeAgo(activity.creation)) }}
variant="ghost"
class="text-gray-700"
@click="reply(activity.data)"
>
<ReplyIcon class="h-4 w-4" />
</Button>
</div>
</Tooltip>
<Tooltip :text="__('Reply All')">
<div>
<Button
variant="ghost"
class="text-gray-700"
@click="reply(activity.data, true)"
>
<ReplyAllIcon class="h-4 w-4" />
</Button>
</div> </div>
</Tooltip> </Tooltip>
<div class="flex gap-0.5">
<Tooltip :text="__('Reply')">
<div>
<Button
variant="ghost"
class="text-gray-700"
@click="reply(activity.data)"
>
<template #icon>
<ReplyIcon />
</template>
</Button>
</div>
</Tooltip>
<Tooltip :text="__('Reply All')">
<div>
<Button
variant="ghost"
class="text-gray-700"
@click="reply(activity.data, true)"
>
<template #icon>
<ReplyAllIcon />
</template>
</Button>
</div>
</Tooltip>
</div>
</div> </div>
</div> </div>
<div class="text-sm leading-5 text-gray-600"> <div class="flex flex-col gap-1 text-base text-gray-800">
{{ activity.data.subject }} <div>
</div> <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
<div class="mb-3 text-sm leading-5 text-gray-600"> <span>{{ activity.data.recipients }}</span>
<span class="mr-1 text-2xs font-bold text-gray-500"> <span v-if="activity.data.cc">, </span>
{{ __('TO') }}: <span v-if="activity.data.cc" class="mr-1 text-gray-600">
</span> {{ __('CC') }}:
<span>{{ activity.data.recipients }}</span> </span>
<span v-if="activity.data.cc">, </span> <span v-if="activity.data.cc">{{ activity.data.cc }}</span>
<span <span v-if="activity.data.bcc">, </span>
v-if="activity.data.cc" <span v-if="activity.data.bcc" class="mr-1 text-gray-600">
class="mr-1 text-2xs font-bold text-gray-500" {{ __('BCC') }}:
> </span>
{{ __('CC') }}: <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
</span> </div>
<span v-if="activity.data.cc">{{ activity.data.cc }}</span> <div>
<span v-if="activity.data.bcc">, </span> <span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
<span <span>{{ activity.data.subject }}</span>
v-if="activity.data.bcc" </div>
class="mr-1 text-2xs font-bold text-gray-500"
>
{{ __('BCC') }}:
</span>
<span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
</div> </div>
<div class="border-0 border-t my-3.5 border-gray-200" />
<EmailContent :content="activity.data.content" /> <EmailContent :content="activity.data.content" />
<div <div
v-if="activity.data?.attachments?.length" v-if="activity.data?.attachments?.length"
@ -1236,9 +1245,6 @@ function timelineIcon(activity_type, is_lead) {
case 'comment': case 'comment':
icon = CommentIcon icon = CommentIcon
break break
case 'communication':
icon = EmailAtIcon
break
case 'incoming_call': case 'incoming_call':
icon = InboundCallIcon icon = InboundCallIcon
break break
@ -1347,7 +1353,7 @@ function reply(email, reply_all = false) {
.chain() .chain()
.clearContent() .clearContent()
.insertContent('<p>.</p>') .insertContent('<p>.</p>')
.updateAttributes('paragraph', {class:'reply-to-content'}) .updateAttributes('paragraph', { class: 'reply-to-content' })
.insertContent(repliedMessage) .insertContent(repliedMessage)
.focus('all') .focus('all')
.insertContentAt(0, { type: 'paragraph' }) .insertContentAt(0, { type: 'paragraph' })