Add tweak to align table columns
This commit is contained in:
parent
b50dd57f75
commit
b8c5acae03
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user