lan/HMCL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine profile list UI.

Browse Source
This commit is contained in:
Yuhui Huang
2021-08-02 16:05:37 +08:00
parent 6fc0b13dc7
commit 123c863e3d
5 changed files with 51 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
HMCL/src/main/java/org/jackhuang/hmcl/ui/SVG.java
View File

@@ -167,6 +167,10 @@ public final class SVG {
return createSVGPath("M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z", fill, width, height);
}
public static Node plusCircleOutline(ObjectBinding<? extends Paint> fill, double width, double height) {
return createSVGPath("M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z", fill, width, height);
}
public static Node importIcon(ObjectBinding<? extends Paint> fill, double width, double height) {
return createSVGPath("M14,12L10,8V11H2V13H10V16M20,18V6C20,4.89 19.1,4 18,4H6A2,2 0 0,0 4,6V9H6V6H18V18H6V15H4V18A2,2 0 0,0 6,20H18A2,2 0 0,0 20,18Z", fill, width, height);
}

2
HMCL/src/main/java/org/jackhuang/hmcl/ui/profile/ProfileListItem.java
View File

@@ -32,7 +32,7 @@ public class ProfileListItem extends RadioButton {
public ProfileListItem(Profile profile) {
this.profile = profile;
getStyleClass().setAll("navigation-drawer-item");
getStyleClass().setAll("profile-list-item", "navigation-drawer-item");
setUserData(profile);
title.set(Profiles.getProfileDisplayName(profile));

26
HMCL/src/main/java/org/jackhuang/hmcl/ui/profile/ProfileListItemSkin.java
View File

@@ -18,22 +18,46 @@
package org.jackhuang.hmcl.ui.profile;
import com.jfoenix.controls.JFXButton;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.SkinBase;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import org.jackhuang.hmcl.setting.Theme;
import org.jackhuang.hmcl.ui.FXUtils;
import org.jackhuang.hmcl.ui.SVG;
import org.jackhuang.hmcl.ui.construct.RipplerContainer;
import org.jackhuang.hmcl.ui.construct.TwoLineListItem;
import org.jackhuang.hmcl.ui.versions.VersionPage;
public class ProfileListItemSkin extends SkinBase<ProfileListItem> {
private final PseudoClass SELECTED = PseudoClass.getPseudoClass("selected");
public ProfileListItemSkin(ProfileListItem skinnable) {
super(skinnable);
BorderPane root = new BorderPane();
root.setPickOnBounds(false);
RipplerContainer container = new RipplerContainer(root);
FXUtils.onChangeAndOperate(skinnable.selectedProperty(), active -> {
skinnable.pseudoClassStateChanged(SELECTED, active);
});
getSkinnable().addEventHandler(MouseEvent.MOUSE_CLICKED, e -> {
getSkinnable().setSelected(true);
});
Node left = VersionPage.wrap(SVG.folderOutline(Theme.blackFillBinding(), 24, 24));
root.setLeft(left);
BorderPane.setAlignment(left, Pos.CENTER_LEFT);
TwoLineListItem item = new TwoLineListItem();
item.setPickOnBounds(false);
BorderPane.setAlignment(item, Pos.CENTER);
root.setCenter(item);
@@ -51,6 +75,6 @@ public class ProfileListItemSkin extends SkinBase<ProfileListItem> {
item.titleProperty().bind(skinnable.titleProperty());
item.subtitleProperty().bind(skinnable.subtitleProperty());
getChildren().setAll(root);
getChildren().setAll(container);
}
}

12
HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameListPage.java
View File

@@ -67,7 +67,11 @@ public class GameListPage extends ListPageBase<GameListItem> implements Decorato
if (event.getSource() == Profiles.getSelectedProfile().getRepository())
runInFX(() -> setLoading(true));
});
profileListItems = MappedObservableList.create(profilesProperty(), ProfileListItem::new);
profileListItems = MappedObservableList.create(profilesProperty(), profile -> {
ProfileListItem item = new ProfileListItem(profile);
FXUtils.setLimitWidth(item, 300);
return item;
});
selectedProfile = createSelectedItemPropertyFor(profileListItems, Profile.class);
}
@@ -120,7 +124,7 @@ public class GameListPage extends ListPageBase<GameListItem> implements Decorato
addProfileItem.getStyleClass().add("navigation-drawer-item");
addProfileItem.setTitle(i18n("profile.new"));
addProfileItem.setActionButtonVisible(false);
addProfileItem.setLeftGraphic(VersionPage.wrap(SVG.plus(Theme.blackFillBinding(), -1, -1)));
addProfileItem.setLeftGraphic(VersionPage.wrap(SVG.plusCircleOutline(Theme.blackFillBinding(), 24, 24)));
addProfileItem.setOnAction(e -> Controllers.navigate(new ProfilePage(null)));
ScrollPane pane = new ScrollPane();
@@ -137,14 +141,14 @@ public class GameListPage extends ListPageBase<GameListItem> implements Decorato
installNewGameItem.getStyleClass().add("navigation-drawer-item");
installNewGameItem.setTitle(i18n("install.new_game"));
installNewGameItem.setActionButtonVisible(false);
installNewGameItem.setLeftGraphic(VersionPage.wrap(SVG.plus(Theme.blackFillBinding(), 24, 24)));
installNewGameItem.setLeftGraphic(VersionPage.wrap(SVG.plusCircleOutline(Theme.blackFillBinding(), 24, 24)));
installNewGameItem.setOnAction(e -> Versions.addNewGame());
AdvancedListItem installModpackItem = new AdvancedListItem();
installModpackItem.getStyleClass().add("navigation-drawer-item");
installModpackItem.setTitle(i18n("install.modpack"));
installModpackItem.setActionButtonVisible(false);
installModpackItem.setLeftGraphic(VersionPage.wrap(SVG.importIcon(Theme.blackFillBinding(), 24, 24)));
installModpackItem.setLeftGraphic(VersionPage.wrap(SVG.pack(Theme.blackFillBinding(), 24, 24)));
installModpackItem.setOnAction(e -> Versions.importModpack());
AdvancedListItem refreshItem = new AdvancedListItem();

14
HMCL/src/main/resources/assets/css/root.css
View File

@@ -95,10 +95,22 @@
-fx-padding: 0 0 0 0;
}
.navigation-drawer-item .title {
.navigation-drawer-item .two-line-list-item .title {
-fx-font-size: 13;
}
.navigation-drawer-item .two-line-list-item .subtitle {
-fx-font-size: 10;
}
.profile-list-item BorderPane {
-fx-padding: 8 0 8 16;
}
.profile-list-item:selected BorderPane {
-fx-background-color: -fx-base-rippler-color;
}
.notice-pane > .label {
-fx-text-fill: #0079FF;
-fx-font-size: 20;