mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-10 18:33:51 +02:00
replace clickable el-popover with Popover components
This commit is contained in:
pa
Natsumi
@@ -1,52 +1,56 @@
|
||||
<template>
|
||||
<el-popover v-model:visible="visible" trigger="click" placement="bottom-start" :width="620">
|
||||
<template #reference>
|
||||
<Popover v-model:open="visible">
|
||||
<PopoverTrigger asChild>
|
||||
<el-button class="icon-picker__trigger" plain>
|
||||
<i v-if="modelValue" :class="modelValue"></i>
|
||||
<span>{{ t('nav_menu.icon_picker.pick_icon') }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
<div class="icon-picker">
|
||||
<el-input
|
||||
v-model="search"
|
||||
clearable
|
||||
class="icon-picker__search"
|
||||
:placeholder="t('nav_menu.icon_picker.search_placeholder')" />
|
||||
<el-scrollbar v-if="filteredCategories.length" height="600px" class="icon-picker__scroll">
|
||||
<div v-for="category in filteredCategories" :key="category.name" class="icon-picker__category">
|
||||
<div class="icon-picker__category-title">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
<div class="icon-picker__grid">
|
||||
<div v-for="group in category.groups" :key="group.id" class="icon-picker__group">
|
||||
<div class="icon-picker__group-label">
|
||||
{{ group.label }}
|
||||
</div>
|
||||
<div class="icon-picker__variants">
|
||||
<button
|
||||
v-for="variant in group.variants"
|
||||
:key="variant.className"
|
||||
type="button"
|
||||
class="icon-picker__variant"
|
||||
:class="{ 'is-active': variant.className === modelValue }"
|
||||
:title="group.tooltip"
|
||||
@click="handleSelect(variant.className)">
|
||||
<i :class="[variant.className, 'ri-2x']"></i>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" align="start" class="w-[620px]">
|
||||
<div class="icon-picker">
|
||||
<el-input
|
||||
v-model="search"
|
||||
clearable
|
||||
class="icon-picker__search"
|
||||
:placeholder="t('nav_menu.icon_picker.search_placeholder')" />
|
||||
<el-scrollbar v-if="filteredCategories.length" height="600px" class="icon-picker__scroll">
|
||||
<div v-for="category in filteredCategories" :key="category.name" class="icon-picker__category">
|
||||
<div class="icon-picker__category-title">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
<div class="icon-picker__grid">
|
||||
<div v-for="group in category.groups" :key="group.id" class="icon-picker__group">
|
||||
<div class="icon-picker__group-label">
|
||||
{{ group.label }}
|
||||
</div>
|
||||
<div class="icon-picker__variants">
|
||||
<button
|
||||
v-for="variant in group.variants"
|
||||
:key="variant.className"
|
||||
type="button"
|
||||
class="icon-picker__variant"
|
||||
:class="{ 'is-active': variant.className === modelValue }"
|
||||
:title="group.tooltip"
|
||||
@click="handleSelect(variant.className)">
|
||||
<i :class="[variant.className, 'ri-2x']"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div v-else class="icon-picker__empty">{{ t('nav_menu.icon_picker.no_icon_found') }}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-scrollbar>
|
||||
<div v-else class="icon-picker__empty">{{ t('nav_menu.icon_picker.no_icon_found') }}</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
|
||||
|
||||
import remixIconTags from '../shared/constants/remixIconTags.json';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -182,8 +182,8 @@
|
||||
<span v-if="badge.hidden"> (Hidden)</span>
|
||||
</template>
|
||||
<div style="display: inline-block">
|
||||
<el-popover placement="bottom" :width="300" trigger="click">
|
||||
<template #reference>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<img
|
||||
class="x-link x-user-badge"
|
||||
:src="badge.badgeImageUrl"
|
||||
@@ -198,40 +198,44 @@
|
||||
"
|
||||
:class="{ 'x-user-badge-hidden': badge.hidden }"
|
||||
loading="lazy" />
|
||||
</template>
|
||||
<img
|
||||
:src="badge.badgeImageUrl"
|
||||
:class="['x-link', 'x-popover-image']"
|
||||
@click="showFullscreenImageDialog(badge.badgeImageUrl)"
|
||||
loading="lazy" />
|
||||
<br />
|
||||
<div style="display: block; width: 275px; word-break: normal">
|
||||
<span>{{ badge.badgeName }}</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" class="w-[300px]">
|
||||
<img
|
||||
:src="badge.badgeImageUrl"
|
||||
:class="['x-link', 'x-popover-image']"
|
||||
@click="showFullscreenImageDialog(badge.badgeImageUrl)"
|
||||
loading="lazy" />
|
||||
<br />
|
||||
<span class="x-grey" style="font-size: 12px">{{ badge.badgeDescription }}</span>
|
||||
<br />
|
||||
<span
|
||||
v-if="badge.assignedAt"
|
||||
class="x-grey"
|
||||
style="font-family: monospace; font-size: 12px">
|
||||
{{ t('dialog.user.badges.assigned') }}:
|
||||
{{ formatDateFilter(badge.assignedAt, 'long') }}
|
||||
</span>
|
||||
<template v-if="userDialog.id === currentUser.id">
|
||||
<div style="display: block; width: 275px; word-break: normal">
|
||||
<span>{{ badge.badgeName }}</span>
|
||||
<br />
|
||||
<el-checkbox
|
||||
v-model="badge.hidden"
|
||||
style="margin-top: 5px"
|
||||
@change="toggleBadgeVisibility(badge)">
|
||||
{{ t('dialog.user.badges.hidden') }}
|
||||
</el-checkbox>
|
||||
<span class="x-grey" style="font-size: 12px">{{ badge.badgeDescription }}</span>
|
||||
<br />
|
||||
<el-checkbox v-model="badge.showcased" @change="toggleBadgeShowcased(badge)">
|
||||
{{ t('dialog.user.badges.showcased') }}
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</div>
|
||||
</el-popover>
|
||||
<span
|
||||
v-if="badge.assignedAt"
|
||||
class="x-grey"
|
||||
style="font-family: monospace; font-size: 12px">
|
||||
{{ t('dialog.user.badges.assigned') }}:
|
||||
{{ formatDateFilter(badge.assignedAt, 'long') }}
|
||||
</span>
|
||||
<template v-if="userDialog.id === currentUser.id">
|
||||
<br />
|
||||
<el-checkbox
|
||||
v-model="badge.hidden"
|
||||
style="margin-top: 5px"
|
||||
@change="toggleBadgeVisibility(badge)">
|
||||
{{ t('dialog.user.badges.hidden') }}
|
||||
</el-checkbox>
|
||||
<br />
|
||||
<el-checkbox
|
||||
v-model="badge.showcased"
|
||||
@change="toggleBadgeShowcased(badge)">
|
||||
{{ t('dialog.user.badges.showcased') }}
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
@@ -260,6 +264,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { formatDateFilter, languageClass, userImage, userStatusClass } from '../../../shared/utils';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
|
||||
import { useGalleryStore, useUserStore } from '../../../stores';
|
||||
import { Badge } from '../../ui/badge';
|
||||
|
||||
|
||||
18
src/components/ui/popover/Popover.vue
Normal file
18
src/components/ui/popover/Popover.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
|
||||
|
||||
const props = defineProps({
|
||||
defaultOpen: { type: Boolean, required: false },
|
||||
open: { type: Boolean, required: false },
|
||||
modal: { type: Boolean, required: false }
|
||||
});
|
||||
const emits = defineEmits(['update:open']);
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
|
||||
<slot v-bind="slotProps" />
|
||||
</PopoverRoot>
|
||||
</template>
|
||||
15
src/components/ui/popover/PopoverAnchor.vue
Normal file
15
src/components/ui/popover/PopoverAnchor.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup>
|
||||
import { PopoverAnchor } from 'reka-ui';
|
||||
|
||||
const props = defineProps({
|
||||
reference: { type: null, required: false },
|
||||
asChild: { type: Boolean, required: false },
|
||||
as: { type: null, required: false }
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverAnchor data-slot="popover-anchor" v-bind="props">
|
||||
<slot />
|
||||
</PopoverAnchor>
|
||||
</template>
|
||||
62
src/components/ui/popover/PopoverContent.vue
Normal file
62
src/components/ui/popover/PopoverContent.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { reactiveOmit } from '@vueuse/core';
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
forceMount: { type: Boolean, required: false },
|
||||
side: { type: null, required: false },
|
||||
sideOffset: { type: Number, required: false, default: 4 },
|
||||
sideFlip: { type: Boolean, required: false },
|
||||
align: { type: null, required: false, default: 'center' },
|
||||
alignOffset: { type: Number, required: false },
|
||||
alignFlip: { type: Boolean, required: false },
|
||||
avoidCollisions: { type: Boolean, required: false },
|
||||
collisionBoundary: { type: null, required: false },
|
||||
collisionPadding: { type: [Number, Object], required: false },
|
||||
arrowPadding: { type: Number, required: false },
|
||||
sticky: { type: String, required: false },
|
||||
hideWhenDetached: { type: Boolean, required: false },
|
||||
positionStrategy: { type: String, required: false },
|
||||
updatePositionStrategy: { type: String, required: false },
|
||||
disableUpdateOnLayoutShift: { type: Boolean, required: false },
|
||||
prioritizePosition: { type: Boolean, required: false },
|
||||
reference: { type: null, required: false },
|
||||
asChild: { type: Boolean, required: false },
|
||||
as: { type: null, required: false },
|
||||
disableOutsidePointerEvents: { type: Boolean, required: false },
|
||||
class: { type: null, required: false }
|
||||
});
|
||||
const emits = defineEmits([
|
||||
'escapeKeyDown',
|
||||
'pointerDownOutside',
|
||||
'focusOutside',
|
||||
'interactOutside',
|
||||
'openAutoFocus',
|
||||
'closeAutoFocus'
|
||||
]);
|
||||
|
||||
const delegatedProps = reactiveOmit(props, 'class');
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverPortal>
|
||||
<PopoverContent
|
||||
data-slot="popover-content"
|
||||
v-bind="{ ...$attrs, ...forwarded }"
|
||||
:class="
|
||||
cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
|
||||
props.class
|
||||
)
|
||||
">
|
||||
<slot />
|
||||
</PopoverContent>
|
||||
</PopoverPortal>
|
||||
</template>
|
||||
20
src/components/ui/popover/PopoverTrigger.vue
Normal file
20
src/components/ui/popover/PopoverTrigger.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
import { PopoverTrigger } from 'reka-ui';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
asChild: { type: Boolean, required: false },
|
||||
as: { type: null, required: false }
|
||||
});
|
||||
|
||||
const forwarded = computed(() => ({
|
||||
...props,
|
||||
as: props.as ?? (props.asChild ? 'span' : 'button')
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverTrigger data-slot="popover-trigger" v-bind="forwarded">
|
||||
<slot />
|
||||
</PopoverTrigger>
|
||||
</template>
|
||||
4
src/components/ui/popover/index.js
Normal file
4
src/components/ui/popover/index.js
Normal file
@@ -0,0 +1,4 @@
|
||||
export { default as Popover } from './Popover.vue';
|
||||
export { default as PopoverAnchor } from './PopoverAnchor.vue';
|
||||
export { default as PopoverContent } from './PopoverContent.vue';
|
||||
export { default as PopoverTrigger } from './PopoverTrigger.vue';
|
||||
@@ -25,53 +25,58 @@
|
||||
><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
|
||||
></TooltipWrapper>
|
||||
|
||||
<el-popover placement="bottom" trigger="click" :width="250">
|
||||
<div class="settings">
|
||||
<div>
|
||||
<span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
|
||||
<div>
|
||||
<el-slider
|
||||
v-model.lazy="barWidth"
|
||||
:max="50"
|
||||
:min="1"
|
||||
@change="
|
||||
(value) => changeBarWidth(value, () => handleEchartsRerender())
|
||||
"></el-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
|
||||
<el-switch
|
||||
v-model="isDetailVisible"
|
||||
@change="(value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-if="isDetailVisible">
|
||||
<span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
|
||||
<el-switch
|
||||
v-model="isSoloInstanceVisible"
|
||||
@change="(value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-if="isDetailVisible">
|
||||
<span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
|
||||
<el-switch
|
||||
v-model="isNoFriendInstanceVisible"
|
||||
@change="
|
||||
(value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
|
||||
">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #reference>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<div>
|
||||
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
|
||||
<el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" class="w-[250px]">
|
||||
<div class="settings">
|
||||
<div>
|
||||
<span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
|
||||
<div>
|
||||
<el-slider
|
||||
v-model.lazy="barWidth"
|
||||
:max="50"
|
||||
:min="1"
|
||||
@change="
|
||||
(value) => changeBarWidth(value, () => handleEchartsRerender())
|
||||
"></el-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
|
||||
<el-switch
|
||||
v-model="isDetailVisible"
|
||||
@change="
|
||||
(value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())
|
||||
">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-if="isDetailVisible">
|
||||
<span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
|
||||
<el-switch
|
||||
v-model="isSoloInstanceVisible"
|
||||
@change="
|
||||
(value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())
|
||||
">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-if="isDetailVisible">
|
||||
<span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
|
||||
<el-switch
|
||||
v-model="isNoFriendInstanceVisible"
|
||||
@change="
|
||||
(value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
|
||||
">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<el-button-group style="margin-right: 5px">
|
||||
<TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
|
||||
<el-button
|
||||
@@ -124,13 +129,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
|
||||
import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
|
||||
import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
|
||||
import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
|
||||
import { parseLocation, timeToText } from '../../../shared/utils';
|
||||
import { useActivityDataProcessor } from '../composables/useActivityDataProcessor';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
:prefix-icon="Search"
|
||||
clearable
|
||||
placeholder="Search Friend"></el-input>
|
||||
<el-popover placement="bottom" trigger="click" :width="350">
|
||||
<template #reference>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<div>
|
||||
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
|
||||
<el-button style="margin-right: 5px" circle
|
||||
@@ -18,40 +18,42 @@
|
||||
></el-button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</template>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span class="friend-view__settings-label">{{
|
||||
t('view.friends_locations.separate_same_instance_friends')
|
||||
}}</span>
|
||||
<el-switch v-model="showSameInstance" />
|
||||
</div>
|
||||
<div class="friend-view__settings-row">
|
||||
<span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
|
||||
<div class="friend-view__scale-control">
|
||||
<span class="friend-view__scale-value">{{ cardScalePercentLabel }} </span>
|
||||
<el-slider
|
||||
v-model="cardScale"
|
||||
class="friend-view__slider"
|
||||
:min="0.5"
|
||||
:max="1.0"
|
||||
:step="0.01"
|
||||
:show-tooltip="false" />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" class="w-[350px]">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span class="friend-view__settings-label">{{
|
||||
t('view.friends_locations.separate_same_instance_friends')
|
||||
}}</span>
|
||||
<el-switch v-model="showSameInstance" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="friend-view__settings-row">
|
||||
<span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
|
||||
<div class="friend-view__scale-control">
|
||||
<span class="friend-view__scale-value">{{ cardSpacingPercentLabel }} </span>
|
||||
<el-slider
|
||||
v-model="cardSpacing"
|
||||
class="friend-view__slider"
|
||||
:min="0.25"
|
||||
:max="1.0"
|
||||
:step="0.05"
|
||||
:show-tooltip="false" />
|
||||
<div class="friend-view__settings-row">
|
||||
<span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
|
||||
<div class="friend-view__scale-control">
|
||||
<span class="friend-view__scale-value">{{ cardScalePercentLabel }} </span>
|
||||
<el-slider
|
||||
v-model="cardScale"
|
||||
class="friend-view__slider"
|
||||
:min="0.5"
|
||||
:max="1.0"
|
||||
:step="0.01"
|
||||
:show-tooltip="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="friend-view__settings-row">
|
||||
<span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
|
||||
<div class="friend-view__scale-control">
|
||||
<span class="friend-view__scale-value">{{ cardSpacingPercentLabel }} </span>
|
||||
<el-slider
|
||||
v-model="cardSpacing"
|
||||
class="friend-view__slider"
|
||||
:min="0.25"
|
||||
:max="1.0"
|
||||
:step="0.05"
|
||||
:show-tooltip="false" />
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="friend-view__toolbar friend-view__toolbar--loading">
|
||||
@@ -167,6 +169,7 @@
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
||||
import { getFriendsLocations } from '../../shared/utils/location.js';
|
||||
import { useFriendStore } from '../../stores';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user