Add dense style support for TreeView

This commit is contained in:
mkpaz 2022-08-26 09:35:24 +04:00
parent fc5619c24e
commit 197618ef2e
2 changed files with 23 additions and 5 deletions

@ -1,8 +1,8 @@
/* SPDX-License-Identifier: MIT */
package atlantafx.sampler.page.components;
import atlantafx.base.controls.ToggleSwitch;
import atlantafx.base.controls.Spacer;
import atlantafx.base.controls.ToggleSwitch;
import atlantafx.sampler.page.AbstractPage;
import javafx.geometry.Orientation;
import javafx.scene.control.*;
@ -22,6 +22,9 @@ import java.util.Objects;
import java.util.Optional;
import java.util.function.Supplier;
import static atlantafx.base.theme.Styles.DENSE;
import static atlantafx.base.theme.Styles.toggleStyleClass;
public class TreePage extends AbstractPage {
public static final String NAME = "TreeView";
@ -57,6 +60,11 @@ public class TreePage extends AbstractPage {
var playground = new VBox(10);
playground.setMinHeight(100);
var denseToggle = new ToggleSwitch("Dense");
denseToggle.selectedProperty().addListener(
(obs, old, value) -> findDisplayedTree().ifPresent(tv -> toggleStyleClass(tv, DENSE))
);
var showRootToggle = new ToggleSwitch("Show root");
showRootToggle.selectedProperty().addListener((obs, old, val) -> findDisplayedTree().ifPresent(tv -> {
if (val != null) { tv.setShowRoot(val); }
@ -70,6 +78,7 @@ public class TreePage extends AbstractPage {
var controls = new HBox(20,
new Spacer(),
denseToggle,
showRootToggle,
disableToggle,
new Spacer()
@ -100,8 +109,10 @@ public class TreePage extends AbstractPage {
// copy existing style classes and properties to the new tree
findDisplayedTree().ifPresent(tv -> {
List<String> currentStyles = tv.getStyleClass();
System.out.println("C = " + currentStyles);
currentStyles.remove("tree-view");
newTree.getStyleClass().addAll(currentStyles);
System.out.println("N = " + newTree.getStyleClass());
newTree.setShowRoot(tv.isShowRoot());
newTree.setDisable(tv.isDisable());

@ -10,7 +10,8 @@ $cell-padding-x: 0.5em !default;
// .tree-cell doesn't support -fx-cell-size
// its height should be set via vertical paddings
$tree-cell-padding-x: $cell-padding-x !default;
$tree-cell-padding-y: $cell-padding-x !default;
$tree-cell-padding-y-normal: 0.5em !default;
$tree-cell-padding-y-dense: 0.25em !default;
$tree-cell-indent: 1em !default;
@mixin _base() {
@ -362,12 +363,18 @@ $tree-cell-indent: 1em !default;
.tree-view {
@include _base();
&.dense {
.tree-cell {
-fx-padding: $tree-cell-padding-y-dense 0 $tree-cell-padding-y-dense 0;
}
}
}
.tree-cell {
-fx-background-color: -color-cell-bg;
-fx-text-fill: -color-cell-fg;
-fx-padding: $tree-cell-padding-y 0 $tree-cell-padding-y 0;
-fx-padding: $tree-cell-padding-y-normal 0 $tree-cell-padding-y-normal 0;
-fx-indent: $tree-cell-indent;
// NOTE:
@ -378,7 +385,7 @@ $tree-cell-indent: 1em !default;
// re-adjust paddings as well. Also learn about TreeCellSkin#maxDisclosureWidthMap.
// #javafx-bug
>.tree-disclosure-node {
-fx-padding: 4px $tree-cell-padding-x 4px $tree-cell-padding-x;
-fx-padding: 5px $tree-cell-padding-x 0 $tree-cell-padding-x;
-fx-background-color: transparent;
}
}