gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 8 Projects Releases Packages 1 Wiki Activity Actions

Improve chat look #65

Open
sauceyred wants to merge 17 commits from improve-chat-look into main
pull from: improve-chat-look
merge into: gorb:main
Conversation 5 Commits 17 Files changed 10 +8 -30
2 changed files with 8 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 53ec803f2c - Show all commits

2
components/Message.vue
View file

@ -55,7 +55,7 @@
</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" />
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
</div>
</div>
</template>

36
components/MessageMedia.vue
View file

@ -1,6 +1,9 @@
<template>
<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 class="media-container">
<NuxtImg v-for="link of props.links"
class="media-item"
:src="link"
@click.prevent="createModal(link)" />
</div>
</template>
@ -8,26 +11,8 @@
import { ModalBase } from '#components';
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, {
@ -52,20 +37,13 @@ function createModal(link: string) {
.media-container {
display: flex;
grid-column: 2;
grid-row: 3;
flex-wrap: wrap;
gap: .2rem;
}
.grouped-message .media-container {
display: flex;
grid-column: 2;
grid-row: 2;
max-width: 100%;
}
.media-item {
cursor: pointer;
max-width: 15dvw;
}
</style>