mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 14:09:59 +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)
61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col',
|
|
props.class
|
|
)
|
|
"
|
|
>
|
|
<div class="comfy-vue-side-bar-header flex flex-col gap-2">
|
|
<Toolbar
|
|
class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
|
|
>
|
|
<template #start>
|
|
<span class="truncate font-bold" :title="props.title">
|
|
{{ props.title }}
|
|
</span>
|
|
<slot name="alt-title" />
|
|
</template>
|
|
<template #end>
|
|
<div
|
|
class="touch:w-auto touch:opacity-100 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
|
|
>
|
|
<slot name="tool-buttons" />
|
|
</div>
|
|
</template>
|
|
</Toolbar>
|
|
<slot name="header" />
|
|
</div>
|
|
<!-- h-0 to force scrollpanel to grow -->
|
|
<ScrollPanel class="comfy-vue-side-bar-body h-0 grow">
|
|
<slot name="body" />
|
|
</ScrollPanel>
|
|
<slot name="footer" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ScrollPanel from 'primevue/scrollpanel'
|
|
import Toolbar from 'primevue/toolbar'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const props = defineProps<{
|
|
title: string
|
|
class?: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference '../../../assets/css/style.css';
|
|
|
|
:deep(.p-toolbar-end) .p-button {
|
|
@apply py-1 2xl:py-2;
|
|
}
|
|
|
|
:deep(.p-toolbar-start) {
|
|
@apply min-w-0 flex-1 overflow-hidden;
|
|
}
|
|
</style>
|