fix reddot

This commit is contained in:
pa
2026-01-19 21:40:36 +09:00
committed by Natsumi
parent da9cb3dab6
commit a07ae7941f
4 changed files with 26 additions and 14 deletions
+24 -9
View File
@@ -9,7 +9,6 @@
<SidebarMenuButton <SidebarMenuButton
:is-active="activeMenuIndex === item.index" :is-active="activeMenuIndex === item.index"
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')" :tooltip="item.titleIsCustom ? item.title : t(item.title || '')"
:class="isNavItemNotified(item) ? 'notify' : undefined"
@click="handleMenuItemClick(item)"> @click="handleMenuItemClick(item)">
<i <i
:class="item.icon" :class="item.icon"
@@ -17,6 +16,7 @@
<span v-show="!isCollapsed">{{ <span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '') item.titleIsCustom ? item.title : t(item.title || '')
}}</span> }}</span>
<span v-if="isNavItemNotified(item)" class="notify-dot" aria-hidden="true"></span>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
@@ -28,14 +28,17 @@
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<SidebarMenuButton <SidebarMenuButton
:is-active="item.children?.some((e) => e.index === activeMenuIndex)" :is-active="item.children?.some((e) => e.index === activeMenuIndex)"
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')" :tooltip="item.titleIsCustom ? item.title : t(item.title || '')">
:class="isNavItemNotified(item) ? 'notify' : undefined">
<i <i
:class="item.icon" :class="item.icon"
class="inline-flex size-6 items-center justify-center text-lg" /> class="inline-flex size-6 items-center justify-center text-lg" />
<span v-show="!isCollapsed">{{ <span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '') item.titleIsCustom ? item.title : t(item.title || '')
}}</span> }}</span>
<span
v-if="isNavItemNotified(item)"
class="notify-dot"
aria-hidden="true"></span>
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent side="right" align="start" class="w-56"> <DropdownMenuContent side="right" align="start" class="w-56">
@@ -62,14 +65,17 @@
<CollapsibleTrigger as-child> <CollapsibleTrigger as-child>
<SidebarMenuButton <SidebarMenuButton
:is-active="item.children?.some((e) => e.index === activeMenuIndex)" :is-active="item.children?.some((e) => e.index === activeMenuIndex)"
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')" :tooltip="item.titleIsCustom ? item.title : t(item.title || '')">
:class="isNavItemNotified(item) ? 'notify' : undefined">
<i <i
:class="item.icon" :class="item.icon"
class="inline-flex size-6 items-center justify-center text-lg" /> class="inline-flex size-6 items-center justify-center text-lg" />
<span v-show="!isCollapsed">{{ <span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '') item.titleIsCustom ? item.title : t(item.title || '')
}}</span> }}</span>
<span
v-if="isNavItemNotified(item)"
class="notify-dot left-1!"
aria-hidden="true"></span>
<ChevronRight <ChevronRight
v-show="!isCollapsed" v-show="!isCollapsed"
class="ml-auto transition-transform" class="ml-auto transition-transform"
@@ -87,6 +93,10 @@
:class="entry.icon" :class="entry.icon"
class="inline-flex size-5 items-center justify-center text-base" /> class="inline-flex size-5 items-center justify-center text-base" />
<span>{{ t(entry.label) }}</span> <span>{{ t(entry.label) }}</span>
<span
v-if="isNavItemNotified(item)"
class="notify-dot left-0.5!"
aria-hidden="true"></span>
</SidebarMenuSubButton> </SidebarMenuSubButton>
</SidebarMenuSubItem> </SidebarMenuSubItem>
</SidebarMenuSub> </SidebarMenuSub>
@@ -778,13 +788,18 @@
</script> </script>
<style scoped> <style scoped>
.notify::after { .notify {
position: relative;
}
.notify-dot {
position: absolute; position: absolute;
top: 45%; top: 6px;
left: 8px; right: 0;
width: 4px; width: 4px;
height: 4px; height: 4px;
content: ''; background-color: #ef4444;
border-radius: 50%; border-radius: 50%;
transform: translateY(-50%);
} }
</style> </style>
@@ -24,8 +24,7 @@
<Button variant="outline" size="icon-lg" class="rounded-full"> <Button variant="outline" size="icon-lg" class="rounded-full">
<MoreHorizontal /> <MoreHorizontal />
<span <span
v-if="dotClass" class="absolute right-6 top-15.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
:class="dotClass" /> :class="dotClass" />
</Button> </Button>
</div> </div>
@@ -233,7 +232,6 @@
MousePointer, MousePointer,
Pencil, Pencil,
Plus, Plus,
Power,
RefreshCw, RefreshCw,
Settings, Settings,
Share2, Share2,
+1 -1
View File
@@ -175,7 +175,7 @@ export const useFeedStore = defineStore('Feed', () => {
} }
feedTable.value.data.push(feed); feedTable.value.data.push(feed);
sweepFeed(); sweepFeed();
UiStore.notifyMenu('feed'); // UiStore.notifyMenu('feed');
} }
function sweepFeed() { function sweepFeed() {
-1
View File
@@ -243,7 +243,6 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
return; return;
} }
pendingVRCXUpdate.value = true; pendingVRCXUpdate.value = true;
uiStore.notifyMenu('settings');
if (updateToastRelease.value !== releaseName) { if (updateToastRelease.value !== releaseName) {
updateToastRelease.value = releaseName; updateToastRelease.value = releaseName;
toast(t('nav_menu.update_available'), { toast(t('nav_menu.update_available'), {