Add alt icon and dense style support for TitledPane
This commit is contained in:
parent
cbde1de246
commit
dec8b80781
@ -2,6 +2,7 @@
|
||||
package atlantafx.sampler.page.components;
|
||||
|
||||
import atlantafx.base.controls.ToggleSwitch;
|
||||
import atlantafx.base.theme.Tweaks;
|
||||
import atlantafx.sampler.Resources;
|
||||
import atlantafx.sampler.page.AbstractPage;
|
||||
import atlantafx.sampler.page.SampleBlock;
|
||||
@ -21,6 +22,10 @@ import javafx.scene.layout.VBox;
|
||||
import javafx.scene.text.Text;
|
||||
import javafx.scene.text.TextFlow;
|
||||
|
||||
import static atlantafx.base.theme.Styles.DENSE;
|
||||
import static atlantafx.base.theme.Styles.toggleStyleClass;
|
||||
import static atlantafx.sampler.page.SampleBlock.BLOCK_HGAP;
|
||||
|
||||
public class AccordionPage extends AbstractPage {
|
||||
|
||||
public static final String NAME = "Accordion";
|
||||
@ -31,12 +36,15 @@ public class AccordionPage extends AbstractPage {
|
||||
private final BooleanProperty expandedProperty = new SimpleBooleanProperty(true);
|
||||
private final BooleanProperty animatedProperty = new SimpleBooleanProperty(true);
|
||||
|
||||
private final Accordion accordion;
|
||||
|
||||
public AccordionPage() {
|
||||
super();
|
||||
|
||||
accordion = createPlayground();
|
||||
var sample = new SampleBlock(
|
||||
"Playground",
|
||||
new VBox(SampleBlock.BLOCK_VGAP, createControls(), createPlayground())
|
||||
new VBox(SampleBlock.BLOCK_VGAP, createControls(), accordion)
|
||||
);
|
||||
sample.setFillHeight(true);
|
||||
setUserContent(sample);
|
||||
@ -51,7 +59,23 @@ public class AccordionPage extends AbstractPage {
|
||||
expandedProperty.bind(expandedToggle.selectedProperty());
|
||||
expandedToggle.setSelected(true);
|
||||
|
||||
var controls = new HBox(SampleBlock.BLOCK_HGAP, animatedToggle, expandedToggle);
|
||||
var denseToggle = new ToggleSwitch("Dense");
|
||||
denseToggle.selectedProperty().addListener(
|
||||
(obs, old, val) -> accordion.getPanes().forEach(p -> toggleStyleClass(p, DENSE))
|
||||
);
|
||||
|
||||
var altIconToggle = new ToggleSwitch("Alt icon");
|
||||
altIconToggle.selectedProperty().addListener(
|
||||
(obs, old, val) -> accordion.getPanes().forEach(p -> toggleStyleClass(p, Tweaks.ALT_ICON))
|
||||
);
|
||||
|
||||
var controls = new HBox(
|
||||
BLOCK_HGAP,
|
||||
animatedToggle,
|
||||
expandedToggle,
|
||||
denseToggle,
|
||||
altIconToggle
|
||||
);
|
||||
controls.setAlignment(Pos.CENTER);
|
||||
controls.setPadding(new Insets(0, 0, 0, 2));
|
||||
|
||||
|
@ -3,6 +3,7 @@ package atlantafx.sampler.page.components;
|
||||
|
||||
import atlantafx.base.controls.Spacer;
|
||||
import atlantafx.base.controls.ToggleSwitch;
|
||||
import atlantafx.base.theme.Tweaks;
|
||||
import atlantafx.sampler.page.AbstractPage;
|
||||
import atlantafx.sampler.page.Page;
|
||||
import javafx.geometry.Pos;
|
||||
@ -10,17 +11,15 @@ import javafx.scene.control.CheckBox;
|
||||
import javafx.scene.control.Label;
|
||||
import javafx.scene.control.Slider;
|
||||
import javafx.scene.control.TitledPane;
|
||||
import javafx.scene.layout.HBox;
|
||||
import javafx.scene.layout.Priority;
|
||||
import javafx.scene.layout.Region;
|
||||
import javafx.scene.layout.VBox;
|
||||
import javafx.scene.layout.*;
|
||||
import javafx.scene.text.Text;
|
||||
import javafx.scene.text.TextFlow;
|
||||
|
||||
import static atlantafx.base.theme.Styles.ELEVATED_2;
|
||||
import static atlantafx.base.theme.Styles.INTERACTIVE;
|
||||
import static atlantafx.base.theme.Styles.*;
|
||||
import static atlantafx.sampler.page.SampleBlock.BLOCK_HGAP;
|
||||
import static atlantafx.sampler.page.SampleBlock.BLOCK_VGAP;
|
||||
import static javafx.geometry.HPos.RIGHT;
|
||||
import static javafx.scene.layout.Priority.NEVER;
|
||||
|
||||
public class TitledPanePage extends AbstractPage {
|
||||
|
||||
@ -91,6 +90,24 @@ public class TitledPanePage extends AbstractPage {
|
||||
animateToggle.setSelected(true);
|
||||
playground.animatedProperty().bind(animateToggle.selectedProperty());
|
||||
|
||||
var denseToggle = new ToggleSwitch("Dense");
|
||||
denseToggle.selectedProperty().addListener((obs, old, val) -> toggleStyleClass(playground, DENSE));
|
||||
|
||||
var altIconToggle = new ToggleSwitch("Alt icon");
|
||||
altIconToggle.selectedProperty().addListener((obs, old, val) -> toggleStyleClass(playground, Tweaks.ALT_ICON));
|
||||
|
||||
var toggles = new GridPane();
|
||||
toggles.setVgap(10);
|
||||
toggles.setHgap(BLOCK_HGAP);
|
||||
toggles.getColumnConstraints().setAll(
|
||||
new ColumnConstraints(-1, -1, -1, NEVER, RIGHT, false),
|
||||
new ColumnConstraints(-1, -1, -1, NEVER, RIGHT, false)
|
||||
);
|
||||
toggles.add(collapseToggle, 0, 0);
|
||||
toggles.add(animateToggle, 1, 0);
|
||||
toggles.add(denseToggle, 0, 1);
|
||||
toggles.add(altIconToggle, 1, 1);
|
||||
|
||||
var controls = new HBox(BLOCK_HGAP);
|
||||
controls.setMinHeight(80);
|
||||
controls.setFillHeight(false);
|
||||
@ -99,8 +116,7 @@ public class TitledPanePage extends AbstractPage {
|
||||
new Label("Elevation"),
|
||||
elevationSlider,
|
||||
new Spacer(),
|
||||
collapseToggle,
|
||||
animateToggle
|
||||
toggles
|
||||
);
|
||||
|
||||
var content = new VBox(BLOCK_VGAP, textFlow, controls);
|
||||
|
@ -5,10 +5,14 @@
|
||||
@use "../settings/icons";
|
||||
|
||||
$padding-x: 20px !default;
|
||||
$padding-x-dense: 10px !default;
|
||||
$padding-y: 10px !default;
|
||||
$padding-y-dense: 5px !default;
|
||||
|
||||
$margin-arrow: 10px !default;
|
||||
$margin-arrow-dense: 10px !default;
|
||||
$margin-content: 20px !default;
|
||||
$margin-content-dense: 10px !default;
|
||||
|
||||
.titled-pane {
|
||||
-fx-background-color: -color-bg-default;
|
||||
@ -92,4 +96,32 @@ $margin-content: 20px !default;
|
||||
&:show-mnemonics>.mnemonic-underline {
|
||||
-fx-stroke: -color-fg-default;
|
||||
}
|
||||
|
||||
&.dense {
|
||||
>.title {
|
||||
-fx-padding: $padding-y-dense $padding-x-dense $padding-y-dense $padding-x-dense;
|
||||
|
||||
>.text {
|
||||
-fx-font-size: 1.1em;
|
||||
}
|
||||
|
||||
>.arrow-button {
|
||||
-fx-padding: 0 $margin-arrow-dense 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
>.content {
|
||||
-fx-padding: $margin-content-dense $padding-x-dense $padding-y-dense $padding-x-dense;
|
||||
}
|
||||
}
|
||||
|
||||
&.alt-icon {
|
||||
>.title {
|
||||
>.arrow-button {
|
||||
>.arrow {
|
||||
@include icons.get("arrow-drop-down", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user