Add alt icon support for TreeView disclosure node

Also introduce a color variable and tone down disclosure node color.
This commit is contained in:
mkpaz 2022-10-05 12:51:13 +04:00
parent aa294eb773
commit cbde1de246
4 changed files with 44 additions and 4 deletions

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

@ -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 ==

@ -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;
}
}
}

@ -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",
);