mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 17:54:14 +00:00
d5e9be6a64
- Textareas have a fixed (larger) height. This was requested by design and I thought I fixed it while back. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/35ecfa42-4812-43b3-9844-4ef1f757ae40" /> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/8d13e114-6524-4f3e-ae61-0d31d754466c" />| - Since the typeform survey popover doesn't work well on mobile, the button will instead open the survey in a new tab for mobile users. - Workaround for the first linear output on local not being automatically selected for display - Add the linear mode toggle to the bottom left of mobile layout <img width="634" height="90" alt="image" src="https://github.com/user-attachments/assets/571c672c-5913-4dc9-84f9-d16c49b4a587" /> - Adds a hamburger menu to the mobile layout providing buttons for opening workflows, templates, and an additional exit linear option. - Button takes up a full line of space, so it doesn't provide much space savings currently. May need some design iteration. <img width="635" height="225" alt="image" src="https://github.com/user-attachments/assets/a305e795-db0d-4265-b64b-04326a69216d" /> And an unrelated tweak requested by Comfy: when opening templates, the searchbar is autofocused. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8375-Additional-linear-tweaks-2f66d73d36508172a5e7e716d0cba873) by [Unito](https://www.unito.io)
59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
CollapsibleRoot,
|
|
CollapsibleTrigger,
|
|
CollapsibleContent
|
|
} from 'reka-ui'
|
|
|
|
import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import Popover from '@/components/ui/Popover.vue'
|
|
import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
|
|
import { t } from '@/i18n'
|
|
import { useCommandStore } from '@/stores/commandStore'
|
|
</script>
|
|
<template>
|
|
<CollapsibleRoot class="flex flex-col">
|
|
<CollapsibleTrigger as-child>
|
|
<Button variant="secondary" class="size-10 self-end m-4 mb-2">
|
|
<i class="icon-[lucide--menu] size-8" />
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent class="flex gap-2 flex-col">
|
|
<div class="w-full border-b-2 border-border-subtle" />
|
|
<Popover>
|
|
<template #button>
|
|
<Button variant="secondary" size="lg" class="w-full">
|
|
<i class="icon-[comfy--workflow]" />
|
|
{{ t('Workflows') }}
|
|
</Button>
|
|
</template>
|
|
<WorkflowsSidebarTab class="h-300 w-[80vw]" />
|
|
</Popover>
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
class="w-full"
|
|
@click="useWorkflowTemplateSelectorDialog().show('menu')"
|
|
>
|
|
<i class="icon-[comfy--template]" />
|
|
{{ t('sideToolbar.templates') }}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
class="w-full"
|
|
@click="
|
|
useCommandStore().execute('Comfy.ToggleLinear', {
|
|
metadata: { source: 'button' }
|
|
})
|
|
"
|
|
>
|
|
<i class="icon-[lucide--log-out]" />
|
|
{{ t('linearMode.graphMode') }}
|
|
</Button>
|
|
<div class="w-full border-b-2 border-border-subtle" />
|
|
</CollapsibleContent>
|
|
</CollapsibleRoot>
|
|
</template>
|