Add menu button to toggle focus mode (#1446)

* Add focus mode toggle button

* handle menu position

* nit

src/components/MenuHamburger.vue

@@ -2,10 +2,12 @@
   <Button
     v-show="workspaceState.focusMode"
     class="comfy-menu-hamburger"
+    :style="positionCSS"
     icon="pi pi-bars"
     severity="secondary"
     text
     size="large"
+    v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
     @click="exitFocusMode"
   />
 </template>
@@ -13,7 +15,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { watchEffect } from 'vue'
+import { computed, CSSProperties, watchEffect } from 'vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -33,14 +35,21 @@ watchEffect(() => {
     app.ui.menuContainer.style.display = 'block'
   }
 })
+
+const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
+const positionCSS = computed<CSSProperties>(() =>
+  // 'Bottom' menuSetting shows the hamburger button in the bottom right corner
+  // 'Disabled', 'Top' menuSetting shows the hamburger button in the top right corner
+  menuSetting.value === 'Bottom'
+    ? { bottom: '0px', right: '0px' }
+    : { top: '0px', right: '0px' }
+)
 </script>
 
 <style scoped>
 .comfy-menu-hamburger {
   pointer-events: auto;
   position: fixed;
-  top: 0px;
-  right: 0px;
   z-index: 9999;
 }
 </style>

src/components/graph/GraphCanvas.vue

@@ -1,6 +1,8 @@
 <template>
   <teleport to=".graph-canvas-container">
-    <LiteGraphCanvasSplitterOverlay v-if="betaMenuEnabled">
+    <LiteGraphCanvasSplitterOverlay
+      v-if="betaMenuEnabled && !workspaceStore.focusMode"
+    >
       <template #side-bar-panel>
         <SideToolbar />
       </template>
@@ -65,9 +67,7 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
-  () =>
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
-    settingStore.get('Comfy.UseNewMenu') !== 'Disabled' &&
-    !workspaceStore.focusMode
 )
 const canvasMenuEnabled = computed(() =>
   settingStore.get('Comfy.Graph.CanvasMenu')

src/components/topbar/TopMenubar.vue

@@ -3,7 +3,7 @@
     <div
       ref="topMenuRef"
       class="comfyui-menu flex items-center"
-      v-show="betaMenuEnabled"
+      v-show="betaMenuEnabled && !workspaceState.focusMode"
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <h1 class="comfyui-logo mx-2">ComfyUI</h1>
@@ -15,11 +15,19 @@
       <div class="comfyui-menu-right" ref="menuRight"></div>
       <Actionbar />
       <BottomPanelToggleButton />
+      <Button
+        icon="pi pi-bars"
+        severity="secondary"
+        text
+        v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
+        @click="workspaceState.focusMode = true"
+      />
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
@@ -37,9 +45,7 @@ const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
 const betaMenuEnabled = computed(
-  () =>
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
-    settingStore.get('Comfy.UseNewMenu') !== 'Disabled' &&
-    !workspaceState.focusMode
 )
 const teleportTarget = computed(() =>
   settingStore.get('Comfy.UseNewMenu') === 'Top'

src/i18n.ts

@@ -77,6 +77,8 @@ const messages = {
       }
     },
     menu: {
+      hideMenu: 'Hide Menu',
+      showMenu: 'Show Menu',
       batchCount: 'Batch Count',
       batchCountTooltip:
         'The number of times the workflow generation should be queued',
@@ -193,6 +195,8 @@ const messages = {
       }
     },
     menu: {
+      hideMenu: '隐藏菜单',
+      showMenu: '显示菜单',
       batchCount: '批次数量',
       batchCountTooltip: '工作流生成次数',
       autoQueue: '自动执行',
@@ -307,6 +311,8 @@ const messages = {
       }
     },
     menu: {
+      hideMenu: 'Скрыть меню',
+      showMenu: 'Показать меню',
       batchCount: 'Количество пакетов',
       batchCountTooltip:
         'Количество раз, когда генерация рабочего процесса должна быть помещена в очередь',