Remove hamburger menu from tabs (#8067)
We added the menu button to both the tabs & where the subgraph menu button was previously in order to get feedback on where this button should be. We've received feedback that the one on the tabs is not a common UX element, and that having both seems like a bug, and that the one on the graph is prefered. Due to this, we're removing the one on the tabs. - Remove tab menu button Before: <img width="733" height="224" alt="image" src="https://github.com/user-attachments/assets/3f916d96-4bfe-482d-a8eb-8b18a7327334" /> After: <img width="731" height="248" alt="image" src="https://github.com/user-attachments/assets/5eeb31e5-e49f-409a-8eac-04773182a145" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8067-Remove-hamburger-menu-from-tabs-2e96d73d3650815aa80af4d5aa8767cd) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
@@ -7,17 +7,8 @@
|
|||||||
@mouseleave="handleMouseLeave"
|
@mouseleave="handleMouseLeave"
|
||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
>
|
>
|
||||||
<Button
|
|
||||||
v-if="isActiveTab"
|
|
||||||
class="context-menu-button -mx-1 w-auto px-1 py-0"
|
|
||||||
variant="muted-textonly"
|
|
||||||
size="icon-sm"
|
|
||||||
@click.stop="handleMenuClick"
|
|
||||||
>
|
|
||||||
<i class="pi pi-bars" />
|
|
||||||
</Button>
|
|
||||||
<i
|
<i
|
||||||
v-else-if="workflowOption.workflow.activeState?.extra?.linearMode"
|
v-if="workflowOption.workflow.activeState?.extra?.linearMode"
|
||||||
class="icon-[lucide--panels-top-left] bg-primary-background"
|
class="icon-[lucide--panels-top-left] bg-primary-background"
|
||||||
/>
|
/>
|
||||||
<span class="workflow-label inline-block max-w-[150px] truncate text-sm">
|
<span class="workflow-label inline-block max-w-[150px] truncate text-sm">
|
||||||
@@ -47,26 +38,9 @@
|
|||||||
:thumbnail-url="thumbnailUrl"
|
:thumbnail-url="thumbnailUrl"
|
||||||
:is-active-tab="isActiveTab"
|
:is-active-tab="isActiveTab"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Menu
|
|
||||||
v-if="isActiveTab"
|
|
||||||
ref="menu"
|
|
||||||
:model="menuItems"
|
|
||||||
:popup="true"
|
|
||||||
:pt="{
|
|
||||||
root: {
|
|
||||||
style: 'background-color: var(--comfy-menu-bg)'
|
|
||||||
},
|
|
||||||
itemLink: {
|
|
||||||
class: 'py-2'
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { MenuState } from 'primevue/menu'
|
|
||||||
import Menu from 'primevue/menu'
|
|
||||||
import { computed, onUnmounted, ref } from 'vue'
|
import { computed, onUnmounted, ref } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
@@ -75,14 +49,11 @@ import {
|
|||||||
usePragmaticDraggable,
|
usePragmaticDraggable,
|
||||||
usePragmaticDroppable
|
usePragmaticDroppable
|
||||||
} from '@/composables/usePragmaticDragAndDrop'
|
} from '@/composables/usePragmaticDragAndDrop'
|
||||||
import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
|
|
||||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||||
import { useTelemetry } from '@/platform/telemetry'
|
|
||||||
import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
|
import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
|
||||||
import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
|
import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
|
||||||
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
||||||
import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
|
import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
|
||||||
import { useCommandStore } from '@/stores/commandStore'
|
|
||||||
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
||||||
|
|
||||||
import WorkflowTabPopover from './WorkflowTabPopover.vue'
|
import WorkflowTabPopover from './WorkflowTabPopover.vue'
|
||||||
@@ -147,12 +118,6 @@ const thumbnailUrl = computed(() => {
|
|||||||
return workflowThumbnail.getThumbnail(props.workflowOption.workflow.key)
|
return workflowThumbnail.getThumbnail(props.workflowOption.workflow.key)
|
||||||
})
|
})
|
||||||
|
|
||||||
const menu = ref<InstanceType<typeof Menu> & MenuState>()
|
|
||||||
|
|
||||||
const { menuItems } = useWorkflowActionsMenu(() =>
|
|
||||||
useCommandStore().execute('Comfy.RenameWorkflow')
|
|
||||||
)
|
|
||||||
|
|
||||||
// Event handlers that delegate to the popover component
|
// Event handlers that delegate to the popover component
|
||||||
const handleMouseEnter = (event: Event) => {
|
const handleMouseEnter = (event: Event) => {
|
||||||
popoverRef.value?.showPopover(event)
|
popoverRef.value?.showPopover(event)
|
||||||
@@ -166,14 +131,6 @@ const handleClick = (event: Event) => {
|
|||||||
popoverRef.value?.togglePopover(event)
|
popoverRef.value?.togglePopover(event)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMenuClick = (event: MouseEvent) => {
|
|
||||||
useTelemetry()?.trackUiButtonClicked({
|
|
||||||
button_id: 'workflow_tab_menu_selected'
|
|
||||||
})
|
|
||||||
// Show breadcrumb menu instead of emitting context click
|
|
||||||
menu.value?.toggle(event)
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeWorkflows = async (options: WorkflowOption[]) => {
|
const closeWorkflows = async (options: WorkflowOption[]) => {
|
||||||
for (const opt of options) {
|
for (const opt of options) {
|
||||||
if (
|
if (
|
||||||
|
|||||||