Add graphic-only property to icon buttons

This commit is contained in:
mkpaz 2023-05-26 20:56:03 +04:00
parent d9cd61f7fb
commit 39cf7bd992
14 changed files with 53 additions and 74 deletions

@ -123,7 +123,7 @@ public interface Page {
}
});
var menuBtn = new MenuButton("", new FontIcon(Material2AL.EXPAND_MORE));
var menuBtn = new MenuButton(null, new FontIcon(Material2AL.EXPAND_MORE));
menuBtn.getStyleClass().addAll(Styles.FLAT, Styles.BUTTON_ICON, Tweaks.NO_ARROW);
menuBtn.getItems().setAll(sourceCodeItem, javadocItem);

@ -163,35 +163,35 @@ public final class ButtonPage extends OutlinePage {
private ExampleBox iconButtonExample() {
//snippet_3:start
var normalBtn = new Button("", new FontIcon(Feather.MORE_HORIZONTAL));
var normalBtn = new Button(null, new FontIcon(Feather.MORE_HORIZONTAL));
normalBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
var accentBtn = new Button("", new FontIcon(Feather.MENU));
var accentBtn = new Button(null, new FontIcon(Feather.MENU));
accentBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.ACCENT
);
var successBtn = new Button("", new FontIcon(Feather.CHECK));
var successBtn = new Button(null, new FontIcon(Feather.CHECK));
successBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.SUCCESS
);
var dangerBtn = new Button("", new FontIcon(Feather.TRASH));
var dangerBtn = new Button(null, new FontIcon(Feather.TRASH));
dangerBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.BUTTON_OUTLINED, Styles.DANGER
);
var flatAccentBtn = new Button("", new FontIcon(Feather.MIC));
var flatAccentBtn = new Button(null, new FontIcon(Feather.MIC));
flatAccentBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.FLAT, Styles.ACCENT
);
var flatSuccessBtn = new Button("", new FontIcon(Feather.USER));
var flatSuccessBtn = new Button(null, new FontIcon(Feather.USER));
flatSuccessBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.FLAT, Styles.SUCCESS
);
var flatDangerBtn = new Button("", new FontIcon(Feather.CROSSHAIR));
var flatDangerBtn = new Button(null, new FontIcon(Feather.CROSSHAIR));
flatDangerBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.FLAT, Styles.DANGER
);
@ -212,45 +212,38 @@ public final class ButtonPage extends OutlinePage {
private ExampleBox circularButtonExample() {
//snippet_4:start
var normalBtn = new Button("", new FontIcon(Feather.MORE_HORIZONTAL));
var normalBtn = new Button(null, new FontIcon(Feather.MORE_HORIZONTAL));
normalBtn.getStyleClass().addAll(Styles.BUTTON_CIRCLE);
normalBtn.setShape(new Circle(50));
var accentBtn = new Button("", new FontIcon(Feather.MENU));
var accentBtn = new Button(null, new FontIcon(Feather.MENU));
accentBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.ACCENT
);
accentBtn.setShape(new Circle(50));
var successBtn = new Button("", new FontIcon(Feather.CHECK));
var successBtn = new Button(null, new FontIcon(Feather.CHECK));
successBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.SUCCESS
);
successBtn.setShape(new Circle(50));
var dangerBtn = new Button("", new FontIcon(Feather.TRASH));
var dangerBtn = new Button(null, new FontIcon(Feather.TRASH));
dangerBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.BUTTON_OUTLINED, Styles.DANGER
);
dangerBtn.setShape(new Circle(50));
var flatAccentBtn = new Button("", new FontIcon(Feather.MIC));
var flatAccentBtn = new Button(null, new FontIcon(Feather.MIC));
flatAccentBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.ACCENT
);
flatAccentBtn.setShape(new Circle(50));
var flatSuccessBtn = new Button("", new FontIcon(Feather.USER));
var flatSuccessBtn = new Button(null, new FontIcon(Feather.USER));
flatSuccessBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.SUCCESS
);
flatSuccessBtn.setShape(new Circle(50));
var flatDangerBtn = new Button("", new FontIcon(Feather.CROSSHAIR));
var flatDangerBtn = new Button(null, new FontIcon(Feather.CROSSHAIR));
flatDangerBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.DANGER
);
flatDangerBtn.setShape(new Circle(50));
//snippet_4:end
var box = new HBox(HGAP_20,
@ -379,7 +372,7 @@ public final class ButtonPage extends OutlinePage {
// -color-button-bg-pressed: -color-button-bg;
btn.setStyle(customStyle);
var iconBtn = new Button("", new FontIcon(Material2AL.FAVORITE));
var iconBtn = new Button(null, new FontIcon(Material2AL.FAVORITE));
iconBtn.getStyleClass().addAll(
"favorite-button",
Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.DANGER

@ -116,7 +116,7 @@ public final class DeckPanePage extends AbstractPage {
return deck.getChildren().get(next);
};
var topBtn = new Button("", new FontIcon(Material2MZ.NORTH));
var topBtn = new Button(null, new FontIcon(Material2MZ.NORTH));
topBtn.setOnAction(e -> {
if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
deck.swipeUp(nextItem.get());
@ -127,7 +127,7 @@ public final class DeckPanePage extends AbstractPage {
galleryPane.setTop(topBtn);
BorderPane.setAlignment(topBtn, Pos.CENTER);
var rightBtn = new Button("", new FontIcon(Material2AL.EAST));
var rightBtn = new Button(null, new FontIcon(Material2AL.EAST));
rightBtn.setOnAction(e -> {
if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
deck.swipeRight(nextItem.get());
@ -138,7 +138,7 @@ public final class DeckPanePage extends AbstractPage {
galleryPane.setRight(rightBtn);
BorderPane.setAlignment(rightBtn, Pos.CENTER);
var bottomBtn = new Button("", new FontIcon(Material2MZ.SOUTH));
var bottomBtn = new Button(null, new FontIcon(Material2MZ.SOUTH));
bottomBtn.setOnAction(e -> {
if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
deck.swipeDown(nextItem.get());
@ -149,7 +149,7 @@ public final class DeckPanePage extends AbstractPage {
galleryPane.setBottom(bottomBtn);
BorderPane.setAlignment(bottomBtn, Pos.CENTER);
var leftBtn = new Button("", new FontIcon(Material2MZ.WEST));
var leftBtn = new Button(null, new FontIcon(Material2MZ.WEST));
leftBtn.setOnAction(e -> {
if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
deck.swipeLeft(nextItem.get());

@ -159,7 +159,7 @@ public final class ProgressIndicatorPage extends OutlinePage {
var reverseLabel = new Label("25%");
reverseLabel.getStyleClass().add(Styles.TITLE_4);
var reverseBtn = new Button("", new FontIcon(Feather.PLAY));
var reverseBtn = new Button(null, new FontIcon(Feather.PLAY));
reverseBtn.getStyleClass().addAll(
Styles.BUTTON_CIRCLE, Styles.FLAT
);

@ -247,23 +247,23 @@ public final class TabPanePage extends OutlinePage {
private TitledPane createController(BorderPane borderPane, TabPane tabs) {
// == BUTTONS ==
var toTopBtn = new Button("", new FontIcon(Feather.ARROW_UP));
var toTopBtn = new Button(null, new FontIcon(Feather.ARROW_UP));
toTopBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toTopBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.TOP));
var toRightBtn = new Button("", new FontIcon(Feather.ARROW_RIGHT));
var toRightBtn = new Button(null, new FontIcon(Feather.ARROW_RIGHT));
toRightBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toRightBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.RIGHT));
var toBottomBtn = new Button("", new FontIcon(Feather.ARROW_DOWN));
var toBottomBtn = new Button(null, new FontIcon(Feather.ARROW_DOWN));
toBottomBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toBottomBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.BOTTOM));
var toLeftBtn = new Button("", new FontIcon(Feather.ARROW_LEFT));
var toLeftBtn = new Button(null, new FontIcon(Feather.ARROW_LEFT));
toLeftBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toLeftBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.LEFT));
var appendBtn = new Button("", new FontIcon(Feather.PLUS));
var appendBtn = new Button(null, new FontIcon(Feather.PLUS));
appendBtn.getStyleClass().addAll(Styles.BUTTON_ICON, Styles.ACCENT);
appendBtn.setOnAction(e -> tabs.getTabs().add(createRandomTab()));

@ -112,7 +112,7 @@ public class TilePage extends OutlinePage {
tile2.setGraphic(img);
var tile3 = new Tile("Photos", "Last updated: Jun 9, 2019");
var btn = new Button("", new FontIcon(Material2OutlinedAL.DELETE));
var btn = new Button(null, new FontIcon(Material2OutlinedAL.DELETE));
btn.getStyleClass().addAll(Styles.BUTTON_CIRCLE, Styles.FLAT);
tile3.setAction(btn);
//snippet_1:end

@ -93,18 +93,18 @@ public final class ToggleButtonPage extends OutlinePage {
private ExampleBox iconOnlyExample() {
//snippet_2:start
var leftBtn = new ToggleButton("", new FontIcon(Feather.BOLD));
var leftBtn = new ToggleButton(null, new FontIcon(Feather.BOLD));
leftBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.LEFT_PILL
);
leftBtn.setSelected(true);
var centerBtn = new ToggleButton("", new FontIcon(Feather.ITALIC));
var centerBtn = new ToggleButton(null, new FontIcon(Feather.ITALIC));
centerBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.CENTER_PILL
);
var rightBtn = new ToggleButton("", new FontIcon(Feather.UNDERLINE));
var rightBtn = new ToggleButton(null, new FontIcon(Feather.UNDERLINE));
rightBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.RIGHT_PILL
);
@ -147,7 +147,7 @@ public final class ToggleButtonPage extends OutlinePage {
}
});
var prevBtn = new Button("\f", new FontIcon(Feather.CHEVRON_LEFT));
var prevBtn = new Button(null, new FontIcon(Feather.CHEVRON_LEFT));
prevBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.LEFT_PILL, "toggle-button"
);
@ -158,7 +158,7 @@ public final class ToggleButtonPage extends OutlinePage {
}
});
var nextBtn = new Button("\f", new FontIcon(Feather.CHEVRON_RIGHT));
var nextBtn = new Button(null, new FontIcon(Feather.CHEVRON_RIGHT));
nextBtn.getStyleClass().addAll(
Styles.BUTTON_ICON, Styles.RIGHT_PILL, "toggle-button"
);

@ -211,30 +211,30 @@ public final class ToolBarPage extends OutlinePage {
private TitledPane createController(BorderPane borderPane, ToolBar toolbar) {
// == BUTTONS ==
var toTopBtn = new Button("", new FontIcon(Feather.ARROW_UP));
var toTopBtn = new Button(null, new FontIcon(Feather.ARROW_UP));
toTopBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toTopBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.TOP));
var toRightBtn = new Button("", new FontIcon(Feather.ARROW_RIGHT));
var toRightBtn = new Button(null, new FontIcon(Feather.ARROW_RIGHT));
toRightBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toRightBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.RIGHT));
var toBottomBtn = new Button("", new FontIcon(Feather.ARROW_DOWN));
var toBottomBtn = new Button(null, new FontIcon(Feather.ARROW_DOWN));
toBottomBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toBottomBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.BOTTOM));
var toLeftBtn = new Button("", new FontIcon(Feather.ARROW_LEFT));
var toLeftBtn = new Button(null, new FontIcon(Feather.ARROW_LEFT));
toLeftBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toLeftBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.LEFT));
var appendBtn = new Button("", new FontIcon(Feather.PLUS));
var appendBtn = new Button(null, new FontIcon(Feather.PLUS));
appendBtn.getStyleClass().addAll(Styles.BUTTON_ICON, Styles.ACCENT);
appendBtn.setOnAction(e -> {
if (toolbar.getOrientation() == Orientation.HORIZONTAL) {
var textBtn = new Button(FAKER.animal().name(), new FontIcon(randomIcon()));
toolbar.getItems().add(textBtn);
} else {
var iconBtn = new Button("", new FontIcon(randomIcon()));
var iconBtn = new Button(null, new FontIcon(randomIcon()));
iconBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
toolbar.getItems().add(iconBtn);
}
@ -389,7 +389,7 @@ public final class ToolBarPage extends OutlinePage {
}
public static Button iconButton(Ikon icon) {
var btn = new Button("");
var btn = new Button(null);
if (icon != null) {
btn.setGraphic(new FontIcon(icon));
}

@ -23,7 +23,7 @@ final class AccentColorSelector extends HBox {
}
private void createView() {
var resetBtn = new Button("", new FontIcon(Material2AL.CLEAR));
var resetBtn = new Button(null, new FontIcon(Material2AL.CLEAR));
resetBtn.getStyleClass().addAll(BUTTON_ICON, FLAT);
resetBtn.setOnAction(e -> ThemeManager.getInstance().resetAccentColor());
@ -41,7 +41,7 @@ final class AccentColorSelector extends HBox {
var icon = new Region();
icon.getStyleClass().add("icon");
var btn = new Button("", icon);
var btn = new Button(null, icon);
btn.getStyleClass().addAll(BUTTON_ICON, FLAT, "color-button");
btn.setStyle("-color-primary:" + JColorUtils.toHexWithAlpha(accentColor.primaryColor()) + ";");
btn.setUserData(accentColor);

@ -153,7 +153,7 @@ public final class ThemePage extends OutlinePage {
}
private Node createThemeManagementSection() {
var themeRepoBtn = new Button("", new FontIcon(Material2OutlinedMZ.SETTINGS));
var themeRepoBtn = new Button(null, new FontIcon(Material2OutlinedMZ.SETTINGS));
themeRepoBtn.getStyleClass().addAll(Styles.BUTTON_ICON, Styles.FLAT);
themeRepoBtn.setTooltip(new Tooltip("Settings"));
themeRepoBtn.setOnAction(e -> {

@ -182,7 +182,7 @@ final class ThemeRepoManager extends VBox {
// == CONTROLS ==
deleteBtn = new Button("", new FontIcon(Material2OutlinedAL.DELETE));
deleteBtn = new Button(null, new FontIcon(Material2OutlinedAL.DELETE));
deleteBtn.getStyleClass().addAll(BUTTON_ICON, BUTTON_CIRCLE, FLAT, DANGER);
deleteBtn.setOnAction(e -> {
if (deleteHandler != null) {

@ -59,15 +59,13 @@ public class FileManagerPage extends ShowcasePage {
}
private void createView() {
var backBtn = new Button("", new FontIcon(Feather.ARROW_LEFT));
backBtn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
var backBtn = new Button(null, new FontIcon(Feather.ARROW_LEFT));
backBtn.getStyleClass().add(Styles.BUTTON_ICON);
backBtn.setOnAction(e -> model.back());
backBtn.disableProperty().bind(model.getHistory().canGoBackProperty().not());
backBtn.setTooltip(new Tooltip("Back"));
var forthBtn = new Button("", new FontIcon(Feather.ARROW_RIGHT));
forthBtn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
var forthBtn = new Button(null, new FontIcon(Feather.ARROW_RIGHT));
forthBtn.getStyleClass().add(Styles.BUTTON_ICON);
forthBtn.setOnAction(e -> model.forth());
forthBtn.disableProperty().bind(model.getHistory().canGoForthProperty().not());

@ -99,22 +99,19 @@ final class PlayerPane extends VBox {
// == MEDIA CONTROLS ==
var prevBtn = new Button("", new FontIcon(FAST_REWIND));
var prevBtn = new Button(null, new FontIcon(FAST_REWIND));
prevBtn.getStyleClass().addAll(BUTTON_CIRCLE);
prevBtn.setShape(new Circle(50));
prevBtn.setTooltip(new Tooltip("Previous"));
prevBtn.disableProperty().bind(model.canGoBackProperty().not());
prevBtn.setOnAction(e -> model.playPrevious());
playIcon = new FontIcon(PLAY_ARROW);
playBtn = new Button("", playIcon);
playBtn = new Button(null, playIcon);
playBtn.getStyleClass().addAll("play", BUTTON_CIRCLE);
playBtn.setShape(new Circle(50));
var nextBtn = new Button("", new FontIcon(FAST_FORWARD));
var nextBtn = new Button(null, new FontIcon(FAST_FORWARD));
nextBtn.getStyleClass().addAll(BUTTON_CIRCLE);
nextBtn.setShape(new Circle(50));
nextBtn.disableProperty().bind(model.canGoForwardProperty().not());
nextBtn.setOnAction(e -> model.playNext());
nextBtn.setTooltip(new Tooltip("Next"));
@ -144,15 +141,13 @@ final class PlayerPane extends VBox {
// == EXTRA CONTROLS ==
var clearPlaylistBtn = new Button("", new FontIcon(CLEAR_ALL));
var clearPlaylistBtn = new Button(null, new FontIcon(CLEAR_ALL));
clearPlaylistBtn.getStyleClass().addAll(BUTTON_CIRCLE);
clearPlaylistBtn.setShape(new Circle(50));
clearPlaylistBtn.setTooltip(new Tooltip("Clear"));
clearPlaylistBtn.setOnAction(e -> model.removeAll());
var shuffleBtn = new Button("", new FontIcon(SHUFFLE));
var shuffleBtn = new Button(null, new FontIcon(SHUFFLE));
shuffleBtn.getStyleClass().addAll(BUTTON_CIRCLE);
shuffleBtn.setShape(new Circle(50));
shuffleBtn.setTooltip(new Tooltip("Shuffle"));
shuffleBtn.setOnAction(e -> model.shuffle());
@ -169,9 +164,8 @@ final class PlayerPane extends VBox {
volumePopover.setHeaderAlwaysVisible(false);
volumePopover.setArrowLocation(ArrowLocation.TOP_LEFT);
var volumeBtn = new Button("", new FontIcon(VOLUME_UP));
var volumeBtn = new Button(null, new FontIcon(VOLUME_UP));
volumeBtn.getStyleClass().addAll(BUTTON_CIRCLE);
volumeBtn.setShape(new Circle(50));
volumeBtn.setOnAction(e -> volumePopover.show(volumeBtn));
var extraControls = new HBox(10);

@ -162,20 +162,14 @@ $color-shadow: -color-shadow-default !default;
// \s or \f as button text.
&.button-icon {
-fx-padding: cfg.$padding-y;
>.text {
visibility: hidden;
}
-fx-content-display: graphic-only;
}
&.button-circle {
-fx-background-radius: 50;
-fx-padding: 6px 8px 6px 8px;
-fx-content-display: graphic-only;
-fx-effect: none;
>.text {
visibility: hidden;
}
}
// toggle button + input group