mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
7864e780e7
## Summary Users were finding the final step of the builder flow confusing/misleading, with the "choose default mode" not actually saving the workflow and people losing changes. This updates it to remove "save"/"set default" as a step in the builder, and changes it to a distinct action. ## Changes - **What**: - add mode selection tab on footer toolbar - extract reusable radio group component - remove setting default mode dialog - add save/save as/saved dialogs ## Screenshots (if applicable) https://github.com/user-attachments/assets/c7439c2e-a917-4f2b-b176-f8bb8c10026d ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10439-feat-App-mode-Rework-save-flow-32d6d73d3650814781b6c7bbea685a97) by [Unito](https://www.unito.io)
76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<template>
|
|
<nav
|
|
class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-1000 -translate-x-1/2"
|
|
:aria-label="t('builderToolbar.label')"
|
|
>
|
|
<div
|
|
class="inline-flex items-center gap-1 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
|
|
>
|
|
<template v-for="(step, index) in steps" :key="step.id">
|
|
<button
|
|
:class="
|
|
cn(
|
|
stepClasses,
|
|
activeStep === step.id
|
|
? 'bg-interface-builder-mode-background'
|
|
: 'bg-transparent hover:bg-secondary-background'
|
|
)
|
|
"
|
|
:aria-current="activeStep === step.id ? 'step' : undefined"
|
|
@click="navigateToStep(step.id)"
|
|
>
|
|
<StepBadge :step :index :model-value="activeStep" />
|
|
<StepLabel :step />
|
|
</button>
|
|
|
|
<div
|
|
v-if="index < steps.length - 1"
|
|
class="mx-1 h-px w-4 bg-border-default"
|
|
role="separator"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import StepBadge from './StepBadge.vue'
|
|
import StepLabel from './StepLabel.vue'
|
|
import type { BuilderToolbarStep } from './types'
|
|
import type { BuilderStepId } from './useBuilderSteps'
|
|
import { useBuilderSteps } from './useBuilderSteps'
|
|
|
|
const { t } = useI18n()
|
|
const { activeStep, navigateToStep } = useBuilderSteps()
|
|
|
|
const stepClasses =
|
|
'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'
|
|
|
|
const selectInputsStep: BuilderToolbarStep<BuilderStepId> = {
|
|
id: 'builder:inputs',
|
|
title: t('builderToolbar.inputs'),
|
|
subtitle: t('builderToolbar.inputsDescription'),
|
|
icon: 'icon-[lucide--mouse-pointer-click]'
|
|
}
|
|
|
|
const selectOutputsStep: BuilderToolbarStep<BuilderStepId> = {
|
|
id: 'builder:outputs',
|
|
title: t('builderToolbar.outputs'),
|
|
subtitle: t('builderToolbar.outputsDescription'),
|
|
icon: 'icon-[lucide--mouse-pointer-click]'
|
|
}
|
|
|
|
const arrangeStep: BuilderToolbarStep<BuilderStepId> = {
|
|
id: 'builder:arrange',
|
|
title: t('builderToolbar.arrange'),
|
|
subtitle: t('builderToolbar.arrangeDescription'),
|
|
icon: 'icon-[lucide--layout-panel-left]'
|
|
}
|
|
|
|
const steps = [selectInputsStep, selectOutputsStep, arrangeStep]
|
|
</script>
|