mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
c759fe517f
## Summary Makes it easier and more obvious for users to navigate between steps ## Changes - **What**: - add back/next navigation to builder footer alongside exit button - extract shared step logic into useBuilderSteps composable ## Screenshots (if applicable) <img width="428" height="102" alt="image" src="https://github.com/user-attachments/assets/91b33e8f-53ae-4895-a2eb-fb1316b2b367" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9378-feat-Replace-BuilderExitButton-with-new-BuilderFooterToolbar-3196d73d3650819392efc171cf277326) by [Unito](https://www.unito.io)
113 lines
3.5 KiB
Vue
113 lines
3.5 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 [selectStep, arrangeStep]"
|
|
:key="step.id"
|
|
>
|
|
<button
|
|
:class="
|
|
cn(
|
|
stepClasses,
|
|
activeStep === step.id && 'bg-interface-builder-mode-background',
|
|
activeStep !== step.id &&
|
|
'hover:bg-secondary-background bg-transparent'
|
|
)
|
|
"
|
|
:aria-current="activeStep === step.id ? 'step' : undefined"
|
|
@click="navigateToStep(step.id)"
|
|
>
|
|
<StepBadge :step :index :model-value="activeStep" />
|
|
<StepLabel :step />
|
|
</button>
|
|
|
|
<div class="mx-1 h-px w-4 bg-border-default" role="separator" />
|
|
</template>
|
|
|
|
<!-- Default view -->
|
|
<ConnectOutputPopover
|
|
v-if="!hasOutputs"
|
|
:is-select-active="activeStep === 'builder:select'"
|
|
@switch="navigateToStep('builder:select')"
|
|
>
|
|
<button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
|
|
<StepBadge
|
|
:step="defaultViewStep"
|
|
:index="2"
|
|
:model-value="activeStep"
|
|
/>
|
|
<StepLabel :step="defaultViewStep" />
|
|
</button>
|
|
</ConnectOutputPopover>
|
|
<button
|
|
v-else
|
|
:class="
|
|
cn(
|
|
stepClasses,
|
|
activeStep === 'setDefaultView'
|
|
? 'bg-interface-builder-mode-background'
|
|
: 'hover:bg-secondary-background bg-transparent'
|
|
)
|
|
"
|
|
@click="navigateToStep('setDefaultView')"
|
|
>
|
|
<StepBadge
|
|
:step="defaultViewStep"
|
|
:index="2"
|
|
:model-value="activeStep"
|
|
/>
|
|
<StepLabel :step="defaultViewStep" />
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { useAppModeStore } from '@/stores/appModeStore'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import ConnectOutputPopover from './ConnectOutputPopover.vue'
|
|
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 appModeStore = useAppModeStore()
|
|
const { hasOutputs } = storeToRefs(appModeStore)
|
|
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 selectStep: BuilderToolbarStep<BuilderStepId> = {
|
|
id: 'builder:select',
|
|
title: t('builderToolbar.select'),
|
|
subtitle: t('builderToolbar.selectDescription'),
|
|
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 defaultViewStep: BuilderToolbarStep<BuilderStepId> = {
|
|
id: 'setDefaultView',
|
|
title: t('builderToolbar.defaultView'),
|
|
subtitle: t('builderToolbar.defaultViewDescription'),
|
|
icon: 'icon-[lucide--eye]'
|
|
}
|
|
</script>
|