mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 14:26:06 +02:00
replace clickable el-popover with Popover components
This commit is contained in:
pa
Natsumi
@@ -93,71 +93,68 @@
|
||||
<Badge variant="outline">
|
||||
{{ formatVisibility(group.visibility) }}
|
||||
</Badge>
|
||||
<el-popover
|
||||
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:visible="
|
||||
<Popover
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
:width="220"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<template #reference>
|
||||
">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
:icon="MoreFilled"
|
||||
circle
|
||||
@click.stop></el-button>
|
||||
</template>
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
:width="180"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<div class="group-visibility-menu">
|
||||
<button
|
||||
v-for="visibility in avatarGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
type="button"
|
||||
:class="[
|
||||
'group-visibility-menu__item',
|
||||
{ 'is-active': group.visibility === visibility }
|
||||
]"
|
||||
@click="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{ formatVisibility(visibility) }}</span>
|
||||
<span
|
||||
v-if="group.visibility === visibility"
|
||||
class="group-visibility-menu__check">
|
||||
<i class="ri-check-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
:width="180"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<div class="group-visibility-menu">
|
||||
<button
|
||||
v-for="visibility in avatarGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
type="button"
|
||||
:class="[
|
||||
'group-visibility-menu__item',
|
||||
{ 'is-active': group.visibility === visibility }
|
||||
]"
|
||||
@click="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{ formatVisibility(visibility) }}</span>
|
||||
<span
|
||||
v-if="group.visibility === visibility"
|
||||
class="group-visibility-menu__check">
|
||||
<i class="ri-check-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -212,45 +209,40 @@
|
||||
<span class="group-item__count">{{
|
||||
localAvatarFavGroupLength(group)
|
||||
}}</span>
|
||||
<el-popover
|
||||
:visible="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:visible="
|
||||
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||
"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
:width="200"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<template #reference>
|
||||
<Popover
|
||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
:icon="MoreFilled"
|
||||
circle
|
||||
@click.stop></el-button>
|
||||
</template>
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleCheckInvalidAvatars(group)">
|
||||
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleCheckInvalidAvatars(group)">
|
||||
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -286,26 +278,23 @@
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>Local History</span>
|
||||
<el-popover
|
||||
:visible="activeGroupMenu === historyGroupMenuKey"
|
||||
@update:visible="handleGroupMenuVisible(historyGroupMenuKey, $event)"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
:width="180"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<template #reference>
|
||||
<Popover
|
||||
:open="activeGroupMenu === historyGroupMenuKey"
|
||||
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
|
||||
</template>
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleHistoryClear">
|
||||
<span>{{ t('view.favorite.clear_tooltip') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="right" class="w-[180px] p-1 rounded-lg">
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleHistoryClear">
|
||||
<span>{{ t('view.favorite.clear_tooltip') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<div
|
||||
@@ -504,6 +493,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
||||
import { avatarRequest, favoriteRequest } from '../../api';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
|
||||
|
||||
@@ -95,71 +95,68 @@
|
||||
<Badge variant="outline">
|
||||
{{ formatVisibility(group.visibility) }}
|
||||
</Badge>
|
||||
<el-popover
|
||||
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:visible="
|
||||
<Popover
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
:width="220"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<template #reference>
|
||||
">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
:icon="MoreFilled"
|
||||
circle
|
||||
@click.stop></el-button>
|
||||
</template>
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
:width="180"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<div class="group-visibility-menu">
|
||||
<button
|
||||
v-for="visibility in friendGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
type="button"
|
||||
:class="[
|
||||
'group-visibility-menu__item',
|
||||
{ 'is-active': group.visibility === visibility }
|
||||
]"
|
||||
@click="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{ formatVisibility(visibility) }}</span>
|
||||
<span
|
||||
v-if="group.visibility === visibility"
|
||||
class="group-visibility-menu__check">
|
||||
<i class="ri-check-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
:width="180"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<div class="group-visibility-menu">
|
||||
<button
|
||||
v-for="visibility in friendGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
type="button"
|
||||
:class="[
|
||||
'group-visibility-menu__item',
|
||||
{ 'is-active': group.visibility === visibility }
|
||||
]"
|
||||
@click="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{ formatVisibility(visibility) }}</span>
|
||||
<span
|
||||
v-if="group.visibility === visibility"
|
||||
class="group-visibility-menu__check">
|
||||
<i class="ri-check-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -287,6 +284,7 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
||||
import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { favoriteRequest } from '../../api';
|
||||
|
||||
@@ -95,69 +95,68 @@
|
||||
<Badge variant="outline">
|
||||
{{ formatVisibility(group.visibility) }}
|
||||
</Badge>
|
||||
<el-popover
|
||||
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:visible="
|
||||
<Popover
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
:width="200"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<template #reference>
|
||||
">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
:icon="MoreFilled"
|
||||
circle
|
||||
@click.stop></el-button>
|
||||
</template>
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
trigger="hover"
|
||||
:width="200"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<div class="group-visibility-menu">
|
||||
<button
|
||||
v-for="visibility in worldGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
type="button"
|
||||
class="group-visibility-menu__item"
|
||||
:class="{ 'is-active': group.visibility === visibility }"
|
||||
@click="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{ formatVisibility(visibility) }}</span>
|
||||
<span
|
||||
v-if="group.visibility === visibility"
|
||||
class="group-visibility-menu__check"
|
||||
>✔</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
trigger="hover"
|
||||
:width="200"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<div class="group-visibility-menu">
|
||||
<button
|
||||
v-for="visibility in worldGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
type="button"
|
||||
class="group-visibility-menu__item"
|
||||
:class="{
|
||||
'is-active': group.visibility === visibility
|
||||
}"
|
||||
@click="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{ formatVisibility(visibility) }}</span>
|
||||
<span
|
||||
v-if="group.visibility === visibility"
|
||||
class="group-visibility-menu__check"
|
||||
>✔</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -210,39 +209,36 @@
|
||||
<div class="group-item__right">
|
||||
<span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
|
||||
<div class="group-item__bottom">
|
||||
<el-popover
|
||||
:visible="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:visible="
|
||||
<Popover
|
||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||
"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
:width="200"
|
||||
popper-style="padding: 4px; border-radius: 8px;">
|
||||
<template #reference>
|
||||
">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
:icon="MoreFilled"
|
||||
circle
|
||||
@click.stop></el-button>
|
||||
</template>
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
|
||||
<div class="favorites-group-menu">
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item"
|
||||
@click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -412,6 +408,7 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
||||
import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
|
||||
import { favoriteRequest, worldRequest } from '../../api';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
|
||||
Reference in New Issue
Block a user