tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add edge-to-edge tweak

Browse Source 
Supposed to be used when component is placed within another control that already provides external borders. Should not be confused with 'no-border' style. Some controls in the 'edge-to-edge' mode still need a border, e.g. toolbar always needs the bottom border.
This commit is contained in:
mkpaz 2022-09-05 08:50:13 +04:00
parent 48fb49f967
commit b50dd57f75
10 changed files with 72 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
base/src/main/java/atlantafx/base/theme/Tweaks.java
View File

@ -1,7 +1,15 @@
package atlantafx.base.theme;
/** Contains extra style class names introduced to tweak some controls view. */
/**
* Contains extra style class names introduced to tweak some controls view if and where it makes sense.
* The reason of supporting tweaks is to allow users to write less CSS code. Search for #tweak/classname
* to find the controls supporting tweaks or check the control page in the Sampler app.
*/
public final class Tweaks {
/** Removes or hides dropdown arrow button */
public static final String NO_ARROW = "no-arrow";
/** Remover external control borders */
public static final String EDGE_TO_EDGE = "edge-to-edge";
}

27
sampler/src/main/java/atlantafx/sampler/page/components/ListPage.java
View File

@ -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.fake.domain.Book;
import atlantafx.sampler.page.AbstractPage;
import javafx.geometry.Orientation;
@ -91,18 +92,22 @@ public class ListPage extends AbstractPage {
var stripedToggle = new ToggleSwitch("Striped");
stripedToggle.selectedProperty().addListener((obs, old, value) -> toggleListProperty(lv -> toggleStyleClass(lv, STRIPED)));
var edge2edgeToggle = new ToggleSwitch("Edge to edge");
edge2edgeToggle.selectedProperty().addListener((obs, old, value) -> toggleListProperty(lv -> toggleStyleClass(lv, Tweaks.EDGE_TO_EDGE)));
var disableToggle = new ToggleSwitch("Disable");
disableToggle.selectedProperty().addListener((obs, old, val) -> findDisplayedList().ifPresent(lv -> {
if (val != null) { lv.setDisable(val); }
}));
var controls = new HBox(20,
new Spacer(),
borderedToggle,
denseToggle,
stripedToggle,
disableToggle,
new Spacer()
new Spacer(),
borderedToggle,
denseToggle,
stripedToggle,
edge2edgeToggle,
disableToggle,
new Spacer()
);
playground.getChildren().setAll(
@ -273,11 +278,11 @@ public class ListPage extends AbstractPage {
purchaseBtn.setGraphic(new FontIcon(Feather.SHOPPING_CART));
root = new HBox(5,
titleLabel,
new Label(" by"),
authorLink,
new Spacer(),
purchaseBtn
titleLabel,
new Label(" by"),
authorLink,
new Spacer(),
purchaseBtn
);
root.setAlignment(Pos.CENTER_LEFT);
}

15
sampler/src/main/java/atlantafx/sampler/page/components/TablePage.java
View File

@ -1,10 +1,11 @@
/* SPDX-License-Identifier: MIT */
package atlantafx.sampler.page.components;
import atlantafx.base.controls.ToggleSwitch;
import atlantafx.sampler.fake.domain.Product;
import atlantafx.base.controls.CaptionMenuItem;
import atlantafx.base.controls.Spacer;
import atlantafx.base.controls.ToggleSwitch;
import atlantafx.base.theme.Tweaks;
import atlantafx.sampler.fake.domain.Product;
import atlantafx.sampler.page.AbstractPage;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.StringBinding;
@ -225,6 +226,15 @@ public class TablePage extends AbstractPage {
table.getSelectionModel().cellSelectionEnabledProperty().bind(cellSelectionItem.selectedProperty());
cellSelectionItem.setSelected(false);
var edge2edgeItem = new CheckMenuItem("Edge to edge");
edge2edgeItem.selectedProperty().addListener((obs, old, val) -> {
if (!val) {
table.getStyleClass().remove(Tweaks.EDGE_TO_EDGE);
} else {
table.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
}
});
var menuButtonItem = new CheckMenuItem("Show menu button");
table.tableMenuButtonVisibleProperty().bind(menuButtonItem.selectedProperty());
menuButtonItem.setSelected(true);
@ -240,6 +250,7 @@ public class TablePage extends AbstractPage {
new SeparatorMenuItem(),
editCellsItem,
cellSelectionItem,
edge2edgeItem,
menuButtonItem
);
}};

7
sampler/src/main/java/atlantafx/sampler/page/components/TreePage.java
View File

@ -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 javafx.geometry.Orientation;
import javafx.scene.control.*;
@ -71,6 +72,11 @@ public class TreePage extends AbstractPage {
}));
showRootToggle.setSelected(true);
var edge2edgeToggle = new ToggleSwitch("Edge to edge");
edge2edgeToggle.selectedProperty().addListener(
(obs, old, val) -> findDisplayedTree().ifPresent(tv -> toggleStyleClass(tv, Tweaks.EDGE_TO_EDGE))
);
var disableToggle = new ToggleSwitch("Disable");
disableToggle.selectedProperty().addListener((obs, old, val) -> findDisplayedTree().ifPresent(tv -> {
if (val != null) { tv.setDisable(val); }
@ -80,6 +86,7 @@ public class TreePage extends AbstractPage {
new Spacer(),
denseToggle,
showRootToggle,
edge2edgeToggle,
disableToggle,
new Spacer()
);

19
sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java
View File

@ -4,6 +4,7 @@ package atlantafx.sampler.page.components;
import atlantafx.base.controls.CaptionMenuItem;
import atlantafx.base.controls.Spacer;
import atlantafx.base.controls.ToggleSwitch;
import atlantafx.base.theme.Tweaks;
import atlantafx.sampler.fake.domain.Product;
import atlantafx.sampler.page.AbstractPage;
import javafx.beans.property.SimpleStringProperty;
@ -55,10 +56,10 @@ public class TreeTablePage extends AbstractPage {
});
var togglesBox = new HBox(20,
bordersToggle,
denseToggle,
stripesToggle,
disableToggle
bordersToggle,
denseToggle,
stripesToggle,
disableToggle
);
togglesBox.setAlignment(Pos.CENTER_LEFT);
@ -213,6 +214,15 @@ public class TreeTablePage extends AbstractPage {
treeTable.getSelectionModel().cellSelectionEnabledProperty().bind(cellSelectionItem.selectedProperty());
cellSelectionItem.setSelected(false);
var edge2edgeItem = new CheckMenuItem("Edge to edge");
edge2edgeItem.selectedProperty().addListener((obs, old, val) -> {
if (!val) {
treeTable.getStyleClass().remove(Tweaks.EDGE_TO_EDGE);
} else {
treeTable.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
}
});
var menuButtonItem = new CheckMenuItem("Show menu button");
treeTable.tableMenuButtonVisibleProperty().bind(menuButtonItem.selectedProperty());
menuButtonItem.setSelected(true);
@ -229,6 +239,7 @@ public class TreeTablePage extends AbstractPage {
showRootItem,
editCellsItem,
cellSelectionItem,
edge2edgeItem,
menuButtonItem
);
}};

2
sampler/src/main/java/atlantafx/sampler/page/showcase/musicplayer/PlaylistPane.java
View File

@ -2,6 +2,7 @@
package atlantafx.sampler.page.showcase.musicplayer;
import atlantafx.base.controls.Spacer;
import atlantafx.base.theme.Tweaks;
import javafx.application.Platform;
import javafx.collections.ListChangeListener;
import javafx.concurrent.Task;
@ -82,6 +83,7 @@ final class PlaylistPane extends VBox {
controlsBox.setAlignment(CENTER_LEFT);
playlist = new ListView<>(model.playlist());
playlist.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
playlist.setCellFactory(param -> new MediaCell(model));
playlist.setPlaceholder(new Label("No Content"));
VBox.setVgrow(playlist, ALWAYS);

3
sampler/src/main/java/atlantafx/sampler/page/showcase/musicplayer/music-player.css
View File

@ -41,9 +41,6 @@
-color-button-bg-focused: transparent;
-color-button-bg-pressed: transparent;
}
.music-player-showcase > .player-screen > * > .playlist > .list-view {
-fx-border-width: 0;
}
.music-player-showcase > .player-screen > * > .playlist > .list-view .list-cell {
-color-cell-bg: transparent;
-color-cell-bg-selected: transparent;

5
styles/src/components/_data.scss
View File

@ -50,6 +50,11 @@ $tree-cell-indent: 1em !default;
-fx-opacity: cfg.$opacity-disabled;
}
}
// #tweak/edge-to-edge
&.edge-to-edge {
-fx-border-width: 0;
}
}
// row selection (cellSelectionEnabled = false)

1
styles/src/components/_menu-button.scss
View File

@ -122,6 +122,7 @@ $separator-width: 0.75px !default;
}
.menu-button {
// #tweak/no-arrow
&.no-arrow {
>.arrow-button {
-fx-padding: 0;