fix: background size

This commit is contained in:
huanghongxun 2021-08-28 01:29:13 +08:00
parent 34ceb1a29d
commit 63f4a3dc5c

View File

@ -79,13 +79,8 @@ public class DecoratorSkin extends SkinBase<Decorator> {
StackPane shadowContainer = new StackPane(); StackPane shadowContainer = new StackPane();
shadowContainer.getStyleClass().add("body"); shadowContainer.getStyleClass().add("body");
shadowContainer.setPickOnBounds(false);
parent = new StackPane(); parent = new StackPane();
parent.backgroundProperty().bind(skinnable.contentBackgroundProperty());
parent.setPickOnBounds(false);
parent.prefHeightProperty().bind(control.prefHeightProperty());
parent.prefWidthProperty().bind(control.prefWidthProperty());
Rectangle clip = new Rectangle(); Rectangle clip = new Rectangle();
clip.widthProperty().bind(parent.widthProperty()); clip.widthProperty().bind(parent.widthProperty());
clip.heightProperty().bind(parent.heightProperty()); clip.heightProperty().bind(parent.heightProperty());
@ -100,16 +95,6 @@ public class DecoratorSkin extends SkinBase<Decorator> {
shadowContainer.getChildren().setAll(parent); shadowContainer.getChildren().setAll(parent);
root.getChildren().setAll(shadowContainer); root.getChildren().setAll(shadowContainer);
// animation layer at bottom
{
HBox layer = new HBox();
leftPane = new StackPane();
leftPane.setPrefWidth(0);
leftPane.getStyleClass().add("jfx-decorator-drawer");
layer.getChildren().setAll(leftPane);
parent.getChildren().add(layer);
}
StackPane wrapper = new StackPane(); StackPane wrapper = new StackPane();
BorderPane frame = new BorderPane(); BorderPane frame = new BorderPane();
frame.getStyleClass().addAll("jfx-decorator"); frame.getStyleClass().addAll("jfx-decorator");
@ -120,8 +105,19 @@ public class DecoratorSkin extends SkinBase<Decorator> {
// center node with a animation layer at bottom, a container layer at middle and a "welcome" layer at top. // center node with a animation layer at bottom, a container layer at middle and a "welcome" layer at top.
StackPane container = new StackPane(); StackPane container = new StackPane();
container.backgroundProperty().bind(skinnable.contentBackgroundProperty());
FXUtils.setOverflowHidden(container); FXUtils.setOverflowHidden(container);
// animation layer at bottom
{
HBox layer = new HBox();
leftPane = new StackPane();
leftPane.setPrefWidth(0);
leftPane.getStyleClass().add("jfx-decorator-drawer");
layer.getChildren().setAll(leftPane);
container.getChildren().add(layer);
}
// content layer at middle // content layer at middle
{ {
StackPane contentPlaceHolder = new StackPane(); StackPane contentPlaceHolder = new StackPane();
@ -154,29 +150,18 @@ public class DecoratorSkin extends SkinBase<Decorator> {
titleContainer = new StackPane(); titleContainer = new StackPane();
titleContainer.setPickOnBounds(false); titleContainer.setPickOnBounds(false);
titleContainer.getStyleClass().addAll("jfx-tool-bar"); titleContainer.getStyleClass().addAll("jfx-tool-bar", "background");
control.capableDraggingWindow(titleContainer); control.capableDraggingWindow(titleContainer);
StackPane titleBarBackground = new StackPane();
titleBarBackground.getStyleClass().add("background");
titleContainer.getChildren().add(titleBarBackground);
BorderPane titleBar = new BorderPane(); BorderPane titleBar = new BorderPane();
titleBar.setPickOnBounds(false);
titleContainer.getChildren().add(titleBar); titleContainer.getChildren().add(titleBar);
Rectangle rectangle = new Rectangle(0, 0, 0, 0);
rectangle.widthProperty().bind(titleContainer.widthProperty());
rectangle.heightProperty().bind(titleContainer.heightProperty().add(100));
titleContainer.setClip(rectangle);
Rectangle buttonsContainerPlaceHolder = new Rectangle(); Rectangle buttonsContainerPlaceHolder = new Rectangle();
{ {
navBarPane = new TransitionPane(); navBarPane = new TransitionPane();
FXUtils.onChangeAndOperate(skinnable.stateProperty(), s -> { FXUtils.onChangeAndOperate(skinnable.stateProperty(), s -> {
if (s == null) return; if (s == null) return;
Node node = createNavBar(skinnable, s.isTitleBarTransparent(), s.getLeftPaneWidth(), s.isBackable(), skinnable.canCloseProperty().get(), skinnable.showCloseAsHomeProperty().get(), s.isRefreshable(), s.getTitle(), s.getTitleNode()); Node node = createNavBar(skinnable, s.getLeftPaneWidth(), s.isBackable(), skinnable.canCloseProperty().get(), skinnable.showCloseAsHomeProperty().get(), s.isRefreshable(), s.getTitle(), s.getTitleNode());
double targetOpacity = s.isTitleBarTransparent() ? 0 : 1;
if (s.isAnimate()) { if (s.isAnimate()) {
AnimationProducer animation; AnimationProducer animation;
if (skinnable.getNavigationDirection() == Navigation.NavigationDirection.NEXT) { if (skinnable.getNavigationDirection() == Navigation.NavigationDirection.NEXT) {
@ -192,9 +177,6 @@ public class DecoratorSkin extends SkinBase<Decorator> {
navBarPane.getChildren().setAll(node); navBarPane.getChildren().setAll(node);
} }
FXUtils.playAnimation(titleBarBackground, "animation",
s.isAnimate() ? Duration.millis(160) : null, titleBarBackground.opacityProperty(), null, targetOpacity, FXUtils.SINE);
titleBarTransparent = s.isTitleBarTransparent();
FXUtils.playAnimation(leftPane, "animation", FXUtils.playAnimation(leftPane, "animation",
s.isAnimate() ? Duration.millis(160) : null, leftPane.prefWidthProperty(), null, s.getLeftPaneWidth(), FXUtils.SINE); s.isAnimate() ? Duration.millis(160) : null, leftPane.prefWidthProperty(), null, s.getLeftPaneWidth(), FXUtils.SINE);
}); });
@ -234,13 +216,14 @@ public class DecoratorSkin extends SkinBase<Decorator> {
getChildren().add(root); getChildren().add(root);
} }
private Node createNavBar(Decorator skinnable, boolean titleBarTransparent, double leftPaneWidth, boolean canBack, boolean canClose, boolean showCloseAsHome, boolean canRefresh, String title, Node titleNode) { private Node createNavBar(Decorator skinnable, double leftPaneWidth, boolean canBack, boolean canClose, boolean showCloseAsHome, boolean canRefresh, String title, Node titleNode) {
BorderPane navBar = new BorderPane(); BorderPane navBar = new BorderPane();
{ {
HBox navLeft = new HBox(); HBox navLeft = new HBox();
navLeft.setAlignment(Pos.CENTER_LEFT); navLeft.setAlignment(Pos.CENTER_LEFT);
navLeft.setPadding(new Insets(0, 5, 0, 5)); navLeft.setPadding(new Insets(0, 5, 0, 5));
if (canBack) {
JFXButton backNavButton = new JFXButton(); JFXButton backNavButton = new JFXButton();
backNavButton.setGraphic(SVG.back(Theme.foregroundFillBinding(), -1, -1)); backNavButton.setGraphic(SVG.back(Theme.foregroundFillBinding(), -1, -1));
backNavButton.getStyleClass().add("jfx-decorator-button"); backNavButton.getStyleClass().add("jfx-decorator-button");
@ -248,37 +231,37 @@ public class DecoratorSkin extends SkinBase<Decorator> {
backNavButton.onActionProperty().bind(skinnable.onBackNavButtonActionProperty()); backNavButton.onActionProperty().bind(skinnable.onBackNavButtonActionProperty());
backNavButton.visibleProperty().set(canBack); backNavButton.visibleProperty().set(canBack);
navLeft.getChildren().add(backNavButton);
}
if (canClose) {
JFXButton closeNavButton = new JFXButton(); JFXButton closeNavButton = new JFXButton();
closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1)); closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1));
closeNavButton.getStyleClass().add("jfx-decorator-button"); closeNavButton.getStyleClass().add("jfx-decorator-button");
closeNavButton.ripplerFillProperty().bind(Theme.whiteFillBinding()); closeNavButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
closeNavButton.onActionProperty().bind(skinnable.onCloseNavButtonActionProperty()); closeNavButton.onActionProperty().bind(skinnable.onCloseNavButtonActionProperty());
if (canBack) navLeft.getChildren().add(backNavButton);
if (canClose) navLeft.getChildren().add(closeNavButton);
if (showCloseAsHome) if (showCloseAsHome)
closeNavButton.setGraphic(SVG.home(Theme.foregroundFillBinding(), -1, -1)); closeNavButton.setGraphic(SVG.home(Theme.foregroundFillBinding(), -1, -1));
else else
closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1)); closeNavButton.setGraphic(SVG.close(Theme.foregroundFillBinding(), -1, -1));
navLeft.getChildren().add(closeNavButton);
}
if (canBack || canClose) {
navBar.setLeft(navLeft); navBar.setLeft(navLeft);
}
BorderPane center = new BorderPane(); BorderPane center = new BorderPane();
if (title != null) { if (title != null) {
Label titleLabel = new Label(); Label titleLabel = new Label();
BorderPane.setAlignment(titleLabel, Pos.CENTER_LEFT); BorderPane.setAlignment(titleLabel, Pos.CENTER_LEFT);
titleLabel.getStyleClass().add("jfx-decorator-title"); titleLabel.getStyleClass().add("jfx-decorator-title");
if (titleBarTransparent) titleLabel.pseudoClassStateChanged(TRANSPARENT, true);
if (!canClose && !canBack) {
titleLabel.setAlignment(Pos.CENTER);
// 20: in this case width of navLeft is 10, so to make the text center aligned,
// we should have width 2 * 10 reduced
titleLabel.setPrefWidth(leftPaneWidth - 20);
}
if (titleNode != null) { if (titleNode != null) {
titleLabel.prefWidthProperty().bind(Bindings.createDoubleBinding(() -> { titleLabel.prefWidthProperty().bind(Bindings.createDoubleBinding(() -> {
// 18 = 10 (horizontal padding of navLeft) + 8 (margin-left) // 8 (margin-left)
return leftPaneWidth - 18 - backNavButton.getWidth() - closeNavButton.getWidth(); return leftPaneWidth - 8 - navLeft.getWidth();
}, backNavButton.widthProperty(), closeNavButton.widthProperty())); }, navLeft.widthProperty()));
} }
titleLabel.setText(title); titleLabel.setText(title);
center.setLeft(titleLabel); center.setLeft(titleLabel);