MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 13:53:52 +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

18
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -8,13 +8,15 @@
</DialogHeader>
<div>
<div class="flex">
<img
:src="avatarDialog.ref.thumbnailImageUrl"
class="cursor-pointer"
@click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
style="flex: none; width: 160px; height: 120px; border-radius: 12px"
loading="lazy" />
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: none; width: 160px; height: 120px">
<img
:src="avatarDialog.ref.thumbnailImageUrl"
class="cursor-pointer"
@click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
style="width: 160px; height: 120px; border-radius: 12px"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div style="flex: 1">
<div>
<span
@@ -179,7 +181,7 @@
v-text="avatarDialog.ref.description"></span>
</div>
</div>
<div class="flex items-center">
<div class="ml-2 mt-12">
<TooltipWrapper
v-if="avatarDialog.inCache"
side="top"

22
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -8,13 +8,16 @@
</DialogHeader>
<div>
<div style="display: flex">
<img
:src="groupDialog.ref.iconUrl"
style="flex: none; width: 120px; height: 120px; border-radius: 12px"
class="cursor-pointer"
@click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
loading="lazy" />
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: none; width: 120px; height: 120px">
<img
v-if="!groupDialog.loading"
:src="groupDialog.ref.iconUrl"
style="width: 120px; height: 120px; border-radius: 12px"
class="cursor-pointer"
@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">
<span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
<span
@@ -138,7 +141,7 @@
v-text="groupDialog.ref.description"></pre>
</div>
</div>
<div style="flex: none; margin-left: 10px">
<div class="ml-2 mt-12">
<template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
<TooltipWrapper
v-if="groupDialog.ref.myMember?.isRepresenting"
@@ -341,8 +344,9 @@
:unmount-on-hide="false"
@update:modelValue="groupDialogTabClick">
<template #Info>
<div class="group-banner-image-info">
<div>
<img
v-if="!groupDialog.loading"
:src="groupDialog.ref.bannerUrl"
class="cursor-pointer"
style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"

40
src/components/dialogs/UserDialog/UserSummaryHeader.vue
View File

@@ -1,23 +1,25 @@
<template>
<div style="display: flex">
<img
v-if="
!userDialog.loading && (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
"
class="cursor-pointer"
:src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
loading="lazy" />
<img
v-else-if="!userDialog.loading"
class="cursor-pointer"
:src="userDialog.ref.currentAvatarThumbnailImageUrl"
style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
loading="lazy" />
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: none; height: 120px; width: 160px">
<img
v-if="
!userDialog.loading &&
(userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
"
class="cursor-pointer"
:src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
style="height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
loading="lazy" />
<img
v-else-if="!userDialog.loading"
class="cursor-pointer"
:src="userDialog.ref.currentAvatarThumbnailImageUrl"
style="height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div style="flex: 1">
<div>
<TooltipWrapper v-if="userDialog.ref.status" side="top">
@@ -260,7 +262,7 @@
loading="lazy" />
</div>
<UserActionDropdown :user-dialog-command="userDialogCommand" />
<UserActionDropdown class="ml-2 mt-12" :user-dialog-command="userDialogCommand" />
</div>
</div>
</template>

19
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -8,13 +8,16 @@
</DialogHeader>
<div>
<div style="display: flex">
<img
:src="worldDialog.ref.thumbnailImageUrl"
class="cursor-pointer"
style="flex: none; width: 160px; height: 120px; border-radius: 12px"
@click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
loading="lazy" />
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: none; width: 160px; height: 120px">
<img
v-if="!worldDialog.loading"
:src="worldDialog.ref.thumbnailImageUrl"
class="cursor-pointer"
style="width: 160px; height: 120px; border-radius: 12px"
@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>
<span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName">
@@ -155,7 +158,7 @@
>
</div>
</div>
<div style="flex: none; margin-left: 10px">
<div class="ml-2 mt-12">
<TooltipWrapper
v-if="worldDialog.inCache"
side="top"