修复自动安装界面，卡片上按钮无法点击 #5251
修复自动安装界面，卡片上按钮无法点击 #5251
Conversation
OrzMiku
force-pushed
the
fix/issue-5248
branch
from
4404932 to
42412d8
Compare
There was a problem hiding this comment.
Pull request overview
This PR fixes a bug where small buttons (remove and install/update buttons) on installer item cards were unclickable due to the RipplerContainer's ripple effect overlay blocking user interaction. The issue originated from a previous change to RipplerContainer that caused the ripple overlay to cover buttons when positioned at FRONT.
Changes:
- Changed RipplerContainer position from FRONT to BACK to prevent blocking button clicks
- Added a wrapper StackPane layer to hold styling properties (background, border radius) that were previously on the inner pane, as these properties on inner nodes prevent ripple animations when RipplerContainer is positioned at BACK
- Refactored CSS to move styling from
.installer-itemto a new.installer-item-wrapperparent selector
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| HMCL/src/main/java/org/jackhuang/hmcl/ui/InstallerItem.java | Added StackPane wrapper around RipplerContainer, changed ripple position to BACK, and applied appropriate style classes and pseudo-class states |
| HMCL/src/main/resources/assets/css/root.css | Introduced .installer-item-wrapper class and refactored existing .installer-item styles to work with the new wrapper structure |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| -fx-pref-width: 180px; | ||
| } | ||
|
|
||
| .installer-item-wrapper:card { |
There was a problem hiding this comment.
The -fx-pref-width: 180px; property should only be applied to CARD style wrappers, not to all installer-item-wrapper elements. In the original CSS, this was only on .installer-item:card. This property should be moved from line 394 to the .installer-item-wrapper:card selector (line 397) to prevent LIST_ITEM elements from having an incorrect fixed width of 180px.
| -fx-pref-width: 180px; | |
| } | |
| .installer-item-wrapper:card { | |
| } | |
| .installer-item-wrapper:card { | |
| -fx-pref-width: 180px; |
| -fx-background-color: -monet-surface; | ||
| -fx-background-radius: 4; | ||
| -fx-pref-width: 180px; | ||
| } | ||
|
|
||
| .installer-item-wrapper:card { |
There was a problem hiding this comment.
The -fx-background-color and -fx-background-radius properties are now applied to all installer-item-wrapper elements, including LIST_ITEM style. In the original CSS, these were only on .installer-item:card. If LIST_ITEM elements should not have a visible background (which seems likely given they have bottom borders suggesting they're in a vertical list), consider whether these properties should also be moved to .installer-item-wrapper:card or if they're necessary here for the ripple effect to work correctly on list items.
| -fx-background-color: -monet-surface; | |
| -fx-background-radius: 4; | |
| -fx-pref-width: 180px; | |
| } | |
| .installer-item-wrapper:card { | |
| -fx-pref-width: 180px; | |
| } | |
| .installer-item-wrapper:card { | |
| -fx-background-color: -monet-surface; | |
| -fx-background-radius: 4; |
1 participant
修复这里的小按钮无法点击的bug，修复：#5248
如果用了RipplerContainer，直接 setPosition 到 FRONT，由于 3e39398 的对 RipplerContainer 改动，会直接挡住按钮，无法点击到按钮。
setPosition 到 BACK 的话，内部的节点似乎不能设置背景，如果设置背景就不会触发ripper动画。
2026-01-18.00-05-56.mp4