mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-06 14:46:04 +02:00
refactor: improve group image preview and user dialog tooltip
This commit is contained in:
pa
Natsumi
@@ -1101,26 +1101,27 @@
|
|||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
<span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
|
<span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
|
||||||
<el-carousel :interval="0" height="600px" style="margin-top: 10px">
|
<div
|
||||||
<el-carousel-item
|
style="
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 10px;
|
||||||
|
max-height: 600px;
|
||||||
|
overflow-y: auto;
|
||||||
|
">
|
||||||
|
<el-card
|
||||||
v-for="image in groupDialog.galleries[gallery.id]"
|
v-for="image in groupDialog.galleries[gallery.id]"
|
||||||
:key="image.id">
|
:key="image.id"
|
||||||
<el-popover placement="top" :width="700" trigger="click">
|
:body-style="{ padding: '0' }"
|
||||||
<template #reference>
|
shadow="hover">
|
||||||
<img
|
<img
|
||||||
:src="image.imageUrl"
|
:src="image.imageUrl"
|
||||||
class="x-link"
|
:class="['x-link', 'x-popover-image']"
|
||||||
style="width: 100%; height: 100%; object-fit: contain"
|
@click="showFullscreenImageDialog(image.imageUrl)"
|
||||||
loading="lazy" />
|
loading="lazy" />
|
||||||
</template>
|
</el-card>
|
||||||
<img
|
</div>
|
||||||
:src="image.imageUrl"
|
|
||||||
:class="['x-link', 'x-popover-image']"
|
|
||||||
@click="showFullscreenImageDialog(image.imageUrl)"
|
|
||||||
loading="lazy" />
|
|
||||||
</el-popover>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</template>
|
</template>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|||||||
@@ -822,22 +822,32 @@
|
|||||||
<span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
|
<span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-tooltip placement="top" :content="t('dialog.user.info.open_previous_instance')">
|
|
||||||
<div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
|
<div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<span class="name">
|
<div
|
||||||
|
class="name"
|
||||||
|
style="display: flex; justify-content: space-between; align-items: center">
|
||||||
|
<div>
|
||||||
{{ t('dialog.user.info.join_count') }}
|
{{ t('dialog.user.info.join_count') }}
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
placement="top"
|
placement="top"
|
||||||
:content="t('dialog.user.info.accuracy_notice')">
|
:content="t('dialog.user.info.accuracy_notice')">
|
||||||
<el-icon style="margin-left: 3px"><Warning /></el-icon>
|
<el-icon style="margin-left: 3px"><Warning /></el-icon>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</div>
|
||||||
<span v-if="userDialog.joinCount === 0" class="extra">-</span>
|
|
||||||
<span v-else class="extra" v-text="userDialog.joinCount"></span>
|
<el-tooltip
|
||||||
|
placement="top"
|
||||||
|
:content="t('dialog.user.info.open_previous_instance')">
|
||||||
|
<el-icon style="margin-right: 16px"><MoreFilled /></el-icon>
|
||||||
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
<span v-if="userDialog.joinCount === 0" class="extra">-</span>
|
||||||
|
<span v-else class="extra" v-text="userDialog.joinCount"></span>
|
||||||
</div>
|
</div>
|
||||||
</el-tooltip>
|
</div>
|
||||||
|
|
||||||
<div class="x-friend-item" style="cursor: default">
|
<div class="x-friend-item" style="cursor: default">
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<span class="name">
|
<span class="name">
|
||||||
@@ -925,29 +935,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
|
<div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
|
||||||
<el-tooltip placement="top" :disabled="!userDialog.dateFriendedInfo.length">
|
<div class="detail">
|
||||||
<template v-if="userDialog.dateFriendedInfo.length" #content>
|
<span v-if="userDialog.unFriended" class="name">
|
||||||
<template v-for="ref in userDialog.dateFriendedInfo" :key="ref.userId">
|
{{ t('dialog.user.info.unfriended') }}
|
||||||
<span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
|
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
|
||||||
><br />
|
<el-icon style="margin-left: 3px"><Warning /></el-icon>
|
||||||
</template>
|
</el-tooltip>
|
||||||
</template>
|
</span>
|
||||||
<div class="detail">
|
<span v-else class="name">
|
||||||
<span v-if="userDialog.unFriended" class="name">
|
{{ t('dialog.user.info.friended') }}
|
||||||
{{ t('dialog.user.info.unfriended') }}
|
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
|
||||||
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
|
<el-icon style="margin-left: 3px"><Warning /></el-icon>
|
||||||
<el-icon style="margin-left: 3px"><Warning /></el-icon>
|
</el-tooltip>
|
||||||
</el-tooltip>
|
</span>
|
||||||
</span>
|
<span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
|
||||||
<span v-else class="name">
|
</div>
|
||||||
{{ t('dialog.user.info.friended') }}
|
|
||||||
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
|
|
||||||
<el-icon style="margin-left: 3px"><Warning /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</span>
|
|
||||||
<span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
|
|
||||||
</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
<template v-if="currentUser.id === userDialog.id">
|
<template v-if="currentUser.id === userDialog.id">
|
||||||
<div class="x-friend-item" @click="toggleAvatarCopying">
|
<div class="x-friend-item" @click="toggleAvatarCopying">
|
||||||
|
|||||||
Reference in New Issue
Block a user