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

refactor: updated activities ui based on new design (first cut)

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-25 14:50:31 +05:30
parent 91d3482c78
commit af04c241da
1 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<div class="p-5 flex items-center justify-between font-medium text-lg"> <div class="px-10 py-5 flex items-center justify-between font-medium text-lg">
<div>{{ title }}</div> <div class="flex items-center h-7 text-xl font-semibold">{{ title }}</div>
<Button v-if="title == 'Calls'" variant="solid" @click="emit('makeCall')"> <Button v-if="title == 'Calls'" variant="solid" @click="emit('makeCall')">
<PhoneIcon class="w-4 h-4" /> <PhoneIcon class="w-4 h-4" />
</Button> </Button>
@ -13,7 +13,7 @@
</Button> </Button>
</div> </div>
<div v-if="activities.length" class="flex-1 overflow-y-auto"> <div v-if="activities.length" class="flex-1 overflow-y-auto">
<div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 p-5 pt-0"> <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0">
<div <div
v-for="note in activities" v-for="note in activities"
class="group flex flex-col justify-between gap-2 px-4 py-3 border rounded-lg h-48 shadow-sm hover:bg-gray-50 cursor-pointer" class="group flex flex-col justify-between gap-2 px-4 py-3 border rounded-lg h-48 shadow-sm hover:bg-gray-50 cursor-pointer"
@ -82,7 +82,7 @@
</div> </div>
</div> </div>
<div <div
class="flex flex-col gap-3 border rounded-lg p-4 mb-3 shadow-sm max-w-[60%]" class="flex flex-col gap-3 bg-gray-50 rounded-md p-4 mb-3 max-w-[70%]"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@ -166,13 +166,13 @@
</div> </div>
</div> </div>
<div v-else v-for="(activity, i) in activities"> <div v-else v-for="(activity, i) in activities">
<div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-5"> <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
<div <div
class="relative flex justify-center after:absolute after:border-l after:border-gray-300 after:top-0 after:left-[50%] after:-z-10" class="relative flex justify-center after:absolute after:border-l after:border-gray-200 after:top-0 after:left-[50%] after:-z-10"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
> >
<div <div
class="flex items-center justify-center rounded-full outline outline-4 outline-white w-6 h-6 bg-gray-200 z-10" class="flex items-center justify-center rounded-full w-7 h-7 bg-gray-100 z-10"
:class="{ :class="{
'mt-[15px]': [ 'mt-[15px]': [
'communication', 'communication',
@ -181,15 +181,12 @@
].includes(activity.activity_type), ].includes(activity.activity_type),
}" }"
> >
<FeatherIcon <FeatherIcon :name="activity.icon" class="w-4 h-4 text-gray-800" />
:name="activity.icon"
class="w-3.5 h-3.5 text-gray-600"
/>
</div> </div>
</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="shadow-sm border max-w-[80%] rounded-xl p-3 text-base cursor-pointer leading-6 transition-all duration-300 ease-in-out" class="rounded-md p-3 text-base cursor-pointer bg-gray-50 leading-6 transition-all duration-300 ease-in-out"
> >
<div class="flex items-center justify-between gap-2 mb-3"> <div class="flex items-center justify-between gap-2 mb-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -219,7 +216,7 @@
activity.activity_type == 'incoming_call' || activity.activity_type == 'incoming_call' ||
activity.activity_type == 'outgoing_call' activity.activity_type == 'outgoing_call'
" "
class="flex flex-col gap-3 border rounded-lg p-4 mb-3 shadow-sm max-w-[60%]" class="flex flex-col gap-3 bg-gray-50 rounded-md p-4 mb-3 max-w-[70%]"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@ -303,8 +300,6 @@
<div <div
class="flex items-start justify-stretch gap-2 text-base leading-6" class="flex items-start justify-stretch gap-2 text-base leading-6"
> >
<UserAvatar :user="activity.owner" size="md" />
<div class="inline-flex flex-wrap gap-1 text-gray-600"> <div class="inline-flex flex-wrap gap-1 text-gray-600">
<span class="text-gray-900">{{ activity.owner_name }}</span> <span class="text-gray-900">{{ activity.owner_name }}</span>
<span v-if="activity.type">{{ activity.type }}</span> <span v-if="activity.type">{{ activity.type }}</span>
@ -414,12 +409,7 @@ const props = defineProps({
const lead = defineModel() const lead = defineModel()
const emit = defineEmits([ const emit = defineEmits(['makeCall', 'makeNote', 'deleteNote'])
'makeCall',
'makeNote',
'deleteNote',
'setFocusOnEmail',
])
const activities = computed(() => { const activities = computed(() => {
if (props.title == 'Calls') { if (props.title == 'Calls') {