fix: scroll to bottom in each tab
This commit is contained in:
Shariq Ansari
parent
f5fa47bae0
commit
7c5696ee75
@ -102,11 +102,11 @@
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="title == 'Notes'"
|
v-if="title == 'Notes'"
|
||||||
class="activity grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
|
class="grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="note in activities"
|
v-for="note in activities"
|
||||||
class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
|
class="activity group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
|
||||||
@click="showNote(note)"
|
@click="showNote(note)"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
@ -156,10 +156,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="title == 'Comments'" class="activity pb-5">
|
<div v-else-if="title == 'Comments'" class="pb-5">
|
||||||
<div v-for="(comment, i) in activities">
|
<div v-for="(comment, i) in activities">
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-[30px_minmax(auto,_1fr)] sm:gap-4 gap-2 px-4 sm:px-10"
|
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-4 sm:gap-4 sm:px-10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
|
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
|
||||||
@ -214,13 +214,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-else-if="title == 'Tasks'" class="px-4 pb-3 sm:px-10 sm:pb-5">
|
||||||
v-else-if="title == 'Tasks'"
|
|
||||||
class="activity px-4 pb-3 sm:px-10 sm:pb-5"
|
|
||||||
>
|
|
||||||
<div v-for="(task, i) in activities">
|
<div v-for="(task, i) in activities">
|
||||||
<div
|
<div
|
||||||
class="flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
|
class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
|
||||||
@click="showTask(task)"
|
@click="showTask(task)"
|
||||||
>
|
>
|
||||||
<div class="flex flex-1 flex-col gap-1.5 text-base">
|
<div class="flex flex-1 flex-col gap-1.5 text-base">
|
||||||
@ -313,7 +310,7 @@
|
|||||||
<div v-else-if="title == 'Calls'" class="activity">
|
<div v-else-if="title == 'Calls'" class="activity">
|
||||||
<div v-for="(call, i) in activities">
|
<div v-for="(call, i) in activities">
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
|
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
|
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
|
||||||
@ -416,283 +413,345 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else v-for="(activity, i) in activities" class="activity">
|
<div
|
||||||
|
v-else
|
||||||
|
v-for="(activity, i) in activities"
|
||||||
|
class="activity px-4 sm:px-10"
|
||||||
|
:class="
|
||||||
|
title == 'Activity'
|
||||||
|
? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="px-4 sm:px-10"
|
v-if="title == 'Activity'"
|
||||||
:class="
|
class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
|
||||||
title == 'Activity'
|
:class="[
|
||||||
? 'grid grid-cols-[30px_minmax(auto,_1fr)] sm:gap-4 gap-2'
|
i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
|
||||||
: ''
|
activity.other_versions
|
||||||
"
|
? 'after:translate-y-[calc(-50% - 4px)] after:absolute after:bottom-9 after:left-[50%] after:top-0 after:-z-10 after:w-8 after:rounded-bl-xl after:border-b after:border-l after:border-gray-200'
|
||||||
|
: '',
|
||||||
|
]"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="title == 'Activity'"
|
class="z-10 flex h-7 w-7 items-center justify-center rounded bg-gray-100"
|
||||||
class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
|
:class="{
|
||||||
:class="[
|
'mt-3': [
|
||||||
i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
|
'communication',
|
||||||
activity.other_versions
|
'incoming_call',
|
||||||
? 'after:translate-y-[calc(-50% - 4px)] after:absolute after:bottom-9 after:left-[50%] after:top-0 after:-z-10 after:w-8 after:rounded-bl-xl after:border-b after:border-l after:border-gray-200'
|
'outgoing_call',
|
||||||
: '',
|
].includes(activity.activity_type),
|
||||||
]"
|
'bg-white': ['added', 'removed', 'changed'].includes(
|
||||||
|
activity.activity_type
|
||||||
|
),
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<component
|
||||||
class="z-10 flex h-7 w-7 items-center justify-center rounded bg-gray-100"
|
:is="activity.icon"
|
||||||
:class="{
|
:class="
|
||||||
'mt-3': [
|
['added', 'removed', 'changed'].includes(activity.activity_type)
|
||||||
'communication',
|
? 'text-gray-500'
|
||||||
'incoming_call',
|
: 'text-gray-800'
|
||||||
'outgoing_call',
|
"
|
||||||
].includes(activity.activity_type),
|
/>
|
||||||
'bg-white': ['added', 'removed', 'changed'].includes(
|
|
||||||
activity.activity_type
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="activity.icon"
|
|
||||||
:class="
|
|
||||||
['added', 'removed', 'changed'].includes(activity.activity_type)
|
|
||||||
? 'text-gray-500'
|
|
||||||
: 'text-gray-800'
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="activity.activity_type == 'communication'" class="pb-6">
|
|
||||||
<div
|
|
||||||
class="cursor-pointer rounded-md bg-gray-50 p-3 text-base leading-6 transition-all duration-300 ease-in-out"
|
|
||||||
>
|
|
||||||
<div class="mb-1 flex items-center justify-between gap-2">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<UserAvatar :user="activity.data.sender" size="md" />
|
|
||||||
<span>{{ activity.data.sender_full_name }}</span>
|
|
||||||
<span>·</span>
|
|
||||||
<Tooltip
|
|
||||||
:text="dateFormat(activity.creation, dateTooltipFormat)"
|
|
||||||
>
|
|
||||||
<div class="text-sm text-gray-600">
|
|
||||||
{{ __(timeAgo(activity.creation)) }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
<Badge
|
|
||||||
v-if="activity.communication_type == 'Automated Message'"
|
|
||||||
:label="__('Notification')"
|
|
||||||
variant="subtle"
|
|
||||||
theme="green"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-0.5">
|
|
||||||
<Tooltip :text="__('Reply')">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="text-gray-700"
|
|
||||||
@click="reply(activity.data)"
|
|
||||||
>
|
|
||||||
<ReplyIcon class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip :text="__('Reply All')">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="text-gray-700"
|
|
||||||
@click="reply(activity.data, true)"
|
|
||||||
>
|
|
||||||
<ReplyAllIcon class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-sm leading-5 text-gray-600">
|
|
||||||
{{ activity.data.subject }}
|
|
||||||
</div>
|
|
||||||
<div class="mb-3 text-sm leading-5 text-gray-600">
|
|
||||||
<span class="mr-1 text-2xs font-bold text-gray-500">
|
|
||||||
{{ __('TO') }}:
|
|
||||||
</span>
|
|
||||||
<span>{{ activity.data.recipients }}</span>
|
|
||||||
<span v-if="activity.data.cc">, </span>
|
|
||||||
<span
|
|
||||||
v-if="activity.data.cc"
|
|
||||||
class="mr-1 text-2xs font-bold text-gray-500"
|
|
||||||
>
|
|
||||||
{{ __('CC') }}:
|
|
||||||
</span>
|
|
||||||
<span v-if="activity.data.cc">{{ activity.data.cc }}</span>
|
|
||||||
<span v-if="activity.data.bcc">, </span>
|
|
||||||
<span
|
|
||||||
v-if="activity.data.bcc"
|
|
||||||
class="mr-1 text-2xs font-bold text-gray-500"
|
|
||||||
>
|
|
||||||
{{ __('BCC') }}:
|
|
||||||
</span>
|
|
||||||
<span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
|
|
||||||
</div>
|
|
||||||
<FadedScrollableDiv
|
|
||||||
:maskHeight="30"
|
|
||||||
class="email-content prose-f max-h-[500px] overflow-y-auto"
|
|
||||||
v-html="activity.data.content"
|
|
||||||
/>
|
|
||||||
<div class="flex flex-wrap gap-2">
|
|
||||||
<AttachmentItem
|
|
||||||
v-for="a in activity.data.attachments"
|
|
||||||
:key="a.file_url"
|
|
||||||
:label="a.file_name"
|
|
||||||
:url="a.file_url"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="activity.activity_type == 'communication'" class="pb-6">
|
||||||
<div
|
<div
|
||||||
class="mb-4"
|
class="cursor-pointer rounded-md bg-gray-50 p-3 text-base leading-6 transition-all duration-300 ease-in-out"
|
||||||
:id="activity.name"
|
|
||||||
v-else-if="activity.activity_type == 'comment'"
|
|
||||||
>
|
>
|
||||||
<div
|
<div class="mb-1 flex items-center justify-between gap-2">
|
||||||
class="mb-0.5 flex items-start justify-stretch gap-2 py-1.5 text-base"
|
<div class="flex items-center gap-2">
|
||||||
>
|
<UserAvatar :user="activity.data.sender" size="md" />
|
||||||
<div class="inline-flex flex-wrap gap-1 text-gray-600">
|
<span>{{ activity.data.sender_full_name }}</span>
|
||||||
<span class="font-medium text-gray-800">
|
<span>·</span>
|
||||||
{{ activity.owner_name }}
|
|
||||||
</span>
|
|
||||||
<span>{{ __('added a') }}</span>
|
|
||||||
<span class="max-w-xs truncate font-medium text-gray-800">
|
|
||||||
{{ __('comment') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="ml-auto whitespace-nowrap">
|
|
||||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||||
<div class="text-sm text-gray-600">
|
<div class="text-sm text-gray-600">
|
||||||
{{ __(timeAgo(activity.creation)) }}
|
{{ __(timeAgo(activity.creation)) }}
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
<Badge
|
||||||
</div>
|
v-if="activity.communication_type == 'Automated Message'"
|
||||||
<div
|
:label="__('Notification')"
|
||||||
class="cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
|
variant="subtle"
|
||||||
>
|
theme="green"
|
||||||
<div class="prose-f" v-html="activity.content" />
|
|
||||||
<div
|
|
||||||
v-if="activity.attachments.length"
|
|
||||||
class="mt-2 flex flex-wrap gap-2"
|
|
||||||
>
|
|
||||||
<AttachmentItem
|
|
||||||
v-for="a in activity.attachments"
|
|
||||||
:key="a.file_url"
|
|
||||||
:label="a.file_name"
|
|
||||||
:url="a.file_url"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex gap-0.5">
|
||||||
|
<Tooltip :text="__('Reply')">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="text-gray-700"
|
||||||
|
@click="reply(activity.data)"
|
||||||
|
>
|
||||||
|
<ReplyIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip :text="__('Reply All')">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="text-gray-700"
|
||||||
|
@click="reply(activity.data, true)"
|
||||||
|
>
|
||||||
|
<ReplyAllIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm leading-5 text-gray-600">
|
||||||
|
{{ activity.data.subject }}
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 text-sm leading-5 text-gray-600">
|
||||||
|
<span class="mr-1 text-2xs font-bold text-gray-500">
|
||||||
|
{{ __('TO') }}:
|
||||||
|
</span>
|
||||||
|
<span>{{ activity.data.recipients }}</span>
|
||||||
|
<span v-if="activity.data.cc">, </span>
|
||||||
|
<span
|
||||||
|
v-if="activity.data.cc"
|
||||||
|
class="mr-1 text-2xs font-bold text-gray-500"
|
||||||
|
>
|
||||||
|
{{ __('CC') }}:
|
||||||
|
</span>
|
||||||
|
<span v-if="activity.data.cc">{{ activity.data.cc }}</span>
|
||||||
|
<span v-if="activity.data.bcc">, </span>
|
||||||
|
<span
|
||||||
|
v-if="activity.data.bcc"
|
||||||
|
class="mr-1 text-2xs font-bold text-gray-500"
|
||||||
|
>
|
||||||
|
{{ __('BCC') }}:
|
||||||
|
</span>
|
||||||
|
<span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
|
||||||
|
</div>
|
||||||
|
<FadedScrollableDiv
|
||||||
|
:maskHeight="30"
|
||||||
|
class="email-content prose-f max-h-[500px] overflow-y-auto"
|
||||||
|
v-html="activity.data.content"
|
||||||
|
/>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<AttachmentItem
|
||||||
|
v-for="a in activity.data.attachments"
|
||||||
|
:key="a.file_url"
|
||||||
|
:label="a.file_name"
|
||||||
|
:url="a.file_url"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mb-4"
|
||||||
|
:id="activity.name"
|
||||||
|
v-else-if="activity.activity_type == 'comment'"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mb-0.5 flex items-start justify-stretch gap-2 py-1.5 text-base"
|
||||||
|
>
|
||||||
|
<div class="inline-flex flex-wrap gap-1 text-gray-600">
|
||||||
|
<span class="font-medium text-gray-800">
|
||||||
|
{{ activity.owner_name }}
|
||||||
|
</span>
|
||||||
|
<span>{{ __('added a') }}</span>
|
||||||
|
<span class="max-w-xs truncate font-medium text-gray-800">
|
||||||
|
{{ __('comment') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto whitespace-nowrap">
|
||||||
|
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
|
{{ __(timeAgo(activity.creation)) }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else-if="
|
class="cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
|
||||||
activity.activity_type == 'incoming_call' ||
|
|
||||||
activity.activity_type == 'outgoing_call'
|
|
||||||
"
|
|
||||||
class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
|
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between">
|
<div class="prose-f" v-html="activity.content" />
|
||||||
<div>
|
<div
|
||||||
|
v-if="activity.attachments.length"
|
||||||
|
class="mt-2 flex flex-wrap gap-2"
|
||||||
|
>
|
||||||
|
<AttachmentItem
|
||||||
|
v-for="a in activity.attachments"
|
||||||
|
:key="a.file_url"
|
||||||
|
:label="a.file_name"
|
||||||
|
:url="a.file_url"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="
|
||||||
|
activity.activity_type == 'incoming_call' ||
|
||||||
|
activity.activity_type == 'outgoing_call'
|
||||||
|
"
|
||||||
|
class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
{{
|
||||||
|
activity.type == 'Incoming'
|
||||||
|
? __('Inbound Call')
|
||||||
|
: __('Outbound Call')
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
|
{{ __(timeAgo(activity.creation)) }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<DurationIcon class="h-4 w-4 text-gray-600" />
|
||||||
|
<div class="text-sm text-gray-600">{{ __('Duration') }}</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
{{ activity.duration }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="activity.recording_url"
|
||||||
|
class="flex cursor-pointer select-none items-center gap-1"
|
||||||
|
@click="activity.show_recording = !activity.show_recording"
|
||||||
|
>
|
||||||
|
<PlayIcon class="h-4 w-4 text-gray-600" />
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
{{
|
{{
|
||||||
activity.type == 'Incoming'
|
activity.show_recording
|
||||||
? __('Inbound Call')
|
? __('Hide Recording')
|
||||||
: __('Outbound Call')
|
: __('Listen to Call')
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
|
||||||
<div class="text-sm text-gray-600">
|
|
||||||
{{ __(timeAgo(activity.creation)) }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between">
|
</div>
|
||||||
<div class="flex items-center gap-1">
|
<div
|
||||||
<DurationIcon class="h-4 w-4 text-gray-600" />
|
v-if="activity.show_recording && activity.recording_url"
|
||||||
<div class="text-sm text-gray-600">{{ __('Duration') }}</div>
|
class="flex items-center justify-between rounded border"
|
||||||
<div class="text-sm">
|
>
|
||||||
{{ activity.duration }}
|
<audio
|
||||||
</div>
|
class="audio-control"
|
||||||
</div>
|
controls
|
||||||
<div
|
:src="activity.recording_url"
|
||||||
v-if="activity.recording_url"
|
></audio>
|
||||||
class="flex cursor-pointer select-none items-center gap-1"
|
</div>
|
||||||
@click="activity.show_recording = !activity.show_recording"
|
<div
|
||||||
>
|
class="flex items-center justify-between sm:justify-start sm:gap-1"
|
||||||
<PlayIcon class="h-4 w-4 text-gray-600" />
|
>
|
||||||
<div class="text-sm text-gray-600">
|
<div class="flex items-center gap-1">
|
||||||
{{
|
<Avatar
|
||||||
activity.show_recording
|
:image="activity.caller.image"
|
||||||
? __('Hide Recording')
|
:label="activity.caller.label"
|
||||||
: __('Listen to Call')
|
class="sm:h-8 sm:w-8"
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="activity.show_recording && activity.recording_url"
|
|
||||||
class="flex items-center justify-between rounded border"
|
|
||||||
>
|
|
||||||
<audio
|
|
||||||
class="audio-control"
|
|
||||||
controls
|
|
||||||
:src="activity.recording_url"
|
|
||||||
></audio>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between sm:justify-start sm:gap-1"
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<Avatar
|
|
||||||
:image="activity.caller.image"
|
|
||||||
:label="activity.caller.label"
|
|
||||||
class="sm:h-8 sm:w-8"
|
|
||||||
/>
|
|
||||||
<div class="ml-1 flex flex-col gap-1">
|
|
||||||
<div class="text-xs font-medium sm:text-base">
|
|
||||||
{{ __(activity.caller.label) }}
|
|
||||||
</div>
|
|
||||||
<div class="text-2xs text-gray-600 sm:text-xs">
|
|
||||||
{{ activity.from }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FeatherIcon
|
|
||||||
name="arrow-right"
|
|
||||||
class="size-4 text-gray-600 sm:mx-2 sm:size-5"
|
|
||||||
/>
|
/>
|
||||||
<div class="flex items-center gap-1">
|
<div class="ml-1 flex flex-col gap-1">
|
||||||
<Avatar
|
<div class="text-xs font-medium sm:text-base">
|
||||||
:image="activity.receiver.image"
|
{{ __(activity.caller.label) }}
|
||||||
:label="activity.receiver.label"
|
</div>
|
||||||
class="sm:h-8 sm:w-8"
|
<div class="text-2xs text-gray-600 sm:text-xs">
|
||||||
/>
|
{{ activity.from }}
|
||||||
<div class="ml-1 flex flex-col gap-1">
|
</div>
|
||||||
<div class="text-xs font-medium sm:text-base">
|
</div>
|
||||||
{{ __(activity.receiver.label) }}
|
</div>
|
||||||
</div>
|
<FeatherIcon
|
||||||
<div class="text-2xs text-gray-600 sm:text-xs">
|
name="arrow-right"
|
||||||
{{ activity.to }}
|
class="size-4 text-gray-600 sm:mx-2 sm:size-5"
|
||||||
</div>
|
/>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<Avatar
|
||||||
|
:image="activity.receiver.image"
|
||||||
|
:label="activity.receiver.label"
|
||||||
|
class="sm:h-8 sm:w-8"
|
||||||
|
/>
|
||||||
|
<div class="ml-1 flex flex-col gap-1">
|
||||||
|
<div class="text-xs font-medium sm:text-base">
|
||||||
|
{{ __(activity.receiver.label) }}
|
||||||
|
</div>
|
||||||
|
<div class="text-2xs text-gray-600 sm:text-xs">
|
||||||
|
{{ activity.to }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mb-4 flex flex-col gap-5 py-1.5">
|
</div>
|
||||||
<div class="flex items-start justify-stretch gap-2 text-base">
|
<div v-else class="mb-4 flex flex-col gap-5 py-1.5">
|
||||||
<div class="inline-flex flex-wrap gap-1 text-gray-600">
|
<div class="flex items-start justify-stretch gap-2 text-base">
|
||||||
<span class="font-medium text-gray-800">
|
<div class="inline-flex flex-wrap gap-1 text-gray-600">
|
||||||
{{ activity.owner_name }}
|
<span class="font-medium text-gray-800">
|
||||||
</span>
|
{{ activity.owner_name }}
|
||||||
<span v-if="activity.type">{{ __(activity.type) }}</span>
|
</span>
|
||||||
|
<span v-if="activity.type">{{ __(activity.type) }}</span>
|
||||||
|
<span
|
||||||
|
v-if="activity.data.field_label"
|
||||||
|
class="max-w-xs truncate font-medium text-gray-800"
|
||||||
|
>
|
||||||
|
{{ __(activity.data.field_label) }}
|
||||||
|
</span>
|
||||||
|
<span v-if="activity.value">{{ __(activity.value) }}</span>
|
||||||
|
<span
|
||||||
|
v-if="activity.data.old_value"
|
||||||
|
class="max-w-xs font-medium text-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-1"
|
||||||
|
v-if="activity.options == 'User'"
|
||||||
|
>
|
||||||
|
<UserAvatar :user="activity.data.old_value" size="xs" />
|
||||||
|
{{ getUser(activity.data.old_value).full_name }}
|
||||||
|
</div>
|
||||||
|
<div class="truncate" v-else>
|
||||||
|
{{ activity.data.old_value }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span v-if="activity.to">{{ __('to') }}</span>
|
||||||
|
<span
|
||||||
|
v-if="activity.data.value"
|
||||||
|
class="max-w-xs font-medium text-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-1"
|
||||||
|
v-if="activity.options == 'User'"
|
||||||
|
>
|
||||||
|
<UserAvatar :user="activity.data.value" size="xs" />
|
||||||
|
{{ getUser(activity.data.value).full_name }}
|
||||||
|
</div>
|
||||||
|
<div class="truncate" v-else>
|
||||||
|
{{ activity.data.value }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ml-auto whitespace-nowrap">
|
||||||
|
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
|
{{ __(timeAgo(activity.creation)) }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="activity.other_versions && activity.show_others"
|
||||||
|
v-for="activity in activity.other_versions"
|
||||||
|
class="flex items-start justify-stretch gap-2 text-base"
|
||||||
|
>
|
||||||
|
<div class="flex items-start gap-1 text-gray-600">
|
||||||
|
<div class="flex flex-1 items-center gap-1">
|
||||||
<span
|
<span
|
||||||
v-if="activity.data.field_label"
|
v-if="activity.data.field_label"
|
||||||
class="max-w-xs truncate font-medium text-gray-800"
|
class="max-w-xs truncate text-gray-600"
|
||||||
>
|
>
|
||||||
{{ __(activity.data.field_label) }}
|
{{ __(activity.data.field_label) }}
|
||||||
</span>
|
</span>
|
||||||
<span v-if="activity.value">{{ __(activity.value) }}</span>
|
<FeatherIcon
|
||||||
|
name="arrow-right"
|
||||||
|
class="mx-1 h-4 w-4 text-gray-600"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap items-center gap-1">
|
||||||
|
<span v-if="activity.type">{{
|
||||||
|
startCase(__(activity.type))
|
||||||
|
}}</span>
|
||||||
<span
|
<span
|
||||||
v-if="activity.data.old_value"
|
v-if="activity.data.old_value"
|
||||||
class="max-w-xs font-medium text-gray-800"
|
class="max-w-xs font-medium text-gray-800"
|
||||||
@ -725,97 +784,33 @@
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ml-auto whitespace-nowrap">
|
|
||||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
|
||||||
<div class="text-sm text-gray-600">
|
|
||||||
{{ __(timeAgo(activity.creation)) }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
v-if="activity.other_versions && activity.show_others"
|
<div class="ml-auto whitespace-nowrap">
|
||||||
v-for="activity in activity.other_versions"
|
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||||
class="flex items-start justify-stretch gap-2 text-base"
|
<div class="text-sm text-gray-600">
|
||||||
|
{{ __(timeAgo(activity.creation)) }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="activity.other_versions">
|
||||||
|
<Button
|
||||||
|
:label="
|
||||||
|
activity.show_others
|
||||||
|
? __('Hide all Changes')
|
||||||
|
: __('Show all Changes')
|
||||||
|
"
|
||||||
|
variant="outline"
|
||||||
|
@click="activity.show_others = !activity.show_others"
|
||||||
>
|
>
|
||||||
<div class="flex items-start gap-1 text-gray-600">
|
<template #suffix>
|
||||||
<div class="flex flex-1 items-center gap-1">
|
<FeatherIcon
|
||||||
<span
|
:name="activity.show_others ? 'chevron-up' : 'chevron-down'"
|
||||||
v-if="activity.data.field_label"
|
class="h-4 text-gray-600"
|
||||||
class="max-w-xs truncate text-gray-600"
|
/>
|
||||||
>
|
</template>
|
||||||
{{ __(activity.data.field_label) }}
|
</Button>
|
||||||
</span>
|
|
||||||
<FeatherIcon
|
|
||||||
name="arrow-right"
|
|
||||||
class="mx-1 h-4 w-4 text-gray-600"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap items-center gap-1">
|
|
||||||
<span v-if="activity.type">{{
|
|
||||||
startCase(__(activity.type))
|
|
||||||
}}</span>
|
|
||||||
<span
|
|
||||||
v-if="activity.data.old_value"
|
|
||||||
class="max-w-xs font-medium text-gray-800"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex items-center gap-1"
|
|
||||||
v-if="activity.options == 'User'"
|
|
||||||
>
|
|
||||||
<UserAvatar :user="activity.data.old_value" size="xs" />
|
|
||||||
{{ getUser(activity.data.old_value).full_name }}
|
|
||||||
</div>
|
|
||||||
<div class="truncate" v-else>
|
|
||||||
{{ activity.data.old_value }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span v-if="activity.to">{{ __('to') }}</span>
|
|
||||||
<span
|
|
||||||
v-if="activity.data.value"
|
|
||||||
class="max-w-xs font-medium text-gray-800"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex items-center gap-1"
|
|
||||||
v-if="activity.options == 'User'"
|
|
||||||
>
|
|
||||||
<UserAvatar :user="activity.data.value" size="xs" />
|
|
||||||
{{ getUser(activity.data.value).full_name }}
|
|
||||||
</div>
|
|
||||||
<div class="truncate" v-else>
|
|
||||||
{{ activity.data.value }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ml-auto whitespace-nowrap">
|
|
||||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
|
||||||
<div class="text-sm text-gray-600">
|
|
||||||
{{ __(timeAgo(activity.creation)) }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="activity.other_versions">
|
|
||||||
<Button
|
|
||||||
:label="
|
|
||||||
activity.show_others
|
|
||||||
? __('Hide all Changes')
|
|
||||||
: __('Show all Changes')
|
|
||||||
"
|
|
||||||
variant="outline"
|
|
||||||
@click="activity.show_others = !activity.show_others"
|
|
||||||
>
|
|
||||||
<template #suffix>
|
|
||||||
<FeatherIcon
|
|
||||||
:name="activity.show_others ? 'chevron-up' : 'chevron-down'"
|
|
||||||
class="h-4 text-gray-600"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user