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
+1 -1
View File
@@ -312,4 +312,4 @@ export const useModalStore = defineStore('Modal', () => {
setAlertOpen, setAlertOpen,
setPromptOpen setPromptOpen
}; };
};); });
+41 -37
View File
@@ -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,16 +137,13 @@
@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
type="button"
class="favorites-group-menu__item favorites-group-menu__item--submenu"> class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span> <span>{{ t('view.favorite.visibility_tooltip') }}</span>
<span class="favorites-group-menu__arrow"></span> </DropdownMenuSubTrigger>
</button> <DropdownMenuPortal>
</DropdownMenuTrigger> <DropdownMenuSubContent
<DropdownMenuContent
side="right" side="right"
align="start" align="start"
class="w-[180px] p-1 rounded-lg"> class="w-[180px] p-1 rounded-lg">
@@ -157,7 +154,10 @@
type="button" type="button"
:class="[ :class="[
'group-visibility-menu__item', 'group-visibility-menu__item',
{ 'is-active': group.visibility === visibility } {
'is-active':
group.visibility === visibility
}
]" ]"
@click=" @click="
handleVisibilitySelection(group, visibility) handleVisibilitySelection(group, visibility)
@@ -170,8 +170,9 @@
</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';
+29 -25
View File
@@ -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,16 +137,13 @@
@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
type="button"
class="favorites-group-menu__item favorites-group-menu__item--submenu"> class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span> <span>{{ t('view.favorite.visibility_tooltip') }}</span>
<span class="favorites-group-menu__arrow"></span> </DropdownMenuSubTrigger>
</button> <DropdownMenuPortal>
</DropdownMenuTrigger> <DropdownMenuSubContent
<DropdownMenuContent
side="right" side="right"
align="start" align="start"
class="w-[180px] p-1 rounded-lg"> class="w-[180px] p-1 rounded-lg">
@@ -157,7 +154,10 @@
type="button" type="button"
:class="[ :class="[
'group-visibility-menu__item', 'group-visibility-menu__item',
{ 'is-active': group.visibility === visibility } {
'is-active':
group.visibility === visibility
}
]" ]"
@click=" @click="
handleVisibilitySelection(group, visibility) handleVisibilitySelection(group, visibility)
@@ -170,8 +170,9 @@
</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';
+31 -30
View File
@@ -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,16 +137,13 @@
@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
type="button"
class="favorites-group-menu__item favorites-group-menu__item--submenu"> class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span> <span>{{ t('view.favorite.visibility_tooltip') }}</span>
<span class="favorites-group-menu__arrow"></span> </DropdownMenuSubTrigger>
</button> <DropdownMenuPortal>
</DropdownMenuTrigger> <DropdownMenuSubContent
<DropdownMenuContent
side="right" side="right"
align="start" align="start"
class="w-[200px] p-1 rounded-lg"> class="w-[200px] p-1 rounded-lg">
@@ -170,8 +167,9 @@
> >
</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 +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>