diff --git a/base/src/main/java/atlantafx/base/layout/DialogPane.java b/base/src/main/java/atlantafx/base/layout/ModalBox.java similarity index 85% rename from base/src/main/java/atlantafx/base/layout/DialogPane.java rename to base/src/main/java/atlantafx/base/layout/ModalBox.java index 33a6759..b2a69d7 100644 --- a/base/src/main/java/atlantafx/base/layout/DialogPane.java +++ b/base/src/main/java/atlantafx/base/layout/ModalBox.java @@ -15,13 +15,13 @@ import javafx.scene.layout.StackPane; import org.jetbrains.annotations.Nullable; /** - * The DialogPane is a specialized control or layout designed to hold the + * The ModalBox is a specialized control or layout designed to hold the * {@link ModalPane} dialog content. It includes the close button out-of-the-box - * and allows for the addition of arbitrary children. The DialogPane is derived + * and allows for the addition of arbitrary children. The ModalBox is derived * from the {@link AnchorPane}, so it inherits the same API. Just be sure that * you haven't removed the close button while using it. */ -public class DialogPane extends AnchorPane { +public class ModalBox extends AnchorPane { protected final StackPane closeButton = new StackPane(); protected final StackPane closeButtonIcon = new StackPane(); @@ -29,23 +29,23 @@ public class DialogPane extends AnchorPane { protected @Nullable ModalPane modalPane; /** - * Creates an DialogPane layout. + * Creates a ModalBox layout. */ - public DialogPane() { + public ModalBox() { this((String) null); } /** - * Creates an DialogPane layout with the given children. + * Creates a ModalBox layout with the given children. * * @param children the initial set of children for this pane */ - public DialogPane(Node... children) { + public ModalBox(Node... children) { this((String) null, children); } /** - * Creates a DialogPane layout with the given children and binds + * Creates a ModalBox layout with the given children and binds * the close handler to a ModalPane via CSS selector. When user clicks * on the close button, it performs a ModalPane lookup via the specified * selector and calls the {@link ModalPane#hide()} method automatically. @@ -53,7 +53,7 @@ public class DialogPane extends AnchorPane { * @param selector the ModalPane pane CSS selector * @param children the initial set of children for this pane */ - public DialogPane(@Nullable @NamedArg("selector") String selector, Node... children) { + public ModalBox(@Nullable @NamedArg("selector") String selector, Node... children) { super(children); this.selector = selector; @@ -63,14 +63,14 @@ public class DialogPane extends AnchorPane { } /** - * Creates a DialogPane layout with the given children and binds + * Creates a ModalBox layout with the given children and binds * the close handler to a ModalPane. When user clicks on the close button, * it calls the {@link ModalPane#hide()} method automatically. * * @param modalPane the ModalPane pane CSS selector * @param children the initial set of children for this pane */ - public DialogPane(@Nullable ModalPane modalPane, Node... children) { + public ModalBox(@Nullable ModalPane modalPane, Node... children) { super(children); this.selector = null; @@ -80,9 +80,9 @@ public class DialogPane extends AnchorPane { } /** - * Adds (prepends) specified node to the DialogPane before the close button. + * Adds (prepends) specified node to the ModalBox before the close button. * - *

Otherwise, if the added node takes up the full size of the DialogPane + *

Otherwise, if the added node takes up the full size of the ModalBox * and {@link Node#isMouseTransparent()} is false, then the close button * will not receive mouse events and therefore will not be clickable. * @@ -94,7 +94,7 @@ public class DialogPane extends AnchorPane { } /** - * Manually closes the DialogPane in case one needs to use their + * Manually closes the ModalBox in case one needs to use their * own close button. */ public void close() { @@ -108,7 +108,7 @@ public class DialogPane extends AnchorPane { closeButtonIcon.getStyleClass().add("icon"); - getStyleClass().add("dialog-pane"); + getStyleClass().add("modal-box"); getChildren().add(closeButton); setCloseButtonPosition(); } diff --git a/sampler/src/main/java/atlantafx/sampler/layout/ModalDialog.java b/sampler/src/main/java/atlantafx/sampler/layout/ModalDialog.java index f010e94..e374907 100644 --- a/sampler/src/main/java/atlantafx/sampler/layout/ModalDialog.java +++ b/sampler/src/main/java/atlantafx/sampler/layout/ModalDialog.java @@ -6,7 +6,7 @@ import atlantafx.base.controls.Card; import atlantafx.base.controls.ModalPane; import atlantafx.base.controls.Spacer; import atlantafx.base.controls.Tile; -import atlantafx.base.layout.DialogPane; +import atlantafx.base.layout.ModalBox; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; @@ -15,7 +15,7 @@ import javafx.scene.layout.HBox; import javafx.scene.layout.Priority; import javafx.scene.layout.VBox; -public abstract class ModalDialog extends DialogPane { +public abstract class ModalDialog extends ModalBox { protected final Card content = new Card(); protected final Tile header = new Tile(); diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/ModalPanePage.java b/sampler/src/main/java/atlantafx/sampler/page/components/ModalPanePage.java index 53dfce0..2f6469c 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/ModalPanePage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/ModalPanePage.java @@ -4,7 +4,7 @@ package atlantafx.sampler.page.components; import atlantafx.base.controls.ModalPane; import atlantafx.base.controls.Tile; -import atlantafx.base.layout.DialogPane; +import atlantafx.base.layout.ModalBox; import atlantafx.base.util.BBCodeParser; import atlantafx.sampler.Resources; import atlantafx.sampler.page.ExampleBox; @@ -70,7 +70,7 @@ public final class ModalPanePage extends OutlinePage { addSection("Nesting", nestingExample()); addSection("Maximized", maximizedExample()); addSection("Overflowed", overflowedExample()); - addSection("DialogPane", dialogPaneExample()); + addSection("ModalBox", modalBoxExample()); addSection("Lightbox", lightboxExample()); } @@ -323,13 +323,13 @@ public final class ModalPanePage extends OutlinePage { return example; } - private ExampleBox dialogPaneExample() { + private ExampleBox modalBoxExample() { //snippet_8:start // you can use a selector - var dialog = new DialogPane("#modalPane"); + var dialog = new ModalBox("#modalPane"); // ... or your pass a ModalPane instance directly - //var dialog = new DialogPane(modalPane); + //var dialog = new ModalBox(modalPane); // ... or you can set your own close handler //dialog.setOnClose(/* whatever */); @@ -361,7 +361,7 @@ public final class ModalPanePage extends OutlinePage { box.setAlignment(Pos.CENTER); var description = BBCodeParser.createFormattedText(""" - The [i]DialogPane[/i] is a specialized control (or layout) designed to hold the \ + The [i]ModalBox[/i] is a specialized control (or layout) designed to hold the \ [i]ModalPane[/i] dialog content. It includes the close button out-of-the-box \ and allows for the addition of arbitrary children.""" ); diff --git a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/layout/_root.scss b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/layout/_root.scss index 8a7bbf3..cabe36b 100644 --- a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/layout/_root.scss +++ b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/layout/_root.scss @@ -69,6 +69,8 @@ .modal-dialog { -fx-background-color: transparent; + -fx-border-width: 2; + -fx-border-color: -color-border-default; .card { -fx-border-width: 0; diff --git a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/theme/_contrast-checker.scss b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/theme/_contrast-checker.scss index 74f9822..0f9a9ce 100644 --- a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/theme/_contrast-checker.scss +++ b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/theme/_contrast-checker.scss @@ -113,17 +113,19 @@ } .contrast-checker-dialog { - -color-dialog-bg: white; - -color-dialog-fg: black; - - -color-dialog-pane-bg: -color-contrast-checker-bg; - -color-dialog-pane-close-fg: -color-contrast-checker-fg; - -color-dialog-pane-close-bg-hover: derive(-color-contrast-checker-bg, 30%); + -color-modal-box-bg: -color-contrast-checker-bg; + -color-modal-box-close-fg: -color-contrast-checker-fg; + -color-modal-box-close-bg-hover: derive(-color-contrast-checker-bg, 30%); -fx-background-color: transparent; + &.modal-dialog { + -fx-border-width: 0; + } + .card { -fx-background-color: -color-contrast-checker-bg; + -fx-border-width: 0; .title { -fx-text-fill: -color-contrast-checker-fg; diff --git a/styles/src/components/_modal-pane.scss b/styles/src/components/_modal-pane.scss index 5c82ec4..fbfd5cb 100644 --- a/styles/src/components/_modal-pane.scss +++ b/styles/src/components/_modal-pane.scss @@ -19,13 +19,13 @@ $close-button-icon-size: 0.3em !default; } } -// DialogPane is directly related to the ModalPane -.dialog-pane { - -color-dialog-pane-bg: $color-dialog-bg; - -color-dialog-pane-close-fg: $color-dialog-close-fg; - -color-dialog-pane-close-bg-hover: $color-dialog-close-bg-hover; +// ModalBox is directly related to the ModalPane +.modal-box { + -color-modal-box-bg: $color-dialog-bg; + -color-modal-box-close-fg: $color-dialog-close-fg; + -color-modal-box-close-bg-hover: $color-dialog-close-bg-hover; - -fx-background-color: -color-dialog-pane-bg; + -fx-background-color: -color-modal-box-bg; >.close-button { -fx-background-radius: $close-button-radius; @@ -33,12 +33,12 @@ $close-button-icon-size: 0.3em !default; >.icon { @include icons.get("close", true); - -fx-background-color: -color-dialog-pane-close-fg; + -fx-background-color: -color-modal-box-close-fg; -fx-padding: $close-button-icon-size; } &:hover { - -fx-background-color: -color-dialog-pane-close-bg-hover; + -fx-background-color: -color-modal-box-close-bg-hover; } }