fix: Fix bubble design in RTL (#10683)
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
@@ -13,13 +13,10 @@ const readableTime = computed(() =>
|
||||
|
||||
<template>
|
||||
<BaseBubble
|
||||
class="px-2 py-0.5 !rounded-full flex items-center gap-2"
|
||||
v-tooltip.top="readableTime"
|
||||
class="px-2 py-0.5 !rounded-full flex min-w-0 items-center gap-2"
|
||||
data-bubble-name="activity"
|
||||
>
|
||||
<span v-dompurify-html="content" :title="content" class="truncate" />
|
||||
<div v-if="readableTime" class="w-px h-3 rounded-full bg-n-slate-7" />
|
||||
<time class="text-n-slate-10 truncate flex-shrink" :title="readableTime">
|
||||
{{ readableTime }}
|
||||
</time>
|
||||
<span v-dompurify-html="content" :title="content" />
|
||||
</BaseBubble>
|
||||
</template>
|
||||
|
||||
@@ -29,8 +29,10 @@ const varaintBaseMap = {
|
||||
};
|
||||
|
||||
const orientationMap = {
|
||||
[ORIENTATION.LEFT]: 'left-bubble rounded-xl rounded-bl-sm',
|
||||
[ORIENTATION.RIGHT]: 'right-bubble rounded-xl rounded-br-sm',
|
||||
[ORIENTATION.LEFT]:
|
||||
'left-bubble rounded-xl ltr:rounded-bl-sm rtl:rounded-br-sm',
|
||||
[ORIENTATION.RIGHT]:
|
||||
'right-bubble rounded-xl ltr:rounded-br-sm rtl:rounded-bl-sm',
|
||||
[ORIENTATION.CENTER]: 'rounded-md',
|
||||
};
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ const showMeta = computed(() => {
|
||||
<template>
|
||||
<section
|
||||
v-show="showMeta"
|
||||
class="space-y-1 pr-9 border-b border-n-strong text-sm"
|
||||
class="space-y-1 rtl:pl-9 ltr:pr-9 border-b border-n-strong text-sm break-words"
|
||||
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
|
||||
>
|
||||
<template v-if="showMeta">
|
||||
|
||||
@@ -109,7 +109,10 @@ const textToShow = computed(() => {
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="attachments.length" class="px-4 pb-4 space-y-2">
|
||||
<section
|
||||
v-if="Array.isArray(attachments) && attachments.length"
|
||||
class="px-4 pb-4 space-y-2"
|
||||
>
|
||||
<AttachmentChips :attachments="attachments" class="gap-1" />
|
||||
</section>
|
||||
</BaseBubble>
|
||||
|
||||
@@ -14,7 +14,7 @@ const isTemplate = computed(() => {
|
||||
});
|
||||
|
||||
const isEmpty = computed(() => {
|
||||
return !content.value && !attachments.value.length;
|
||||
return !content.value && !attachments.value?.length;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user