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)
80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<template>
|
|
<PopoverRoot>
|
|
<PopoverTrigger as-child>
|
|
<slot />
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
side="bottom"
|
|
align="end"
|
|
:side-offset="18"
|
|
:collision-padding="10"
|
|
class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity]"
|
|
>
|
|
<div class="flex h-12 items-center justify-between px-4">
|
|
<h3 class="text-sm font-medium text-base-foreground">
|
|
{{ t('builderToolbar.connectOutput') }}
|
|
</h3>
|
|
<PopoverClose
|
|
:aria-label="t('g.close')"
|
|
class="flex cursor-pointer appearance-none items-center justify-center border-none bg-transparent p-0 text-muted-foreground hover:text-base-foreground"
|
|
>
|
|
<i class="icon-[lucide--x] size-4" />
|
|
</PopoverClose>
|
|
</div>
|
|
<div class="border-t border-border-default" />
|
|
<p class="mt-3 px-4 text-xs/relaxed text-muted-foreground">
|
|
{{ t('builderToolbar.connectOutputBody1') }}
|
|
</p>
|
|
<p
|
|
v-if="!isSelectActive"
|
|
class="mt-2 px-4 text-xs/relaxed text-muted-foreground"
|
|
>
|
|
{{ t('builderToolbar.connectOutputBody2') }}
|
|
</p>
|
|
<div class="mt-4 flex items-center justify-end gap-2 px-4 pb-4">
|
|
<template v-if="isSelectActive">
|
|
<PopoverClose as-child>
|
|
<Button variant="secondary" size="md">
|
|
{{ t('g.ok') }}
|
|
</Button>
|
|
</PopoverClose>
|
|
</template>
|
|
<template v-else>
|
|
<PopoverClose as-child>
|
|
<Button variant="muted-textonly" size="md">
|
|
{{ t('g.cancel') }}
|
|
</Button>
|
|
</PopoverClose>
|
|
<PopoverClose as-child>
|
|
<Button variant="secondary" size="md" @click="emit('switch')">
|
|
{{ t('builderToolbar.switchToOutputs') }}
|
|
</Button>
|
|
</PopoverClose>
|
|
</template>
|
|
</div>
|
|
</PopoverContent>
|
|
</PopoverRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
PopoverClose,
|
|
PopoverContent,
|
|
PopoverRoot,
|
|
PopoverTrigger
|
|
} from 'reka-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
const { isSelectActive = false } = defineProps<{
|
|
isSelectActive?: boolean
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const emit = defineEmits<{
|
|
switch: []
|
|
}>()
|
|
</script>
|