refactor: update Activities component for improved z-index layering

(cherry picked from commit 2a18a556bf6fbefc6aee2d10c3e7e9d529f33298)
This commit is contained in:
Shariq Ansari 2025-08-04 12:30:48 +05:30 committed by Mergify
parent d39500f706
commit 5b34142a40
2 changed files with 22 additions and 8 deletions

10
frontend/auto-imports.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
// biome-ignore lint: disable
export {}
declare global {
}

View File

@ -50,11 +50,13 @@
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10" class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
> >
<div <div
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:border-l after:border-outline-gray-modals" class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="
i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
"
> >
<div <div
class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white" class="flex h-8 w-7 items-center justify-center bg-surface-white"
> >
<CommentIcon class="text-ink-gray-8" /> <CommentIcon class="text-ink-gray-8" />
</div> </div>
@ -72,11 +74,13 @@
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10" class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
> >
<div <div
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:border-l after:border-outline-gray-modals" class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="
i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
"
> >
<div <div
class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8" class="flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
> >
<MissedCallIcon <MissedCallIcon
v-if="call.status == 'No Answer'" v-if="call.status == 'No Answer'"
@ -116,11 +120,11 @@
> >
<div <div
v-if="['Activity', 'Emails'].includes(title)" v-if="['Activity', 'Emails'].includes(title)"
class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:border-l before:border-outline-gray-modals" class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
:class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']" :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
> >
<div <div
class="z-[1] flex h-7 w-7 items-center justify-center bg-surface-white" class="flex h-7 w-7 items-center justify-center bg-surface-white"
:class="{ :class="{
'mt-2.5': ['communication'].includes(activity.activity_type), 'mt-2.5': ['communication'].includes(activity.activity_type),
'bg-surface-white': ['added', 'removed', 'changed'].includes( 'bg-surface-white': ['added', 'removed', 'changed'].includes(