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

Remove image click tooltips

Browse Source
This commit is contained in:
Natsumi
2025-10-04 21:40:40 +13:00
parent 4bd589e8f0
commit 877ccc66d3
7 changed files with 129 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/AvatarDialog/AvatarDialog.vue
+2 -18
View File
@@ -7,35 +7,20 @@
width="700px"> width="700px">
<div v-loading="avatarDialog.loading"> <div v-loading="avatarDialog.loading">
<div style="display: flex"> <div style="display: flex">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
:src="avatarDialog.ref.thumbnailImageUrl" :src="avatarDialog.ref.thumbnailImageUrl"
class="x-link" class="x-link"
@click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
style="flex: none; width: 160px; height: 120px; border-radius: 12px" style="flex: none; width: 160px; height: 120px; border-radius: 12px"
loading="lazy" /> loading="lazy" />
</template>
<img
:src="avatarDialog.ref.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
loading="lazy" />
</el-popover>
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: 1"> <div style="flex: 1">
<div> <div>
<el-popover placement="top" trigger="click">
<template #reference>
<span <span
class="dialog-title" class="dialog-title"
style="margin-right: 5px; cursor: pointer" style="margin-right: 5px; cursor: pointer"
v-text="avatarDialog.ref.name" v-text="avatarDialog.ref.name"
@click="copyToClipboard(avatarDialog.ref.name)"></span> @click="copyToClipboard(avatarDialog.ref.name)"></span>
</template>
<span style="display: block; text-align: center; font-family: monospace">{{
textToHex(avatarDialog.ref.name)
}}</span>
</el-popover>
</div> </div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
<span <span
@@ -625,8 +610,7 @@
replaceVrcPackageUrl, replaceVrcPackageUrl,
timeToText, timeToText,
moveArrayItem, moveArrayItem,
formatDateFilter, formatDateFilter
textToHex
} from '../../../shared/utils'; } from '../../../shared/utils';
import { handleImageUploadInput } from '../../../shared/utils/imageUpload'; import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
import { getNextDialogIndex } from '../../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../../shared/utils/base/ui';
src/components/dialogs/GroupDialog/GroupDialog.vue
+1 -47
View File
@@ -7,35 +7,20 @@
class="x-dialog x-group-dialog"> class="x-dialog x-group-dialog">
<div v-loading="groupDialog.loading" class="group-body"> <div v-loading="groupDialog.loading" class="group-body">
<div style="display: flex"> <div style="display: flex">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
:src="groupDialog.ref.iconUrl" :src="groupDialog.ref.iconUrl"
style="flex: none; width: 120px; height: 120px; border-radius: 12px" style="flex: none; width: 120px; height: 120px; border-radius: 12px"
class="x-link" class="x-link"
loading="lazy" />
</template>
<img
:src="groupDialog.ref.iconUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(groupDialog.ref.iconUrl)" @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> <div style="flex: 1; display: flex; align-items: center; 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>
<el-popover placement="top" trigger="click">
<template #reference>
<span <span
class="dialog-title" class="dialog-title"
style="margin-right: 5px; cursor: pointer" style="margin-right: 5px; cursor: pointer"
v-text="groupDialog.ref.name" v-text="groupDialog.ref.name"
@click="copyToClipboard(groupDialog.ref.name)"></span> @click="copyToClipboard(groupDialog.ref.name)"></span>
</template>
<span style="display: block; text-align: center; font-family: monospace">{{
textToHex(groupDialog.ref.name)
}}</span>
</el-popover>
<span <span
class="group-discriminator x-grey" class="group-discriminator x-grey"
style="font-family: monospace; font-size: 12px; margin-right: 5px"> style="font-family: monospace; font-size: 12px; margin-right: 5px">
@@ -379,26 +364,12 @@
<el-tabs v-model="groupDialogLastActiveTab" @tab-click="groupDialogTabClick"> <el-tabs v-model="groupDialogLastActiveTab" @tab-click="groupDialogTabClick">
<el-tab-pane name="Info" :label="t('dialog.group.info.header')"> <el-tab-pane name="Info" :label="t('dialog.group.info.header')">
<div class="group-banner-image-info"> <div class="group-banner-image-info">
<el-popover placement="bottom" :width="1000" trigger="click">
<template #reference>
<img <img
:src="groupDialog.ref.bannerUrl" :src="groupDialog.ref.bannerUrl"
class="x-link" class="x-link"
style=" style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
flex: none;
width: 100%;
aspect-ratio: 6/1;
object-fit: cover;
border-radius: 4px;
"
loading="lazy" />
</template>
<img
:src="groupDialog.ref.bannerUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)" @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
</div> </div>
<div class="x-friend-list" style="max-height: none"> <div class="x-friend-list" style="max-height: none">
<span <span
@@ -459,8 +430,6 @@
<div <div
v-if="groupDialog.announcement.imageUrl" v-if="groupDialog.announcement.imageUrl"
style="display: inline-block; margin-right: 5px"> style="display: inline-block; margin-right: 5px">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
:src="groupDialog.announcement.imageUrl" :src="groupDialog.announcement.imageUrl"
class="x-link" class="x-link"
@@ -471,14 +440,8 @@
border-radius: 4px; border-radius: 4px;
object-fit: cover; object-fit: cover;
" "
loading="lazy" />
</template>
<img
:src="groupDialog.announcement.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)" @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
</div> </div>
<pre <pre
class="extra" class="extra"
@@ -751,8 +714,6 @@
<div class="detail"> <div class="detail">
<span style="display: block" v-text="post.title" /> <span style="display: block" v-text="post.title" />
<div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px"> <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
:src="post.imageUrl" :src="post.imageUrl"
class="x-link" class="x-link"
@@ -763,14 +724,8 @@
border-radius: 4px; border-radius: 4px;
object-fit: cover; object-fit: cover;
" "
loading="lazy" />
</template>
<img
:src="post.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(post.imageUrl)" @click="showFullscreenImageDialog(post.imageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
</div> </div>
<pre <pre
class="extra" class="extra"
@@ -1213,7 +1168,6 @@
userImage, userImage,
userStatusClass, userStatusClass,
formatDateFilter, formatDateFilter,
textToHex,
debounce debounce
} from '../../../shared/utils'; } from '../../../shared/utils';
import { getNextDialogIndex } from '../../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../../shared/utils/base/ui';
src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+1 -15
View File
@@ -61,25 +61,11 @@
<el-form-item :label="t('dialog.group_post_edit.image')"> <el-form-item :label="t('dialog.group_post_edit.image')">
<template v-if="gallerySelectDialog.selectedFileId"> <template v-if="gallerySelectDialog.selectedFileId">
<div style="display: inline-block; flex: none; margin-right: 5px"> <div style="display: inline-block; flex: none; margin-right: 5px">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
:src="gallerySelectDialog.selectedImageUrl" :src="gallerySelectDialog.selectedImageUrl"
style=" style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
flex: none;
width: 60px;
height: 60px;
border-radius: 4px;
object-fit: cover;
"
loading="lazy" />
</template>
<img
:src="gallerySelectDialog.selectedImageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
<el-button size="small" style="vertical-align: top" @click="clearImageGallerySelect"> <el-button size="small" style="vertical-align: top" @click="clearImageGallerySelect">
{{ t('dialog.invite_message.clear_selected_image') }} {{ t('dialog.invite_message.clear_selected_image') }}
</el-button> </el-button>
src/components/dialogs/UserDialog/UserDialog.vue
+10 -72
View File
@@ -7,42 +7,23 @@
width="770px"> width="770px">
<div v-loading="userDialog.loading"> <div v-loading="userDialog.loading">
<div style="display: flex"> <div style="display: flex">
<el-popover <img
v-if=" v-if="
!userDialog.loading && !userDialog.loading &&
(userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride) (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
" "
placement="right"
:width="500"
trigger="click">
<template #reference>
<img
class="x-link" class="x-link"
:src="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" style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
loading="lazy" />
</template>
<img
:src="userDialog.ref.profilePicOverride"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)" @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
loading="lazy" /> loading="lazy" />
</el-popover> <img
<el-popover v-else-if="!userDialog.loading" placement="right" :width="500" trigger="click"> v-else-if="!userDialog.loading"
<template #reference
><img
class="x-link" class="x-link"
:src="userDialog.ref.currentAvatarThumbnailImageUrl" :src="userDialog.ref.currentAvatarThumbnailImageUrl"
style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover" style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
loading="lazy"
/></template>
<img
:src="userDialog.ref.currentAvatarImageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)" @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: 1"> <div style="flex: 1">
@@ -67,18 +48,11 @@
<el-icon><CaretBottom /></el-icon> <el-icon><CaretBottom /></el-icon>
</el-tooltip> </el-tooltip>
</template> </template>
<el-popover placement="top" trigger="click">
<template #reference>
<span <span
class="dialog-title" class="dialog-title"
style="margin-left: 5px; margin-right: 5px; cursor: pointer" style="margin-left: 5px; margin-right: 5px; cursor: pointer"
v-text="userDialog.ref.displayName" v-text="userDialog.ref.displayName"
@click="copyUserDisplayName(userDialog.ref.displayName)"></span> @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
</template>
<span style="display: block; text-align: center; font-family: monospace">{{
textToHex(userDialog.ref.displayName)
}}</span>
</el-popover>
<el-tooltip <el-tooltip
v-if="userDialog.ref.pronouns" v-if="userDialog.ref.pronouns"
placement="top" placement="top"
@@ -99,22 +73,11 @@
</el-tooltip> </el-tooltip>
<template v-if="userDialog.ref.id === currentUser.id"> <template v-if="userDialog.ref.id === currentUser.id">
<br /> <br />
<el-popover placement="top" trigger="click">
<template #reference>
<span <span
class="x-grey" class="x-grey"
style=" style="margin-right: 10px; font-family: monospace; font-size: 12px; cursor: pointer"
margin-right: 10px; v-text="currentUser.username"
font-family: monospace; @click="copyUserDisplayName(currentUser.username)"></span>
font-size: 12px;
cursor: pointer;
"
v-text="currentUser.username"></span>
</template>
<span style="display: block; text-align: center; font-family: monospace">{{
textToHex(currentUser.username)
}}</span>
</el-popover>
</template> </template>
</div> </div>
<div style="margin-top: 5px" v-show="!userDialog.loading"> <div style="margin-top: 5px" v-show="!userDialog.loading">
@@ -300,26 +263,12 @@
</div> </div>
<div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px"> <div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
class="x-link" class="x-link"
:src="userImage(userDialog.ref, true, '256', true)" :src="userImage(userDialog.ref, true, '256', true)"
style=" style="flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover"
flex: none;
width: 120px;
height: 120px;
border-radius: 12px;
object-fit: cover;
"
loading="lazy" />
</template>
<img
:src="userDialog.ref.userIcon"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(userDialog.ref.userIcon)" @click="showFullscreenImageDialog(userDialog.ref.userIcon)"
loading="lazy" /> loading="lazy" />
</el-popover>
</div> </div>
<div style="flex: none"> <div style="flex: none">
@@ -719,8 +668,6 @@
" "
class="extra"> class="extra">
<div style="display: inline-block; flex: none; margin-right: 5px"> <div style="display: inline-block; flex: none; margin-right: 5px">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<el-image <el-image
v-loading="userDialog.isRepresentedGroupLoading" v-loading="userDialog.isRepresentedGroupLoading"
class="x-link" class="x-link"
@@ -733,20 +680,12 @@
object-fit: cover; object-fit: cover;
" "
:style="{ :style="{
background: userDialog.isRepresentedGroupLoading background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
? '#f5f7fa'
: ''
}" }"
@load="userDialog.isRepresentedGroupLoading = false"> @load="userDialog.isRepresentedGroupLoading = false"
@click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
<template #error></template> <template #error></template>
</el-image> </el-image>
</template>
<img
:src="userDialog.representedGroup.iconUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)"
loading="lazy" />
</el-popover>
</div> </div>
<span <span
v-if="userDialog.representedGroup.isRepresenting" v-if="userDialog.representedGroup.isRepresenting"
@@ -1830,7 +1769,6 @@
userOnlineFor, userOnlineFor,
userOnlineForTimestamp, userOnlineForTimestamp,
userStatusClass, userStatusClass,
textToHex,
formatDateFilter, formatDateFilter,
getFaviconUrl getFaviconUrl
} from '../../../shared/utils'; } from '../../../shared/utils';
src/components/dialogs/WorldDialog/WorldDialog.vue
-8
View File
@@ -7,20 +7,12 @@
width="770px"> width="770px">
<div v-loading="worldDialog.loading"> <div v-loading="worldDialog.loading">
<div style="display: flex"> <div style="display: flex">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
:src="worldDialog.ref.thumbnailImageUrl" :src="worldDialog.ref.thumbnailImageUrl"
class="x-link" class="x-link"
style="flex: none; width: 160px; height: 120px; border-radius: 12px" style="flex: none; width: 160px; height: 120px; border-radius: 12px"
loading="lazy" />
</template>
<img
:src="worldDialog.ref.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(worldDialog.ref.imageUrl)" @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px"> <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: 1"> <div style="flex: 1">
<div> <div>
src/views/Notifications/Notification.vue
-16
View File
@@ -126,36 +126,20 @@
<el-table-column :label="t('table.notification.photo')" width="100" prop="photo"> <el-table-column :label="t('table.notification.photo')" width="100" prop="photo">
<template #default="scope"> <template #default="scope">
<template v-if="scope.row.details && scope.row.details.imageUrl"> <template v-if="scope.row.details && scope.row.details.imageUrl">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
class="x-link" class="x-link"
:src="getSmallThumbnailUrl(scope.row.details.imageUrl)" :src="getSmallThumbnailUrl(scope.row.details.imageUrl)"
style="flex: none; height: 50px; border-radius: 4px" style="flex: none; height: 50px; border-radius: 4px"
loading="lazy" />
</template>
<img
:src="scope.row.details.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(scope.row.details.imageUrl)" @click="showFullscreenImageDialog(scope.row.details.imageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
</template> </template>
<template v-else-if="scope.row.imageUrl"> <template v-else-if="scope.row.imageUrl">
<el-popover placement="right" :width="500" trigger="click">
<template #reference>
<img <img
class="x-link" class="x-link"
:src="getSmallThumbnailUrl(scope.row.imageUrl)" :src="getSmallThumbnailUrl(scope.row.imageUrl)"
style="flex: none; height: 50px; border-radius: 4px" style="flex: none; height: 50px; border-radius: 4px"
loading="lazy" />
</template>
<img
:src="scope.row.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(scope.row.imageUrl)" @click="showFullscreenImageDialog(scope.row.imageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
</template> </template>
</template> </template>
</el-table-column> </el-table-column>
src/views/PlayerList/PlayerList.vue
-8
View File
@@ -2,20 +2,12 @@
<div v-show="menuActiveIndex === 'playerList'" class="x-container" style="padding-top: 5px"> <div v-show="menuActiveIndex === 'playerList'" class="x-container" style="padding-top: 5px">
<div style="display: flex; flex-direction: column; height: 100%"> <div style="display: flex; flex-direction: column; height: 100%">
<div v-if="currentInstanceWorld.ref.id" style="display: flex"> <div v-if="currentInstanceWorld.ref.id" style="display: flex">
<el-popover placement="right" :width="500" trigger="click" style="height: 120px">
<template #reference>
<img <img
:src="currentInstanceWorld.ref.thumbnailImageUrl" :src="currentInstanceWorld.ref.thumbnailImageUrl"
class="x-link" class="x-link"
style="flex: none; width: 160px; height: 120px; border-radius: 4px" style="flex: none; width: 160px; height: 120px; border-radius: 4px"
loading="lazy" />
</template>
<img
:src="currentInstanceWorld.ref.imageUrl"
:class="['x-link', 'x-popover-image']"
@click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)" @click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
loading="lazy" /> loading="lazy" />
</el-popover>
<div style="margin-left: 10px; display: flex; flex-direction: column; min-width: 320px; width: 100%"> <div style="margin-left: 10px; display: flex; flex-direction: column; min-width: 320px; width: 100%">
<div> <div>
<span <span