This commit is contained in:
pa
2026-01-14 20:22:47 +09:00
committed by Natsumi
parent 939e7ad321
commit 442b1060f7
5 changed files with 207 additions and 170 deletions

View File

@@ -312,4 +312,4 @@ export const useModalStore = defineStore('Modal', () => {
setAlertOpen,
setPromptOpen
};
};);
});

View File

@@ -119,17 +119,17 @@
<Badge variant="outline">
{{ formatVisibility(group.visibility) }}
</Badge>
<Popover
<DropdownMenu
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:open="
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
">
<PopoverTrigger asChild>
<DropdownMenuTrigger asChild>
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
<MoreFilled />
</Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -137,41 +137,42 @@
@click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<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>
</DropdownMenuTrigger>
<DropdownMenuContent
side="right"
align="start"
class="w-[180px] p-1 rounded-lg">
<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>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenuSub>
<DropdownMenuSubTrigger
class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-[180px] p-1 rounded-lg">
<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>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@@ -179,8 +180,8 @@
<span>{{ t('view.favorite.clear') }}</span>
</button>
</div>
</PopoverContent>
</Popover>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</template>
@@ -238,10 +239,10 @@
<span class="group-item__count">{{
localAvatarFavGroupLength(group)
}}</span>
<Popover
<DropdownMenu
:open="activeGroupMenu === localGroupMenuKey(group)"
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
<PopoverTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
class="rounded-full"
size="icon-sm"
@@ -249,8 +250,8 @@
@click.stop
><Ellipsis
/></Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -271,8 +272,8 @@
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</button>
</div>
</PopoverContent>
</Popover>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
@@ -308,15 +309,15 @@
<div class="group-section">
<div class="group-section__header">
<span>Local History</span>
<Popover
<DropdownMenu
:open="activeGroupMenu === historyGroupMenuKey"
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
<PopoverTrigger asChild>
<DropdownMenuTrigger asChild>
<Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
><Ellipsis
/></Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-45 p-1 rounded-lg">
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-45 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -325,8 +326,8 @@
<span>{{ t('view.favorite.clear_tooltip') }}</span>
</button>
</div>
</PopoverContent>
</Popover>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div class="group-section__list">
<div
@@ -535,6 +536,17 @@
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import {
Select,
SelectContent,
@@ -543,13 +555,6 @@
SelectTrigger,
SelectValue
} from '../../components/ui/select';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import {
useAppearanceSettingsStore,
useAvatarStore,
@@ -557,7 +562,6 @@
useModalStore,
useUserStore
} from '../../stores';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
import { avatarRequest, favoriteRequest } from '../../api';
import { Badge } from '../../components/ui/badge';

View File

@@ -119,17 +119,17 @@
<Badge variant="outline">
{{ formatVisibility(group.visibility) }}
</Badge>
<Popover
<DropdownMenu
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:open="
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
">
<PopoverTrigger asChild>
<DropdownMenuTrigger asChild>
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
<MoreFilled />
</Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -137,41 +137,42 @@
@click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<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>
</DropdownMenuTrigger>
<DropdownMenuContent
side="right"
align="start"
class="w-[180px] p-1 rounded-lg">
<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>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenuSub>
<DropdownMenuSubTrigger
class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-[180px] p-1 rounded-lg">
<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>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@@ -179,8 +180,8 @@
<span>{{ t('view.favorite.clear') }}</span>
</button>
</div>
</PopoverContent>
</Popover>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</template>
@@ -319,6 +320,17 @@
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import {
Select,
SelectContent,
@@ -327,15 +339,7 @@
SelectTrigger,
SelectValue
} from '../../components/ui/select';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';

View File

@@ -119,17 +119,17 @@
<Badge variant="outline">
{{ formatVisibility(group.visibility) }}
</Badge>
<Popover
<DropdownMenu
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:open="
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
">
<PopoverTrigger asChild>
<DropdownMenuTrigger asChild>
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
<MoreFilled />
</Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -137,41 +137,39 @@
@click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<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>
</DropdownMenuTrigger>
<DropdownMenuContent
side="right"
align="start"
class="w-[200px] p-1 rounded-lg">
<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>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenuSub>
<DropdownMenuSubTrigger
class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-[200px] p-1 rounded-lg">
<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>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@@ -179,8 +177,8 @@
<span>{{ t('view.favorite.clear') }}</span>
</button>
</div>
</PopoverContent>
</Popover>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</template>
@@ -235,12 +233,12 @@
<div class="group-item__right">
<span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
<div class="group-item__bottom">
<Popover
<DropdownMenu
:open="activeGroupMenu === localGroupMenuKey(group)"
@update:open="
handleGroupMenuVisible(localGroupMenuKey(group), $event)
">
<PopoverTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
class="rounded-full"
size="icon-sm"
@@ -248,8 +246,8 @@
@click.stop
><Ellipsis
/></Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -264,8 +262,8 @@
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</button>
</div>
</PopoverContent>
</Popover>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
@@ -449,6 +447,17 @@
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import {
Select,
SelectContent,
@@ -457,15 +466,7 @@
SelectTrigger,
SelectValue
} from '../../components/ui/select';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
import { favoriteRequest, worldRequest } from '../../api';
import { Badge } from '../../components/ui/badge';

View File

@@ -6,13 +6,22 @@
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
{{ groupName }}
</div>
<Popover>
<Popover :open="eventPopoverOpen">
<PopoverTrigger as-child>
<div class="event-title-content" @click="onGroupClick">
<div
class="event-title-content"
@click="onGroupClick"
@mouseenter="openEventPopover"
@mouseleave="scheduleCloseEventPopover">
{{ event.title }}
</div>
</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="text-[13px] font-semibold">{{ event.title }}</div>
<div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
@@ -98,9 +107,9 @@
<script setup>
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { computed } from 'vue';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -140,6 +149,8 @@
const showGroupName = computed(() => props.mode === 'timeline');
const timeClass = computed(() => (props.mode === 'grid' ? 'event-time' : ''));
const eventPopoverOpen = ref(false);
let eventPopoverCloseTimer = null;
const bannerUrl = computed(() => {
if (!props.event) return '';
@@ -222,6 +233,23 @@
const onGroupClick = () => {
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>
<style scoped>