d9e732c005
# Pull Request Template ## Description This PR updates the priority icons with a new set and makes them consistent across the app. ## How Has This Been Tested? **Screenshots** <img width="420" height="550" alt="image" src="https://github.com/user-attachments/assets/cb392934-6c4d-46b4-9fde-244461da62ef" /> <img width="358" height="340" alt="image" src="https://github.com/user-attachments/assets/cb18df47-9a17-42f8-9367-e8b7c4e3958d" /> <img width="344" height="468" alt="image" src="https://github.com/user-attachments/assets/9de92374-e732-48eb-a8a9-85c5b5100931" /> <img width="445" height="548" alt="image" src="https://github.com/user-attachments/assets/ecc4ce51-165c-4593-a9a2-e70b08a29006" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav <pranav@chatwoot.com>
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
|
|
|
|
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
|
|
|
const props = defineProps({
|
|
priority: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
showEmpty: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const { t } = useI18n();
|
|
|
|
const icons = {
|
|
[CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
|
|
[CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
|
|
[CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
|
|
[CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
|
|
};
|
|
|
|
const priorityLabels = {
|
|
[CONVERSATION_PRIORITY.URGENT]: 'CONVERSATION.PRIORITY.OPTIONS.URGENT',
|
|
[CONVERSATION_PRIORITY.HIGH]: 'CONVERSATION.PRIORITY.OPTIONS.HIGH',
|
|
[CONVERSATION_PRIORITY.MEDIUM]: 'CONVERSATION.PRIORITY.OPTIONS.MEDIUM',
|
|
[CONVERSATION_PRIORITY.LOW]: 'CONVERSATION.PRIORITY.OPTIONS.LOW',
|
|
};
|
|
|
|
const iconName = computed(() => {
|
|
if (props.priority && icons[props.priority]) {
|
|
return icons[props.priority];
|
|
}
|
|
return props.showEmpty ? 'i-woot-priority-empty' : '';
|
|
});
|
|
|
|
const tooltipContent = computed(() => {
|
|
if (props.priority && priorityLabels[props.priority]) {
|
|
return t(priorityLabels[props.priority]);
|
|
}
|
|
|
|
if (props.showEmpty) {
|
|
return t('CONVERSATION.PRIORITY.OPTIONS.NONE');
|
|
}
|
|
|
|
return '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Icon
|
|
v-tooltip.top="{
|
|
content: tooltipContent,
|
|
delay: { show: 500, hide: 0 },
|
|
}"
|
|
:icon="iconName"
|
|
class="size-4 text-n-slate-5"
|
|
/>
|
|
</template>
|