mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 14:53:50 +02:00
fix
This commit is contained in:
@@ -312,4 +312,4 @@ export const useModalStore = defineStore('Modal', () => {
|
|||||||
setAlertOpen,
|
setAlertOpen,
|
||||||
setPromptOpen
|
setPromptOpen
|
||||||
};
|
};
|
||||||
};);
|
});
|
||||||
|
|||||||
@@ -119,17 +119,17 @@
|
|||||||
<Badge variant="outline">
|
<Badge variant="outline">
|
||||||
{{ formatVisibility(group.visibility) }}
|
{{ formatVisibility(group.visibility) }}
|
||||||
</Badge>
|
</Badge>
|
||||||
<Popover
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||||
@update:open="
|
@update:open="
|
||||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||||
">
|
">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
||||||
<MoreFilled />
|
<MoreFilled />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</DropdownMenuTrigger>
|
||||||
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
|
<DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
|
||||||
<div class="favorites-group-menu">
|
<div class="favorites-group-menu">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -137,41 +137,42 @@
|
|||||||
@click="handleRemoteRename(group)">
|
@click="handleRemoteRename(group)">
|
||||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<DropdownMenu>
|
<DropdownMenuSub>
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuSubTrigger
|
||||||
<button
|
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||||
type="button"
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
</DropdownMenuSubTrigger>
|
||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<DropdownMenuPortal>
|
||||||
<span class="favorites-group-menu__arrow">›</span>
|
<DropdownMenuSubContent
|
||||||
</button>
|
side="right"
|
||||||
</DropdownMenuTrigger>
|
align="start"
|
||||||
<DropdownMenuContent
|
class="w-[180px] p-1 rounded-lg">
|
||||||
side="right"
|
<div class="group-visibility-menu">
|
||||||
align="start"
|
<button
|
||||||
class="w-[180px] p-1 rounded-lg">
|
v-for="visibility in avatarGroupVisibilityOptions"
|
||||||
<div class="group-visibility-menu">
|
:key="visibility"
|
||||||
<button
|
type="button"
|
||||||
v-for="visibility in avatarGroupVisibilityOptions"
|
:class="[
|
||||||
:key="visibility"
|
'group-visibility-menu__item',
|
||||||
type="button"
|
{
|
||||||
:class="[
|
'is-active':
|
||||||
'group-visibility-menu__item',
|
group.visibility === visibility
|
||||||
{ 'is-active': group.visibility === visibility }
|
}
|
||||||
]"
|
]"
|
||||||
@click="
|
@click="
|
||||||
handleVisibilitySelection(group, visibility)
|
handleVisibilitySelection(group, visibility)
|
||||||
">
|
">
|
||||||
<span>{{ formatVisibility(visibility) }}</span>
|
<span>{{ formatVisibility(visibility) }}</span>
|
||||||
<span
|
<span
|
||||||
v-if="group.visibility === visibility"
|
v-if="group.visibility === visibility"
|
||||||
class="group-visibility-menu__check">
|
class="group-visibility-menu__check">
|
||||||
<i class="ri-check-line"></i>
|
<i class="ri-check-line"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuSubContent>
|
||||||
</DropdownMenu>
|
</DropdownMenuPortal>
|
||||||
|
</DropdownMenuSub>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||||
@@ -179,8 +180,8 @@
|
|||||||
<span>{{ t('view.favorite.clear') }}</span>
|
<span>{{ t('view.favorite.clear') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</DropdownMenuContent>
|
||||||
</Popover>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -238,10 +239,10 @@
|
|||||||
<span class="group-item__count">{{
|
<span class="group-item__count">{{
|
||||||
localAvatarFavGroupLength(group)
|
localAvatarFavGroupLength(group)
|
||||||
}}</span>
|
}}</span>
|
||||||
<Popover
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||||
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
|
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
class="rounded-full"
|
class="rounded-full"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
@@ -249,8 +250,8 @@
|
|||||||
@click.stop
|
@click.stop
|
||||||
><Ellipsis
|
><Ellipsis
|
||||||
/></Button>
|
/></Button>
|
||||||
</PopoverTrigger>
|
</DropdownMenuTrigger>
|
||||||
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
|
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
|
||||||
<div class="favorites-group-menu">
|
<div class="favorites-group-menu">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -271,8 +272,8 @@
|
|||||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</DropdownMenuContent>
|
||||||
</Popover>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -308,15 +309,15 @@
|
|||||||
<div class="group-section">
|
<div class="group-section">
|
||||||
<div class="group-section__header">
|
<div class="group-section__header">
|
||||||
<span>Local History</span>
|
<span>Local History</span>
|
||||||
<Popover
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === historyGroupMenuKey"
|
:open="activeGroupMenu === historyGroupMenuKey"
|
||||||
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
|
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
|
<Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
|
||||||
><Ellipsis
|
><Ellipsis
|
||||||
/></Button>
|
/></Button>
|
||||||
</PopoverTrigger>
|
</DropdownMenuTrigger>
|
||||||
<PopoverContent side="right" class="w-45 p-1 rounded-lg">
|
<DropdownMenuContent side="right" class="w-45 p-1 rounded-lg">
|
||||||
<div class="favorites-group-menu">
|
<div class="favorites-group-menu">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -325,8 +326,8 @@
|
|||||||
<span>{{ t('view.favorite.clear_tooltip') }}</span>
|
<span>{{ t('view.favorite.clear_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</DropdownMenuContent>
|
||||||
</Popover>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
<div class="group-section__list">
|
<div class="group-section__list">
|
||||||
<div
|
<div
|
||||||
@@ -535,6 +536,17 @@
|
|||||||
import { toast } from 'vue-sonner';
|
import { toast } from 'vue-sonner';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from '../../components/ui/dropdown-menu';
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -543,13 +555,6 @@
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue
|
SelectValue
|
||||||
} from '../../components/ui/select';
|
} from '../../components/ui/select';
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger
|
|
||||||
} from '../../components/ui/dropdown-menu';
|
|
||||||
import {
|
import {
|
||||||
useAppearanceSettingsStore,
|
useAppearanceSettingsStore,
|
||||||
useAvatarStore,
|
useAvatarStore,
|
||||||
@@ -557,7 +562,6 @@
|
|||||||
useModalStore,
|
useModalStore,
|
||||||
useUserStore
|
useUserStore
|
||||||
} from '../../stores';
|
} from '../../stores';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
|
||||||
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
||||||
import { avatarRequest, favoriteRequest } from '../../api';
|
import { avatarRequest, favoriteRequest } from '../../api';
|
||||||
import { Badge } from '../../components/ui/badge';
|
import { Badge } from '../../components/ui/badge';
|
||||||
|
|||||||
@@ -119,17 +119,17 @@
|
|||||||
<Badge variant="outline">
|
<Badge variant="outline">
|
||||||
{{ formatVisibility(group.visibility) }}
|
{{ formatVisibility(group.visibility) }}
|
||||||
</Badge>
|
</Badge>
|
||||||
<Popover
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||||
@update:open="
|
@update:open="
|
||||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||||
">
|
">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
||||||
<MoreFilled />
|
<MoreFilled />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</DropdownMenuTrigger>
|
||||||
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
|
<DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
|
||||||
<div class="favorites-group-menu">
|
<div class="favorites-group-menu">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -137,41 +137,42 @@
|
|||||||
@click="handleRemoteRename(group)">
|
@click="handleRemoteRename(group)">
|
||||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<DropdownMenu>
|
<DropdownMenuSub>
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuSubTrigger
|
||||||
<button
|
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||||
type="button"
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
</DropdownMenuSubTrigger>
|
||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<DropdownMenuPortal>
|
||||||
<span class="favorites-group-menu__arrow">›</span>
|
<DropdownMenuSubContent
|
||||||
</button>
|
side="right"
|
||||||
</DropdownMenuTrigger>
|
align="start"
|
||||||
<DropdownMenuContent
|
class="w-[180px] p-1 rounded-lg">
|
||||||
side="right"
|
<div class="group-visibility-menu">
|
||||||
align="start"
|
<button
|
||||||
class="w-[180px] p-1 rounded-lg">
|
v-for="visibility in friendGroupVisibilityOptions"
|
||||||
<div class="group-visibility-menu">
|
:key="visibility"
|
||||||
<button
|
type="button"
|
||||||
v-for="visibility in friendGroupVisibilityOptions"
|
:class="[
|
||||||
:key="visibility"
|
'group-visibility-menu__item',
|
||||||
type="button"
|
{
|
||||||
:class="[
|
'is-active':
|
||||||
'group-visibility-menu__item',
|
group.visibility === visibility
|
||||||
{ 'is-active': group.visibility === visibility }
|
}
|
||||||
]"
|
]"
|
||||||
@click="
|
@click="
|
||||||
handleVisibilitySelection(group, visibility)
|
handleVisibilitySelection(group, visibility)
|
||||||
">
|
">
|
||||||
<span>{{ formatVisibility(visibility) }}</span>
|
<span>{{ formatVisibility(visibility) }}</span>
|
||||||
<span
|
<span
|
||||||
v-if="group.visibility === visibility"
|
v-if="group.visibility === visibility"
|
||||||
class="group-visibility-menu__check">
|
class="group-visibility-menu__check">
|
||||||
<i class="ri-check-line"></i>
|
<i class="ri-check-line"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuSubContent>
|
||||||
</DropdownMenu>
|
</DropdownMenuPortal>
|
||||||
|
</DropdownMenuSub>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||||
@@ -179,8 +180,8 @@
|
|||||||
<span>{{ t('view.favorite.clear') }}</span>
|
<span>{{ t('view.favorite.clear') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</DropdownMenuContent>
|
||||||
</Popover>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -319,6 +320,17 @@
|
|||||||
import { toast } from 'vue-sonner';
|
import { toast } from 'vue-sonner';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from '../../components/ui/dropdown-menu';
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -327,15 +339,7 @@
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue
|
SelectValue
|
||||||
} from '../../components/ui/select';
|
} from '../../components/ui/select';
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger
|
|
||||||
} from '../../components/ui/dropdown-menu';
|
|
||||||
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
|
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
|
||||||
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
||||||
import { Badge } from '../../components/ui/badge';
|
import { Badge } from '../../components/ui/badge';
|
||||||
import { Slider } from '../../components/ui/slider';
|
import { Slider } from '../../components/ui/slider';
|
||||||
|
|||||||
@@ -119,17 +119,17 @@
|
|||||||
<Badge variant="outline">
|
<Badge variant="outline">
|
||||||
{{ formatVisibility(group.visibility) }}
|
{{ formatVisibility(group.visibility) }}
|
||||||
</Badge>
|
</Badge>
|
||||||
<Popover
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||||
@update:open="
|
@update:open="
|
||||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||||
">
|
">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
||||||
<MoreFilled />
|
<MoreFilled />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</DropdownMenuTrigger>
|
||||||
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
|
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
|
||||||
<div class="favorites-group-menu">
|
<div class="favorites-group-menu">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -137,41 +137,39 @@
|
|||||||
@click="handleRemoteRename(group)">
|
@click="handleRemoteRename(group)">
|
||||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<DropdownMenu>
|
<DropdownMenuSub>
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuSubTrigger
|
||||||
<button
|
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||||
type="button"
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
</DropdownMenuSubTrigger>
|
||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<DropdownMenuPortal>
|
||||||
<span class="favorites-group-menu__arrow">›</span>
|
<DropdownMenuSubContent
|
||||||
</button>
|
side="right"
|
||||||
</DropdownMenuTrigger>
|
align="start"
|
||||||
<DropdownMenuContent
|
class="w-[200px] p-1 rounded-lg">
|
||||||
side="right"
|
<div class="group-visibility-menu">
|
||||||
align="start"
|
<button
|
||||||
class="w-[200px] p-1 rounded-lg">
|
v-for="visibility in worldGroupVisibilityOptions"
|
||||||
<div class="group-visibility-menu">
|
:key="visibility"
|
||||||
<button
|
type="button"
|
||||||
v-for="visibility in worldGroupVisibilityOptions"
|
class="group-visibility-menu__item"
|
||||||
:key="visibility"
|
:class="{
|
||||||
type="button"
|
'is-active': group.visibility === visibility
|
||||||
class="group-visibility-menu__item"
|
}"
|
||||||
:class="{
|
@click="
|
||||||
'is-active': group.visibility === visibility
|
handleVisibilitySelection(group, visibility)
|
||||||
}"
|
">
|
||||||
@click="
|
<span>{{ formatVisibility(visibility) }}</span>
|
||||||
handleVisibilitySelection(group, visibility)
|
<span
|
||||||
">
|
v-if="group.visibility === visibility"
|
||||||
<span>{{ formatVisibility(visibility) }}</span>
|
class="group-visibility-menu__check"
|
||||||
<span
|
>✔</span
|
||||||
v-if="group.visibility === visibility"
|
>
|
||||||
class="group-visibility-menu__check"
|
</button>
|
||||||
>✔</span
|
</div>
|
||||||
>
|
</DropdownMenuSubContent>
|
||||||
</button>
|
</DropdownMenuPortal>
|
||||||
</div>
|
</DropdownMenuSub>
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||||
@@ -179,8 +177,8 @@
|
|||||||
<span>{{ t('view.favorite.clear') }}</span>
|
<span>{{ t('view.favorite.clear') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</DropdownMenuContent>
|
||||||
</Popover>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -235,12 +233,12 @@
|
|||||||
<div class="group-item__right">
|
<div class="group-item__right">
|
||||||
<span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
|
<span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
|
||||||
<div class="group-item__bottom">
|
<div class="group-item__bottom">
|
||||||
<Popover
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||||
@update:open="
|
@update:open="
|
||||||
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||||
">
|
">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
class="rounded-full"
|
class="rounded-full"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
@@ -248,8 +246,8 @@
|
|||||||
@click.stop
|
@click.stop
|
||||||
><Ellipsis
|
><Ellipsis
|
||||||
/></Button>
|
/></Button>
|
||||||
</PopoverTrigger>
|
</DropdownMenuTrigger>
|
||||||
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
|
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
|
||||||
<div class="favorites-group-menu">
|
<div class="favorites-group-menu">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -264,8 +262,8 @@
|
|||||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</DropdownMenuContent>
|
||||||
</Popover>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -449,6 +447,17 @@
|
|||||||
import { toast } from 'vue-sonner';
|
import { toast } from 'vue-sonner';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from '../../components/ui/dropdown-menu';
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -457,15 +466,7 @@
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue
|
SelectValue
|
||||||
} from '../../components/ui/select';
|
} from '../../components/ui/select';
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger
|
|
||||||
} from '../../components/ui/dropdown-menu';
|
|
||||||
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
|
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
|
||||||
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
||||||
import { favoriteRequest, worldRequest } from '../../api';
|
import { favoriteRequest, worldRequest } from '../../api';
|
||||||
import { Badge } from '../../components/ui/badge';
|
import { Badge } from '../../components/ui/badge';
|
||||||
|
|||||||
@@ -6,13 +6,22 @@
|
|||||||
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
||||||
{{ groupName }}
|
{{ groupName }}
|
||||||
</div>
|
</div>
|
||||||
<Popover>
|
<Popover :open="eventPopoverOpen">
|
||||||
<PopoverTrigger as-child>
|
<PopoverTrigger as-child>
|
||||||
<div class="event-title-content" @click="onGroupClick">
|
<div
|
||||||
|
class="event-title-content"
|
||||||
|
@click="onGroupClick"
|
||||||
|
@mouseenter="openEventPopover"
|
||||||
|
@mouseleave="scheduleCloseEventPopover">
|
||||||
{{ event.title }}
|
{{ event.title }}
|
||||||
</div>
|
</div>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent side="right" align="start" class="w-[500px] p-3">
|
<PopoverContent
|
||||||
|
side="right"
|
||||||
|
align="start"
|
||||||
|
class="w-[500px] p-3"
|
||||||
|
@mouseenter="openEventPopover"
|
||||||
|
@mouseleave="scheduleCloseEventPopover">
|
||||||
<div class="flex items-baseline justify-between gap-3 text-xs">
|
<div class="flex items-baseline justify-between gap-3 text-xs">
|
||||||
<div class="text-[13px] font-semibold">{{ event.title }}</div>
|
<div class="text-[13px] font-semibold">{{ event.title }}</div>
|
||||||
<div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
|
<div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
|
||||||
@@ -98,9 +107,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
|
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
import { computed } from 'vue';
|
|
||||||
import { toast } from 'vue-sonner';
|
import { toast } from 'vue-sonner';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
@@ -140,6 +149,8 @@
|
|||||||
const showGroupName = computed(() => props.mode === 'timeline');
|
const showGroupName = computed(() => props.mode === 'timeline');
|
||||||
|
|
||||||
const timeClass = computed(() => (props.mode === 'grid' ? 'event-time' : ''));
|
const timeClass = computed(() => (props.mode === 'grid' ? 'event-time' : ''));
|
||||||
|
const eventPopoverOpen = ref(false);
|
||||||
|
let eventPopoverCloseTimer = null;
|
||||||
|
|
||||||
const bannerUrl = computed(() => {
|
const bannerUrl = computed(() => {
|
||||||
if (!props.event) return '';
|
if (!props.event) return '';
|
||||||
@@ -222,6 +233,23 @@
|
|||||||
const onGroupClick = () => {
|
const onGroupClick = () => {
|
||||||
emit('click-action');
|
emit('click-action');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const openEventPopover = () => {
|
||||||
|
if (eventPopoverCloseTimer) {
|
||||||
|
clearTimeout(eventPopoverCloseTimer);
|
||||||
|
eventPopoverCloseTimer = null;
|
||||||
|
}
|
||||||
|
eventPopoverOpen.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const scheduleCloseEventPopover = () => {
|
||||||
|
if (eventPopoverCloseTimer) {
|
||||||
|
clearTimeout(eventPopoverCloseTimer);
|
||||||
|
}
|
||||||
|
eventPopoverCloseTimer = setTimeout(() => {
|
||||||
|
eventPopoverOpen.value = false;
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user