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 @@
-