mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
3a693947b5
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code. Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget https://github.com/chatwoot/chatwoot/issues/9791 Other PR: https://github.com/chatwoot/chatwoot/pull/11016
62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
<script>
|
|
export default {
|
|
props: {
|
|
url: { type: String, default: '' },
|
|
thumb: { type: String, default: '' },
|
|
readableTime: { type: String, default: '' },
|
|
},
|
|
emits: ['error'],
|
|
methods: {
|
|
onImgError() {
|
|
this.$emit('error');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<a
|
|
:href="url"
|
|
target="_blank"
|
|
rel="noreferrer noopener nofollow"
|
|
class="image"
|
|
>
|
|
<div class="wrap">
|
|
<img :src="thumb" alt="Picture message" @error="onImgError" />
|
|
<span class="time">{{ readableTime }}</span>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.image {
|
|
display: block;
|
|
|
|
.wrap {
|
|
position: relative;
|
|
display: flex;
|
|
max-width: 100%;
|
|
|
|
&::before {
|
|
background-image: linear-gradient(-180deg, transparent 3%, #1f2d3d 130%);
|
|
bottom: 0;
|
|
content: '';
|
|
height: 20%;
|
|
left: 0;
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 250px;
|
|
}
|
|
|
|
.time {
|
|
@apply text-xs bottom-1 text-white ltr:right-3 rtl:left-3 whitespace-nowrap absolute;
|
|
}
|
|
}
|
|
</style>
|