From b1df5adf124698e0c3e7b0e5085752a72bb0d903 Mon Sep 17 00:00:00 2001 From: huchenlei Date: Tue, 29 Oct 2024 16:45:43 -0400 Subject: [PATCH 1/6] Menu hamburger --- src/assets/css/style.css | 19 -------------- src/components/MenuHamburger.vue | 41 +++++++++++++++++++++++++++++++ src/scripts/ui.ts | 17 ++----------- src/stores/workspaceStateStore.ts | 6 +++++ src/views/GraphView.vue | 3 ++- 5 files changed, 51 insertions(+), 35 deletions(-) create mode 100644 src/components/MenuHamburger.vue diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 1e9596df4..cf150e401 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -181,25 +181,6 @@ body { margin: 3px 3px 3px 4px; } -.comfy-menu-hamburger { - position: fixed; - top: 10px; - z-index: 9999; - right: 10px; - width: 30px; - display: none; - gap: 8px; - flex-direction: column; - cursor: pointer; -} - -.comfy-menu-hamburger div { - height: 3px; - width: 100%; - border-radius: 20px; - background-color: white; -} - .comfy-menu { font-size: 15px; position: absolute; diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue new file mode 100644 index 000000000..bad965760 --- /dev/null +++ b/src/components/MenuHamburger.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts index 8695030ab..c42c21dd7 100644 --- a/src/scripts/ui.ts +++ b/src/scripts/ui.ts @@ -8,6 +8,7 @@ import { TaskItem } from '@/types/apiTypes' import { showSettingsDialog } from '@/services/dialogService' import { useSettingStore } from '@/stores/settingStore' import { useCommandStore } from '@/stores/commandStore' +import { useWorkspaceStore } from '@/stores/workspaceStateStore' export const ComfyDialog = _ComfyDialog @@ -350,7 +351,6 @@ export class ComfyUI { autoQueueMode: string graphHasChanged: boolean autoQueueEnabled: boolean - menuHamburger: HTMLDivElement menuContainer: HTMLDivElement queueSize: Element restoreMenuPosition: () => void @@ -421,18 +421,6 @@ export class ComfyUI { } }) - this.menuHamburger = $el( - 'div.comfy-menu-hamburger', - { - parent: containerElement, - onclick: () => { - this.menuContainer.style.display = 'block' - this.menuHamburger.style.display = 'none' - } - }, - [$el('div'), $el('div'), $el('div')] - ) as HTMLDivElement - this.menuContainer = $el('div.comfy-menu', { parent: containerElement }, [ $el( 'div.drag-handle.comfy-menu-header', @@ -455,8 +443,7 @@ export class ComfyUI { $el('button.comfy-close-menu-btn', { textContent: '\u00d7', onclick: () => { - this.menuContainer.style.display = 'none' - this.menuHamburger.style.display = 'flex' + useWorkspaceStore().focusMode = true } }) ]) diff --git a/src/stores/workspaceStateStore.ts b/src/stores/workspaceStateStore.ts index 25bbbc0ff..26ba8ab0f 100644 --- a/src/stores/workspaceStateStore.ts +++ b/src/stores/workspaceStateStore.ts @@ -10,6 +10,11 @@ import { useSettingStore } from './settingStore' export const useWorkspaceStore = defineStore('workspace', () => { const spinner = ref(false) const shiftDown = ref(false) + /** + * Whether the workspace is in focus mode. + * When in focus mode, only the graph editor is visible. + */ + const focusMode = ref(false) const toast = computed(() => useToastStore()) const queueSettings = computed(() => useQueueSettingsStore()) @@ -52,6 +57,7 @@ export const useWorkspaceStore = defineStore('workspace', () => { return { spinner, shiftDown, + focusMode, toast, queueSettings, command, diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue index 054dd439d..7b5c0b157 100644 --- a/src/views/GraphView.vue +++ b/src/views/GraphView.vue @@ -6,11 +6,12 @@ +