mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-02 19:49:58 +00:00
feat: replace puzzle icon with extensions-blocks icon for manager button (#8644)
## Summary Replace the manager button puzzle icon with a custom extensions-blocks SVG icon and add a "Manage Extensions" text label to the top bar button. ## Changes - **What**: Swap `icon-[lucide--puzzle]` → `icon-[comfy--extensions-blocks]` in TopMenuSection, ComfyMenuButton, and ManagerDialog. Add visible "Manage Extensions" label (hidden below md). Align tooltip with new label text. ## Review Focus - Visual appearance of the new icon at different sizes - Button layout with text label at md+ breakpoints - Red dot notification positioning with wider button Fixes COM-12161 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8644-feat-replace-puzzle-icon-with-extensions-blocks-icon-for-manager-button-2fe6d73d3650815c8867efc5a0842ef7) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -19,12 +19,14 @@
|
||||
<Button
|
||||
v-tooltip.bottom="customNodesManagerTooltipConfig"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
:aria-label="t('menu.customNodesManager')"
|
||||
:aria-label="t('menu.manageExtensions')"
|
||||
class="relative"
|
||||
@click="openCustomNodeManager"
|
||||
>
|
||||
<i class="icon-[lucide--puzzle] size-4" />
|
||||
<i class="icon-[comfy--extensions-blocks] size-4" />
|
||||
<span class="not-md:hidden">
|
||||
{{ t('menu.manageExtensions') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="shouldShowRedDot"
|
||||
class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
|
||||
@@ -220,7 +222,7 @@ const queueHistoryTooltipConfig = computed(() =>
|
||||
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
|
||||
)
|
||||
const customNodesManagerTooltipConfig = computed(() =>
|
||||
buildTooltipConfig(t('menu.customNodesManager'))
|
||||
buildTooltipConfig(t('menu.manageExtensions'))
|
||||
)
|
||||
const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
|
||||
const queueContextMenuItems = computed<MenuItem[]>(() => [
|
||||
|
||||
@@ -230,7 +230,7 @@ const extraMenuItems = computed(() => [
|
||||
{
|
||||
key: 'manage-extensions',
|
||||
label: t('menu.manageExtensions'),
|
||||
icon: 'icon-[lucide--puzzle]',
|
||||
icon: 'icon-[comfy--extensions-blocks]',
|
||||
command: showManageExtensions
|
||||
}
|
||||
])
|
||||
|
||||
Reference in New Issue
Block a user