Skip to content

修复自动安装界面，卡片上按钮无法点击 #5251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OrzMiku wants to merge 1 commit into
base: main
Choose a base branch
from
+19 −13
Open

修复自动安装界面，卡片上按钮无法点击 #5251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions HMCL/src/main/java/org/jackhuang/hmcl/ui/InstallerItem.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,11 +300,15 @@ private static final class InstallerItemSkin extends SkinBase<InstallerItem> {
}
pane.getStyleClass().add("installer-item");
RipplerContainer container = new RipplerContainer(pane);
container.setPosition(JFXRippler.RipplerPos.FRONT);
getChildren().setAll(container);
container.setPosition(JFXRippler.RipplerPos.BACK);
StackPane paneWrapper = new StackPane();
paneWrapper.getStyleClass().add("installer-item-wrapper");
paneWrapper.getChildren().setAll(container);
getChildren().setAll(paneWrapper);

pane.pseudoClassStateChanged(LIST_ITEM, control.style == Style.LIST_ITEM);
pane.pseudoClassStateChanged(CARD, control.style == Style.CARD);
paneWrapper.pseudoClassStateChanged(CARD, control.style == Style.CARD);

if (control.iconType != null) {
ImageView view = new ImageView(control.iconType.getIcon());
Expand Down
24 changes: 13 additions & 11 deletions HMCL/src/main/resources/assets/css/root.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,31 +388,33 @@
-fx-cursor: hand;
}

.installer-item {
-fx-padding: 8px;
.installer-item-wrapper {
-fx-background-color: -monet-surface;
-fx-background-radius: 4;
-fx-pref-width: 180px;
}

.installer-item-wrapper:card {
Comment on lines +394 to +397
Copy link

Copilot AI Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
-fx-pref-width: 180px;
}
.installer-item-wrapper:card {
}
.installer-item-wrapper:card {
-fx-pref-width: 180px;

Copilot uses AI. Check for mistakes.
Comment on lines +392 to +397
Copy link

Copilot AI Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
-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;

Copilot uses AI. Check for mistakes.
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.26), 10, 0.12, -1, 2);
}

.installer-item:list-item {
.installer-item-wrapper .installer-item:list-item {
-fx-padding: 8px;
-fx-border-color: -monet-outline-variant;
-fx-border-width: 0 0 1 0;
-fx-alignment: center-left;
}

.installer-item:list-item > .installer-item-name {
.installer-item-wrapper .installer-item:list-item > .installer-item-name {
-fx-pref-width: 80px;
}

.installer-item:list-item > .installer-item-status {
.installer-item-wrapper .installer-item:list-item > .installer-item-status {
-fx-max-width: infinity;
}

.installer-item:card {
-fx-background-color: -monet-surface;
-fx-background-radius: 4;
.installer-item-wrapper .installer-item:card {
-fx-alignment: center;
-fx-pref-width: 180px;

-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.26), 10, 0.12, -1, 2);
}

/*******************************************************************************
Expand Down
Loading