mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
0ab3fdc2c9
## Summary Adds a little indicator circle when new workflow menu items are added that the user has not seen ## Changes - **What**: Adds a hidden setting to track menu items flagged as new that have been seen ## Screenshots (if applicable) <img width="164" height="120" alt="image" src="https://github.com/user-attachments/assets/ac36673d-fbf1-42ff-9a9e-1371eb96115b" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9220-Add-indicator-circle-when-new-unseen-menu-items-are-available-3126d73d3650819cb8cde854d6b6510b) by [Unito](https://www.unito.io)
89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
DropdownMenuContent,
|
|
DropdownMenuPortal,
|
|
DropdownMenuRoot,
|
|
DropdownMenuTrigger
|
|
} from 'reka-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
|
|
import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
|
|
import { useTelemetry } from '@/platform/telemetry'
|
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
|
import { useCommandStore } from '@/stores/commandStore'
|
|
|
|
const { source, align = 'start' } = defineProps<{
|
|
source: string
|
|
align?: 'start' | 'center' | 'end'
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const canvasStore = useCanvasStore()
|
|
|
|
const { menuItems } = useWorkflowActionsMenu(
|
|
() => useCommandStore().execute('Comfy.RenameWorkflow'),
|
|
{ isRoot: true }
|
|
)
|
|
|
|
const { hasUnseenItems, markAsSeen } = useNewMenuItemIndicator(
|
|
() => menuItems.value
|
|
)
|
|
|
|
function handleOpen(open: boolean) {
|
|
if (open) {
|
|
markAsSeen()
|
|
useTelemetry()?.trackUiButtonClicked({
|
|
button_id: source
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenuRoot @update:open="handleOpen">
|
|
<DropdownMenuTrigger as-child>
|
|
<slot name="button" :has-unseen-items="hasUnseenItems">
|
|
<Button
|
|
v-tooltip="{
|
|
value: t('breadcrumbsMenu.workflowActions'),
|
|
showDelay: 300,
|
|
hideDelay: 300
|
|
}"
|
|
variant="secondary"
|
|
size="unset"
|
|
:aria-label="t('breadcrumbsMenu.workflowActions')"
|
|
class="relative h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
|
|
>
|
|
<i
|
|
class="size-4"
|
|
:class="
|
|
canvasStore.linearMode
|
|
? 'icon-[lucide--panels-top-left]'
|
|
: 'icon-[comfy--workflow]'
|
|
"
|
|
/>
|
|
<i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
|
|
<span
|
|
v-if="hasUnseenItems"
|
|
aria-hidden="true"
|
|
class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
|
|
/>
|
|
</Button>
|
|
</slot>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuContent
|
|
:align
|
|
:side-offset="5"
|
|
:collision-padding="10"
|
|
class="z-1000 rounded-lg px-2 py-3 min-w-56 bg-base-background shadow-interface border border-border-subtle"
|
|
>
|
|
<WorkflowActionsList :items="menuItems" />
|
|
</DropdownMenuContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuRoot>
|
|
</template>
|