mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-02 03:30:04 +00:00
25afd39d2b
A major, full rewrite of linear mode, now under the name "Simple Mode". - Fixes widget styling - Adds a new simplified history - Adds support for non-image outputs - Supports right sidebar - Allows and panning on the output image preview - Provides support for drag and drop zones - Moves workflow notes into a popover. - Allows scrolling through outputs with Ctrl+scroll or arrow keys The primary means of accessing Simple Mode is a toggle button on the bottom right. This button is only shown if a feature flag is enabled, or the user has already seen linear mode during the current session. Simple Mode can also be accessed by - Using the toggle linear mode keybind - Loading a workflow that that was saved in Simple Mode workflow - Loading a template url with appropriate parameter <img width="1790" height="1387" alt="image" src="https://github.com/user-attachments/assets/d86a4a41-dfbf-41e7-a6d9-146473005606" /> Known issues: - Outputs on cloud are not filtered to those produced by the current workflow. - Output filtering has been globally disabled for consistency - Outputs will load more items on scroll, but does not unload - Performance may be reduced on weak devices with very large histories. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7734-linear-v2-2d16d73d3650819b8a10f150ff12ea22) by [Unito](https://www.unito.io)
77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
PopoverArrow,
|
|
PopoverContent,
|
|
PopoverPortal,
|
|
PopoverRoot,
|
|
PopoverTrigger
|
|
} from 'reka-ui'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
defineOptions({
|
|
inheritAttrs: false
|
|
})
|
|
|
|
defineProps<{
|
|
entries?: { label: string; action?: () => void; icon?: string }[][]
|
|
icon?: string
|
|
to?: string | HTMLElement
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<PopoverRoot v-slot="{ close }">
|
|
<PopoverTrigger as-child>
|
|
<slot name="button">
|
|
<Button size="icon">
|
|
<i :class="icon ?? 'icon-[lucide--ellipsis]'" />
|
|
</Button>
|
|
</slot>
|
|
</PopoverTrigger>
|
|
<PopoverPortal :to>
|
|
<PopoverContent
|
|
side="bottom"
|
|
:side-offset="5"
|
|
:collision-padding="10"
|
|
v-bind="$attrs"
|
|
class="rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
|
>
|
|
<slot>
|
|
<div class="flex flex-col p-1">
|
|
<section
|
|
v-for="(entryGroup, index) in entries ?? []"
|
|
:key="index"
|
|
class="flex flex-col border-b-2 last:border-none border-border-subtle"
|
|
>
|
|
<div
|
|
v-for="{ label, action, icon } in entryGroup"
|
|
:key="label"
|
|
:class="
|
|
cn(
|
|
'flex flex-row gap-4 p-2 rounded-sm my-1',
|
|
action &&
|
|
'cursor-pointer hover:bg-secondary-background-hover'
|
|
)
|
|
"
|
|
@click="
|
|
() => {
|
|
if (!action) return
|
|
action()
|
|
close()
|
|
}
|
|
"
|
|
>
|
|
<i v-if="icon" :class="icon" />
|
|
{{ label }}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</slot>
|
|
<PopoverArrow class="fill-base-background stroke-border-subtle" />
|
|
</PopoverContent>
|
|
</PopoverPortal>
|
|
</PopoverRoot>
|
|
</template>
|