diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 266d4d765..76990cd4b 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -13,6 +13,9 @@
+
@@ -48,6 +51,7 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue'
import TitleEditor from '@/components/graph/TitleEditor.vue'
import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
import SideToolbar from '@/components/sidebar/SideToolbar.vue'
+import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
import { CORE_SETTINGS } from '@/constants/coreSettings'
import { usePragmaticDroppable } from '@/hooks/dndHooks'
import { api } from '@/scripts/api'
@@ -83,6 +87,9 @@ const modelToNodeStore = useModelToNodeStore()
const betaMenuEnabled = computed(
() => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
)
+const workflowTabsPosition = computed(() =>
+ settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
+)
const canvasMenuEnabled = computed(() =>
settingStore.get('Comfy.Graph.CanvasMenu')
)
diff --git a/src/components/topbar/SecondRowWorkflowTabs.vue b/src/components/topbar/SecondRowWorkflowTabs.vue
new file mode 100644
index 000000000..5c00dfd28
--- /dev/null
+++ b/src/components/topbar/SecondRowWorkflowTabs.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 3e5dcfcbe..c87034ffe 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -178,10 +178,14 @@ const handleWheel = (event: WheelEvent) => {
}
:deep(.p-togglebutton.p-togglebutton-checked) {
- @apply border-b-2;
+ border-bottom-width: 1px;
border-bottom-color: var(--p-button-text-primary-color);
}
+:deep(.p-togglebutton:not(.p-togglebutton-checked)) {
+ opacity: 0.75;
+}
+
:deep(.p-togglebutton-checked) .close-button,
:deep(.p-togglebutton:hover) .close-button {
@apply visible;
diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts
index f4cc358fd..e3765740e 100644
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -85,7 +85,8 @@ export const CORE_SETTINGS: SettingParams[] = [
name: 'Sidebar size',
type: 'combo',
options: ['normal', 'small'],
- defaultValue: () => (window.innerWidth < 1600 ? 'small' : 'normal')
+ // Default to small if the window is less than 1536px(2xl) wide.
+ defaultValue: () => (window.innerWidth < 1536 ? 'small' : 'normal')
},
{
id: 'Comfy.TextareaWidget.FontSize',
@@ -399,8 +400,10 @@ export const CORE_SETTINGS: SettingParams[] = [
id: 'Comfy.Workflow.WorkflowTabsPosition',
name: 'Opened workflows position',
type: 'combo',
- options: ['Sidebar', 'Topbar'],
- defaultValue: 'Topbar'
+ options: ['Sidebar', 'Topbar', 'Topbar (2nd-row)'],
+ // Default to topbar (2nd-row) if the window is less than 1536px(2xl) wide.
+ defaultValue: () =>
+ window.innerWidth < 1536 ? 'Topbar (2nd-row)' : 'Topbar'
},
{
id: 'Comfy.Graph.CanvasMenu',
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 338cdd464..304a91089 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -293,7 +293,8 @@
"name": "Opened workflows position",
"options": {
"Sidebar": "Sidebar",
- "Topbar": "Topbar"
+ "Topbar": "Topbar",
+ "Topbar (2nd-row)": "Topbar (2nd-row)"
}
},
"LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index b9ed44f64..f68641d94 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -293,7 +293,8 @@
"name": "Position des flux de travail ouverts",
"options": {
"Sidebar": "Barre latérale",
- "Topbar": "Barre supérieure"
+ "Topbar": "Barre supérieure",
+ "Topbar (2nd-row)": "Barre supérieure (2ème rangée)"
}
},
"LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index b81d87255..beed32648 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -293,7 +293,8 @@
"name": "開いているワークフローの位置",
"options": {
"Sidebar": "サイドバー",
- "Topbar": "トップバー"
+ "Topbar": "トップバー",
+ "Topbar (2nd-row)": "トップバー(2行目)"
}
},
"LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index 7f36902da..feb6ff371 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -293,7 +293,8 @@
"name": "열린 워크플로 위치",
"options": {
"Sidebar": "사이드바",
- "Topbar": "상단바"
+ "Topbar": "상단바",
+ "Topbar (2nd-row)": "상단바 (2번째 행)"
}
},
"LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 71a0d0028..013ff73ce 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -293,7 +293,8 @@
"name": "Положение открытых рабочих процессов",
"options": {
"Sidebar": "Боковая панель",
- "Topbar": "Верхняя панель"
+ "Topbar": "Верхняя панель",
+ "Topbar (2nd-row)": "Топбар (2-й ряд)"
}
},
"LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index b3945b8cc..cf397badd 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -293,7 +293,8 @@
"name": "已打开工作流的位置",
"options": {
"Sidebar": "侧边栏",
- "Topbar": "顶部栏"
+ "Topbar": "顶部栏",
+ "Topbar (2nd-row)": "顶部栏 (第二行)"
}
},
"LiteGraph_Canvas_MaximumFps": {
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 46a915331..e603371c6 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -535,7 +535,11 @@ const zSettings = z.record(z.any()).and(
'Comfy.Validation.NodeDefs': z.boolean(),
'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),
'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
- 'Comfy.Workflow.WorkflowTabsPosition': z.enum(['Sidebar', 'Topbar']),
+ 'Comfy.Workflow.WorkflowTabsPosition': z.enum([
+ 'Sidebar',
+ 'Topbar',
+ 'Topbar (2nd-row)'
+ ]),
'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
'Comfy.WidgetControlMode': z.enum(['before', 'after']),
'Comfy.Window.UnloadConfirmation': z.boolean(),