Add tweak to align table columns

This commit is contained in:
mkpaz 2022-09-05 10:06:20 +04:00
parent b50dd57f75
commit b8c5acae03
5 changed files with 179 additions and 27 deletions

@ -12,4 +12,9 @@ public final class Tweaks {
/** Remover external control borders */
public static final String EDGE_TO_EDGE = "edge-to-edge";
/** Alignment */
public static final String ALIGN_LEFT = "align-left";
public static final String ALIGN_CENTER = "align-center";
public static final String ALIGN_RIGHT = "align-right";
}

@ -4,7 +4,6 @@ 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.binding.Bindings;
@ -22,9 +21,11 @@ import org.kordamp.ikonli.feather.Feather;
import org.kordamp.ikonli.javafx.FontIconTableCell;
import java.util.List;
import java.util.Objects;
import java.util.stream.IntStream;
import static atlantafx.base.theme.Styles.*;
import static atlantafx.base.theme.Tweaks.*;
import static javafx.collections.FXCollections.observableArrayList;
import static javafx.geometry.Orientation.HORIZONTAL;
@ -229,12 +230,58 @@ public class TablePage extends AbstractPage {
var edge2edgeItem = new CheckMenuItem("Edge to edge");
edge2edgeItem.selectedProperty().addListener((obs, old, val) -> {
if (!val) {
table.getStyleClass().remove(Tweaks.EDGE_TO_EDGE);
table.getStyleClass().remove(EDGE_TO_EDGE);
} else {
table.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
table.getStyleClass().add(EDGE_TO_EDGE);
}
});
// ~
var alignToggleGroup = new ToggleGroup();
var alignLeftItem = new RadioMenuItem("Left");
alignLeftItem.setToggleGroup(alignToggleGroup);
alignLeftItem.selectedProperty().addListener((obs, old, val) -> {
for (TableColumn<?, ?> c : table.getColumns()) {
addStyleClass(c, ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT);
}
});
var alignCenterItem = new RadioMenuItem("Center");
alignCenterItem.setToggleGroup(alignToggleGroup);
alignCenterItem.selectedProperty().addListener((obs, old, val) -> {
for (TableColumn<?, ?> c : table.getColumns()) {
addStyleClass(c, ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT);
}
});
var alignRightItem = new RadioMenuItem("Right");
alignRightItem.setToggleGroup(alignToggleGroup);
alignRightItem.selectedProperty().addListener((obs, old, val) -> {
for (TableColumn<?, ?> c : table.getColumns()) {
addStyleClass(c, ALIGN_RIGHT, ALIGN_LEFT, ALIGN_CENTER);
}
});
var alignDefaultItem = new MenuItem("Default");
alignDefaultItem.setOnAction(e -> {
for (TableColumn<?, ?> c : table.getColumns()) {
c.getStyleClass().removeAll(ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT);
}
});
var alignMenu = new Menu("Align columns");
alignMenu.getItems().setAll(
alignLeftItem,
alignCenterItem,
alignRightItem,
new SeparatorMenuItem(),
alignDefaultItem
);
// ~
var menuButtonItem = new CheckMenuItem("Show menu button");
table.tableMenuButtonVisibleProperty().bind(menuButtonItem.selectedProperty());
menuButtonItem.setSelected(true);
@ -250,9 +297,20 @@ public class TablePage extends AbstractPage {
new SeparatorMenuItem(),
editCellsItem,
cellSelectionItem,
alignMenu,
edge2edgeItem,
menuButtonItem
);
}};
}
private static void addStyleClass(TableColumn<?, ?> c, String styleClass, String... excludes) {
Objects.requireNonNull(c);
Objects.requireNonNull(styleClass);
if (excludes != null && excludes.length > 0) {
c.getStyleClass().removeAll(excludes);
}
c.getStyleClass().add(styleClass);
}
}

@ -16,9 +16,11 @@ import javafx.scene.layout.VBox;
import javafx.util.Callback;
import java.util.List;
import java.util.Objects;
import java.util.stream.IntStream;
import static atlantafx.base.theme.Styles.*;
import static atlantafx.base.theme.Tweaks.*;
public class TreeTablePage extends AbstractPage {
@ -223,6 +225,52 @@ public class TreeTablePage extends AbstractPage {
}
});
// ~
var alignToggleGroup = new ToggleGroup();
var alignLeftItem = new RadioMenuItem("Left");
alignLeftItem.setToggleGroup(alignToggleGroup);
alignLeftItem.selectedProperty().addListener((obs, old, val) -> {
for (TreeTableColumn<?, ?> c : treeTable.getColumns()) {
addStyleClass(c, ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT);
}
});
var alignCenterItem = new RadioMenuItem("Center");
alignCenterItem.setToggleGroup(alignToggleGroup);
alignCenterItem.selectedProperty().addListener((obs, old, val) -> {
for (TreeTableColumn<?, ?> c : treeTable.getColumns()) {
addStyleClass(c, ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT);
}
});
var alignRightItem = new RadioMenuItem("Right");
alignRightItem.setToggleGroup(alignToggleGroup);
alignRightItem.selectedProperty().addListener((obs, old, val) -> {
for (TreeTableColumn<?, ?> c : treeTable.getColumns()) {
addStyleClass(c, ALIGN_RIGHT, ALIGN_LEFT, ALIGN_CENTER);
}
});
var alignDefaultItem = new MenuItem("Default");
alignDefaultItem.setOnAction(e -> {
for (TreeTableColumn<?, ?> c : treeTable.getColumns()) {
c.getStyleClass().removeAll(ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT);
}
});
var alignMenu = new Menu("Align columns");
alignMenu.getItems().setAll(
alignLeftItem,
alignCenterItem,
alignRightItem,
new SeparatorMenuItem(),
alignDefaultItem
);
// ~
var menuButtonItem = new CheckMenuItem("Show menu button");
treeTable.tableMenuButtonVisibleProperty().bind(menuButtonItem.selectedProperty());
menuButtonItem.setSelected(true);
@ -239,9 +287,20 @@ public class TreeTablePage extends AbstractPage {
showRootItem,
editCellsItem,
cellSelectionItem,
alignMenu,
edge2edgeItem,
menuButtonItem
);
}};
}
private static void addStyleClass(TreeTableColumn<?, ?> c, String styleClass, String... excludes) {
Objects.requireNonNull(c);
Objects.requireNonNull(styleClass);
if (excludes != null && excludes.length > 0) {
c.getStyleClass().removeAll(excludes);
}
c.getStyleClass().add(styleClass);
}
}

@ -2,6 +2,7 @@
package atlantafx.sampler.page.showcase.filemanager;
import atlantafx.base.theme.Styles;
import atlantafx.base.theme.Tweaks;
import atlantafx.sampler.util.Containers;
import atlantafx.sampler.util.HumanReadableFormat;
import javafx.beans.property.SimpleLongProperty;
@ -66,7 +67,7 @@ final class TableDirectoryView extends AnchorPane implements DirectoryView {
var mtimeCol = new TableColumn<Path, FileTime>("Modified");
mtimeCol.setCellValueFactory(param -> new SimpleObjectProperty<>(fileMTime(param.getValue(), NOFOLLOW_LINKS)));
mtimeCol.setCellFactory(col -> new FileTimeCell());
mtimeCol.setStyle("-fx-alignment: CENTER-RIGHT;");
mtimeCol.getStyleClass().add(Tweaks.ALIGN_RIGHT);
// ~
@ -193,8 +194,8 @@ final class TableDirectoryView extends AnchorPane implements DirectoryView {
setText(null);
} else {
setText(fileTime != null ?
HumanReadableFormat.date(fileTime.toInstant().atZone(ZoneId.systemDefault()).toLocalDateTime()) :
UNKNOWN
HumanReadableFormat.date(fileTime.toInstant().atZone(ZoneId.systemDefault()).toLocalDateTime()) :
UNKNOWN
);
}
}

@ -3,37 +3,37 @@
@use "../settings/config" as cfg;
@use "../settings/icons";
$color-cell-bg: -color-bg-default !default;
$color-cell-fg: -color-fg-default !default;
$color-cell-bg: -color-bg-default !default;
$color-cell-fg: -color-fg-default !default;
$color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-1) !default;
$color-cell-fg-selected: -color-fg-default !default;
$color-cell-bg-odd: -color-bg-subtle !default;
$color-cell-border: -color-border-default !default;
$color-header-bg: -color-bg-subtle !default;
$color-header-fg: -color-fg-default !default;
$color-resize-line: -color-accent-emphasis !default;
$color-drag-header: -color-accent-muted !default;
$color-drag-overlay: -color-accent-muted !default;
$color-cell-bg-odd: -color-bg-subtle !default;
$color-cell-border: -color-border-default !default;
$color-header-bg: -color-bg-subtle !default;
$color-header-fg: -color-fg-default !default;
$color-resize-line: -color-accent-emphasis !default;
$color-drag-header: -color-accent-muted !default;
$color-drag-overlay: -color-accent-muted !default;
$cell-size-normal: 2.8em !default;
$cell-size-dense: 2em !default;
$cell-padding-x: 0.5em !default;
$cell-size-dense: 2em !default;
$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-normal: 0.5em !default;
$tree-cell-padding-y-dense: 0.25em !default;
$tree-cell-padding-x: $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() {
-color-cell-bg: $color-cell-bg;
-color-cell-fg: $color-cell-fg;
-color-cell-bg: $color-cell-bg;
-color-cell-fg: $color-cell-fg;
-color-cell-bg-selected: $color-cell-bg-selected;
-color-cell-fg-selected: $color-cell-fg-selected;
-color-cell-bg-odd: $color-cell-bg-odd;
-color-cell-border: $color-cell-border;
-color-cell-bg-odd: $color-cell-bg-odd;
-color-cell-border: $color-cell-border;
-fx-border-color: -color-cell-border;
-fx-border-width: cfg.$border-width;
@ -195,7 +195,6 @@ $tree-cell-indent: 1em !default;
-fx-background-insets: 0, 0 0 1 0;
// there's also
// .table-column { }
// .nested-column-header { }
// columns headers can be nested, so there's no child combinator here
@ -339,7 +338,7 @@ $tree-cell-indent: 1em !default;
-fx-background-insets: 0;
>.table-cell {
-fx-border-color:transparent;
-fx-border-color: transparent;
}
}
@ -347,6 +346,21 @@ $tree-cell-indent: 1em !default;
-fx-padding: 0 $cell-padding-x 0 $cell-padding-x;
-fx-text-fill: -color-cell-fg;
-fx-alignment: CENTER_LEFT;
// #tweak/align-left
&.table-column.align-left {
-fx-alignment: CENTER_LEFT;
}
// #tweak/align-center
&.table-column.align-center {
-fx-alignment: CENTER;
}
// #tweak/align-right
&.table-column.align-right {
-fx-alignment: CENTER-RIGHT;
}
}
}
}
@ -484,6 +498,21 @@ $tree-cell-indent: 1em !default;
-fx-padding: 0 $cell-padding-x 0 $cell-padding-x;
-fx-text-fill: -color-cell-fg;
-fx-alignment: CENTER_LEFT;
// #tweak/align-left
&.table-column.align-left {
-fx-alignment: CENTER_LEFT;
}
// #tweak/align-center
&.table-column.align-center {
-fx-alignment: CENTER;
}
// #tweak/align-right
&.table-column.align-right {
-fx-alignment: CENTER-RIGHT;
}
}
}
}