Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 18:52:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Toggle button cleanup

Browse Source 
Experimented with ToggleGroups, but it was too much effort and YAGNI

Add icon and descriptions for other media types
This commit is contained in:
Austin Mroz
2025-12-22 16:10:51 -08:00
parent b77f028097
commit 75cc8b8b59
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/LinearView.vue
View File

@@ -18,6 +18,7 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
import { useTelemetry } from '@/platform/telemetry' import { useTelemetry } from '@/platform/telemetry'
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore' import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema' import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue' import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue' import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
import { app } from '@/scripts/app' import { app } from '@/scripts/app'
@@ -184,7 +185,9 @@ function formatDuration(durationSeconds?: number) {
type StatItem = { content?: string; iconClass?: string } type StatItem = { content?: string; iconClass?: string }
const mediaTypes: Record<string, StatItem> = { const mediaTypes: Record<string, StatItem> = {
images: { content: t('image'), iconClass: 'icon-[lucide--image]' } images: { content: t('image'), iconClass: 'icon-[lucide--image]' },
video: { content: t('video'), iconClass: 'icon-[lucide--video]' },
audio: { content: t('audio'), iconClass: 'icon-[lucide--audio-lines]' }
} }
const itemStats = computed<StatItem[]>(() => { const itemStats = computed<StatItem[]>(() => {
if (!activeItem.value) return [] if (!activeItem.value) return []
@@ -267,13 +270,19 @@ function handleCenterWheel(e: WheelEvent) {
</Button> </Button>
<div class="flex-1" /> <div class="flex-1" />
<div class="p-1 bg-secondary-background rounded-lg w-10"> <div class="p-1 bg-secondary-background rounded-lg w-10">
<Button> <Button
<i class="size-4 icon-[comfy--workflow] bg-muted-foreground" /> class="rounded-b-none pointer-events-none"
size="icon"
variant="inverted"
>
<i class="icon-[lucide--panels-top-left]" />
</Button> </Button>
<Button class="bg-base-foreground"> <Button
<i class="rounded-t-none"
class="size-4 icon-[lucide--panels-top-left] bg-base-background" size="icon"
/> @click="useCanvasStore().linearMode = false"
>
<i class="icon-[comfy--workflow]" />
</Button> </Button>
</div> </div>
</div> </div>
@@ -332,7 +341,7 @@ function handleCenterWheel(e: WheelEvent) {
><i class="icon-[lucide--refresh-cw]" /> ><i class="icon-[lucide--refresh-cw]" />
</Button> </Button>
<Button class="px-4 py-2"> <Button class="px-4 py-2">
<span>{{ t('RefreshParameters') }}</span <span>{{ t('ReuseParameters') }}</span
><i class="icon-[lucide--list-restart]" /> ><i class="icon-[lucide--list-restart]" />
</Button> </Button>
<Divider layout="vertical" /> <Divider layout="vertical" />