replace el-tooltip with TooltipProvider

This commit is contained in:
pa
2026-01-07 01:43:41 +09:00
committed by Natsumi
parent cfd117fffe
commit 9ae8789d14
46 changed files with 437 additions and 430 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div style="display: inline-block; margin-left: 5px">
<el-tooltip v-if="state.isValidInstance" placement="bottom">
<TooltipWrapper v-if="state.isValidInstance" side="bottom">
<template #content>
<div>
<span v-if="props.instance.closedAt"
@@ -40,7 +40,7 @@
</div>
</template>
<el-icon><CaretBottom /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
>{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
>

View File

@@ -1,16 +1,16 @@
<template>
<div v-if="isVisible" :class="['inline-block']">
<el-tooltip v-if="!canOpenInstanceInGame" placement="top" :content="t('dialog.user.info.self_invite_tooltip')">
<TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
<el-button v-show="isVisible" @click="confirmInvite" size="small" :icon="Message" circle />
</el-tooltip>
<el-tooltip v-else placement="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
<el-button v-if="isOpeningInstance" size="small" circle>
<el-icon class="is-loading">
<Loading />
</el-icon>
</el-button>
<el-button v-else @click="openInstance" size="small" :icon="Message" circle />
</el-tooltip>
</TooltipWrapper>
</div>
</template>

View File

@@ -1,11 +1,11 @@
<template>
<span v-if="lastJoin" :class="['inline-block', 'ml-5']">
<el-tooltip placement="top" class="ml-5">
<TooltipWrapper side="top" class="ml-5">
<template #content>
<span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
</template>
<el-icon style="display: inline-block"><Location /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
</template>

View File

@@ -1,8 +1,8 @@
<template>
<div v-if="isVisible" class="inline-block">
<el-tooltip placement="top" :content="t('dialog.user.info.launch_invite_tooltip')"
<TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
><el-button @click="confirm" size="small" :icon="SwitchButton" circle />
</el-tooltip>
</TooltipWrapper>
</div>
</template>

View File

@@ -3,11 +3,11 @@
<div v-if="!text" class="transparent">-</div>
<div v-show="text" class="flex items-center">
<div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
<el-tooltip
<TooltipWrapper
:content="`${t('dialog.new_instance.instance_id')}: #${instanceName}`"
:disabled="!instanceName || showInstanceIdInLocation"
:show-after="300"
placement="top">
:delay-duration="300"
side="top">
<div
:class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
@@ -21,10 +21,10 @@
({{ groupName }})
</span>
</div>
</el-tooltip>
<el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
</TooltipWrapper>
<TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
<el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
<el-icon v-if="strict" :class="['inline-block', 'ml-5']"><Lock /></el-icon>
</div>
</div>

View File

@@ -6,9 +6,9 @@
<span> {{ accessTypeName }} #{{ instanceName }}</span>
</span>
<span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
<el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
<TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
<el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
<el-icon v-if="strict" style="display: inline-block; margin-left: 5px"><Lock /></el-icon>
</span>
</template>

View File

@@ -60,12 +60,12 @@
</div>
<div class="nav-menu-container-bottom mb-4">
<el-tooltip
<TooltipWrapper
v-if="branch === 'Nightly'"
:show-after="150"
:delay-duration="150"
:content="'Feedback'"
:disabled="!isCollapsed"
placement="right">
side="right">
<div
class="bottom-button"
id="feedback"
@@ -73,7 +73,7 @@
<i class="ri-feedback-line"></i>
<span v-show="!isCollapsed" class="bottom-button__label">Feedback</span>
</div>
</el-tooltip>
</TooltipWrapper>
<el-popover
v-model:visible="supportMenuVisible"
@@ -110,10 +110,10 @@
</div>
<template #reference>
<div>
<el-tooltip
:show-after="150"
<TooltipWrapper
:delay-duration="150"
:content="t('nav_tooltip.help_support')"
placement="right"
side="right"
:disabled="!isCollapsed">
<div class="bottom-button">
<i class="ri-question-line"></i>
@@ -121,7 +121,7 @@
t('nav_tooltip.help_support')
}}</span>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</el-popover>
@@ -238,18 +238,18 @@
</div>
</template>
</el-popover>
<el-tooltip
:show-after="150"
<TooltipWrapper
:delay-duration="150"
:content="t('nav_tooltip.expand_menu')"
:disabled="!isCollapsed"
placement="right">
side="right">
<div class="bottom-button" @click="toggleNavCollapse">
<i class="ri-side-bar-line"></i>
<span v-show="!isCollapsed" class="bottom-button__label">{{
t('nav_tooltip.collapse_menu')
}}</span>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</div>

View File

@@ -47,7 +47,7 @@
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.private') }}</el-tag
>
<el-tooltip v-if="avatarDialog.isPC" placement="top" content="PC">
<TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
<el-tag
class="x-tag-platform-pc"
type="info"
@@ -66,8 +66,8 @@
>{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
>
</el-tag>
</el-tooltip>
<el-tooltip v-if="avatarDialog.isQuest" placement="top" content="Android">
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
<el-tag
class="x-tag-platform-quest"
type="info"
@@ -86,8 +86,8 @@
>{{ avatarDialog.bundleSizes['android'].fileSize }}</span
>
</el-tag>
</el-tooltip>
<el-tooltip v-if="avatarDialog.isIos" placement="top" content="iOS">
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
<el-tag
class="x-tag-platform-ios"
type="info"
@@ -106,7 +106,7 @@
>{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
>
</el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tag
v-if="avatarDialog.inCache"
class="x-link"
@@ -205,9 +205,9 @@
</div>
</div>
<div style="flex: none; margin-left: 10px">
<el-tooltip
<TooltipWrapper
v-if="avatarDialog.inCache"
placement="top"
side="top"
:content="t('dialog.avatar.actions.delete_cache_tooltip')">
<el-button
:icon="Delete"
@@ -215,10 +215,10 @@
circle
:disabled="isGameRunning && avatarDialog.cacheLocked"
@click="deleteVRChatCache(avatarDialog.ref)"></el-button>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="avatarDialog.isFavorite"
placement="top"
side="top"
:content="t('dialog.avatar.actions.favorite_tooltip')">
<el-button
type="warning"
@@ -227,8 +227,8 @@
circle
style="margin-left: 5px"
@click="avatarDialogCommand('Add Favorite')"></el-button>
</el-tooltip>
<el-tooltip v-else placement="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
<el-button
type="default"
:icon="Star"
@@ -236,8 +236,8 @@
circle
style="margin-left: 5px"
@click="avatarDialogCommand('Add Favorite')"></el-button>
</el-tooltip>
<el-tooltip placement="top" :content="t('dialog.avatar.actions.select')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
<el-button
type="default"
:icon="Check"
@@ -246,7 +246,7 @@
:disabled="currentUser.currentAvatar === avatarDialog.id"
style="margin-left: 5px"
@click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button>
</el-tooltip>
</TooltipWrapper>
<el-dropdown trigger="click" style="margin-left: 5px" @command="avatarDialogCommand">
<el-button
:type="avatarDialog.isBlocked ? 'danger' : 'default'"
@@ -452,7 +452,7 @@
<span class="name">{{ t('dialog.avatar.info.id') }}</span>
<span class="extra"
>{{ avatarDialog.id
}}<el-tooltip placement="top" :content="t('dialog.avatar.info.id_tooltip')">
}}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 5px">
<el-button
type="default"
@@ -471,7 +471,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip></span
</TooltipWrapper></span
>
</div>
</div>
@@ -506,9 +506,9 @@
<div class="detail">
<span class="name"
>{{ t('dialog.avatar.info.time_spent')
}}<el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon></el-tooltip
></span>
}}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</TooltipWrapper></span>
<span v-if="timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(timeSpent) }}</span>

View File

@@ -27,7 +27,7 @@
style="font-family: monospace; font-size: 12px; margin-right: 5px">
{{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
</span>
<el-tooltip v-for="item in groupDialog.ref.$languages" :key="item.key" placement="top">
<TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
<template #content>
<span>{{ item.value }} ({{ item.key }})</span>
</template>
@@ -35,7 +35,7 @@
class="flags"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
</el-tooltip>
</TooltipWrapper>
<div style="margin-top: 5px">
<span
class="x-link x-grey"
@@ -166,9 +166,9 @@
</div>
<div style="flex: none; margin-left: 10px">
<template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
<el-tooltip
<TooltipWrapper
v-if="groupDialog.ref.myMember?.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.actions.unrepresent_tooltip')">
<el-button
type="warning"
@@ -177,8 +177,8 @@
circle
style="margin-left: 5px"
@click="clearGroupRepresentation(groupDialog.id)"></el-button>
</el-tooltip>
<el-tooltip v-else placement="top" :content="t('dialog.group.actions.represent_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
<span>
<el-button
type="default"
@@ -189,11 +189,11 @@
:disabled="groupDialog.ref.privacy === 'private'"
@click="setGroupRepresentation(groupDialog.id)"></el-button>
</span>
</el-tooltip>
</TooltipWrapper>
</template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('dialog.group.actions.cancel_join_request_tooltip')">
<span>
<el-button
@@ -204,10 +204,10 @@
style="margin-left: 5px"
@click="cancelGroupRequest(groupDialog.id)"></el-button>
</span>
</el-tooltip>
</TooltipWrapper>
</template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
<el-tooltip placement="top" :content="t('dialog.group.actions.pending_request_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
<span>
<el-button
type="default"
@@ -217,12 +217,12 @@
style="margin-left: 5px"
@click="joinGroup(groupDialog.id)"></el-button>
</span>
</el-tooltip>
</TooltipWrapper>
</template>
<template v-else>
<el-tooltip
<TooltipWrapper
v-if="groupDialog.ref.joinState === 'request'"
placement="top"
side="top"
:content="t('dialog.group.actions.request_join_tooltip')">
<el-button
type="default"
@@ -231,10 +231,10 @@
circle
style="margin-left: 5px"
@click="joinGroup(groupDialog.id)"></el-button>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="groupDialog.ref.joinState === 'invite'"
placement="top"
side="top"
:content="t('dialog.group.actions.invite_required_tooltip')">
<span>
<el-button
@@ -245,10 +245,10 @@
circle
style="margin-left: 5px"></el-button>
</span>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="groupDialog.ref.joinState === 'open'"
placement="top"
side="top"
:content="t('dialog.group.actions.join_group_tooltip')">
<el-button
type="default"
@@ -257,7 +257,7 @@
circle
style="margin-left: 5px"
@click="joinGroup(groupDialog.id)"></el-button>
</el-tooltip>
</TooltipWrapper>
</template>
<el-dropdown trigger="click" style="margin-left: 5px" @command="groupDialogCommand">
<el-button
@@ -378,14 +378,14 @@
<div style="margin: 5px 0">
<Location :location="room.tag" style="display: inline-block" />
<InviteYourself :location="room.tag" style="margin-left: 5px" />
<el-tooltip placement="top" content="Refresh player count">
<TooltipWrapper side="top" content="Refresh player count">
<el-button
size="small"
:icon="Refresh"
style="margin-left: 5px"
circle
@click="refreshInstancePlayerCount(room.tag)" />
</el-tooltip>
</TooltipWrapper>
<LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
<InstanceInfo
:location="room.tag"
@@ -457,7 +457,7 @@
v-if="groupDialog.announcement.id"
class="extra"
style="float: right; margin-left: 5px">
<el-tooltip v-if="groupDialog.announcement.roleIds.length" placement="top">
<TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
<template #content>
<span>{{ t('dialog.group.posts.visibility') }}</span>
<br />
@@ -475,7 +475,7 @@
</template>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
</TooltipWrapper>
<DisplayName
:userid="groupDialog.announcement.authorId"
style="margin-right: 5px" />
@@ -483,7 +483,7 @@
({{ t('dialog.group.posts.edited_by') }}
<DisplayName :userid="groupDialog.announcement.editorId" />)
</span>
<el-tooltip placement="bottom">
<TooltipWrapper side="bottom">
<template #content>
<span
>{{ t('dialog.group.posts.created_at') }}
@@ -504,9 +504,9 @@
</template>
</template>
<Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
</el-tooltip>
</TooltipWrapper>
<template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
<el-tooltip placement="top" :content="t('dialog.group.posts.edit_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
<el-button
text
:icon="Edit"
@@ -515,15 +515,15 @@
@click="
showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
" />
</el-tooltip>
<el-tooltip placement="top" :content="t('dialog.group.posts.delete_tooltip')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
<el-button
text
:icon="Delete"
size="small"
style="margin-left: 5px; padding: 0"
@click="confirmDeleteGroupPost(groupDialog.announcement)" />
</el-tooltip>
</TooltipWrapper>
</template>
</div>
</div>
@@ -595,19 +595,19 @@
<span class="extra">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
</div>
</div>
<el-tooltip placement="top" :content="t('dialog.user.info.open_previous_instance')">
<TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
<div class="x-friend-item" @click="showPreviousInstancesGroupDialog(groupDialog.ref)">
<div class="detail">
<span class="name">
{{ t('dialog.group.info.last_visited') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
</div>
</div>
</el-tooltip>
</TooltipWrapper>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.group.info.links') }}</span>
@@ -616,7 +616,7 @@
style="margin-top: 5px"
class="flex">
<template v-for="(link, index) in groupDialog.ref.links" :key="index">
<el-tooltip v-if="link">
<TooltipWrapper v-if="link">
<template #content>
<span v-text="link" />
</template>
@@ -631,7 +631,7 @@
"
@click.stop="openExternalLink(link)"
loading="lazy" />
</el-tooltip>
</TooltipWrapper>
</template>
</div>
<div v-else class="extra">-</div>
@@ -642,15 +642,15 @@
<span class="name">{{ t('dialog.group.info.url') }}</span>
<span class="extra"
>{{ groupDialog.ref.$url }}
<el-tooltip placement="top" :content="t('dialog.group.info.url_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
<el-button
type="default"
size="small"
:icon="CopyDocument"
circle
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.ref.$url)" /> </el-tooltip
></span>
@click="copyToClipboard(groupDialog.ref.$url)" />
</TooltipWrapper></span>
</div>
</div>
<div class="x-friend-item" style="width: 350px; cursor: default">
@@ -658,15 +658,15 @@
<span class="name">{{ t('dialog.group.info.id') }}</span>
<span class="extra"
>{{ groupDialog.id }}
<el-tooltip placement="top" :content="t('dialog.group.info.id_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
<el-button
type="default"
size="small"
:icon="CopyDocument"
circle
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.id)" /> </el-tooltip
></span>
@click="copyToClipboard(groupDialog.id)" />
</TooltipWrapper></span>
</div>
</div>
<div
@@ -687,7 +687,7 @@
<span v-if="groupDialog.memberRoles.length === 0" class="extra"> - </span>
<span v-else class="extra">
<template v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex">
<el-tooltip placement="top">
<TooltipWrapper side="top">
<template #content>
<span>{{ t('dialog.group.info.role') }} {{ role.name }}</span>
<br />
@@ -720,7 +720,7 @@
rIndex < groupDialog.memberRoles.length - 1 ? ', ' : ''
}}</span
>
</el-tooltip>
</TooltipWrapper>
</template>
</span>
</div>
@@ -777,7 +777,7 @@
>
<br />
<div v-if="post.authorId" class="extra" style="float: right; margin-left: 5px">
<el-tooltip v-if="post.roleIds.length" placement="top">
<TooltipWrapper v-if="post.roleIds.length" side="top">
<template #content>
<span>{{ t('dialog.group.posts.visibility') }}</span>
<br />
@@ -794,13 +794,13 @@
</template>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
</TooltipWrapper>
<DisplayName :userid="post.authorId" style="margin-right: 5px" />
<span v-if="post.editorId" style="margin-right: 5px"
>({{ t('dialog.group.posts.edited_by') }}
<DisplayName :userid="post.editorId" />)</span
>
<el-tooltip placement="bottom">
<TooltipWrapper side="bottom">
<template #content>
<span
>{{ t('dialog.group.posts.created_at') }}
@@ -815,19 +815,19 @@
</template>
</template>
<Timer :epoch="Date.parse(post.updatedAt)" />
</el-tooltip>
</TooltipWrapper>
<template
v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
<el-tooltip placement="top" :content="t('dialog.group.posts.edit_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
<el-button
text
:icon="Edit"
size="small"
style="margin-left: 5px"
@click="showGroupPostEditDialog(groupDialog.id, post)" />
</el-tooltip>
<el-tooltip
placement="top"
</TooltipWrapper>
<TooltipWrapper
side="top"
:content="t('dialog.group.posts.delete_tooltip')">
<el-button
text
@@ -835,7 +835,7 @@
size="small"
style="margin-left: 5px"
@click="confirmDeleteGroupPost(post)" />
</el-tooltip>
</TooltipWrapper>
</template>
</div>
</div>
@@ -959,13 +959,13 @@
v-text="user.user.displayName" />
<span class="extra">
<template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
<el-tooltip
<TooltipWrapper
v-if="user.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.members.representing')">
<el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
</el-tooltip>
<el-tooltip v-if="user.visibility !== 'visible'" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
<template #content>
<span
>{{ t('dialog.group.members.visibility') }}
@@ -973,21 +973,21 @@
>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="!user.isSubscribedToAnnouncements"
placement="top"
side="top"
:content="t('dialog.group.members.unsubscribed_announcements')">
<el-icon style="margin-right: 5px"><ChatLineSquare /></el-icon>
</el-tooltip>
<el-tooltip v-if="user.managerNotes" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="user.managerNotes" side="top">
<template #content>
<span>{{ t('dialog.group.members.manager_notes') }}</span>
<br />
<span>{{ user.managerNotes }}</span>
</template>
<el-icon style="margin-right: 5px"><Edit /></el-icon>
</el-tooltip>
</TooltipWrapper>
</template>
<template v-for="roleId in user.roleIds" :key="roleId">
<template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
@@ -1020,13 +1020,13 @@
v-text="user.user.displayName" />
<span class="extra">
<template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
<el-tooltip
<TooltipWrapper
v-if="user.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.members.representing')">
<el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
</el-tooltip>
<el-tooltip v-if="user.visibility !== 'visible'" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
<template #content>
<span
>{{ t('dialog.group.members.visibility') }}
@@ -1034,21 +1034,21 @@
>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="!user.isSubscribedToAnnouncements"
placement="top"
side="top"
:content="t('dialog.group.members.unsubscribed_announcements')">
<el-icon style="margin-right: 5px"><ChatLineSquare /></el-icon>
</el-tooltip>
<el-tooltip v-if="user.managerNotes" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="user.managerNotes" side="top">
<template #content>
<span>{{ t('dialog.group.members.manager_notes') }}</span>
<br />
<span>{{ user.managerNotes }}</span>
</template>
<el-icon style="margin-right: 5px"><Edit /></el-icon>
</el-tooltip>
</TooltipWrapper>
</template>
<template v-for="roleId in user.roleIds" :key="roleId">
<template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"

View File

@@ -731,12 +731,12 @@
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteSelectedGroupMember(user)">
<el-tooltip v-if="user.membershipStatus !== 'member'" placement="top">
<TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
<template #content>
<span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
</template>
<el-icon style="margin-left: 3px; display: inline-block"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
</el-tag>
<br />

View File

@@ -7,35 +7,35 @@
size="small"
style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button
size="small"
:icon="CopyDocument"
style="margin-left: 5px"
circle
@click="copyInstanceMessage(launchDialog.url)" />
</el-tooltip>
</TooltipWrapper>
</el-form-item>
<el-form-item v-if="launchDialog.shortUrl">
<template #label>
<span>{{ t('dialog.launch.short_url') }}</span>
<el-tooltip placement="top" :content="t('dialog.launch.short_url_notice')">
<TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
<el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</template>
<el-input
v-model="launchDialog.shortUrl"
size="small"
style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button
size="small"
:icon="CopyDocument"
style="display: inline-block; margin-left: 5px"
circle
@click="copyInstanceMessage(launchDialog.shortUrl)" />
</el-tooltip>
</TooltipWrapper>
</el-form-item>
<el-form-item :label="t('dialog.launch.location')">
<el-input
@@ -43,14 +43,14 @@
size="small"
style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button
size="small"
:icon="CopyDocument"
style="display: inline-block; margin-left: 5px"
circle
@click="copyInstanceMessage(launchDialog.location)" />
</el-tooltip>
</TooltipWrapper>
</el-form-item>
</el-form>
<template #footer>

View File

@@ -18,23 +18,23 @@
<DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
<template #default="scope">
<el-tooltip placement="left">
<TooltipWrapper side="left">
<template #content>
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
</template>
<span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
<template #default="scope">
<template v-if="gameLogIsFriend(scope.row)">
<el-tooltip v-if="gameLogIsFavorite(scope.row)" placement="top" content="Favorite">
<TooltipWrapper v-if="gameLogIsFavorite(scope.row)" side="top" content="Favorite">
<span></span>
</el-tooltip>
<el-tooltip v-else placement="top" content="Friend">
</TooltipWrapper>
<TooltipWrapper v-else side="top" content="Friend">
<span>💚</span>
</el-tooltip>
</TooltipWrapper>
</template>
<span v-else></span>
</template>

View File

@@ -1,9 +1,9 @@
<template>
<div style="flex: none">
<template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite">
<el-tooltip
<TooltipWrapper
v-if="userDialog.isFavorite"
placement="top"
side="top"
:content="t('dialog.user.actions.unfavorite_tooltip')">
<el-button
type="warning"
@@ -11,15 +11,15 @@
size="large"
circle
@click="userDialogCommand('Add Favorite')"></el-button>
</el-tooltip>
<el-tooltip v-else placement="top" :content="t('dialog.user.actions.favorite_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
<el-button
type="default"
:icon="Star"
size="large"
circle
@click="userDialogCommand('Add Favorite')"></el-button>
</el-tooltip>
</TooltipWrapper>
</template>
<el-dropdown trigger="click" @command="onCommand">
<el-button

View File

@@ -33,14 +33,14 @@
:location="userDialog.$location.tag"
:shortname="userDialog.$location.shortName"
style="margin-left: 5px" />
<el-tooltip placement="top" :content="t('dialog.user.info.refresh_instance_info')"
<TooltipWrapper side="top" :content="t('dialog.user.info.refresh_instance_info')"
><el-button
size="small"
:icon="Refresh"
style="margin-left: 5px"
circle
@click="refreshInstancePlayerCount(userDialog.$location.tag)"></el-button>
</el-tooltip>
</TooltipWrapper>
<LastJoin
:location="userDialog.$location.tag"
:currentlocation="lastLocation.location" />
@@ -158,14 +158,14 @@
:userid="userDialog.id"
:avatartags="userDialog.ref.currentAvatarTags"
style="display: inline-block" />
<el-tooltip
<TooltipWrapper
v-if="
userDialog.ref.profilePicOverride && !userDialog.ref.currentAvatarImageUrl
"
placement="top"
side="top"
:content="t('dialog.user.info.vrcplus_hides_avatar')">
<el-icon><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</div>
@@ -253,7 +253,7 @@
@click="showBioDialog"></el-button>
</div>
<div style="margin-top: 5px" class="flex items-center">
<el-tooltip v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
<TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
<template #content>
<span v-text="link"></span>
</template>
@@ -269,7 +269,7 @@
"
@click.stop="openExternalLink(link)"
loading="lazy" />
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</div>
@@ -278,9 +278,9 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.last_seen') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
</div>
@@ -293,18 +293,18 @@
style="display: flex; justify-content: space-between; align-items: center">
<div>
{{ t('dialog.user.info.join_count') }}
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</div>
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('dialog.user.info.open_previous_instance')">
<el-icon style="margin-right: 16px"><MoreFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
</div>
<span v-if="userDialog.joinCount === 0" class="extra">-</span>
<span v-else class="extra" v-text="userDialog.joinCount"></span>
@@ -315,9 +315,9 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.time_together') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -325,28 +325,28 @@
</div>
</template>
<template v-else>
<el-tooltip
<TooltipWrapper
:disabled="currentUser.id !== userDialog.id"
placement="top"
side="top"
:content="t('dialog.user.info.open_previous_instance')">
<div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
<div class="detail">
<span class="name">
{{ t('dialog.user.info.play_time') }}
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
</div>
</div>
</el-tooltip>
</TooltipWrapper>
</template>
<div class="x-friend-item" style="cursor: default">
<el-tooltip :placement="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
<template #content>
<span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
</template>
@@ -355,22 +355,22 @@
v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
class="name">
{{ t('dialog.user.info.online_for') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span v-else class="name">
{{ t('dialog.user.info.offline_for') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
<div class="x-friend-item" style="cursor: default">
<el-tooltip :placement="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
<template #content>
<span
>{{ t('dialog.user.info.last_login') }}
@@ -389,7 +389,7 @@
}}</span>
<span v-else class="extra">-</span>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
@@ -398,7 +398,7 @@
</div>
</div>
<div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
<el-tooltip placement="top" :disabled="!userDialog.dateFriendedInfo.length">
<TooltipWrapper side="top" :disabled="!userDialog.dateFriendedInfo.length">
<template v-if="userDialog.dateFriendedInfo.length" #content>
<template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
<span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
@@ -408,19 +408,19 @@
<div class="detail">
<span v-if="userDialog.unFriended" class="name">
{{ t('dialog.user.info.unfriended') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span v-else class="name">
{{ t('dialog.user.info.friended') }}
<el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
<template v-if="currentUser.id === userDialog.id">
<div class="x-friend-item" @click="toggleAvatarCopying">
@@ -515,7 +515,7 @@
<span class="name">{{ t('dialog.user.info.id') }}</span>
<span class="extra">
{{ userDialog.id }}
<el-tooltip placement="top" :content="t('dialog.user.info.id_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
<el-button
type="default"
@@ -537,7 +537,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</TooltipWrapper>
</span>
</div>
</div>
@@ -799,13 +799,13 @@
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra">
<el-tooltip
<TooltipWrapper
v-if="group.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.members.representing')">
<el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
</el-tooltip>
<el-tooltip v-if="group.myMember?.visibility !== 'visible'" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="group.myMember?.visibility !== 'visible'" side="top">
<template #content>
<span
>{{ t('dialog.group.members.visibility') }}
@@ -813,7 +813,7 @@
>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
</div>
@@ -875,8 +875,8 @@
{{ t('dialog.group.tags.unsubscribed') }}</span
>
</el-button> -->
<el-tooltip
placement="right"
<TooltipWrapper
side="right"
:content="t('dialog.user.groups.leave_group_tooltip')">
<el-button
v-if="shiftHeld"
@@ -894,7 +894,7 @@
style="margin-left: 5px"
@click.stop="leaveGroupPrompt(group.id)">
</el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</template>
@@ -922,13 +922,13 @@
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra">
<el-tooltip
<TooltipWrapper
v-if="group.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.members.representing')">
<el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
</el-tooltip>
<el-tooltip v-if="group.memberVisibility !== 'visible'" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
<template #content>
<span
>{{ t('dialog.group.members.visibility') }}
@@ -936,7 +936,7 @@
>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
</div>
@@ -965,13 +965,13 @@
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra">
<el-tooltip
<TooltipWrapper
v-if="group.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.members.representing')">
<el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
</el-tooltip>
<el-tooltip v-if="group.memberVisibility !== 'visible'" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
<template #content>
<span
>{{ t('dialog.group.members.visibility') }}
@@ -979,7 +979,7 @@
>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
</div>
@@ -1016,13 +1016,13 @@
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra">
<el-tooltip
<TooltipWrapper
v-if="group.isRepresenting"
placement="top"
side="top"
:content="t('dialog.group.members.representing')">
<el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
</el-tooltip>
<el-tooltip v-if="group.memberVisibility !== 'visible'" placement="top">
</TooltipWrapper>
<TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
<template #content>
<span
>{{ t('dialog.group.members.visibility') }}
@@ -1030,7 +1030,7 @@
>
</template>
<el-icon style="margin-right: 5px"><View /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
</div>

View File

@@ -20,14 +20,14 @@
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
<div style="flex: 1">
<div>
<el-tooltip v-if="userDialog.ref.status" placement="top">
<TooltipWrapper v-if="userDialog.ref.status" side="top">
<template #content>
<span>{{ getUserStateText(userDialog.ref) }}</span>
</template>
<i class="x-user-status" :class="userStatusClass(userDialog.ref)"></i>
</el-tooltip>
</TooltipWrapper>
<template v-if="userDialog.previousDisplayNames.length > 0">
<el-tooltip placement="bottom">
<TooltipWrapper side="bottom">
<template #content>
<span>{{ t('dialog.user.previous_display_names') }}</span>
<div
@@ -41,20 +41,20 @@
</div>
</template>
<el-icon><CaretBottom /></el-icon>
</el-tooltip>
</TooltipWrapper>
</template>
<span
class="dialog-title"
style="margin-left: 5px; margin-right: 5px; cursor: pointer"
v-text="userDialog.ref.displayName"
@click="copyUserDisplayName(userDialog.ref.displayName)"></span>
<el-tooltip v-if="userDialog.ref.pronouns" placement="top" :content="t('dialog.user.pronouns')">
<TooltipWrapper v-if="userDialog.ref.pronouns" side="top" :content="t('dialog.user.pronouns')">
<span
class="x-grey"
style="margin-right: 5px; font-family: monospace; font-size: 12px"
v-text="userDialog.ref.pronouns"></span>
</el-tooltip>
<el-tooltip v-for="item in userDialog.ref.$languages" :key="item.key" placement="top">
</TooltipWrapper>
<TooltipWrapper v-for="item in userDialog.ref.$languages" :key="item.key" side="top">
<template #content>
<span>{{ item.value }} ({{ item.key }})</span>
</template>
@@ -62,7 +62,7 @@
class="flags"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
</el-tooltip>
</TooltipWrapper>
<template v-if="userDialog.ref.id === currentUser.id">
<br />
<span
@@ -73,7 +73,7 @@
</template>
</div>
<div style="margin-top: 5px" v-show="!userDialog.loading">
<el-tooltip placement="top" :content="t('dialog.user.tags.trust_level')">
<TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')">
<el-tag
type="info"
effect="plain"
@@ -83,10 +83,10 @@
style="margin-right: 5px; margin-top: 5px">
<i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }}
</el-tag>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
placement="top"
side="top"
:content="t('dialog.user.tags.age_verified')">
<el-tag
type="info"
@@ -101,10 +101,10 @@
<i class="ri-info-card-line"></i>
</template>
</el-tag>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.isFriend && userDialog.friend"
placement="top"
side="top"
:content="t('dialog.user.tags.friend_number')">
<el-tag
type="info"
@@ -115,10 +115,10 @@
<i class="ri-user-add-line"></i>
{{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
</el-tag>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.mutualFriendCount"
placement="top"
side="top"
:content="t('dialog.user.tags.mutual_friends')">
<el-tag
type="info"
@@ -129,7 +129,7 @@
<i class="ri-group-line"></i>
{{ userDialog.mutualFriendCount }}
</el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tag
v-if="userDialog.ref.$isTroll"
type="info"
@@ -158,7 +158,7 @@
{{ t('dialog.user.tags.vrchat_team') }}
</el-tag>
<el-tooltip v-if="userDialog.ref.$platform === 'standalonewindows'" placement="top" content="PC">
<TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
<el-tag
type="info"
effect="plain"
@@ -167,8 +167,8 @@
style="margin-right: 5px; margin-top: 5px">
<i class="ri-computer-line"></i>
</el-tag>
</el-tooltip>
<el-tooltip v-else-if="userDialog.ref.$platform === 'android'" placement="top" content="Android">
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
<el-tag
type="info"
effect="plain"
@@ -177,8 +177,8 @@
style="margin-right: 5px; margin-top: 5px">
<i class="ri-android-line"></i>
</el-tag>
</el-tooltip>
<el-tooltip v-else-if="userDialog.ref.$platform === 'ios'" placement="top" content="iOS">
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
<el-tag
type="info"
effect="plain"
@@ -187,7 +187,7 @@
style="margin-right: 5px; margin-top: 5px"
><i class="ri-apple-line"></i
></el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tag
v-else-if="userDialog.ref.$platform"
type="info"
@@ -212,7 +212,7 @@
>{{ userDialog.ref.$customTag }}</el-tag
>
<br />
<el-tooltip v-for="badge in userDialog.ref.badges" :key="badge.badgeId" placement="top">
<TooltipWrapper v-for="badge in userDialog.ref.badges" :key="badge.badgeId" side="top">
<template #content>
<span>{{ badge.badgeName }}</span>
<span v-if="badge.hidden">&nbsp;(Hidden)</span>
@@ -269,7 +269,7 @@
</div>
</el-popover>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
<div style="margin-top: 5px">
<span style="font-size: 12px" v-text="userDialog.ref.statusDescription"></span>

View File

@@ -64,7 +64,7 @@
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.private') }}
</el-tag>
<el-tooltip v-if="worldDialog.isPC" placement="top" content="PC">
<TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
<el-tag
class="x-tag-platform-pc"
type="info"
@@ -78,9 +78,9 @@
{{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
</span>
</el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tooltip v-if="worldDialog.isQuest" placement="top" content="Quest">
<TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
<el-tag
class="x-tag-platform-quest"
type="info"
@@ -94,9 +94,9 @@
{{ worldDialog.bundleSizes['android'].fileSize }}
</span>
</el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tooltip v-if="worldDialog.isIos" placement="top" content="iOS">
<TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
<el-tag
class="x-tag-platform-ios"
type="info"
@@ -110,7 +110,7 @@
{{ worldDialog.bundleSizes['ios'].fileSize }}
</span>
</el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tag
v-if="worldDialog.avatarScalingDisabled"
@@ -185,9 +185,9 @@
</div>
</div>
<div style="flex: none; margin-left: 10px">
<el-tooltip
<TooltipWrapper
v-if="worldDialog.inCache"
placement="top"
side="top"
:content="t('dialog.world.actions.delete_cache_tooltip')">
<el-button
:icon="Delete"
@@ -195,8 +195,8 @@
circle
:disabled="isGameRunning && worldDialog.cacheLocked"
@click="deleteVRChatCache(worldDialog.ref)" />
</el-tooltip>
<el-tooltip placement="top" :content="t('dialog.world.actions.favorites_tooltip')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.world.actions.favorites_tooltip')">
<el-button
:type="worldDialog.isFavorite ? 'warning' : 'default'"
:icon="worldDialog.isFavorite ? StarFilled : Star"
@@ -204,7 +204,7 @@
circle
style="margin-left: 5px"
@click="worldDialogCommand('Add Favorite')" />
</el-tooltip>
</TooltipWrapper>
<el-dropdown trigger="click" style="margin-left: 5px" @command="worldDialogCommand">
<el-button type="default" :icon="MoreFilled" size="large" circle />
<template #dropdown>
@@ -345,8 +345,8 @@
:location="room.$location.tag"
:shortname="room.$location.shortName"
style="margin-left: 5px" />
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('dialog.world.instances.refresh_instance_info')">
<el-button
size="small"
@@ -354,10 +354,10 @@
style="margin-left: 5px"
circle
@click="refreshInstancePlayerCount(room.tag)" />
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="instanceJoinHistory.get(room.$location.tag)"
placement="top"
side="top"
:content="t('dialog.previous_instances.info')">
<el-button
size="small"
@@ -366,7 +366,7 @@
plain
circle
@click="showPreviousInstancesInfoDialog(room.location)" />
</el-tooltip>
</TooltipWrapper>
<LastJoin :location="room.$location.tag" :currentlocation="lastLocation.location" />
<InstanceInfo
:location="room.tag"
@@ -454,7 +454,7 @@
<span class="extra" style="display: inline">
{{ worldDialog.id }}
</span>
<el-tooltip placement="top" :content="t('dialog.world.info.id_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
<el-button type="default" :icon="CopyDocument" size="small" circle />
<template #dropdown>
@@ -471,7 +471,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</div>
@@ -597,7 +597,7 @@
<span class="name" style="display: inline">
{{ t('dialog.world.info.publication_date') }}
</span>
<el-tooltip v-if="isTimeInLabVisible" placement="top" style="margin-left: 5px">
<TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
<template #content>
<span>
{{ t('dialog.world.info.time_in_labs') }}
@@ -605,7 +605,7 @@
</span>
</template>
<el-icon><ArrowDown /></el-icon>
</el-tooltip>
</TooltipWrapper>
<span class="extra">
{{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
</span>
@@ -652,35 +652,35 @@
<div class="detail">
<span class="name">
{{ t('dialog.world.info.last_visited') }}
<el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')"
<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
><el-icon style="margin-left: 3px"><Warning /></el-icon
></el-tooltip>
></TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(worldDialog.lastVisit, 'long') }}</span>
</div>
</div>
<el-tooltip placement="top" :content="t('dialog.user.info.open_previous_instance')">
<TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
<div class="x-friend-item" @click="showPreviousInstancesWorldDialog(worldDialog.ref)">
<div class="detail">
<span class="name">
{{ t('dialog.world.info.visit_count') }}
<el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')"
<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
><el-icon style="margin-left: 3px"><Warning /></el-icon
></el-tooltip>
></TooltipWrapper>
</span>
<span class="extra">
{{ worldDialog.visitCount }}
</span>
</div>
</div>
</el-tooltip>
</TooltipWrapper>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name"
>{{ t('dialog.world.info.time_spent') }}
<el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')">
<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<span class="extra">
{{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}

View File

@@ -1,10 +1,14 @@
<script setup>
import { computed, useSlots } from 'vue';
import { computed, useAttrs, useSlots } from 'vue';
import Tooltip from './Tooltip.vue';
import TooltipContent from './TooltipContent.vue';
import TooltipTrigger from './TooltipTrigger.vue';
defineOptions({
inheritAttrs: false
});
const props = defineProps({
content: { type: [String, Number], required: false },
side: { type: null, required: false },
@@ -17,13 +21,14 @@
contentClass: { type: null, required: false }
});
const attrs = useAttrs();
const slots = useSlots();
const hasContent = computed(() => Boolean(slots.content) || props.content !== undefined);
</script>
<template>
<Tooltip :delay-duration="delayDuration" :disable-hoverable-content="disableHoverableContent" :disabled="disabled">
<TooltipTrigger :as-child="triggerAsChild">
<TooltipTrigger :as-child="triggerAsChild" v-bind="attrs">
<slot />
</TooltipTrigger>
<TooltipContent v-if="hasContent" :side="side" :align="align" :side-offset="sideOffset" :class="contentClass">

View File

@@ -9,6 +9,7 @@ import Launch from '../components/Launch.vue';
import Location from '../components/Location.vue';
import LocationWorld from '../components/LocationWorld.vue';
import Timer from '../components/Timer.vue';
import { TooltipWrapper } from '../components/ui/tooltip';
export function initComponents(app) {
app.component('Location', Location);
@@ -22,4 +23,5 @@ export function initComponents(app) {
app.component('Launch', Launch);
app.component('LocationWorld', LocationWorld);
app.component('DataTable', DataTable);
app.component('TooltipWrapper', TooltipWrapper);
}

View File

@@ -21,9 +21,9 @@
</div>
<div>
<el-tooltip :content="t('view.charts.instance_activity.refresh')" placement="top"
<TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top"
><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
></el-tooltip>
></TooltipWrapper>
<el-popover placement="bottom" trigger="click" :width="250">
<div class="settings">
@@ -66,24 +66,24 @@
<template #reference>
<div>
<el-tooltip :content="t('view.charts.instance_activity.settings.header')" placement="top">
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</el-popover>
<el-button-group style="margin-right: 5px">
<el-tooltip :content="t('view.charts.instance_activity.previous_day')" placement="top">
<TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
<el-button
:icon="ArrowLeft"
:disabled="isPrevDayBtnDisabled"
@click="changeSelectedDateFromBtn(false)"></el-button>
</el-tooltip>
<el-tooltip :content="t('view.charts.instance_activity.next_day')" placement="top">
</TooltipWrapper>
<TooltipWrapper :content="t('view.charts.instance_activity.next_day')" side="top">
<el-button :disabled="isNextDayBtnDisabled" @click="changeSelectedDateFromBtn(true)"
><el-icon class="el-icon--right"><ArrowRight /></el-icon
></el-button>
</el-tooltip>
</TooltipWrapper>
</el-button-group>
<el-date-picker
v-model="selectedDate"

View File

@@ -2,22 +2,22 @@
<div class="mutual-graph pt-12" ref="mutualGraphRef">
<div class="options-container mutual-graph__toolbar">
<div class="mutual-graph__actions">
<el-tooltip :content="t('view.charts.mutual_friend.force_dialog.open_label')" placement="top">
<TooltipWrapper :content="t('view.charts.mutual_friend.force_dialog.open_label')" side="top">
<el-button circle :icon="Setting" :disabled="!graphReady" @click="openForceDialog"></el-button>
</el-tooltip>
<el-tooltip :content="fetchButtonLabel" placement="top">
</TooltipWrapper>
<TooltipWrapper :content="fetchButtonLabel" side="top">
<el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch">
{{ fetchButtonLabel }}
</el-button>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="isFetching"
:content="t('view.charts.mutual_friend.actions.stop_fetching')"
placement="top">
side="top">
<el-button type="danger" plain :disabled="status.cancelRequested" @click="cancelFetch">
{{ t('view.charts.mutual_friend.actions.stop') }}
</el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</div>

View File

@@ -66,14 +66,14 @@
<div class="group-section">
<div class="group-section__header">
<span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
<el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button
:loading="isFavoriteLoading"
size="small"
:icon="Refresh"
circle
@click.stop="handleRefreshFavorites" />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="group-section__list">
<template v-if="favoriteAvatarGroups.length">
@@ -259,7 +259,7 @@
</div>
</template>
<div v-else class="group-empty">No Data</div>
<el-tooltip
<TooltipWrapper
v-if="!isCreatingLocalGroup"
:disabled="isLocalUserVrcPlusSupporter"
:content="t('view.favorite.avatars.local_favorites')">
@@ -273,7 +273,7 @@
<el-icon><Plus /></el-icon>
<span>{{ t('view.favorite.avatars.new_group') }}</span>
</div>
</el-tooltip>
</TooltipWrapper>
<el-input
v-else
ref="newLocalGroupInput"

View File

@@ -68,14 +68,14 @@
<div class="group-section">
<div class="group-section__header">
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
<el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button
:loading="isFavoriteLoading"
size="small"
:icon="Refresh"
circle
@click.stop="handleRefreshFavorites" />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="group-section__list">
<template v-if="favoriteFriendGroups.length">

View File

@@ -68,14 +68,14 @@
<div class="group-section">
<div class="group-section__header">
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
<el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button
:loading="isFavoriteLoading"
size="small"
:icon="Refresh"
circle
@click.stop="handleRefreshFavorites" />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="group-section__list">
<template v-if="favoriteWorldGroups.length">

View File

@@ -9,18 +9,18 @@
<div class="favorites-search-card__title">
<span class="name">{{ localFavFakeRef.name }}</span>
<span class="favorites-search-card__badges">
<el-tooltip
<TooltipWrapper
v-if="favorite.deleted"
placement="top"
side="top"
:content="t('view.favorite.unavailable_tooltip')">
<i class="ri-error-warning-line"></i>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
placement="top"
side="top"
:content="t('view.favorite.private')">
<i class="ri-lock-line"></i>
</el-tooltip>
</TooltipWrapper>
</span>
</div>
<span class="extra">{{ localFavFakeRef.authorName }}</span>
@@ -45,8 +45,8 @@
type="avatar" />
</div>
<div class="favorites-search-card__action">
<el-tooltip
placement="left"
<TooltipWrapper
side="left"
:content="
isLocalFavorite
? t('view.favorite.delete_tooltip')
@@ -60,14 +60,14 @@
@click.stop="handlePrimaryDeleteAction">
<i class="ri-delete-bin-line"></i>
</el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</template>
<template v-else>
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action" v-if="canSelectAvatar">
<el-tooltip placement="top" :content="t('view.favorite.select_avatar_tooltip')">
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
<el-button
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
@@ -75,12 +75,12 @@
circle
class="favorites-search-card__action-btn"
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
<el-tooltip
<TooltipWrapper
v-if="showDangerUnfavorite"
placement="bottom"
side="bottom"
:content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
@@ -89,8 +89,8 @@
class="favorites-search-card__action-btn"
type="danger"
@click.stop="handlePrimaryDeleteAction" />
</el-tooltip>
<el-tooltip v-else placement="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
type="default"
:icon="Star"
@@ -98,7 +98,7 @@
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('avatar', favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</template>

View File

@@ -14,7 +14,7 @@
<div class="favorites-search-card__actions">
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action">
<el-tooltip placement="top" :content="t('view.favorite.select_avatar_tooltip')">
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
<el-button
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
@@ -22,10 +22,10 @@
circle
class="favorites-search-card__action-btn"
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
<el-tooltip placement="bottom" :content="t('view.favorite.favorite_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.favorite.favorite_tooltip')">
<el-button
type="default"
:icon="favoriteExists ? Star : StarFilled"
@@ -33,7 +33,7 @@
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('avatar', favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</div>

View File

@@ -33,7 +33,7 @@
type="friend" />
</div>
<div class="favorites-search-card__action">
<el-tooltip placement="left" :content="t('view.favorite.unfavorite_tooltip')">
<TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
circle
@@ -42,20 +42,20 @@
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</template>
<template v-else>
<div class="favorites-search-card__action">
<el-tooltip placement="right" :content="t('view.favorite.edit_favorite_tooltip')">
<TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
size="small"
:icon="Star"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('friend', favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</div>

View File

@@ -64,19 +64,19 @@
<template v-else>
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action">
<el-tooltip placement="top" :content="inviteOrLaunchText">
<TooltipWrapper side="top" :content="inviteOrLaunchText">
<el-button
size="small"
:icon="Message"
class="favorites-search-card__action-btn"
@click.stop="newInstanceSelfInvite(favorite.id)"
circle />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
<el-tooltip
<TooltipWrapper
v-if="showDangerUnfavorite"
placement="top"
side="top"
:content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
@@ -85,8 +85,8 @@
class="favorites-search-card__action-btn"
type="danger"
@click.stop="handleDeleteFavorite" />
</el-tooltip>
<el-tooltip v-else placement="top" :content="t('view.favorite.edit_favorite_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
type="default"
:icon="Star"
@@ -94,7 +94,7 @@
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('world', favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</template>

View File

@@ -46,19 +46,19 @@
<template v-else>
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action">
<el-tooltip placement="top" :content="inviteOrLaunchText">
<TooltipWrapper side="top" :content="inviteOrLaunchText">
<el-button
size="small"
:icon="Message"
class="favorites-search-card__action-btn"
@click.stop="newInstanceSelfInvite(favorite.id)"
circle />
</el-tooltip>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
<el-tooltip
<TooltipWrapper
v-if="showDangerUnfavorite"
placement="top"
side="top"
:content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
@@ -67,8 +67,8 @@
class="favorites-search-card__action-btn"
type="danger"
@click.stop="handleDeleteFavorite" />
</el-tooltip>
<el-tooltip v-else placement="top" :content="t('view.favorite.edit_favorite_tooltip')">
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
type="default"
:icon="Star"
@@ -76,7 +76,7 @@
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('world', favorite.id)" />
</el-tooltip>
</TooltipWrapper>
</div>
</div>
</template>

View File

@@ -10,12 +10,12 @@
<template #toolbar>
<div style="margin: 0 0 10px; display: flex; align-items: center">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
<el-switch
v-model="feedTable.vip"
active-color="var(--el-color-success)"
@change="feedTableLookup"></el-switch>
</el-tooltip>
</TooltipWrapper>
</div>
<el-select
v-model="feedTable.filter"

View File

@@ -3,12 +3,12 @@
<div>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<el-tooltip placement="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
<el-switch
v-model="friendsListSearchFilterVIP"
active-color="var(--el-color-success)"
@change="friendsListSearchChange"></el-switch>
</el-tooltip>
</TooltipWrapper>
<el-select
v-model="friendsListSearchFilters"
multiple
@@ -128,7 +128,7 @@
sortable
:sort-method="(a, b) => sortLanguages(a, b)">
<template #default="{ row }">
<el-tooltip v-for="item in row.$languages" :key="item.key" placement="top">
<TooltipWrapper v-for="item in row.$languages" :key="item.key" side="top">
<template #content>
<span>{{ item.value }} ({{ item.key }})</span>
</template>
@@ -136,13 +136,13 @@
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"
class="flags"></span>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
<template #default="{ row }">
<div class="flex items-center">
<el-tooltip v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
<TooltipWrapper v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
<template #content>
<span v-text="link"></span>
</template>
@@ -158,7 +158,7 @@
"
@click.stop="openExternalLink(link)"
loading="lazy" />
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</el-table-column>

View File

@@ -12,11 +12,11 @@
<el-popover placement="bottom" trigger="click" :width="350">
<template #reference>
<div>
<el-tooltip :content="t('view.charts.instance_activity.settings.header')" placement="top">
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<el-button style="margin-right: 5px" circle
><i class="ri-settings-3-line"></i
></el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</template>
<div style="display: flex; justify-content: space-between; align-items: center">

View File

@@ -10,12 +10,12 @@
<template #toolbar>
<div style="margin: 0 0 10px; display: flex; align-items: center">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
<el-switch
v-model="gameLogTable.vip"
active-color="var(--el-color-success)"
@change="gameLogTableLookup"></el-switch>
</el-tooltip>
</TooltipWrapper>
</div>
<el-select
v-model="gameLogTable.filter"

View File

@@ -1,9 +1,9 @@
<template>
<div style="float: left; margin: 5px; z-index: 3000">
<el-tooltip v-if="!noUpdater" placement="top" :content="t('view.login.updater')">
<TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
<el-button type="default" size="small" :icon="Download" circle @click="showVRCXUpdateDialog"></el-button>
</el-tooltip>
<el-tooltip placement="top" :content="t('view.login.proxy_settings')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
<el-button
type="default"
size="small"
@@ -11,7 +11,7 @@
style="margin-left: 5px"
circle
@click="promptProxySettings"></el-button>
</el-tooltip>
</TooltipWrapper>
</div>
<div v-loading="loginForm.loading" class="x-login-container">
<div class="x-login">

View File

@@ -18,14 +18,14 @@
v-model="playerModerationTable.filters[1].value"
:placeholder="t('view.moderation.search_placeholder')"
class="filter-input" />
<el-tooltip placement="bottom" :content="t('view.moderation.refresh_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
<el-button
type="default"
:loading="playerModerationTable.loading"
@click="refreshPlayerModerations()"
:icon="Refresh"
circle />
</el-tooltip>
</TooltipWrapper>
</div>
<DataTableLayout

View File

@@ -48,7 +48,7 @@
clearable
class="flex-[0.4]"
style="margin: 0 10px" />
<el-tooltip placement="bottom" :content="t('view.notification.refresh_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
<el-button
type="default"
:loading="isNotificationsLoading"
@@ -56,7 +56,7 @@
circle
style="flex: none"
@click="refreshNotifications()" />
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</DataTableLayout>

View File

@@ -64,7 +64,7 @@
style="margin-right: 5px"
>{{ t('dialog.world.tags.private') }}</el-tag
>
<el-tooltip v-if="currentInstanceWorld.isPC" placement="top" content="PC">
<TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
<el-tag
class="x-tag-platform-pc"
type="info"
@@ -78,8 +78,8 @@
>{{ currentInstanceWorld.bundleSizes['standalonewindows'].fileSize }}</span
>
</el-tag>
</el-tooltip>
<el-tooltip v-if="currentInstanceWorld.isQuest" placement="top" content="Android">
</TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
<el-tag
class="x-tag-platform-quest"
type="info"
@@ -93,8 +93,8 @@
>{{ currentInstanceWorld.bundleSizes['android'].fileSize }}</span
>
</el-tag>
</el-tooltip>
<el-tooltip v-if="currentInstanceWorld.isIos" placement="top" content="iOS">
</TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
<el-tag
class="x-tag-platform-ios"
type="info"
@@ -108,7 +108,7 @@
>{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
>
</el-tag>
</el-tooltip>
</TooltipWrapper>
<el-tag
v-if="currentInstanceWorld.avatarScalingDisabled"
type="warning"
@@ -244,24 +244,24 @@
sortable>
<template #default="scope">
<template v-if="chatboxUserBlacklist.has(scope.row.ref.id)">
<el-tooltip placement="left" content="Unblock chatbox messages">
<TooltipWrapper side="left" content="Unblock chatbox messages">
<el-button
text
:icon="Mute"
size="small"
style="color: red; margin-right: 5px"
@click.stop="deleteChatboxUserBlacklist(scope.row.ref.id)"></el-button>
</el-tooltip>
</TooltipWrapper>
</template>
<template v-else>
<el-tooltip placement="left" content="Block chatbox messages">
<TooltipWrapper side="left" content="Block chatbox messages">
<el-button
text
:icon="Microphone"
size="small"
style="margin-right: 5px"
@click.stop="addChatboxUserBlacklist(scope.row.ref)"></el-button>
</el-tooltip>
</TooltipWrapper>
</template>
<span v-text="scope.row.photonId"></span>
</template>
@@ -275,37 +275,37 @@
:sort-method="sortInstanceIcon">
<template #default="scope">
<span></span>
<el-tooltip v-if="scope.row.isMaster" placement="left" content="Instance Master">
<TooltipWrapper v-if="scope.row.isMaster" side="left" content="Instance Master">
<span>👑</span>
</el-tooltip>
<el-tooltip v-if="scope.row.isModerator" placement="left" content="Moderator">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.isModerator" side="left" content="Moderator">
<span>⚔️</span>
</el-tooltip>
<el-tooltip v-if="scope.row.isFriend" placement="left" content="Friend">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.isFriend" side="left" content="Friend">
<span>💚</span>
</el-tooltip>
<el-tooltip v-if="scope.row.isBlocked" placement="left" content="Blocked">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.isBlocked" side="left" content="Blocked">
<el-icon style="color: red"><CircleClose /></el-icon>
</el-tooltip>
<el-tooltip v-if="scope.row.isMuted" placement="left" content="Muted">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.isMuted" side="left" content="Muted">
<el-icon style="color: var(--el-color-warning)"><Mute /></el-icon>
</el-tooltip>
<el-tooltip
</TooltipWrapper>
<TooltipWrapper
v-if="scope.row.isAvatarInteractionDisabled"
placement="left"
side="left"
content="Avatar Interaction Disabled
">
<el-icon style="color: var(--el-color-warning)"><Pointer /></el-icon>
</el-tooltip>
<el-tooltip v-if="scope.row.isChatBoxMuted" placement="left" content="Chatbox Muted">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.isChatBoxMuted" side="left" content="Chatbox Muted">
<el-icon style="color: var(--el-color-warning)"><ChatLineRound /></el-icon>
</el-tooltip>
<el-tooltip v-if="scope.row.timeoutTime" placement="left" content="Timeout">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.timeoutTime" side="left" content="Timeout">
<span style="color: var(--el-color-danger)">🔴{{ scope.row.timeoutTime }}s</span>
</el-tooltip>
<el-tooltip v-if="scope.row.ageVerified" placement="left" content="18+ Verified">
</TooltipWrapper>
<TooltipWrapper v-if="scope.row.ageVerified" side="left" content="18+ Verified">
<i class="ri-id-card-line"></i>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.playerList.platform')" prop="inVRMode" width="90">
@@ -341,7 +341,7 @@
</el-table-column>
<el-table-column :label="t('table.playerList.language')" width="100" prop="ref.$languages">
<template #default="scope">
<el-tooltip v-for="item in scope.row.ref.$languages" :key="item.key" placement="top">
<TooltipWrapper v-for="item in scope.row.ref.$languages" :key="item.key" side="top">
<template #content>
<span>{{ item.value }} ({{ item.key }})</span>
</template>
@@ -349,13 +349,13 @@
class="flags"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.playerList.bioLink')" width="100" prop="ref.bioLinks">
<template #default="scope">
<div style="display: flex; align-items: center">
<el-tooltip
<TooltipWrapper
v-for="(link, index) in scope.row.ref.bioLinks?.filter(Boolean)"
:key="index">
<template #content>
@@ -372,7 +372,7 @@
"
@click.stop="openExternalLink(link)"
loading="lazy" />
</el-tooltip>
</TooltipWrapper>
</div>
</template>
</el-table-column>

View File

@@ -24,25 +24,25 @@
<el-button @click="emitShowChatboxBlacklist">{{
t('view.player_list.photon.chatbox_blacklist')
}}</el-button>
<el-tooltip placement="bottom" :content="t('view.player_list.photon.status_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
<div style="display: inline-flex; align-items: center; font-size: 14px">
<span v-if="ipcEnabled && !photonEventIcon">🟢</span>
<span v-else-if="ipcEnabled"></span>
<span v-else>🔴</span>
</div>
</el-tooltip>
</TooltipWrapper>
</div>
<el-tabs type="card">
<el-tab-pane :label="t('view.player_list.photon.current')">
<DataTable v-bind="photonEventTable" style="margin-bottom: 10px">
<el-table-column :label="t('table.playerList.date')" prop="created_at" width="130">
<template #default="scope">
<el-tooltip placement="right">
<TooltipWrapper side="right">
<template #content>
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
</template>
<span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.playerList.user')" prop="photonId" width="160">
@@ -77,7 +77,7 @@
</template>
<template v-else-if="scope.row.type === 'ChangeStatus'">
<template v-if="scope.row.status !== scope.row.previousStatus">
<el-tooltip placement="top">
<TooltipWrapper side="top">
<template #content>
<span v-if="scope.row.previousStatus === 'active'">{{
t('dialog.user.status.active')
@@ -94,11 +94,11 @@
<span v-else>{{ t('dialog.user.status.offline') }}</span>
</template>
<i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
</el-tooltip>
</TooltipWrapper>
<span>
<el-icon><ArrowRight /></el-icon>
</span>
<el-tooltip placement="top">
<TooltipWrapper side="top">
<template #content>
<span v-if="scope.row.status === 'active'">{{
t('dialog.user.status.active')
@@ -118,7 +118,7 @@
class="x-user-status"
:class="statusClass(scope.row.status)"
style="margin-right: 5px"></i>
</el-tooltip>
</TooltipWrapper>
</template>
<span
v-if="scope.row.statusDescription !== scope.row.previousStatusDescription"
@@ -193,7 +193,7 @@
</span>
<span v-else-if="scope.row.type === 'SpawnEmoji'">
<span v-if="scope.row.imageUrl">
<el-tooltip placement="right">
<TooltipWrapper side="right">
<template #content>
<img
:src="scope.row.imageUrl"
@@ -203,7 +203,7 @@
loading="lazy" />
</template>
<span v-text="scope.row.fileId"></span>
</el-tooltip>
</TooltipWrapper>
</span>
<span v-else v-text="scope.row.text"></span>
</span>
@@ -220,12 +220,12 @@
<DataTable v-bind="photonEventTablePrevious" style="margin-bottom: 10px">
<el-table-column :label="t('table.playerList.date')" prop="created_at" width="130">
<template #default="scope">
<el-tooltip placement="right">
<TooltipWrapper side="right">
<template #content>
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
</template>
<span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.playerList.user')" prop="photonId" width="160">
@@ -267,7 +267,7 @@
</template>
<template v-else-if="scope.row.type === 'ChangeStatus'">
<template v-if="scope.row.status !== scope.row.previousStatus">
<el-tooltip placement="top">
<TooltipWrapper side="top">
<template #content>
<span v-if="scope.row.previousStatus === 'active'">{{
t('dialog.user.status.active')
@@ -284,11 +284,11 @@
<span v-else>{{ t('dialog.user.status.offline') }}</span>
</template>
<i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
</el-tooltip>
</TooltipWrapper>
<span>
<el-icon><ArrowRight /></el-icon>
</span>
<el-tooltip placement="top">
<TooltipWrapper side="top">
<template #content>
<span v-if="scope.row.status === 'active'">{{
t('dialog.user.status.active')
@@ -308,7 +308,7 @@
class="x-user-status"
:class="statusClass(scope.row.status)"
style="margin-right: 5px"></i>
</el-tooltip>
</TooltipWrapper>
</template>
<span
v-if="scope.row.statusDescription !== scope.row.previousStatusDescription"
@@ -356,7 +356,7 @@
<span v-else-if="scope.row.type === 'ChatBoxMessage'" v-text="scope.row.text"></span>
<span v-else-if="scope.row.type === 'SpawnEmoji'">
<span v-if="scope.row.imageUrl">
<el-tooltip placement="right">
<TooltipWrapper side="right">
<template #content>
<img
:src="scope.row.imageUrl"
@@ -366,7 +366,7 @@
loading="lazy" />
</template>
<span v-text="scope.row.fileId"></span>
</el-tooltip>
</TooltipWrapper>
</span>
<span v-else v-text="scope.row.text"></span>
</span>

View File

@@ -7,14 +7,14 @@
style="flex: 1"
@input="updateSearchText"
@keyup.enter="search"></el-input>
<el-tooltip placement="bottom" :content="t('view.search.clear_results_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
<el-button
type="default"
:icon="Delete"
circle
style="flex: none; margin-left: 10px"
@click="handleClearSearch"></el-button>
</el-tooltip>
</TooltipWrapper>
</div>
<el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
<el-tab-pane v-loading="isSearchUserLoading" :label="t('view.search.user.header')" style="min-height: 60px">
@@ -155,7 +155,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tooltip placement="bottom" :content="t('view.search.avatar.refresh_tooltip')">
<TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
<el-button
type="default"
:loading="userDialog.isAvatarsLoading"
@@ -163,7 +163,7 @@
:icon="Refresh"
circle
@click="refreshUserDialogAvatars"></el-button>
</el-tooltip>
</TooltipWrapper>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
t('view.search.avatar.result_count', {
count: searchAvatarResults.length

View File

@@ -2,9 +2,9 @@
<div class="simple-switch">
<div class="name" :style="{ width: longLabel ? '300px' : undefined }">
{{ label }}
<el-tooltip v-if="tooltip" placement="top" :content="tooltip"
<TooltipWrapper v-if="tooltip" side="top" :content="tooltip"
><el-icon size="small" class="tooltip"><InfoFilled /></el-icon
></el-tooltip>
></TooltipWrapper>
</div>
<el-switch class="switch" :model-value="value" @change="change" :disabled="disabled"></el-switch>

View File

@@ -338,7 +338,7 @@
<div class="options-container">
<div class="header-bar">
<span class="header">{{ t('view.profile.config_json') }}</span>
<el-tooltip placement="top" :content="t('view.profile.refresh_tooltip')">
<TooltipWrapper side="top" :content="t('view.profile.refresh_tooltip')">
<el-button
type="default"
size="small"
@@ -346,8 +346,8 @@
circle
style="margin-left: 5px"
@click="refreshConfigTreeData()"></el-button>
</el-tooltip>
<el-tooltip placement="top" :content="t('view.profile.clear_results_tooltip')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('view.profile.clear_results_tooltip')">
<el-button
type="default"
size="small"
@@ -355,7 +355,7 @@
circle
style="margin-left: 5px"
@click="configTreeData = []"></el-button>
</el-tooltip>
</TooltipWrapper>
</div>
<el-tree v-if="configTreeData.length > 0" :data="configTreeData" style="margin-top: 10px; font-size: 12px">
<template #default="scope">

View File

@@ -234,12 +234,12 @@
<div class="options-container-item">
<span class="name"
>{{ t('view.settings.general.automation.auto_invite_request_accept') }}
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
style="margin-left: 5px"
:content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<br />
<el-radio-group

View File

@@ -61,11 +61,11 @@
<span class="sub-header" style="margin-right: 5px">{{
t('view.settings.advanced.advanced.save_instance_prints_to_file.header')
}}</span>
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('view.settings.advanced.advanced.save_instance_prints_to_file.header_tooltip')">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
<simple-switch
:label="t('view.settings.advanced.advanced.save_instance_prints_to_file.description')"
:value="saveInstancePrints"
@@ -87,11 +87,11 @@
<span class="sub-header" style="margin-right: 5px"
>{{ t('view.settings.advanced.advanced.save_instance_emoji_to_file.header') }}
</span>
<el-tooltip
placement="top"
<TooltipWrapper
side="top"
:content="t('view.settings.advanced.advanced.save_instance_prints_to_file.header_tooltip')">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
<simple-switch
:label="t('view.settings.advanced.advanced.save_instance_emoji_to_file.description')"
:value="saveInstanceEmoji"

View File

@@ -9,14 +9,14 @@
<div v-for="setting in currentOptions" :key="setting.key" class="toggle-item">
<span class="toggle-name"
>{{ setting.name
}}<el-tooltip
}}<TooltipWrapper
v-if="setting.tooltip"
placement="top"
side="top"
style="margin-left: 5px"
:content="setting.tooltip">
<el-icon v-if="setting.tooltipWarning"><Warning /></el-icon>
<el-icon v-else><InfoFilled /></el-icon>
</el-tooltip>
</TooltipWrapper>
</span>
<el-radio-group

View File

@@ -31,30 +31,30 @@
</el-table-column>
<el-table-column :label="t('dialog.registry_backup.action')" width="90" align="right">
<template #default="scope">
<el-tooltip placement="top" :content="t('dialog.registry_backup.restore')">
<TooltipWrapper side="top" :content="t('dialog.registry_backup.restore')">
<el-button
text
:icon="Upload"
size="small"
class="button-pd-0"
@click="restoreVrcRegistryBackup(scope.row)"></el-button>
</el-tooltip>
<el-tooltip placement="top" :content="t('dialog.registry_backup.save_to_file')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.registry_backup.save_to_file')">
<el-button
text
:icon="Download"
size="small"
class="button-pd-0"
@click="saveVrcRegistryBackupToFile(scope.row)"></el-button>
</el-tooltip>
<el-tooltip placement="top" :content="t('dialog.registry_backup.delete')">
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.registry_backup.delete')">
<el-button
text
:icon="Delete"
size="small"
class="button-pd-0"
@click="deleteVrcRegistryBackup(scope.row)"></el-button>
</el-tooltip>
</TooltipWrapper>
</template>
</el-table-column>
</DataTable>

View File

@@ -16,7 +16,7 @@
<span>/</span>
<span v-text="totalCacheSize"></span>
<span>GB</span>
<el-tooltip placement="top" :content="t('dialog.config_json.refresh')">
<TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
<el-button
type="default"
:loading="VRChatCacheSizeLoading"
@@ -25,7 +25,7 @@
circle
style="margin-left: 5px"
@click="getVRChatCacheSize"></el-button>
</el-tooltip>
</TooltipWrapper>
<div style="margin-top: 10px">
<span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span>

View File

@@ -41,7 +41,7 @@
</el-option>
</el-select>
<div>
<el-tooltip placement="bottom" :content="t('side_panel.refresh_tooltip')">
<TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
<el-button
type="default"
:loading="isRefreshFriendsLoading"
@@ -50,7 +50,7 @@
circle
style="margin-right: 10px"
@click="refreshFriendsList"></el-button>
</el-tooltip>
</TooltipWrapper>
</div>
</div>
<el-tabs class="zero-margin-tabs" stretch style="height: calc(100% - 70px); margin-top: 5px">