mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
fix(sidebar): Fix sidebar pointer events for interaction (#7905)
## Summary A small fix for #6700 Fixes pointer events handling in sidebar by moving `pointer-events-auto` from the main container to specific states (Connected and Floating), preventing unintended event blocking. ## Changes - **What**: Relocated `pointer-events-auto` class from the main sidebar container (`.side-tool-bar-container`) to conditional states: - Applied to `connected-sidebar` class when sidebar is connected (line 7) - Applied to floating `sidebar-item-group` elements when sidebar is floating (line 151) ## Screenshots ### Before: https://github.com/user-attachments/assets/f93badad-e248-49f0-9cde-99e364f4773d ### After: https://github.com/user-attachments/assets/16f8511c-cbc0-4e2d-bac1-33f932e979aa ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7905-fix-sidebar-Fix-sidebar-pointer-events-for-interaction-2e26d73d365081218361e79010c3347c) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<nav
|
||||
ref="sideToolbarRef"
|
||||
class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2 pointer-events-auto"
|
||||
class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
|
||||
:class="{
|
||||
'small-sidebar': isSmall,
|
||||
'connected-sidebar': isConnected,
|
||||
'connected-sidebar pointer-events-auto': isConnected,
|
||||
'floating-sidebar': !isConnected,
|
||||
'overflowing-sidebar': isOverflowing,
|
||||
'border-r border-[var(--interface-stroke)] shadow-interface': isConnected
|
||||
@@ -145,8 +145,8 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
|
||||
const isOverflowing = ref(false)
|
||||
const groupClasses = computed(() =>
|
||||
cn(
|
||||
'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0' +
|
||||
(isConnected.value ? '' : ' rounded-lg shadow-interface')
|
||||
'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0',
|
||||
!isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user