From b8c5acae03dd97d59575661e641c98fd6438d040 Mon Sep 17 00:00:00 2001 From: mkpaz Date: Mon, 5 Sep 2022 10:06:20 +0400 Subject: [PATCH] Add tweak to align table columns --- .../java/atlantafx/base/theme/Tweaks.java | 5 ++ .../sampler/page/components/TablePage.java | 64 ++++++++++++++++- .../page/components/TreeTablePage.java | 59 +++++++++++++++ .../filemanager/TableDirectoryView.java | 7 +- styles/src/components/_data.scss | 71 +++++++++++++------ 5 files changed, 179 insertions(+), 27 deletions(-) diff --git a/base/src/main/java/atlantafx/base/theme/Tweaks.java b/base/src/main/java/atlantafx/base/theme/Tweaks.java index 6f51a37..d6e5c9c 100644 --- a/base/src/main/java/atlantafx/base/theme/Tweaks.java +++ b/base/src/main/java/atlantafx/base/theme/Tweaks.java @@ -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"; } diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/TablePage.java b/sampler/src/main/java/atlantafx/sampler/page/components/TablePage.java index d52bfda..79897a4 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TablePage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TablePage.java @@ -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); + } } 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 fe3c244..7701231 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TreeTablePage.java @@ -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); + } } diff --git a/sampler/src/main/java/atlantafx/sampler/page/showcase/filemanager/TableDirectoryView.java b/sampler/src/main/java/atlantafx/sampler/page/showcase/filemanager/TableDirectoryView.java index 5ebb4a4..f357d0d 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/showcase/filemanager/TableDirectoryView.java +++ b/sampler/src/main/java/atlantafx/sampler/page/showcase/filemanager/TableDirectoryView.java @@ -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("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 ); } } diff --git a/styles/src/components/_data.scss b/styles/src/components/_data.scss index ca9667c..ed68731 100755 --- a/styles/src/components/_data.scss +++ b/styles/src/components/_data.scss @@ -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; + } } } -} +} \ No newline at end of file