mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
7c2c59b9fb
## Summary Center the ComfyUI logo in the sidebar menu button after chevron icon was added, and add padding to floating sidebar item groups. ## Changes Before / after: <img width="127" height="417" alt="image" src="https://github.com/user-attachments/assets/aa327fd9-5550-49aa-b28d-a90435e9d1bc" /> - **What**: Use negative margin on chevron icon so it doesn't affect logo centering. Add `p-0.5` padding to floating sidebar item groups. ## Review Focus Visual alignment of the logo in both floating and connected sidebar modes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9722-fix-center-ComfyUI-logo-in-sidebar-menu-button-with-chevron-31f6d73d3650811a9392cda3070310f9) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: GitHub Action <action@github.com>
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import { useHideLayoutField } from '@/types/widgetTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { rootClass } = defineProps<{
|
|
widget: Pick<
|
|
SimplifiedWidget<string | number | undefined>,
|
|
'name' | 'label' | 'borderStyle'
|
|
>
|
|
rootClass?: string
|
|
}>()
|
|
|
|
const hideLayoutField = useHideLayoutField()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'grid min-w-0 grid-cols-subgrid justify-between gap-1 text-node-component-slot-text',
|
|
rootClass
|
|
)
|
|
"
|
|
>
|
|
<div v-if="!hideLayoutField" class="content-center-safe truncate">
|
|
<template v-if="widget.name">
|
|
{{ widget.label || widget.name }}
|
|
</template>
|
|
</div>
|
|
<!-- basis-full grow -->
|
|
<div class="relative min-w-0 flex-1">
|
|
<div
|
|
:class="
|
|
cn(
|
|
'min-w-0 cursor-default rounded-lg transition-all has-focus-visible:ring has-focus-visible:ring-component-node-widget-background-highlighted',
|
|
widget.borderStyle
|
|
)
|
|
"
|
|
@pointerdown.stop
|
|
@pointermove.stop
|
|
@pointerup.stop
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|