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

fix: use icon color only in status indicators

Browse Source
This commit is contained in:
Shariq Ansari 2025-01-03 18:18:48 +05:30
parent bf60064257
commit d896d8e839
15 changed files with 55 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/Kanban/KanbanView.vue
View File

@ -22,9 +22,7 @@
size="sm"
class="hover:!bg-surface-gray-2"
>
<IndicatorIcon
:class="colorClasses(column.column.color, true)"
/>
<IndicatorIcon :class="parseColor(column.column.color)" />
</Button>
</template>
<template #body="{ close }">
@ -33,13 +31,12 @@
>
<div class="flex gap-1">
<Button
:class="colorClasses(color)"
variant="ghost"
v-for="color in colors"
:key="color"
@click="() => (column.column.color = color)"
>
<IndicatorIcon />
<IndicatorIcon :class="parseColor(color)" />
</Button>
</div>
<div class="flex flex-row-reverse">
@ -172,7 +169,7 @@
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
import NestedPopover from '@/components/NestedPopover.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import { isTouchScreenDevice } from '@/utils'
import { isTouchScreenDevice, colors, parseColor } from '@/utils'
import Draggable from 'vuedraggable'
import { Dropdown } from 'frappe-ui'
import { computed } from 'vue'
@ -265,33 +262,4 @@ function updateColumn(d) {
emit('update', data)
}
function colorClasses(color, onlyIcon = false) {
let textColor = `!text-${color}-600`
if (color == 'black') {
textColor = '!text-ink-gray-9'
} else if (['gray', 'green'].includes(color)) {
textColor = `!text-${color}-700`
}
let bgColor = `!bg-${color}-100 hover:!bg-${color}-200 active:!bg-${color}-300`
return [textColor, onlyIcon ? '' : bgColor]
}
const colors = [
'gray',
'blue',
'green',
'red',
'pink',
'orange',
'amber',
'yellow',
'cyan',
'teal',
'violet',
'purple',
'black',
]
</script>

2
frontend/src/components/Modals/DealModal.vue
View File

@ -163,7 +163,7 @@ const tabs = createResource({
if (field.fieldname == 'status') {
field.fieldtype = 'Select'
field.options = dealStatuses.value
field.prefix = getDealStatus(deal.status).iconColorClass
field.prefix = getDealStatus(deal.status).color
}
if (field.fieldtype === 'Table') {

2
frontend/src/components/Modals/LeadModal.vue
View File

@ -76,7 +76,7 @@ const tabs = createResource({
if (field.fieldname == 'status') {
field.fieldtype = 'Select'
field.options = leadStatuses.value
field.prefix = getLeadStatus(lead.status).iconColorClass
field.prefix = getLeadStatus(lead.status).color
}
if (field.fieldtype === 'Table') {

2
frontend/src/pages/Contact.vue
View File

@ -582,7 +582,7 @@ function getDealRowObject(deal) {
annual_revenue: getFormattedCurrency('annual_revenue', deal),
status: {
label: deal.status,
color: getDealStatus(deal.status)?.iconColorClass,
color: getDealStatus(deal.status)?.color,
},
email: deal.email,
mobile_no: deal.mobile_no,

7
frontend/src/pages/Deal.vue
View File

@ -21,12 +21,9 @@
:options="statusOptions('deal', updateField, deal.data._customStatuses)"
>
<template #default="{ open }">
<Button
:label="deal.data.status"
:class="getDealStatus(deal.data.status).colorClass"
>
<Button :label="deal.data.status">
<template #prefix>
<IndicatorIcon />
<IndicatorIcon :class="getDealStatus(deal.data.status).color" />
</template>
<template #suffix>
<FeatherIcon

4
frontend/src/pages/Deals.vue
View File

@ -362,7 +362,7 @@ function getGroupedByRows(listRows, groupByField, columns) {
if (groupByField.name == 'status') {
groupDetail.icon = () =>
h(IndicatorIcon, {
class: getDealStatus(option)?.iconColorClass,
class: getDealStatus(option)?.color,
})
}
groupedRows.push(groupDetail)
@ -421,7 +421,7 @@ function parseRows(rows, columns = []) {
} else if (row == 'status') {
_rows[row] = {
label: deal.status,
color: getDealStatus(deal.status)?.iconColorClass,
color: getDealStatus(deal.status)?.color,
}
} else if (row == 'sla_status') {
let value = deal.sla_status

9
frontend/src/pages/Lead.vue
View File

@ -21,12 +21,11 @@
:options="statusOptions('lead', updateField, lead.data._customStatuses)"
>
<template #default="{ open }">
<Button
:label="lead.data.status"
:class="getLeadStatus(lead.data.status).colorClass"
>
<Button :label="lead.data.status">
<template #prefix>
<IndicatorIcon />
<IndicatorIcon
:class="getLeadStatus(lead.data.status).color"
/>
</template>
<template #suffix>
<FeatherIcon

4
frontend/src/pages/Leads.vue
View File

@ -382,7 +382,7 @@ function getGroupedByRows(listRows, groupByField, columns) {
if (groupByField.name == 'status') {
groupDetail.icon = () =>
h(IndicatorIcon, {
class: getLeadStatus(option)?.iconColorClass,
class: getLeadStatus(option)?.color,
})
}
groupedRows.push(groupDetail)
@ -444,7 +444,7 @@ function parseRows(rows, columns = []) {
} else if (row == 'status') {
_rows[row] = {
label: lead.status,
color: getLeadStatus(lead.status)?.iconColorClass,
color: getLeadStatus(lead.status)?.color,
}
} else if (row == 'sla_status') {
let value = lead.sla_status

2
frontend/src/pages/MobileContact.vue
View File

@ -592,7 +592,7 @@ function getDealRowObject(deal) {
annual_revenue: getFormattedCurrency('annual_revenue', deal),
status: {
label: deal.status,
color: getDealStatus(deal.status)?.iconColorClass,
color: getDealStatus(deal.status)?.color,
},
email: deal.email,
mobile_no: deal.mobile_no,

7
frontend/src/pages/MobileDeal.vue
View File

@ -15,12 +15,9 @@
"
>
<template #default="{ open }">
<Button
:label="deal.data.status"
:class="getDealStatus(deal.data.status).colorClass"
>
<Button :label="deal.data.status">
<template #prefix>
<IndicatorIcon />
<IndicatorIcon :class="getDealStatus(deal.data.status).color" />
</template>
<template #suffix>
<FeatherIcon

7
frontend/src/pages/MobileLead.vue
View File

@ -15,12 +15,9 @@
"
>
<template #default="{ open }">
<Button
:label="lead.data.status"
:class="getLeadStatus(lead.data.status).colorClass"
>
<Button :label="lead.data.status">
<template #prefix>
<IndicatorIcon />
<IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
</template>
<template #suffix>
<FeatherIcon

2
frontend/src/pages/MobileOrganization.vue
View File

@ -457,7 +457,7 @@ function getDealRowObject(deal) {
annual_revenue: getFormattedCurrency('annual_revenue', deal),
status: {
label: deal.status,
color: getDealStatus(deal.status)?.iconColorClass,
color: getDealStatus(deal.status)?.color,
},
email: deal.email,
mobile_no: deal.mobile_no,

2
frontend/src/pages/Organization.vue
View File

@ -459,7 +459,7 @@ function getDealRowObject(deal) {
annual_revenue: getFormattedCurrency('annual_revenue', deal),
status: {
label: deal.status,
color: getDealStatus(deal.status)?.iconColorClass,
color: getDealStatus(deal.status)?.color,
},
email: deal.email,
mobile_no: deal.mobile_no,

25
frontend/src/stores/statuses.js
View File

@ -1,5 +1,6 @@
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import { capture } from '@/telemetry'
import { parseColor } from '@/utils'
import { defineStore } from 'pinia'
import { createListResource } from 'frappe-ui'
import { reactive, h } from 'vue'
@ -18,8 +19,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
auto: true,
transform(statuses) {
for (let status of statuses) {
status.colorClass = colorClasses(status.color)
status.iconColorClass = colorClasses(status.color, true)
status.color = parseColor(status.color)
leadStatusesByName[status.name] = status
}
return statuses
@ -35,8 +35,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
auto: true,
transform(statuses) {
for (let status of statuses) {
status.colorClass = colorClasses(status.color)
status.iconColorClass = colorClasses(status.color, true)
status.color = parseColor(status.color)
dealStatusesByName[status.name] = status
}
return statuses
@ -57,19 +56,6 @@ export const statusesStore = defineStore('crm-statuses', () => {
},
})
function colorClasses(color, onlyIcon = false) {
let textColor = `!text-${color}-600`
if (color == 'black') {
textColor = '!text-ink-gray-9'
} else if (['gray', 'green'].includes(color)) {
textColor = `!text-${color}-700`
}
let bgColor = `!bg-${color}-100 hover:!bg-${color}-200 active:!bg-${color}-300`
return [textColor, onlyIcon ? '' : bgColor]
}
function getLeadStatus(name) {
if (!name) {
name = leadStatuses.data[0].name
@ -107,10 +93,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
options.push({
label: statusesByName[status]?.name,
value: statusesByName[status]?.name,
icon: () =>
h(IndicatorIcon, {
class: statusesByName[status]?.iconColorClass,
}),
icon: () => h(IndicatorIcon, { class: statusesByName[status]?.color }),
onClick: () => {
capture('status_changed', { doctype, status })
action && action('status', statusesByName[status]?.name)

29
frontend/src/utils/index.js
View File

@ -234,6 +234,33 @@ export function copyToClipboard(text) {
}
}
export const colors = [
'gray',
'blue',
'green',
'red',
'pink',
'orange',
'amber',
'yellow',
'cyan',
'teal',
'violet',
'purple',
'black',
]
export function parseColor(color) {
let textColor = `!text-${color}-600`
if (color == 'black') {
textColor = '!text-ink-gray-9'
} else if (['gray', 'green'].includes(color)) {
textColor = `!text-${color}-700`
}
return textColor
}
export function isEmoji(str) {
const emojiList = gemoji.map((emoji) => emoji.emoji)
return emojiList.includes(str)
@ -306,7 +333,7 @@ export function isImage(extention) {
)
}
export function getRandom(len=4) {
export function getRandom(len = 4) {
let text = ''
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'