mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 12:08:01 +00:00
feat: priority UI (#6966)
This commit is contained in:
Shivam Mishra
@@ -33,13 +33,16 @@
|
||||
<div class="conversation--details columns">
|
||||
<div class="conversation--metadata">
|
||||
<inbox-name v-if="showInboxName" :inbox="inbox" />
|
||||
<span
|
||||
v-if="showAssignee && assignee.name"
|
||||
class="label assignee-label text-truncate"
|
||||
>
|
||||
<fluent-icon icon="person" size="12" />
|
||||
{{ assignee.name }}
|
||||
</span>
|
||||
<div class="conversation-metadata-attributes">
|
||||
<span
|
||||
v-if="showAssignee && assignee.name"
|
||||
class="label assignee-label text-truncate"
|
||||
>
|
||||
<fluent-icon icon="person" size="12" />
|
||||
{{ assignee.name }}
|
||||
</span>
|
||||
<priority-mark :priority="chat.priority" />
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="conversation--user">
|
||||
{{ currentContact.name }}
|
||||
@@ -131,6 +134,7 @@ import ConversationContextMenu from './contextMenu/Index.vue';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import TimeAgo from 'dashboard/components/ui/TimeAgo';
|
||||
import CardLabels from './conversationCardComponents/CardLabels.vue';
|
||||
import PriorityMark from './PriorityMark.vue';
|
||||
const ATTACHMENT_ICONS = {
|
||||
image: 'image',
|
||||
audio: 'headphones-sound-wave',
|
||||
@@ -147,6 +151,7 @@ export default {
|
||||
Thumbnail,
|
||||
ConversationContextMenu,
|
||||
TimeAgo,
|
||||
PriorityMark,
|
||||
},
|
||||
|
||||
mixins: [
|
||||
@@ -429,6 +434,11 @@ export default {
|
||||
padding: var(--space-micro) 0 var(--space-micro) 0;
|
||||
}
|
||||
|
||||
.conversation-metadata-attributes {
|
||||
display: flex;
|
||||
gap: var(--space-small);
|
||||
}
|
||||
|
||||
.assignee-label {
|
||||
display: inline-flex;
|
||||
margin-left: var(--space-small);
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<span class="conversation-priority-mark">
|
||||
<svg
|
||||
v-if="priority"
|
||||
v-tooltip="tooltipText"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<template v-if="priority === CONVERSATION_PRIORITY.URGENT">
|
||||
<rect width="14" height="14" rx="2" fill="#FF382D" />
|
||||
<path
|
||||
d="M2.33325 2.91667C2.33325 2.27233 2.85559 1.75 3.49992 1.75C4.14425 1.75 4.66659 2.27233 4.66659 2.91667V8.16667C4.66659 8.811 4.14425 9.33333 3.49992 9.33333C2.85559 9.33333 2.33325 8.811 2.33325 8.16667V2.91667Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M2.33325 11.0833C2.33325 10.439 2.85559 9.91667 3.49992 9.91667C4.14425 9.91667 4.66659 10.439 4.66659 11.0833C4.66659 11.7277 4.14425 12.25 3.49992 12.25C2.85559 12.25 2.33325 11.7277 2.33325 11.0833Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M5.83325 2.91667C5.83325 2.27233 6.35559 1.75 6.99992 1.75C7.64425 1.75 8.16659 2.27233 8.16659 2.91667V8.16667C8.16659 8.811 7.64425 9.33333 6.99992 9.33333C6.35559 9.33333 5.83325 8.811 5.83325 8.16667V2.91667Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M5.83325 11.0833C5.83325 10.439 6.35559 9.91667 6.99992 9.91667C7.64425 9.91667 8.16659 10.439 8.16659 11.0833C8.16659 11.7277 7.64425 12.25 6.99992 12.25C6.35559 12.25 5.83325 11.7277 5.83325 11.0833Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.33325 2.91667C9.33325 2.27233 9.85559 1.75 10.4999 1.75C11.1443 1.75 11.6666 2.27233 11.6666 2.91667V8.16667C11.6666 8.811 11.1443 9.33333 10.4999 9.33333C9.85559 9.33333 9.33325 8.811 9.33325 8.16667V2.91667Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.33325 11.0833C9.33325 10.439 9.85559 9.91667 10.4999 9.91667C11.1443 9.91667 11.6666 10.439 11.6666 11.0833C11.6666 11.7277 11.1443 12.25 10.4999 12.25C9.85559 12.25 9.33325 11.7277 9.33325 11.0833Z"
|
||||
fill="white"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="priority === CONVERSATION_PRIORITY.HIGH">
|
||||
<rect width="14" height="14" rx="2" fill="#F1F5F8" />
|
||||
<path
|
||||
d="M4.87216 3.50012L4.76278 8.29274H3.69555L3.58949 3.50012H4.87216ZM4.22917 10.3609C4.02809 10.3609 3.85574 10.2902 3.71212 10.1488C3.57071 10.0074 3.5 9.83503 3.5 9.63175C3.5 9.43289 3.57071 9.26275 3.71212 9.12133C3.85574 8.97992 4.02809 8.90921 4.22917 8.90921C4.42582 8.90921 4.59596 8.97992 4.73958 9.12133C4.88542 9.26275 4.95833 9.43289 4.95833 9.63175C4.95833 9.76654 4.92408 9.88917 4.85559 9.99965C4.7893 10.1101 4.70092 10.1985 4.59044 10.2648C4.48217 10.3289 4.36174 10.3609 4.22917 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
<path
|
||||
d="M7.47237 3.50012L7.36299 8.29274H6.29576L6.1897 3.50012H7.47237ZM6.82937 10.3609C6.6283 10.3609 6.45595 10.2902 6.31233 10.1488C6.17092 10.0074 6.10021 9.83503 6.10021 9.63175C6.10021 9.43289 6.17092 9.26275 6.31233 9.12133C6.45595 8.97992 6.6283 8.90921 6.82937 8.90921C7.02603 8.90921 7.19617 8.97992 7.33979 9.12133C7.48562 9.26275 7.55854 9.43289 7.55854 9.63175C7.55854 9.76654 7.52429 9.88917 7.4558 9.99965C7.38951 10.1101 7.30112 10.1985 7.19064 10.2648C7.08237 10.3289 6.96195 10.3609 6.82937 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
<path
|
||||
d="M10.0726 3.50012L9.9632 8.29274H8.89597L8.78991 3.50012H10.0726ZM9.42958 10.3609C9.22851 10.3609 9.05616 10.2902 8.91254 10.1488C8.77112 10.0074 8.70042 9.83503 8.70042 9.63175C8.70042 9.43289 8.77112 9.26275 8.91254 9.12133C9.05616 8.97992 9.22851 8.90921 9.42958 8.90921C9.62624 8.90921 9.79638 8.97992 9.94 9.12133C10.0858 9.26275 10.1587 9.43289 10.1587 9.63175C10.1587 9.76654 10.1245 9.88917 10.056 9.99965C9.98972 10.1101 9.90133 10.1985 9.79085 10.2648C9.68258 10.3289 9.56216 10.3609 9.42958 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="priority === CONVERSATION_PRIORITY.MEDIUM">
|
||||
<rect width="14" height="14" rx="2" fill="#F1F5F8" />
|
||||
<path
|
||||
d="M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
<path
|
||||
d="M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="priority === CONVERSATION_PRIORITY.LOW">
|
||||
<rect width="14" height="14" rx="2" fill="#F1F5F8" />
|
||||
<path
|
||||
d="M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
<path
|
||||
d="M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
|
||||
fill="#446888"
|
||||
/>
|
||||
</template>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
|
||||
|
||||
export default {
|
||||
name: 'PriorityMark',
|
||||
props: {
|
||||
priority: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
validate: value =>
|
||||
[...Object.values(CONVERSATION_PRIORITY), undefined].includes(value),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
CONVERSATION_PRIORITY,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tooltipText() {
|
||||
return this.$t(
|
||||
`CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.conversation-priority-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user