From c199d3da0dcad5e9bf2f37e6565118fd8573472e Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Sat, 27 Sep 2025 18:15:38 +0100 Subject: [PATCH 001/246] wip v3 ui refactor - floating ui elements, refactor layout - move app menu to sidebar - add log in button - remove bottom menu setting - remove second row tabs setting --- .../LiteGraphCanvasSplitterOverlay.vue | 163 +++++++++++++----- src/components/MenuHamburger.vue | 22 +-- src/components/actionbar/ComfyActionbar.vue | 121 ++++++++----- src/components/bottomPanel/BottomPanel.vue | 28 ++- .../breadcrumb/SubgraphBreadcrumb.vue | 8 +- .../breadcrumb/SubgraphBreadcrumbItem.vue | 5 +- src/components/graph/GraphCanvas.vue | 44 ++++- src/components/icons/ComfyLogoTransparent.vue | 32 ++++ .../ComfyMenuButton.vue} | 76 +++----- src/components/sidebar/SideToolbar.vue | 105 ++++++----- .../SidebarBottomPanelToggleButton.vue | 1 + .../sidebar/SidebarHelpCenterIcon.vue | 17 +- src/components/sidebar/SidebarIcon.vue | 2 +- src/components/sidebar/SidebarLogoutIcon.vue | 7 +- .../sidebar/SidebarShortcutsToggleButton.vue | 1 + src/components/topbar/LoginButton.vue | 82 +++++++++ .../topbar/SecondRowWorkflowTabs.vue | 15 -- src/components/topbar/TopMenubar.vue | 156 ----------------- src/components/topbar/WorkflowTabPopover.vue | 37 +--- src/components/topbar/WorkflowTabs.vue | 8 +- src/locales/en/main.json | 11 +- .../settings/constants/coreSettings.ts | 16 +- src/schemas/apiSchema.ts | 8 +- src/views/GraphView.vue | 18 +- 24 files changed, 523 insertions(+), 460 deletions(-) create mode 100644 src/components/icons/ComfyLogoTransparent.vue rename src/components/{topbar/CommandMenubar.vue => sidebar/ComfyMenuButton.vue} (81%) create mode 100644 src/components/topbar/LoginButton.vue delete mode 100644 src/components/topbar/SecondRowWorkflowTabs.vue delete mode 100644 src/components/topbar/TopMenubar.vue diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue index 6e3cd5842a..9d73b34643 100644 --- a/src/components/LiteGraphCanvasSplitterOverlay.vue +++ b/src/components/LiteGraphCanvasSplitterOverlay.vue @@ -1,48 +1,107 @@ @@ -92,13 +159,21 @@ const sidebarStateKey = computed(() => { } .side-bar-panel { + @apply pointer-events-auto; background-color: var(--bg-color); - pointer-events: auto; } .bottom-panel { - background-color: var(--bg-color); - pointer-events: auto; + @apply pointer-events-auto rounded-lg; + background-color: var(--comfy-menu-secondary-bg); + border: 1px solid var(--p-panel-border-color); + max-width: 100%; + overflow-x: auto; +} + +.splitter-overlay-bottom :deep(.p-splitter-gutter) { + @apply rounded-tl-lg rounded-tr-lg; + transform: translateY(5px); } .splitter-overlay { @@ -106,7 +181,7 @@ const sidebarStateKey = computed(() => { } .splitter-overlay-root { - @apply w-full h-full absolute top-0 left-0; + @apply w-full h-full absolute top-0 left-0 pointer-events-none; /* Set it the same as the ComfyUI menu */ /* Note: Lite-graph DOM widgets have the same z-index as the node id, so @@ -114,4 +189,10 @@ const sidebarStateKey = computed(() => { widgets */ z-index: 999; } + +.actionbar-container { + @apply flex mx-2 pointer-events-auto items-center h-12 rounded-lg px-2; + background-color: var(--comfy-menu-secondary-bg); + border: 1px solid var(--p-panel-border-color); +} diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue index d0856362f6..bebbbda616 100644 --- a/src/components/MenuHamburger.vue +++ b/src/components/MenuHamburger.vue @@ -1,9 +1,5 @@ diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue index e05a106197..74a9036b7f 100644 --- a/src/components/actionbar/ComfyActionbar.vue +++ b/src/components/actionbar/ComfyActionbar.vue @@ -1,21 +1,36 @@ @@ -237,13 +251,30 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => { z-index: 1000; } +.actionbar-drop-zone { + @apply rounded-md flex items-center justify-center self-stretch m-1.5; + width: 265px; + border: 2px dashed var(--p-primary-color); + opacity: 0.8; +} + +.actionbar-drop-zone.drop-zone-active { + background: var(--p-highlight-background-focus); + border-color: var(--p-primary-color); + border-width: 3px; + box-shadow: 0 0 20px var(--p-primary-color); + opacity: 1; + transform: scale(1.05); +} + .actionbar.is-docked { position: static; - @apply bg-transparent border-none p-0; + @apply bg-transparent border-none p-0 mr-2; } .actionbar.is-dragging { user-select: none; + pointer-events: none; } :deep(.p-panel-content) { diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue index 0ed71bffa5..5d7922b395 100644 --- a/src/components/bottomPanel/BottomPanel.vue +++ b/src/components/bottomPanel/BottomPanel.vue @@ -3,17 +3,31 @@ - +
- + {{ getTabDisplayTitle(tab) }} @@ -55,7 +69,7 @@ + + diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue index fb218ab1e2..94907b7296 100644 --- a/src/components/breadcrumb/SubgraphBreadcrumb.vue +++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue @@ -14,7 +14,7 @@ > @@ -174,6 +174,12 @@ onUpdated(() => { @apply overflow-hidden; } +:deep(.p-breadcrumb) { + background-color: var(--comfy-menu-secondary-bg); + border: 1px solid var(--p-panel-border-color); + @apply h-12; +} + :deep(.p-breadcrumb-item) { @apply flex items-center rounded-lg overflow-hidden; min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem); diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue index a8162b21b6..594a91d728 100644 --- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue +++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue @@ -6,7 +6,7 @@ showDelay: 512 }" href="#" - class="cursor-pointer p-breadcrumb-item-link" + class="cursor-pointer p-breadcrumb-item-link h-12 px-2" :class="{ 'flex items-center gap-1': isActive, 'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible, @@ -240,11 +240,10 @@ const inputBlur = async (doRename: boolean) => { .p-breadcrumb-item-link { @apply overflow-hidden; - padding: var(--p-breadcrumb-item-padding); } .p-breadcrumb-item-label { - @apply whitespace-nowrap text-ellipsis overflow-hidden; + @apply whitespace-nowrap text-ellipsis overflow-hidden px-2; } .active-breadcrumb-item { diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index 2d3b60ed35..856c3ae68b 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/src/components/graph/GraphCanvas.vue @@ -3,27 +3,43 @@ -