mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-24 00:34:09 +00:00
Style: Grid for widgets (#6891)
## Summary Keeps the controls and widgets a consistent width, but lets the size be more flexible ## Screenshots <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6891-Style-Grid-for-widgets-2b56d73d365081a29c30d337f3be1af6) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
v-else
|
||||
:class="
|
||||
cn(
|
||||
'lg-node-widgets flex flex-col has-[.widget-expands]:flex-1 gap-1 pr-3',
|
||||
'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] has-[.widget-expands]:flex-1 gap-1 pr-3',
|
||||
shouldHandleNodePointerEvents
|
||||
? 'pointer-events-auto'
|
||||
: 'pointer-events-none'
|
||||
@@ -19,7 +19,7 @@
|
||||
<div
|
||||
v-for="(widget, index) in processedWidgets"
|
||||
:key="`widget-${index}-${widget.name}`"
|
||||
class="lg-node-widget group flex items-stretch has-[.widget-expands]:flex-1"
|
||||
class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch has-[.widget-expands]:flex-1"
|
||||
>
|
||||
<!-- Widget Input Slot Dot -->
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
:model-value="widget.value"
|
||||
:node-id="nodeData?.id != null ? String(nodeData.id) : ''"
|
||||
:node-type="nodeType"
|
||||
class="flex-1"
|
||||
class="flex-1 col-span-2"
|
||||
@update:model-value="widget.updateHandler"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -11,8 +11,10 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-[30px] min-w-0 items-center justify-between gap-1">
|
||||
<div class="relative flex h-full min-w-0 w-20 items-center">
|
||||
<div
|
||||
class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
|
||||
>
|
||||
<div class="relative flex h-full min-w-0 items-center">
|
||||
<p
|
||||
v-if="widget.name"
|
||||
class="lod-toggle flex-1 truncate text-xs font-normal text-node-component-slot-text"
|
||||
|
||||
Reference in New Issue
Block a user