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

fix: added icons instead of feature icons

Browse Source 
minor spacing/color fixes
This commit is contained in:
Shariq Ansari 2023-09-26 15:55:59 +05:30
parent b20cdd2d03
commit 5a1f853b9f
6 changed files with 88 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@
<div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0">
<div
v-for="note in activities"
class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md px-4 py-3 bg-gray-50 hover:bg-gray-100"
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"
@click="emit('makeNote', note)"
>
<div class="flex items-center justify-between">
@ -75,11 +75,11 @@
<div
class="z-10 mt-[15px] flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
>
<FeatherIcon
:name="
call.type == 'Incoming' ? 'phone-incoming' : 'phone-outgoing'
<component
:is="
call.type == 'Incoming' ? InboundCallIcon : OutboundCallIcon
"
class="h-4 w-4 text-gray-800"
class="text-gray-800"
/>
</div>
</div>
@ -176,14 +176,24 @@
<div
class="z-10 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
:class="{
'mt-[15px]': [
'mt-3': [
'communication',
'incoming_call',
'outgoing_call',
].includes(activity.activity_type),
'bg-white': ['added', 'removed', 'changed'].includes(
activity.activity_type
),
}"
>
<FeatherIcon :name="activity.icon" class="h-4 w-4 text-gray-800" />
<component
:is="activity.icon"
:class="
['added', 'removed', 'changed'].includes(activity.activity_type)
? 'text-gray-600'
: 'text-gray-800'
"
/>
</div>
</div>
<div v-if="activity.activity_type == 'communication'" class="pb-6">
@ -298,30 +308,30 @@
</div>
</div>
</div>
<div v-else class="flex flex-col gap-3 pb-6">
<div
class="flex items-start justify-stretch gap-2 text-base leading-6"
>
<div v-else class="mb-4 flex flex-col gap-3 py-1.5">
<div class="flex items-start justify-stretch gap-2 text-base">
<div class="inline-flex flex-wrap gap-1 text-gray-600">
<span class="text-gray-900">{{ activity.owner_name }}</span>
<span class="font-medium text-gray-800">{{
activity.owner_name
}}</span>
<span v-if="activity.type">{{ activity.type }}</span>
<span
v-if="activity.data.field_label"
class="max-w-xs truncate text-gray-900"
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 truncate text-gray-900"
class="max-w-xs truncate font-medium text-gray-800"
>
{{ activity.data.old_value }}
</span>
<span v-if="activity.to">to</span>
<span
v-if="activity.data.value"
class="max-w-xs truncate text-gray-900"
class="max-w-xs truncate font-medium text-gray-800"
>
{{ activity.data.value }}
</span>
@ -330,7 +340,7 @@
<div class="ml-auto whitespace-nowrap">
<Tooltip
:text="dateFormat(activity.creation, dateTooltipFormat)"
class="text-sm leading-6 text-gray-600"
class="text-gray-600"
>
{{ timeAgo(activity.creation) }}
</Tooltip>
@ -383,6 +393,11 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue'
import DurationIcon from '@/components/Icons/DurationIcon.vue'
import PlayIcon from '@/components/Icons/PlayIcon.vue'
import DealsIcon from '@/components/Icons/DealsIcon.vue'
import DotIcon from '@/components/Icons/DotIcon.vue'
import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
import CommunicationArea from '@/components/CommunicationArea.vue'
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { usersStore } from '@/stores/users'
@ -394,7 +409,7 @@ import {
TextEditor,
Avatar,
} from 'frappe-ui'
import { computed, h, defineModel } from 'vue'
import { computed, h, defineModel, markRaw } from 'vue'
const { getUser } = usersStore()
@ -473,20 +488,25 @@ const emptyTextIcon = computed(() => {
})
function timelineIcon(activity_type) {
if (activity_type == 'creation') {
return 'plus'
} else if (activity_type == 'removed') {
return 'trash-2'
} else if (activity_type == 'communication') {
return 'at-sign'
} else if (activity_type == 'comment') {
return 'file-text'
} else if (activity_type == 'incoming_call') {
return 'phone-incoming'
} else if (activity_type == 'outgoing_call') {
return 'phone-outgoing'
let icon
switch (activity_type) {
case 'creation':
icon = DealsIcon
break
case 'communication':
icon = EmailAtIcon
break
case 'incoming_call':
icon = InboundCallIcon
break
case 'outgoing_call':
icon = OutboundCallIcon
break
default:
icon = DotIcon
}
return 'edit'
return markRaw(icon)
}
</script>

16
frontend/src/components/Icons/DealsIcon.vue
View File

@ -1,10 +1,16 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
d="M9.23906 2.91049c.12084-.14098.35185-.05552.35185.13016v4.18662h5.47429c.1708 0 .263.20043.1518.33016L8.76094 15.0895c-.12084.141-.35185.0555-.35185-.1302v-4.1866H2.93484c-.17087 0-.26305-.2004-.15185-.3301l6.45607-7.53211Z"
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.51246 2.15214C8.0454 1.5782 8.99073 2.10255 8.78598 2.85854L8.06251 5.52981L14.3198 6.41225C14.5042 6.43825 14.6589 6.56458 14.7212 6.74006C14.7835 6.91555 14.7431 7.11112 14.6164 7.24758L8.48756 13.8479C7.95462 14.4218 7.00929 13.8975 7.21404 13.1415L7.93751 10.4702L1.68019 9.58777C1.4958 9.56176 1.34113 9.43544 1.27883 9.25995C1.21652 9.08447 1.2569 8.8889 1.38361 8.75244L7.51246 2.15214ZM7.55592 3.57495L2.76791 8.73127L8.63801 9.5591C8.78003 9.57913 8.9066 9.65918 8.98557 9.7789C9.06454 9.89862 9.0883 10.0465 9.05081 10.1849L8.4441 12.4251L13.2321 7.26875L7.36201 6.44091C7.21999 6.42089 7.09342 6.34084 7.01445 6.22112C6.93548 6.1014 6.91172 5.95354 6.94922 5.8151L7.55592 3.57495Z"
fill="currentColor"
/>
</svg>
</template>

11
frontend/src/components/Icons/DotIcon.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="3.5" fill="currentColor" />
</svg>
</template>

16
frontend/src/components/Icons/EmailAtIcon.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.00915 1.67113C6.43756 0.996093 8.0523 0.824124 9.59083 1.18318L9.47719 1.67009L9.59083 1.18318C11.1294 1.54222 12.5012 2.41118 13.4833 3.64873L13.4833 3.64875C14.4653 4.8863 14.9999 6.41969 15 7.99959V7.99961V8.64961C15 9.29937 14.7419 9.92256 14.2824 10.382C13.8229 10.8415 13.1998 11.0996 12.55 11.0996C11.9002 11.0996 11.2771 10.8415 10.8176 10.382C10.6732 10.2376 10.5487 10.077 10.4458 9.90455C9.87852 10.6319 8.99387 11.0996 8.00001 11.0996C6.28792 11.0996 4.90001 9.71167 4.90001 7.99961C4.90001 6.28752 6.28792 4.8996 8.00001 4.8996C8.81015 4.8996 9.54773 5.21039 10.1 5.71924V5.3996C10.1 5.12346 10.3239 4.8996 10.6 4.8996C10.8761 4.8996 11.1 5.12346 11.1 5.3996V7.99961V8.64961C11.1 9.03414 11.2528 9.40298 11.5247 9.67491C11.7966 9.94684 12.1654 10.0996 12.55 10.0996C12.9345 10.0996 13.3034 9.94684 13.5753 9.67491C13.8472 9.40298 14 9.03414 14 8.64961V7.99964C14 7.99963 14 7.99962 14 7.99961C13.9999 6.64545 13.5417 5.33113 12.7 4.27036C11.8582 3.20959 10.6823 2.46476 9.36356 2.15701L9.477 1.67093L9.36356 2.15701C8.04482 1.84925 6.66077 1.99665 5.43641 2.57525L5.24134 2.16246L5.43641 2.57525C4.21207 3.15384 3.21944 4.12961 2.61996 5.34387C2.02048 6.55813 1.84939 7.93946 2.13451 9.26331C2.41962 10.5871 3.14418 11.7756 4.19038 12.6354C5.23657 13.4952 6.54286 13.9758 7.89687 13.9991C9.25083 14.0224 10.5729 13.587 11.648 12.7636C11.8673 12.5958 12.1811 12.6374 12.349 12.8566C12.5169 13.0759 12.4752 13.3897 12.256 13.5576C11.0017 14.5181 9.45929 15.0261 7.87968 14.999C6.30002 14.9718 4.77601 14.4111 3.55545 13.408L3.55543 13.408C2.33489 12.4048 1.48956 11.0183 1.15692 9.47385C0.824284 7.92937 1.02389 6.31782 1.72329 4.90118L2.16883 5.12114L1.72329 4.90117C2.42268 3.48454 3.58074 2.34615 5.00915 1.67113ZM10.1 7.99961C10.1 6.83981 9.15978 5.8996 8.00001 5.8996C6.84021 5.8996 5.90001 6.8398 5.90001 7.99961C5.90001 9.15939 6.84021 10.0996 8.00001 10.0996C9.15978 10.0996 10.1 9.15939 10.1 7.99961Z"
fill="currentColor"
/>
</svg>
</template>

1
frontend/src/components/Icons/InboundCall.vue → frontend/src/components/Icons/InboundCallIcon.vue
View File

@ -6,7 +6,6 @@
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="16" height="16" fill="white" />
<path
fill-rule="evenodd"
clip-rule="evenodd"

1
frontend/src/components/Icons/OutboundCall.vue → frontend/src/components/Icons/OutboundCallIcon.vue
View File

@ -6,7 +6,6 @@
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="16" height="16" fill="white" />
<path
fill-rule="evenodd"
clip-rule="evenodd"