mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
ada0993572
## Summary Implements design feedback for the asset panel, improving visual hierarchy, contrast, and responsiveness based on design tokens update. ## Changes ### 🎨 Design System Updates (style.css) - **New tokens for MediaAssetCard states:** - `--modal-card-background-hovered`: Hover state background - `--modal-card-border-highlighted`: Selected state border color - **Updated tag contrast:** - Light mode: `smoke-200` → `smoke-400` - Dark mode: `charcoal-200` → `ash-800` - **Registered tokens in Tailwind** via `@theme inline` for proper class generation ### 🖼️ MediaAssetCard Improvements - **Added tooltips** to all interactive buttons: - Zoom button: "Inspect" - More button: "More options" - Output count button: "See more outputs" - **Fixed tooltip event conflicts** by wrapping buttons in tooltip divs - **Updated hover/selected states:** - Hover: Uses `--modal-card-background-hovered` for subtle highlight - Selected: Uses `--modal-card-border-highlighted` for border only (no background) - **Updated placeholder background** to use `--modal-card-placeholder-background` - **Tag styling:** Changed from `variant="light"` to `variant="gray"` for better contrast ### 📦 SquareChip Component - **Added `gray` variant** that uses `--modal-card-tag-background` token - Maintains consistency with design system tokens ### 📱 AssetsSidebarTab Responsive Footer - **Responsive button display:** - Width > 350px: Shows icon + text buttons - Width ≤ 350px: Shows icon-only buttons - **Text alignment:** Left-aligns selection count text in compact mode - **Uses `useResizeObserver`** for automatic width detection ### 🌐 Internationalization - Added new i18n keys for tooltips: - `mediaAsset.actions.inspect` - `mediaAsset.actions.more` - `mediaAsset.actions.seeMoreOutputs` ### 🔧 Minor Fixes - **Media3DTop:** Improved text size and icon color for better visual hierarchy ## Visual Changes - **Increased contrast** for asset card tags (more visible in both themes) - **Hover state** now provides clear visual feedback - **Selected state** uses border highlight instead of background fill - **Sidebar footer** gracefully adapts to narrow widths ## Related - Addresses feedback from: https://www.notion.so/comfy-org/Asset-panel-feedback-2aa6d73d3650800baacaf739a49360b3 - Design token updates by @Alex Tov ## Test Plan - [ ] Verify asset card hover states in both light and dark themes - [ ] Verify asset card selected states show highlighted border - [ ] Test tooltips on all MediaAssetCard buttons - [ ] Resize sidebar to < 350px and verify footer shows icon-only buttons - [ ] Resize sidebar to > 350px and verify footer shows icon + text buttons - [ ] Verify tag contrast improvement in both themes - [ ] Test 3D asset placeholder appearance ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6749-feat-Improve-MediaAssetCard-design-and-add-responsive-sidebar-footer-2b06d73d365081019b90e110df2f1ae8) by [Unito](https://www.unito.io)