alt: align titlebar buttons. Mentioned in #701

HMCL/src/main/java/org/jackhuang/hmcl/ui/ToolbarListPageSkin.java

@@ -93,5 +93,15 @@ public abstract class ToolbarListPageSkin<T extends ListPageBase<? extends Node>
         return ret;
     }
 
+    public static JFXButton createDecoratorButton(String tooltip, SVG.SVGIcon creator, Runnable onClick) {
+        JFXButton ret = new JFXButton();
+        ret.getStyleClass().add("jfx-decorator-button");
+        ret.textFillProperty().bind(Theme.foregroundFillBinding());
+        ret.setGraphic(wrap(creator.createIcon(Theme.foregroundFillBinding(), -1, -1)));
+        FXUtils.installFastTooltip(ret, tooltip);
+        ret.setOnMouseClicked(e -> onClick.run());
+        return ret;
+    }
+
     protected abstract List<Node> initializeToolbar(T skinnable);
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java

@@ -216,32 +216,32 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             HBox navLeft = new HBox();
             navLeft.setAlignment(Pos.CENTER_LEFT);
             navLeft.setPadding(new Insets(0, 5, 0, 5));
-            {
-                JFXButton backNavButton = new JFXButton();
-                backNavButton.setGraphic(SVG.back(Theme.foregroundFillBinding(), -1, -1));
-                backNavButton.getStyleClass().add("jfx-decorator-button");
-                backNavButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
-                backNavButton.onActionProperty().bind(skinnable.onBackNavButtonActionProperty());
-                backNavButton.visibleProperty().set(canBack);
 
-                JFXButton closeNavButton = new JFXButton();
+            JFXButton backNavButton = new JFXButton();
+            backNavButton.setGraphic(SVG.back(Theme.foregroundFillBinding(), -1, -1));
+            backNavButton.getStyleClass().add("jfx-decorator-button");
+            backNavButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
+            backNavButton.onActionProperty().bind(skinnable.onBackNavButtonActionProperty());
+            backNavButton.visibleProperty().set(canBack);
+
+            JFXButton closeNavButton = new JFXButton();
+            closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1));
+            closeNavButton.getStyleClass().add("jfx-decorator-button");
+            closeNavButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
+            closeNavButton.onActionProperty().bind(skinnable.onCloseNavButtonActionProperty());
+
+            if (canBack) navLeft.getChildren().add(backNavButton);
+            if (canClose) navLeft.getChildren().add(closeNavButton);
+            if (showCloseAsHome)
+                closeNavButton.setGraphic(SVG.home(Theme.foregroundFillBinding(), -1, -1));
+            else
                 closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1));
-                closeNavButton.getStyleClass().add("jfx-decorator-button");
-                closeNavButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
-                closeNavButton.onActionProperty().bind(skinnable.onCloseNavButtonActionProperty());
-
-                if (canBack) navLeft.getChildren().add(backNavButton);
-                if (canClose) navLeft.getChildren().add(closeNavButton);
-                if (showCloseAsHome)
-                    closeNavButton.setGraphic(SVG.home(Theme.foregroundFillBinding(), -1, -1));
-                else
-                    closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1));
-            }
             navBar.setLeft(navLeft);
 
             BorderPane center = new BorderPane();
             if (title != null) {
                 Label titleLabel = new Label();
+                BorderPane.setAlignment(titleLabel, Pos.CENTER_LEFT);
                 titleLabel.getStyleClass().add("jfx-decorator-title");
                 if (titleBarTransparent) titleLabel.pseudoClassStateChanged(TRANSPARENT, true);
                 if (!canClose && !canBack) {
@@ -250,6 +250,11 @@ public class DecoratorSkin extends SkinBase<Decorator> {
                     // we should have width 2 * 10 reduced
                     titleLabel.setPrefWidth(leftPaneWidth - 20);
                 }
+                if (titleNode != null) {
+                    titleLabel.prefWidthProperty().bind(Bindings.createDoubleBinding(() -> {
+                        return leftPaneWidth - 20 - backNavButton.getWidth() - closeNavButton.getWidth();
+                    }, backNavButton.widthProperty(), closeNavButton.widthProperty()));
+                }
                 titleLabel.setText(title);
                 center.setLeft(titleLabel);
                 BorderPane.setAlignment(titleLabel, Pos.CENTER_LEFT);

HMCL/src/main/resources/assets/css/root.css

@@ -367,13 +367,16 @@
 
 .jfx-tool-bar {
     -fx-font-size: 13.0;
-    -fx-font-weight: BOLD;
     -fx-pref-width: 100.0%;
     -fx-min-height: 40px;
     -fx-max-height: 40px;
     -fx-pref-height: 40px;
 }
 
+.jfx-tool-bar .jfx-decorator-title {
+    -fx-font-weight: BOLD;
+}
+
 .jfx-tool-bar .background {
     -fx-background-color: -fx-base-color;
 }
@@ -1131,6 +1134,7 @@
 
 .jfx-decorator-tab .tab-container:selected .tab-label {
     -fx-text-fill: -fx-base-text-fill;
+    -fx-font-weight: BOLD;
 }
 
 .window {