Merge remote-tracking branch 'origin/improve-chat-look' into improve-chat-look
This commit is contained in:
commit
01423951bc
2 changed files with 20 additions and 3 deletions
|
@ -55,8 +55,8 @@
|
|||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
|
||||
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
|
||||
</div>
|
||||
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="media-container">
|
||||
<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
|
||||
<div ref="mediaContainer" class="media-container">
|
||||
<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" @load="imagesLoaded++" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -11,6 +11,23 @@ import { render } from 'vue';
|
|||
|
||||
const props = defineProps<{ links: string[] }>();
|
||||
|
||||
const mediaContainer = ref<HTMLDivElement>();
|
||||
|
||||
const imagesLoaded = ref(0);
|
||||
|
||||
watch(imagesLoaded, () => {
|
||||
if (imagesLoaded.value < props.links.length) return;
|
||||
const messageDataContainer = mediaContainer.value?.closest(".message-data");
|
||||
const messagesContainer = document.getElementById("messages");
|
||||
if (messageDataContainer && messagesContainer && mediaContainer.value) {
|
||||
const mediaRect = messageDataContainer.getBoundingClientRect();
|
||||
const messagesRect = messagesContainer.getBoundingClientRect();
|
||||
if (mediaRect.right > messagesRect.right) {
|
||||
mediaContainer.value.style.flexDirection = "column";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function createModal(link: string) {
|
||||
const div = document.createElement("div");
|
||||
const modal = h(ModalBase, {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue