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)
85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<template>
|
|
<PopoverRoot>
|
|
<PopoverAnchor as-child>
|
|
<div
|
|
data-testid="builder-opens-as"
|
|
class="flex h-8 min-w-64 items-center justify-center gap-2 rounded-t-2xl bg-interface-builder-mode-footer-background px-4 text-sm text-interface-builder-mode-button-foreground"
|
|
>
|
|
<i :class="cn(currentModeIcon, 'size-4')" aria-hidden="true" />
|
|
<i18n-t
|
|
:keypath="
|
|
isAppMode
|
|
? 'builderFooter.opensAsApp'
|
|
: 'builderFooter.opensAsGraph'
|
|
"
|
|
tag="span"
|
|
>
|
|
<template #mode>
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
class="-ml-0.5 h-6 gap-1 rounded-md border-none bg-transparent px-1.5 text-sm text-interface-builder-mode-button-foreground hover:bg-interface-builder-mode-button-background/70"
|
|
>
|
|
{{
|
|
isAppMode
|
|
? t('builderToolbar.app').toLowerCase()
|
|
: t('builderToolbar.nodeGraph').toLowerCase()
|
|
}}
|
|
<i
|
|
class="icon-[lucide--chevron-down] size-3.5"
|
|
aria-hidden="true"
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
</template>
|
|
</i18n-t>
|
|
<PopoverPortal>
|
|
<PopoverContent
|
|
side="top"
|
|
:side-offset="5"
|
|
:collision-padding="10"
|
|
class="z-1700 rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[transform,opacity]"
|
|
>
|
|
<ViewTypeRadioGroup
|
|
:model-value="isAppMode"
|
|
:aria-label="t('builderToolbar.defaultViewLabel')"
|
|
size="sm"
|
|
@update:model-value="$emit('select', $event)"
|
|
/>
|
|
</PopoverContent>
|
|
</PopoverPortal>
|
|
</div>
|
|
</PopoverAnchor>
|
|
</PopoverRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import {
|
|
PopoverAnchor,
|
|
PopoverContent,
|
|
PopoverPortal,
|
|
PopoverRoot,
|
|
PopoverTrigger
|
|
} from 'reka-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import ViewTypeRadioGroup from './ViewTypeRadioGroup.vue'
|
|
|
|
const { isAppMode } = defineProps<{
|
|
isAppMode: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
select: [openAsApp: boolean]
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const currentModeIcon = computed(() =>
|
|
isAppMode ? 'icon-[lucide--app-window]' : 'icon-[comfy--workflow]'
|
|
)
|
|
</script>
|