MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 22:46:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix dialog jumping around on image load and fix showing prev image

Browse Source
This commit is contained in:
Natsumi
2026-01-31 07:20:19 +13:00
committed by pa
parent 7c24e2038d
commit a5ea69ba22
4 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/AvatarDialog/AvatarDialog.vue
+10 -8
View File
@@ -8,13 +8,15 @@
</DialogHeader> </DialogHeader>
<div> <div>
<div class="flex"> <div class="flex">
<img <div style="flex: none; width: 160px; height: 120px">
:src="avatarDialog.ref.thumbnailImageUrl" <img
class="cursor-pointer" :src="avatarDialog.ref.thumbnailImageUrl"
@click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)" class="cursor-pointer"
style="flex: none; width: 160px; height: 120px; border-radius: 12px" @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
loading="lazy" /> style="width: 160px; height: 120px; border-radius: 12px"
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div style="flex: 1"> <div style="flex: 1">
<div> <div>
<span <span
@@ -179,7 +181,7 @@
v-text="avatarDialog.ref.description"></span> v-text="avatarDialog.ref.description"></span>
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="ml-2 mt-12">
<TooltipWrapper <TooltipWrapper
v-if="avatarDialog.inCache" v-if="avatarDialog.inCache"
side="top" side="top"
src/components/dialogs/GroupDialog/GroupDialog.vue
+13 -9
View File
@@ -8,13 +8,16 @@
</DialogHeader> </DialogHeader>
<div> <div>
<div style="display: flex"> <div style="display: flex">
<img <div style="flex: none; width: 120px; height: 120px">
:src="groupDialog.ref.iconUrl" <img
style="flex: none; width: 120px; height: 120px; border-radius: 12px" v-if="!groupDialog.loading"
class="cursor-pointer" :src="groupDialog.ref.iconUrl"
@click="showFullscreenImageDialog(groupDialog.ref.iconUrl)" style="width: 120px; height: 120px; border-radius: 12px"
loading="lazy" /> class="cursor-pointer"
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div class="group-header" style="flex: 1"> <div class="group-header" style="flex: 1">
<span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span> <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
<span <span
@@ -138,7 +141,7 @@
v-text="groupDialog.ref.description"></pre> v-text="groupDialog.ref.description"></pre>
</div> </div>
</div> </div>
<div style="flex: none; margin-left: 10px"> <div class="ml-2 mt-12">
<template v-if="groupDialog.inGroup && groupDialog.ref?.myMember"> <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
<TooltipWrapper <TooltipWrapper
v-if="groupDialog.ref.myMember?.isRepresenting" v-if="groupDialog.ref.myMember?.isRepresenting"
@@ -341,8 +344,9 @@
:unmount-on-hide="false" :unmount-on-hide="false"
@update:modelValue="groupDialogTabClick"> @update:modelValue="groupDialogTabClick">
<template #Info> <template #Info>
<div class="group-banner-image-info"> <div>
<img <img
v-if="!groupDialog.loading"
:src="groupDialog.ref.bannerUrl" :src="groupDialog.ref.bannerUrl"
class="cursor-pointer" class="cursor-pointer"
style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px" style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
src/components/dialogs/UserDialog/UserSummaryHeader.vue
+21 -19
View File
@@ -1,23 +1,25 @@
<template> <template>
<div style="display: flex"> <div style="display: flex">
<img <div style="flex: none; height: 120px; width: 160px">
v-if=" <img
!userDialog.loading && (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride) v-if="
" !userDialog.loading &&
class="cursor-pointer" (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
:src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride" "
style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover" class="cursor-pointer"
@click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)" :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
loading="lazy" /> style="height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
<img @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
v-else-if="!userDialog.loading" loading="lazy" />
class="cursor-pointer" <img
:src="userDialog.ref.currentAvatarThumbnailImageUrl" v-else-if="!userDialog.loading"
style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover" class="cursor-pointer"
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)" :src="userDialog.ref.currentAvatarThumbnailImageUrl"
loading="lazy" /> style="height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div style="flex: 1"> <div style="flex: 1">
<div> <div>
<TooltipWrapper v-if="userDialog.ref.status" side="top"> <TooltipWrapper v-if="userDialog.ref.status" side="top">
@@ -260,7 +262,7 @@
loading="lazy" /> loading="lazy" />
</div> </div>
<UserActionDropdown :user-dialog-command="userDialogCommand" /> <UserActionDropdown class="ml-2 mt-12" :user-dialog-command="userDialogCommand" />
</div> </div>
</div> </div>
</template> </template>
src/components/dialogs/WorldDialog/WorldDialog.vue
+11 -8
View File
@@ -8,13 +8,16 @@
</DialogHeader> </DialogHeader>
<div> <div>
<div style="display: flex"> <div style="display: flex">
<img <div style="flex: none; width: 160px; height: 120px">
:src="worldDialog.ref.thumbnailImageUrl" <img
class="cursor-pointer" v-if="!worldDialog.loading"
style="flex: none; width: 160px; height: 120px; border-radius: 12px" :src="worldDialog.ref.thumbnailImageUrl"
@click="showFullscreenImageDialog(worldDialog.ref.imageUrl)" class="cursor-pointer"
loading="lazy" /> style="width: 160px; height: 120px; border-radius: 12px"
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div style="flex: 1"> <div style="flex: 1">
<div> <div>
<span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName"> <span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName">
@@ -155,7 +158,7 @@
> >
</div> </div>
</div> </div>
<div style="flex: none; margin-left: 10px"> <div class="ml-2 mt-12">
<TooltipWrapper <TooltipWrapper
v-if="worldDialog.inCache" v-if="worldDialog.inCache"
side="top" side="top"