mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 17:52:16 +00:00
1058b7d12d
## Summary Additional fixes and updates based on testing ## Changes - **What**: - add warning to welcome screen & when sharing an app that has had all outputs removed - fix target workflow when changing mode via tab right click menu - change build app text to be conditional "edit" vs "build" depending on if an app is already defined - update empty apps sidebar tab button text to make it clearer - remove templates button from app mode (we will reintroduce this once we have app templates) - add "exit to graph" after applying default mode of node graph - update cancel button to remove item from queue if it hasn't started yet - improve scoping of jobs/outputs to the current workflow [not perfect but should be much improved] - close sidebar tabs on entering app mode - change tooltip to be under the workflow menu rather than covering the button ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9511-feat-fix-App-mode-QA-feedback-2-31b6d73d365081d59bbbc13111100d46) by [Unito](https://www.unito.io)
64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<nav
|
|
class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center gap-2 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
|
|
>
|
|
<Button variant="textonly" size="lg" @click="onExitBuilder">
|
|
{{ t('builderMenu.exitAppBuilder') }}
|
|
</Button>
|
|
<Button
|
|
variant="textonly"
|
|
size="lg"
|
|
:disabled="isFirstStep"
|
|
@click="goBack"
|
|
>
|
|
<i class="icon-[lucide--chevron-left]" aria-hidden="true" />
|
|
{{ t('g.back') }}
|
|
</Button>
|
|
<Button size="lg" :disabled="isLastStep" @click="goNext">
|
|
{{ t('g.next') }}
|
|
<i class="icon-[lucide--chevron-right]" aria-hidden="true" />
|
|
</Button>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useEventListener } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { useAppMode } from '@/composables/useAppMode'
|
|
import { useAppModeStore } from '@/stores/appModeStore'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
|
|
import { useBuilderSteps } from './useBuilderSteps'
|
|
|
|
const { t } = useI18n()
|
|
const appModeStore = useAppModeStore()
|
|
const dialogStore = useDialogStore()
|
|
const { isBuilderMode } = useAppMode()
|
|
const { hasOutputs } = storeToRefs(appModeStore)
|
|
const { isFirstStep, isLastStep, goBack, goNext } = useBuilderSteps({
|
|
hasOutputs
|
|
})
|
|
|
|
useEventListener(window, 'keydown', (e: KeyboardEvent) => {
|
|
if (
|
|
e.key === 'Escape' &&
|
|
!e.ctrlKey &&
|
|
!e.altKey &&
|
|
!e.metaKey &&
|
|
dialogStore.dialogStack.length === 0 &&
|
|
isBuilderMode.value
|
|
) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
onExitBuilder()
|
|
}
|
|
})
|
|
|
|
function onExitBuilder() {
|
|
appModeStore.exitBuilder()
|
|
}
|
|
</script>
|