mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
68b16e3a3f
## Summary Change app mode changes to be written directly to the workflow on change instead of requiring explicit save via builder. Temporary: Adds `.app.json` file extension to app files for identification since we don't currently have a way to identify them with metadata Removes app builder save dialog and replaces it with default mode selection ## Changes - **What**: - ensure all save locations handle app mode - remove dirtyLinearData and flushing - **Breaking**: - if people are relying on workflow names and are converting to/from app mode in the same workflow, they will gain/lose the `.app` part of the extension ## Screenshots (if applicable) <img width="689" height="84" alt="image" src="https://github.com/user-attachments/assets/335596ee-dce9-4e3a-a7b5-f0715c294e41" /> <img width="421" height="324" alt="image" src="https://github.com/user-attachments/assets/ad3cd33c-e9f0-4c30-8874-d4507892fc6b" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9338-feat-App-mode-saving-rework-3176d73d3650813f9ae1f6c5a234da8c) by [Unito](https://www.unito.io)
98 lines
2.7 KiB
Vue
98 lines
2.7 KiB
Vue
<template>
|
|
<BuilderDialog @close="$emit('close')">
|
|
<template #title>
|
|
{{ $t('builderToolbar.defaultViewTitle') }}
|
|
</template>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm text-muted-foreground">
|
|
{{ $t('builderToolbar.defaultViewLabel') }}
|
|
</label>
|
|
<div role="radiogroup" class="flex flex-col gap-2">
|
|
<Button
|
|
v-for="option in viewTypeOptions"
|
|
:key="option.value.toString()"
|
|
role="radio"
|
|
:aria-checked="openAsApp === option.value"
|
|
:class="
|
|
cn(
|
|
itemClasses,
|
|
openAsApp === option.value && 'bg-secondary-background'
|
|
)
|
|
"
|
|
variant="textonly"
|
|
@click="openAsApp = option.value"
|
|
>
|
|
<div
|
|
class="flex size-8 min-h-8 items-center justify-center rounded-lg bg-secondary-background-hover"
|
|
>
|
|
<i :class="cn(option.icon, 'size-4')" />
|
|
</div>
|
|
<div class="mx-2 flex flex-1 flex-col items-start">
|
|
<span class="text-sm font-medium text-base-foreground">
|
|
{{ option.title }}
|
|
</span>
|
|
<span class="text-xs text-muted-foreground">
|
|
{{ option.subtitle }}
|
|
</span>
|
|
</div>
|
|
<i
|
|
v-if="openAsApp === option.value"
|
|
class="icon-[lucide--check] size-4 text-base-foreground"
|
|
/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<Button variant="muted-textonly" size="lg" @click="$emit('close')">
|
|
{{ $t('g.cancel') }}
|
|
</Button>
|
|
<Button variant="secondary" size="lg" @click="$emit('apply', openAsApp)">
|
|
{{ $t('g.apply') }}
|
|
</Button>
|
|
</template>
|
|
</BuilderDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import BuilderDialog from './BuilderDialog.vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const { initialOpenAsApp = true } = defineProps<{
|
|
initialOpenAsApp?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
apply: [openAsApp: boolean]
|
|
close: []
|
|
}>()
|
|
|
|
const openAsApp = ref(initialOpenAsApp)
|
|
|
|
const viewTypeOptions = [
|
|
{
|
|
value: true,
|
|
icon: 'icon-[lucide--app-window]',
|
|
title: t('builderToolbar.app'),
|
|
subtitle: t('builderToolbar.appDescription')
|
|
},
|
|
{
|
|
value: false,
|
|
icon: 'icon-[comfy--workflow]',
|
|
title: t('builderToolbar.nodeGraph'),
|
|
subtitle: t('builderToolbar.nodeGraphDescription')
|
|
}
|
|
]
|
|
|
|
const itemClasses =
|
|
'flex h-14 cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-transparent py-2 pr-4 pl-2 text-base-foreground transition-colors hover:bg-secondary-background'
|
|
</script>
|