diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/AccordionPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/AccordionPage.java index e6754c6..13b73e1 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/AccordionPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/AccordionPage.java @@ -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)); diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/TitledPanePage.java b/sampler/src/main/java/atlantafx/sampler/page/components/TitledPanePage.java index ce3e2ce..f485c0c 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TitledPanePage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TitledPanePage.java @@ -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); diff --git a/styles/src/components/_titled-pane.scss b/styles/src/components/_titled-pane.scss index 24139db..a88e8bc 100755 --- a/styles/src/components/_titled-pane.scss +++ b/styles/src/components/_titled-pane.scss @@ -4,11 +4,15 @@ @use "../settings/effects"; @use "../settings/icons"; -$padding-x: 20px !default; -$padding-y: 10px !default; +$padding-x: 20px !default; +$padding-x-dense: 10px !default; +$padding-y: 10px !default; +$padding-y-dense: 5px !default; -$margin-arrow: 10px !default; -$margin-content: 20px !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); + } + } + } + } }