From cbde1de2467106d446957d570eb9cbe2e18d5777 Mon Sep 17 00:00:00 2001 From: mkpaz Date: Wed, 5 Oct 2022 12:51:13 +0400 Subject: [PATCH] Add alt icon support for TreeView disclosure node Also introduce a color variable and tone down disclosure node color. --- .../sampler/page/components/TreePage.java | 7 +++- .../page/components/TreeTablePage.java | 5 ++- styles/src/components/_data.scss | 34 +++++++++++++++++-- styles/src/settings/_icons.scss | 2 ++ 4 files changed, 44 insertions(+), 4 deletions(-) diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/TreePage.java b/sampler/src/main/java/atlantafx/sampler/page/components/TreePage.java index 8030f3f..6710879 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TreePage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TreePage.java @@ -63,6 +63,11 @@ public class TreePage extends AbstractPage { })); showRootToggle.setSelected(true); + var altIconToggle = new ToggleSwitch("Alt icon"); + altIconToggle.selectedProperty().addListener((obs, old, val) -> + findDisplayedTree().ifPresent(tv -> toggleStyleClass(tv, Tweaks.ALT_ICON)) + ); + var edge2edgeToggle = new ToggleSwitch("Edge to edge"); edge2edgeToggle.selectedProperty().addListener( (obs, old, val) -> findDisplayedTree().ifPresent(tv -> toggleStyleClass(tv, Tweaks.EDGE_TO_EDGE)) @@ -73,7 +78,7 @@ public class TreePage extends AbstractPage { if (val != null) { tv.setDisable(val); } })); - var controls = new HBox(BLOCK_HGAP, denseToggle, showRootToggle, edge2edgeToggle); + var controls = new HBox(BLOCK_HGAP, denseToggle, showRootToggle, altIconToggle, edge2edgeToggle); controls.setAlignment(Pos.CENTER); VBox.setVgrow(treeWrapper, Priority.ALWAYS); diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java b/sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java index d2ef90a..862e800 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java @@ -57,12 +57,15 @@ public class TreeTablePage extends AbstractPage { var stripesToggle = new ToggleSwitch("Striped"); stripesToggle.selectedProperty().addListener((obs, old, val) -> toggleStyleClass(treeTable, STRIPED)); + var altIconToggle = new ToggleSwitch("Alt icon"); + altIconToggle.selectedProperty().addListener((obs, old, val) -> toggleStyleClass(treeTable, Tweaks.ALT_ICON)); + var edge2edgeToggle = new ToggleSwitch("Edge to edge"); edge2edgeToggle.selectedProperty().addListener( (obs, old, value) -> toggleStyleClass(treeTable, Tweaks.EDGE_TO_EDGE) ); - var footer = new HBox(BLOCK_HGAP, bordersToggle, denseToggle, stripesToggle, edge2edgeToggle); + var footer = new HBox(BLOCK_HGAP, bordersToggle, denseToggle, stripesToggle, altIconToggle, edge2edgeToggle); footer.setAlignment(Pos.CENTER); // == TREE TABLE == diff --git a/styles/src/components/_data.scss b/styles/src/components/_data.scss index e1c624f..3b1fd1a 100755 --- a/styles/src/components/_data.scss +++ b/styles/src/components/_data.scss @@ -9,6 +9,7 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-1) !defaul $color-cell-fg-selected: -color-fg-default !default; $color-cell-bg-odd: -color-bg-subtle !default; $color-cell-border: -color-border-default !default; +$color-disclosure: -color-fg-muted !default; $color-header-bg: -color-bg-subtle !default; $color-header-fg: -color-fg-default !default; @@ -36,6 +37,7 @@ $tree-cell-indent: 1em !default; -color-cell-fg-selected: $color-cell-fg-selected; -color-cell-bg-odd: $color-cell-bg-odd; -color-cell-border: $color-cell-border; + -color-disclosure: $color-disclosure; -fx-border-color: -color-cell-border; -fx-border-width: cfg.$border-width; @@ -408,6 +410,22 @@ $tree-cell-indent: 1em !default; -fx-padding: $tree-cell-padding-y-dense 0 $tree-cell-padding-y-dense 0; } } + + &.alt-icon { + .tree-cell>.tree-disclosure-node { + -fx-padding: 0.2em $tree-cell-padding-x 0 $tree-cell-padding-x; + } + + .tree-cell>.tree-disclosure-node>.arrow { + @include icons.get("plus-box", true); + -fx-padding: 0.5em; + } + + .tree-cell:expanded>.tree-disclosure-node>.arrow { + @include icons.get("minus-box", true); + -fx-padding: 0.5em; + } + } } .tree-cell { @@ -424,7 +442,7 @@ $tree-cell-indent: 1em !default; // re-adjust paddings as well. Also learn about TreeCellSkin#maxDisclosureWidthMap. // #javafx-bug >.tree-disclosure-node { - -fx-padding: 5px $tree-cell-padding-x 0 $tree-cell-padding-x; + -fx-padding: 0.35em $tree-cell-padding-x 0 $tree-cell-padding-x; -fx-background-color: transparent; } } @@ -432,7 +450,7 @@ $tree-cell-indent: 1em !default; .tree-cell>.tree-disclosure-node>.arrow, .tree-table-row-cell>.tree-disclosure-node>.arrow { @include icons.get("arrow-right", false); - -fx-background-color: -color-cell-fg; + -fx-background-color: -color-disclosure; -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; } @@ -530,4 +548,16 @@ $tree-cell-indent: 1em !default; } } } + + &.alt-icon { + .tree-table-row-cell>.tree-disclosure-node>.arrow { + @include icons.get("plus-box", true); + -fx-padding: 0.5em; + } + + .tree-table-row-cell:expanded>.tree-disclosure-node>.arrow { + @include icons.get("minus-box", true); + -fx-padding: 0.5em; + } + } } diff --git a/styles/src/settings/_icons.scss b/styles/src/settings/_icons.scss index 95eb2f8..5177bda 100644 --- a/styles/src/settings/_icons.scss +++ b/styles/src/settings/_icons.scss @@ -13,8 +13,10 @@ $material-icons: ( "expand-less": "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z", "expand-more": "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", "minus": "M 17,13 H 7 v -2 h 10 z", + "minus-box": "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 11h10v2H7z", "more-vert": "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z", "plus": "M 18,12.857142 H 12.857142 V 18 H 11.142858 V 12.857142 H 6 v -1.714284 h 5.142858 V 6 h 1.714284 v 5.142858 H 18 Z", + "plus-box": "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z", "unfold-more": "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z", );