Rework queue button (#968)

* Move queue button to right side * Rework split button * Group * Remove unused code * x2 buttons * Use primevue divider * adjust style * Add tooltip * Update test * Add clearing pending tasks button to queue bar * Fix state * Dropdown list fix
Comfy-Org · Sep 25, 2024 · c2a3f36 · c2a3f36
1 parent b3441b6
commit c2a3f36
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 200 deletions.
diff --git a/browser_tests/appMenu.spec.ts b/browser_tests/appMenu.spec.ts
@@ -12,10 +12,6 @@ test.describe('AppMenu', () => {
   })
 
   test.afterEach(async ({ comfyPage }) => {
-    const currentThemeId = await comfyPage.menu.getThemeId()
-    if (currentThemeId !== 'dark') {
-      await comfyPage.menu.toggleTheme()
-    }
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
   })
 
@@ -27,7 +23,7 @@ test.describe('AppMenu', () => {
     ws
   }) => {
     // Enable change auto-queue mode
-    let queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
+    const queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
     expect(await queueOpts.getMode()).toBe('disabled')
     await queueOpts.setMode('change')
     await comfyPage.nextFrame()

diff --git a/browser_tests/helpers/appMenu.ts b/browser_tests/helpers/appMenu.ts
@@ -1,4 +1,5 @@
 import type { Page, Locator } from '@playwright/test'
+import type { AutoQueueMode } from '../../src/stores/queueStore'
 
 export class ComfyAppMenu {
   public readonly root: Locator
@@ -27,39 +28,17 @@ class ComfyQueueButton {
 }
 
 class ComfyQueueButtonOptions {
-  public readonly popup: Locator
-  public readonly modes: {
-    disabled: { input: Locator; wrapper: Locator }
-    instant: { input: Locator; wrapper: Locator }
-    change: { input: Locator; wrapper: Locator }
-  }
-
-  constructor(public readonly page: Page) {
-    this.popup = page.getByTestId('queue-options')
-    this.modes = (['disabled', 'instant', 'change'] as const).reduce(
-      (modes, mode) => {
-        modes[mode] = {
-          input: page.locator(`#autoqueue-${mode}`),
-          wrapper: page.getByTestId(`autoqueue-${mode}`)
-        }
-        return modes
-      },
-      {} as ComfyQueueButtonOptions['modes']
-    )
-  }
+  constructor(public readonly page: Page) {}
 
-  public async setMode(mode: keyof ComfyQueueButtonOptions['modes']) {
-    await this.modes[mode].input.click()
+  public async setMode(mode: AutoQueueMode) {
+    await this.page.evaluate((mode) => {
+      window['app'].extensionManager.queueSettings.mode = mode
+    }, mode)
   }
 
   public async getMode() {
-    return (
-      await Promise.all(
-        Object.entries(this.modes).map(async ([mode, opt]) => [
-          mode,
-          await opt.wrapper.getAttribute('data-p-checked')
-        ])
-      )
-    ).find(([, checked]) => checked === 'true')?.[0]
+    return await this.page.evaluate(() => {
+      return window['app'].extensionManager.queueSettings.mode
+    })
   }
 }
diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
@@ -1,73 +1,47 @@
 <template>
   <Panel v-if="visible" class="app-menu">
-    <div class="app-menu-content">
-      <Popover ref="queuePopover" data-testid="queue-options">
-        <div class="queue-options">
-          <p class="batch-count">
-            <FloatLabel v-tooltip="$t('menu.batchCountTooltip')">
-              <InputNumber id="batchCount" v-model="batchCount" :min="1" />
-              <label for="batchCount">{{ $t('menu.batchCount') }}</label>
-            </FloatLabel>
-
-            <Slider
-              v-model="batchCount"
-              :min="1"
-              :max="100"
-              v-tooltip="$t('menu.batchCountTooltip')"
+    <div class="app-menu-content flex align-center">
+      <div class="queue-button-group flex">
+        <SplitButton
+          class="comfyui-queue-button"
+          :label="activeQueueModeMenuItem.label"
+          :icon="activeQueueModeMenuItem.icon"
+          severity="primary"
+          @click="queuePrompt"
+          :model="queueModeMenuItems"
+          data-testid="queue-button"
+          v-tooltip.bottom="$t('menu.queueWorkflow')"
+        >
+          <template #item="{ item }">
+            <Button
+              :label="item.label"
+              :icon="item.icon"
+              :severity="item.key === queueMode ? 'primary' : 'secondary'"
+              text
+              v-tooltip="item.tooltip"
             />
-          </p>
-
-          <Divider layout="vertical" />
-
-          <p class="auto-queue">
-            <span class="label">{{ $t('menu.autoQueue') }}</span>
-            <template v-for="mode in queueModes" :key="mode">
-              <div
-                v-tooltip="$t(`menu.${mode}Tooltip`)"
-                class="auto-queue-mode"
-              >
-                <RadioButton
-                  v-model="queueMode"
-                  :inputId="`autoqueue-${mode}`"
-                  name="dynamic"
-                  :value="mode"
-                  :data-testid="`autoqueue-${mode}`"
-                />
-                <label :for="`autoqueue-${mode}`">{{
-                  $t(`menu.${mode}`)
-                }}</label>
-              </div>
-            </template>
-          </p>
-        </div>
-      </Popover>
-      <SplitButton
-        v-tooltip.bottom="$t('menu.queueWorkflow')"
-        :label="$t('menu.generate')"
-        :icon="`pi pi-${icon}`"
-        severity="secondary"
-        @click="queuePrompt"
-        :model="[]"
-        :pt="{
-          pcDropdown: ({ instance }) => {
-            instance.onDropdownButtonClick = function (e: Event) {
-              e.preventDefault()
-              queuePopover.toggle(e)
-            }
-          }
-        }"
-        data-testid="queue-button"
-      >
-      </SplitButton>
-      <div class="separator"></div>
-      <Button
-        v-tooltip.bottom="$t('menu.interrupt')"
-        icon="pi pi-times"
-        severity="secondary"
-        :disabled="!executingPrompt"
-        @click="() => commandStore.getCommand('Comfy.Interrupt')()"
-      ></Button>
-
+          </template>
+        </SplitButton>
+        <BatchCountEdit />
+        <ButtonGroup class="execution-actions ml-2">
+          <Button
+            v-tooltip.bottom="$t('menu.interrupt')"
+            icon="pi pi-times"
+            :severity="executingPrompt ? 'danger' : 'secondary'"
+            :disabled="!executingPrompt"
+            @click="() => commandStore.getCommand('Comfy.Interrupt')()"
+          >
+          </Button>
+          <Button
+            v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
+            icon="pi pi-stop"
+            :severity="hasPendingTasks ? 'danger' : 'secondary'"
+            :disabled="!hasPendingTasks"
+            @click="() => commandStore.getCommand('Comfy.ClearPendingTasks')()"
+          />
+        </ButtonGroup>
+      </div>
+      <Divider layout="vertical" class="mx-2" />
       <ButtonGroup>
         <Button
           v-tooltip.bottom="$t('menu.refresh')"
@@ -89,25 +63,24 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import Panel from 'primevue/panel'
+import Divider from 'primevue/divider'
 import SplitButton from 'primevue/splitbutton'
 import Button from 'primevue/button'
-import FloatLabel from 'primevue/floatlabel'
-import InputNumber from 'primevue/inputnumber'
-import Popover from 'primevue/popover'
-import Divider from 'primevue/divider'
-import Slider from 'primevue/slider'
-import RadioButton from 'primevue/radiobutton'
 import ButtonGroup from 'primevue/buttongroup'
+import BatchCountEdit from './BatchCountEdit.vue'
 import {
+  AutoQueueMode,
   useQueuePendingTaskCountStore,
   useQueueSettingsStore
 } from '@/stores/queueStore'
 import { app } from '@/scripts/app'
 import { storeToRefs } from 'pinia'
 import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { MenuItem } from 'primevue/menuitem'
+import { useI18n } from 'vue-i18n'
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
@@ -118,21 +91,46 @@ const visible = computed(
   () => settingsStore.get('Comfy.UseNewMenu') === 'Floating'
 )
 
-const queuePopover = ref(null)
-const queueModes = ['disabled', 'instant', 'change']
-
-const icon = computed(() => {
-  switch (queueMode.value) {
-    case 'instant':
-      return 'forward'
-    case 'change':
-      return 'step-forward-alt'
-    default:
-      return 'play'
+const { t } = useI18n()
+const queueModeMenuItemLookup: Record<AutoQueueMode, MenuItem> = {
+  disabled: {
+    key: 'disabled',
+    label: 'Queue',
+    icon: 'pi pi-play',
+    tooltip: t('menu.disabledTooltip'),
+    command: () => {
+      queueMode.value = 'disabled'
+    }
+  },
+  instant: {
+    key: 'instant',
+    label: 'Queue (Instant)',
+    icon: 'pi pi-forward',
+    tooltip: t('menu.instantTooltip'),
+    command: () => {
+      queueMode.value = 'instant'
+    }
+  },
+  change: {
+    key: 'change',
+    label: 'Queue (Change)',
+    icon: 'pi pi-step-forward-alt',
+    tooltip: t('menu.changeTooltip'),
+    command: () => {
+      queueMode.value = 'change'
+    }
   }
-})
+}
+
+const activeQueueModeMenuItem = computed(
+  () => queueModeMenuItemLookup[queueMode.value]
+)
+const queueModeMenuItems = computed(() =>
+  Object.values(queueModeMenuItemLookup)
+)
 
 const executingPrompt = computed(() => !!queueCountStore.count.value)
+const hasPendingTasks = computed(() => queueCountStore.count.value > 1)
 
 const queuePrompt = (e: MouseEvent) => {
   app.queuePrompt(e.shiftKey ? -1 : 0, batchCount.value)
@@ -149,12 +147,6 @@ const queuePrompt = (e: MouseEvent) => {
   z-index: 1000;
 }
 
-.app-menu-content {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
 :deep(.p-panel-content) {
   padding: 10px;
 }
@@ -163,50 +155,8 @@ const queuePrompt = (e: MouseEvent) => {
   display: none;
 }
 
-.separator {
-  background-color: var(--p-content-border-color);
-  border-radius: 10px;
-  opacity: 0.75;
-  width: 5px;
-  height: 20px;
-}
-
-.queue-options {
-  display: flex;
-}
-
-.batch-count {
-  padding-top: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-
-.p-slider {
-  --p-slider-border-radius: 5px;
-  margin: 5px;
-  padding: 2px;
-}
-
-.p-floatlabel label {
-  left: 2px;
-}
-
-.label {
-  font-size: 12px;
-  color: var(--p-floatlabel-focus-color);
-}
-
-.auto-queue {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 6px;
-}
-
-.auto-queue-mode {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+.comfyui-queue-button :deep(.p-splitbutton-dropdown) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 </style>