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(),