c19d70a6a0
This PR has fixes for the following issues - Inconsistent spacing between meta and text in text bubble - Activity bubble overflows for longer text (for now I have truncated it, I'll work with @absurdiya on a better solution) - Ugly lookinh gradient for expand button on email bubble - Email bubble overflow issues and text rendering issues - Alignment for error message - Minute-wise grouping not working - Link color should not be blue - Use `gray-3` for bubble background instead of `gray-4`
86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { MESSAGE_STATUS } from '../../constants';
|
|
import { useMessageContext } from '../../provider.js';
|
|
|
|
const { contentAttributes, status, sender } = useMessageContext();
|
|
|
|
const hasError = computed(() => {
|
|
return status.value === MESSAGE_STATUS.FAILED;
|
|
});
|
|
|
|
const fromEmail = computed(() => {
|
|
return contentAttributes.value?.email?.from ?? [];
|
|
});
|
|
|
|
const toEmail = computed(() => {
|
|
return contentAttributes.value?.email?.to ?? [];
|
|
});
|
|
|
|
const ccEmail = computed(() => {
|
|
return (
|
|
contentAttributes.value?.ccEmails ??
|
|
contentAttributes.value?.email?.cc ??
|
|
[]
|
|
);
|
|
});
|
|
|
|
const senderName = computed(() => {
|
|
return sender.value.name ?? '';
|
|
});
|
|
|
|
const bccEmail = computed(() => {
|
|
return (
|
|
contentAttributes.value?.bccEmails ??
|
|
contentAttributes.value?.email?.bcc ??
|
|
[]
|
|
);
|
|
});
|
|
|
|
const subject = computed(() => {
|
|
return contentAttributes.value?.email?.subject ?? '';
|
|
});
|
|
|
|
const showMeta = computed(() => {
|
|
return (
|
|
fromEmail.value[0] ||
|
|
toEmail.value.length ||
|
|
ccEmail.value.length ||
|
|
bccEmail.value.length ||
|
|
subject.value
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
v-show="showMeta"
|
|
class="space-y-1 pr-9 border-b border-n-strong text-sm"
|
|
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
|
|
>
|
|
<template v-if="showMeta">
|
|
<div v-if="fromEmail[0]">
|
|
<span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
|
|
{{ senderName }}
|
|
</span>
|
|
<{{ fromEmail[0] }}>
|
|
</div>
|
|
<div v-if="toEmail.length">
|
|
{{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}
|
|
</div>
|
|
<div v-if="ccEmail.length">
|
|
{{ $t('EMAIL_HEADER.CC') }}:
|
|
{{ ccEmail.join(', ') }}
|
|
</div>
|
|
<div v-if="bccEmail.length">
|
|
{{ $t('EMAIL_HEADER.BCC') }}:
|
|
{{ bccEmail.join(', ') }}
|
|
</div>
|
|
<div v-if="subject">
|
|
{{ $t('EMAIL_HEADER.SUBJECT') }}:
|
|
{{ subject }}
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</template>
|