Add alt icon and dense style support for TitledPane

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));
 

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.*;
-import javafx.scene.layout.Priority;
-import javafx.scene.layout.Region;
-import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
 import javafx.scene.text.TextFlow;
 
-import static atlantafx.base.theme.Styles.ELEVATED_2;
+import static atlantafx.base.theme.Styles.*;
-import static atlantafx.base.theme.Styles.INTERACTIVE;
 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,
+                toggles
-                animateToggle
         );
 
         var content = new VBox(BLOCK_VGAP, textFlow, controls);

styles/src/components/_titled-pane.scss

@@ -4,11 +4,15 @@
 @use "../settings/effects";
 @use "../settings/icons";
 
-$padding-x: 20px !default;
+$padding-x:       20px !default;
-$padding-y: 10px !default;
+$padding-x-dense: 10px !default;
+$padding-y:       10px !default;
+$padding-y-dense: 5px  !default;
 
-$margin-arrow:   10px !default;
+$margin-arrow:         10px !default;
-$margin-content: 20px !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);
+        }
+      }
+    }
+  }
 }