Rename DialogPane to ModalBox due to style class name conflict
This commit is contained in:
parent
277f66398b
commit
05d38acffd
@ -15,13 +15,13 @@ import javafx.scene.layout.StackPane;
|
|||||||
import org.jetbrains.annotations.Nullable;
|
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
|
* {@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
|
* from the {@link AnchorPane}, so it inherits the same API. Just be sure that
|
||||||
* you haven't removed the close button while using it.
|
* 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 closeButton = new StackPane();
|
||||||
protected final StackPane closeButtonIcon = new StackPane();
|
protected final StackPane closeButtonIcon = new StackPane();
|
||||||
@ -29,23 +29,23 @@ public class DialogPane extends AnchorPane {
|
|||||||
protected @Nullable ModalPane modalPane;
|
protected @Nullable ModalPane modalPane;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates an DialogPane layout.
|
* Creates a ModalBox layout.
|
||||||
*/
|
*/
|
||||||
public DialogPane() {
|
public ModalBox() {
|
||||||
this((String) null);
|
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
|
* @param children the initial set of children for this pane
|
||||||
*/
|
*/
|
||||||
public DialogPane(Node... children) {
|
public ModalBox(Node... children) {
|
||||||
this((String) null, 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
|
* the close handler to a ModalPane via CSS selector. When user clicks
|
||||||
* on the close button, it performs a ModalPane lookup via the specified
|
* on the close button, it performs a ModalPane lookup via the specified
|
||||||
* selector and calls the {@link ModalPane#hide()} method automatically.
|
* 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 selector the ModalPane pane CSS selector
|
||||||
* @param children the initial set of children for this pane
|
* @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);
|
super(children);
|
||||||
|
|
||||||
this.selector = selector;
|
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,
|
* the close handler to a ModalPane. When user clicks on the close button,
|
||||||
* it calls the {@link ModalPane#hide()} method automatically.
|
* it calls the {@link ModalPane#hide()} method automatically.
|
||||||
*
|
*
|
||||||
* @param modalPane the ModalPane pane CSS selector
|
* @param modalPane the ModalPane pane CSS selector
|
||||||
* @param children the initial set of children for this pane
|
* @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);
|
super(children);
|
||||||
|
|
||||||
this.selector = null;
|
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.
|
||||||
*
|
*
|
||||||
* <p>Otherwise, if the added node takes up the full size of the DialogPane
|
* <p>Otherwise, if the added node takes up the full size of the ModalBox
|
||||||
* and {@link Node#isMouseTransparent()} is false, then the close button
|
* and {@link Node#isMouseTransparent()} is false, then the close button
|
||||||
* will not receive mouse events and therefore will not be clickable.
|
* 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.
|
* own close button.
|
||||||
*/
|
*/
|
||||||
public void close() {
|
public void close() {
|
||||||
@ -108,7 +108,7 @@ public class DialogPane extends AnchorPane {
|
|||||||
|
|
||||||
closeButtonIcon.getStyleClass().add("icon");
|
closeButtonIcon.getStyleClass().add("icon");
|
||||||
|
|
||||||
getStyleClass().add("dialog-pane");
|
getStyleClass().add("modal-box");
|
||||||
getChildren().add(closeButton);
|
getChildren().add(closeButton);
|
||||||
setCloseButtonPosition();
|
setCloseButtonPosition();
|
||||||
}
|
}
|
@ -6,7 +6,7 @@ import atlantafx.base.controls.Card;
|
|||||||
import atlantafx.base.controls.ModalPane;
|
import atlantafx.base.controls.ModalPane;
|
||||||
import atlantafx.base.controls.Spacer;
|
import atlantafx.base.controls.Spacer;
|
||||||
import atlantafx.base.controls.Tile;
|
import atlantafx.base.controls.Tile;
|
||||||
import atlantafx.base.layout.DialogPane;
|
import atlantafx.base.layout.ModalBox;
|
||||||
import javafx.geometry.Pos;
|
import javafx.geometry.Pos;
|
||||||
import javafx.scene.Scene;
|
import javafx.scene.Scene;
|
||||||
import javafx.scene.control.Button;
|
import javafx.scene.control.Button;
|
||||||
@ -15,7 +15,7 @@ import javafx.scene.layout.HBox;
|
|||||||
import javafx.scene.layout.Priority;
|
import javafx.scene.layout.Priority;
|
||||||
import javafx.scene.layout.VBox;
|
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 Card content = new Card();
|
||||||
protected final Tile header = new Tile();
|
protected final Tile header = new Tile();
|
||||||
|
@ -4,7 +4,7 @@ package atlantafx.sampler.page.components;
|
|||||||
|
|
||||||
import atlantafx.base.controls.ModalPane;
|
import atlantafx.base.controls.ModalPane;
|
||||||
import atlantafx.base.controls.Tile;
|
import atlantafx.base.controls.Tile;
|
||||||
import atlantafx.base.layout.DialogPane;
|
import atlantafx.base.layout.ModalBox;
|
||||||
import atlantafx.base.util.BBCodeParser;
|
import atlantafx.base.util.BBCodeParser;
|
||||||
import atlantafx.sampler.Resources;
|
import atlantafx.sampler.Resources;
|
||||||
import atlantafx.sampler.page.ExampleBox;
|
import atlantafx.sampler.page.ExampleBox;
|
||||||
@ -70,7 +70,7 @@ public final class ModalPanePage extends OutlinePage {
|
|||||||
addSection("Nesting", nestingExample());
|
addSection("Nesting", nestingExample());
|
||||||
addSection("Maximized", maximizedExample());
|
addSection("Maximized", maximizedExample());
|
||||||
addSection("Overflowed", overflowedExample());
|
addSection("Overflowed", overflowedExample());
|
||||||
addSection("DialogPane", dialogPaneExample());
|
addSection("ModalBox", modalBoxExample());
|
||||||
addSection("Lightbox", lightboxExample());
|
addSection("Lightbox", lightboxExample());
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -323,13 +323,13 @@ public final class ModalPanePage extends OutlinePage {
|
|||||||
return example;
|
return example;
|
||||||
}
|
}
|
||||||
|
|
||||||
private ExampleBox dialogPaneExample() {
|
private ExampleBox modalBoxExample() {
|
||||||
//snippet_8:start
|
//snippet_8:start
|
||||||
// you can use a selector
|
// you can use a selector
|
||||||
var dialog = new DialogPane("#modalPane");
|
var dialog = new ModalBox("#modalPane");
|
||||||
|
|
||||||
// ... or your pass a ModalPane instance directly
|
// ... 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
|
// ... or you can set your own close handler
|
||||||
//dialog.setOnClose(/* whatever */);
|
//dialog.setOnClose(/* whatever */);
|
||||||
@ -361,7 +361,7 @@ public final class ModalPanePage extends OutlinePage {
|
|||||||
box.setAlignment(Pos.CENTER);
|
box.setAlignment(Pos.CENTER);
|
||||||
|
|
||||||
var description = BBCodeParser.createFormattedText("""
|
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 \
|
[i]ModalPane[/i] dialog content. It includes the close button out-of-the-box \
|
||||||
and allows for the addition of arbitrary children."""
|
and allows for the addition of arbitrary children."""
|
||||||
);
|
);
|
||||||
|
@ -69,6 +69,8 @@
|
|||||||
|
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
-fx-background-color: transparent;
|
-fx-background-color: transparent;
|
||||||
|
-fx-border-width: 2;
|
||||||
|
-fx-border-color: -color-border-default;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
-fx-border-width: 0;
|
-fx-border-width: 0;
|
||||||
|
@ -113,17 +113,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contrast-checker-dialog {
|
.contrast-checker-dialog {
|
||||||
-color-dialog-bg: white;
|
-color-modal-box-bg: -color-contrast-checker-bg;
|
||||||
-color-dialog-fg: black;
|
-color-modal-box-close-fg: -color-contrast-checker-fg;
|
||||||
|
-color-modal-box-close-bg-hover: derive(-color-contrast-checker-bg, 30%);
|
||||||
-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%);
|
|
||||||
|
|
||||||
-fx-background-color: transparent;
|
-fx-background-color: transparent;
|
||||||
|
|
||||||
|
&.modal-dialog {
|
||||||
|
-fx-border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
-fx-background-color: -color-contrast-checker-bg;
|
-fx-background-color: -color-contrast-checker-bg;
|
||||||
|
-fx-border-width: 0;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
-fx-text-fill: -color-contrast-checker-fg;
|
-fx-text-fill: -color-contrast-checker-fg;
|
||||||
|
@ -19,13 +19,13 @@ $close-button-icon-size: 0.3em !default;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// DialogPane is directly related to the ModalPane
|
// ModalBox is directly related to the ModalPane
|
||||||
.dialog-pane {
|
.modal-box {
|
||||||
-color-dialog-pane-bg: $color-dialog-bg;
|
-color-modal-box-bg: $color-dialog-bg;
|
||||||
-color-dialog-pane-close-fg: $color-dialog-close-fg;
|
-color-modal-box-close-fg: $color-dialog-close-fg;
|
||||||
-color-dialog-pane-close-bg-hover: $color-dialog-close-bg-hover;
|
-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 {
|
>.close-button {
|
||||||
-fx-background-radius: $close-button-radius;
|
-fx-background-radius: $close-button-radius;
|
||||||
@ -33,12 +33,12 @@ $close-button-icon-size: 0.3em !default;
|
|||||||
|
|
||||||
>.icon {
|
>.icon {
|
||||||
@include icons.get("close", true);
|
@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;
|
-fx-padding: $close-button-icon-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
-fx-background-color: -color-dialog-pane-close-bg-hover;
|
-fx-background-color: -color-modal-box-close-bg-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user