mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
818c769bb7
* Changes for the message to have multiple attachments * changed the message association to attachments from has_one to has_many * changed all the references of this association in building and fetching to reflect this change * Added number of attachments validation to the message model * Modified the backend responses and endpoints to reflect multiple attachment support (#737) * Changing the frontend components for multiple attachments * changed the request structure to reflect the multiple attachment structures * changed the message bubbles to support multiple attachments * bugfix: agent side attachment was not showing because of a missing await * broken message was shown because of the store filtering * Added documentation for ImageMagick * spec fixes * refactored code to reflect more apt namings * Added updated message listener for the dashboard (#727) * Added the publishing for message updated event * Implemented the listener for dashboard Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
63 lines
1.0 KiB
Vue
63 lines
1.0 KiB
Vue
<template>
|
|
<a
|
|
:href="url"
|
|
target="_blank"
|
|
rel="noreferrer noopener nofollow"
|
|
class="image"
|
|
>
|
|
<div class="wrap">
|
|
<img :src="thumb" alt="Picture message" />
|
|
<span class="time">{{ readableTime }}</span>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['url', 'thumb', 'readableTime'],
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.image {
|
|
display: block;
|
|
|
|
.wrap {
|
|
position: relative;
|
|
display: flex;
|
|
max-width: 100%;
|
|
|
|
&::before {
|
|
$color-black: #000;
|
|
background-image: linear-gradient(
|
|
-180deg,
|
|
transparent 3%,
|
|
$color-black 70%
|
|
);
|
|
bottom: 0;
|
|
content: '';
|
|
height: 20%;
|
|
left: 0;
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 250px;
|
|
}
|
|
|
|
.time {
|
|
font-size: $font-size-small;
|
|
bottom: $space-smaller;
|
|
color: $color-white;
|
|
position: absolute;
|
|
right: $space-small;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|