diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnCategoryBox.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnCategoryBox.java new file mode 100644 index 00000000..34e7d16a --- /dev/null +++ b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnCategoryBox.java @@ -0,0 +1,123 @@ +package com.dlsc.jfxcentral2.mobile.components; + +import com.dlsc.jfxcentral2.utils.IkonUtil; +import com.dlsc.jfxcentral2.utils.MobileLinkUtil; +import com.dlsc.jfxcentral2.utils.PagePath; +import javafx.beans.property.ObjectProperty; +import javafx.beans.property.SimpleObjectProperty; +import javafx.beans.property.SimpleStringProperty; +import javafx.beans.property.StringProperty; +import javafx.scene.control.Label; +import javafx.scene.layout.HBox; +import javafx.scene.layout.Priority; +import javafx.scene.layout.VBox; +import org.kordamp.ikonli.Ikon; +import org.kordamp.ikonli.javafx.FontIcon; + +public class LearnCategoryBox extends VBox { + + public LearnCategoryBox() { + getStyleClass().add("learn-category-box"); + + LearnCategoryCell learnJavaFX = new LearnCategoryCell(); + learnJavaFX.getStyleClass().add("learn-javafx-cell"); + learnJavaFX.setTitle("JavaFX"); + learnJavaFX.setIcon(IkonUtil.learnJavaFX); + learnJavaFX.setDescription("JavaFX tutorials for beginners and advanced developers."); + MobileLinkUtil.setLink(learnJavaFX, PagePath.LEARN_JAVAFX); + + LearnCategoryCell learnMobile = new LearnCategoryCell(); + learnMobile.getStyleClass().add("learn-mobile-cell"); + learnMobile.setTitle("Mobile"); + learnMobile.setIcon(IkonUtil.learnMobile); + learnMobile.setDescription("Master the skills to build JavaFX apps for mobile platforms."); + MobileLinkUtil.setLink(learnMobile, PagePath.LEARN_MOBILE); + + LearnCategoryCell learnRaspberryPi = new LearnCategoryCell(); + learnRaspberryPi.getStyleClass().add("learn-raspberry-pi-cell"); + learnRaspberryPi.setTitle("RaspberryPi"); + learnRaspberryPi.setIcon(IkonUtil.learnRaspberryPi); + learnRaspberryPi.setDescription("Learn JavaFX development tailored to Raspberry Pi applications."); + MobileLinkUtil.setLink(learnRaspberryPi, PagePath.LEARN_RASPBERRYPI); + + HBox content = new HBox(learnJavaFX, learnMobile, learnRaspberryPi); + content.getStyleClass().add("content"); + + Label title = new Label("Learn"); + title.getStyleClass().add("title"); + + getChildren().addAll(title, content); + } + + private static class LearnCategoryCell extends VBox { + + public LearnCategoryCell() { + getStyleClass().add("learn-category-cell"); + + Label title = new Label(); + title.getStyleClass().add("title"); + FontIcon fontIcon = new FontIcon(); + title.setGraphic(fontIcon); + fontIcon.iconCodeProperty().bind(iconProperty()); + title.textProperty().bind(titleProperty()); + + Label description = new Label(); + description.getStyleClass().add("description"); + description.textProperty().bind(descriptionProperty()); + description.setWrapText(true); + + getChildren().addAll(title, description); + setPrefWidth(0); + HBox.setHgrow(this, Priority.ALWAYS); + } + + // title + + private final StringProperty title = new SimpleStringProperty(this, "title"); + + public final String getTitle() { + return title.get(); + } + + public final StringProperty titleProperty() { + return title; + } + + public final void setTitle(String title) { + titleProperty().set(title); + } + + // icon + private final ObjectProperty icon = new SimpleObjectProperty(this, "icon"); + + public final Ikon getIcon() { + return icon.get(); + } + + public final ObjectProperty iconProperty() { + return icon; + } + + public final void setIcon(Ikon icon) { + iconProperty().set(icon); + } + + // description + + private final StringProperty description = new SimpleStringProperty(this, "description"); + + public final String getDescription() { + return description.get(); + } + + public final StringProperty descriptionProperty() { + return description; + } + + public final void setDescription(String description) { + descriptionProperty().set(description); + } + + } + +} diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnListCell.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnListCell.java new file mode 100644 index 00000000..5af713db --- /dev/null +++ b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnListCell.java @@ -0,0 +1,57 @@ +package com.dlsc.jfxcentral2.mobile.components; + +import com.dlsc.gemsfx.Spacer; +import com.dlsc.jfxcentral.data.DataRepository2; +import com.dlsc.jfxcentral.data.ImageManager; +import com.dlsc.jfxcentral.data.model.Learn; +import com.dlsc.jfxcentral2.components.AvatarView; +import javafx.scene.control.Label; +import javafx.scene.control.ListCell; +import javafx.scene.control.Tooltip; +import javafx.scene.layout.HBox; + +public class LearnListCell extends ListCell { + + private static final String DEFAULT_STYLE_CLASS = "learn-list-cell"; + private final HBox authorBox; + private final Label titleLabel; + private final HBox container; + + public LearnListCell() { + getStyleClass().add(DEFAULT_STYLE_CLASS); + setPrefWidth(0); + + titleLabel = new Label(); + titleLabel.getStyleClass().add("title"); + titleLabel.setWrapText(true); + + authorBox = new HBox(); + authorBox.getStyleClass().add("author-box"); + + container = new HBox(titleLabel, new Spacer(), authorBox); + container.getStyleClass().add("container"); + } + + @Override + protected void updateItem(Learn item, boolean empty) { + super.updateItem(item, empty); + setText(null); + titleLabel.setText(null); + authorBox.getChildren().clear(); + + if (empty || item == null) { + setGraphic(null); + } else { + titleLabel.setText(item.getName()); + item.getPersonIds().forEach(id -> DataRepository2.getInstance().getPersonById(id) + .ifPresent(person -> { + AvatarView avatarView = new AvatarView(); + avatarView.setTooltip(new Tooltip(person.getName())); + avatarView.imageProperty().bind(ImageManager.getInstance().personImageProperty(person)); + authorBox.getChildren().add(avatarView); + })); + + setGraphic(container); + } + } +} diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnPagination.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnPagination.java new file mode 100644 index 00000000..ea994bd5 --- /dev/null +++ b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/LearnPagination.java @@ -0,0 +1,195 @@ +package com.dlsc.jfxcentral2.mobile.components; + +import com.dlsc.gemsfx.Spacer; +import com.dlsc.jfxcentral.data.DataRepository2; +import com.dlsc.jfxcentral.data.ImageManager; +import com.dlsc.jfxcentral.data.model.Learn; +import com.dlsc.jfxcentral.data.model.LearnJavaFX; +import com.dlsc.jfxcentral.data.model.LearnMobile; +import com.dlsc.jfxcentral.data.model.LearnRaspberryPi; +import com.dlsc.jfxcentral2.components.AvatarView; +import com.dlsc.jfxcentral2.components.CustomMarkdownView; +import com.dlsc.jfxcentral2.components.PrettyScrollPane; +import com.dlsc.jfxcentral2.utils.MobileLinkUtil; +import com.dlsc.jfxcentral2.utils.ModelObjectTool; +import javafx.beans.binding.Bindings; +import javafx.beans.property.IntegerProperty; +import javafx.beans.property.ReadOnlyObjectWrapper; +import javafx.beans.property.SimpleIntegerProperty; +import javafx.beans.property.SimpleStringProperty; +import javafx.beans.property.StringProperty; +import javafx.collections.FXCollections; +import javafx.collections.ObservableList; +import javafx.scene.control.Button; +import javafx.scene.control.Label; +import javafx.scene.control.Tooltip; +import javafx.scene.layout.HBox; +import javafx.scene.layout.Priority; +import javafx.scene.layout.VBox; +import org.kordamp.ikonli.javafx.FontIcon; +import org.kordamp.ikonli.materialdesign.MaterialDesign; + +import java.time.format.DateTimeFormatter; +import java.time.format.FormatStyle; + +public class LearnPagination extends VBox { + + private static final String DEFAULT_STYLE_CLASS = "learn-pagination"; + private static final DateTimeFormatter DATE_FORMATTER = DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM); + + private final PrettyScrollPane scrollPane = new PrettyScrollPane(); + + public LearnPagination() { + getStyleClass().add(DEFAULT_STYLE_CLASS); + + // Label title = new Label(); + // title.getStyleClass().add("title"); + // title.setWrapText(true); + // title.textProperty().bind(itemProperty().map(item -> item == null ? "" : item.getName())); + + Label dateLabel = new Label(); + dateLabel.getStyleClass().add("date-label"); + dateLabel.textProperty().bind(itemProperty().map(item -> item == null ? "" : DATE_FORMATTER.format(item.getCreatedOn()))); + + Spacer spacer = new Spacer(); + + HBox authorBox = new HBox(); + authorBox.getStyleClass().add("author-box"); + itemProperty().addListener((obs, oldItem, newItem) -> { + // update author box + authorBox.getChildren().clear(); + newItem.getPersonIds().forEach(id -> DataRepository2.getInstance().getPersonById(id) + .ifPresent(person -> { + AvatarView avatarView = new AvatarView(); + avatarView.setTooltip(new Tooltip(person.getName())); + avatarView.imageProperty().bind(ImageManager.getInstance().personImageProperty(person)); + MobileLinkUtil.setLink(avatarView, ModelObjectTool.getModelLink(person)); + authorBox.getChildren().add(avatarView); + })); + authorBox.getChildren().addAll(spacer, dateLabel); + + // scroll to top + scrollPane.setVvalue(0); + }); + + CustomMarkdownView markdownView = new CustomMarkdownView(); + markdownView.baseURLProperty().bind(baseURLProperty()); + markdownView.mdStringProperty().bind(Bindings.createStringBinding(() -> { + T currentItem = getItem(); + if (getBaseURL() == null || currentItem == null) { + return ""; + } + + if (currentItem instanceof LearnJavaFX data) { + return DataRepository2.getInstance().getLearnJavaFXReadMe(data); + } else if (currentItem instanceof LearnMobile data) { + return DataRepository2.getInstance().getLearnMobileReadMe(data); + } else if (currentItem instanceof LearnRaspberryPi data) { + return DataRepository2.getInstance().getLearnRaspberryPiReadMe(data); + } + return ""; + }, itemProperty(), baseURLProperty())); + + Button previousButton = new Button(); + previousButton.getStyleClass().addAll("nav-button", "previous-button"); + previousButton.setGraphic(new FontIcon(MaterialDesign.MDI_CHEVRON_LEFT)); + previousButton.disableProperty().bind(index.isEqualTo(0)); + previousButton.setOnAction(e -> setIndex(getIndex() - 1)); + + Button nextButton = new Button(); + nextButton.getStyleClass().addAll("nav-button", "next-button"); + nextButton.setGraphic(new FontIcon(MaterialDesign.MDI_CHEVRON_RIGHT)); + nextButton.disableProperty().bind(Bindings.createBooleanBinding(() -> getIndex() >= items.size() - 1, indexProperty(), getItems())); + nextButton.setOnAction(e -> setIndex(getIndex() + 1)); + + Label pageLabel = new Label(); + pageLabel.getStyleClass().add("page-label"); + pageLabel.textProperty().bind(Bindings.concat(indexProperty().add(1), " / ", Bindings.size(items))); + + HBox navBox = new HBox(previousButton, pageLabel, nextButton); + navBox.getStyleClass().add("nav-box"); + pageLabel.setMaxWidth(Double.MAX_VALUE); + HBox.setHgrow(pageLabel, Priority.ALWAYS); + + VBox contentBox = new VBox(authorBox, markdownView); + contentBox.getStyleClass().add("content-box"); + + scrollPane.setContent(contentBox); + scrollPane.getStyleClass().add("mobile"); + scrollPane.setMaxHeight(Double.MAX_VALUE); + VBox.setVgrow(scrollPane, Priority.ALWAYS); + + getChildren().addAll(scrollPane, navBox); + + itemProperty().bind(Bindings.createObjectBinding(() -> { + int currentIndex = getIndex(); + int size = getItems().size(); + if (currentIndex < 0 || currentIndex >= size) { + return null; + } + + return getItems().get(currentIndex); + }, indexProperty(), getItems())); + } + + public final void setSelectedItem(T item) { + setIndex(getItems().indexOf(item)); + } + + // learn items + + private final ObservableList items = FXCollections.observableArrayList(); + + public ObservableList getItems() { + return items; + } + + // index + + private final IntegerProperty index = new SimpleIntegerProperty(this, "index", -1); + + public final IntegerProperty indexProperty() { + return index; + } + + public final int getIndex() { + return index.get(); + } + + public final void setIndex(int index) { + this.index.set(index); + } + + // item + + private final ReadOnlyObjectWrapper item = new ReadOnlyObjectWrapper<>(this, "item"); + + public final T getItem() { + return item.get(); + } + + public final ReadOnlyObjectWrapper itemProperty() { + return item; + } + + private void setItem(T item) { + this.item.set(item); + } + + // base url + + private final StringProperty baseURL = new SimpleStringProperty(this, "baseURL"); + + public String getBaseURL() { + return baseURL.get(); + } + + public StringProperty baseURLProperty() { + return baseURL; + } + + public void setBaseURL(String baseURL) { + this.baseURL.set(baseURL); + } + +} \ No newline at end of file diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileHomePage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileHomePage.java index 452a3f07..816d83e5 100644 --- a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileHomePage.java +++ b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileHomePage.java @@ -13,6 +13,7 @@ import com.dlsc.jfxcentral.data.model.Video; import com.dlsc.jfxcentral2.components.MobilePageBase; import com.dlsc.jfxcentral2.components.PrettyScrollPane; +import com.dlsc.jfxcentral2.mobile.components.LearnCategoryBox; import com.dlsc.jfxcentral2.mobile.components.MobileSearchView; import com.dlsc.jfxcentral2.mobile.home.CategoryAdvancedView; import com.dlsc.jfxcentral2.mobile.home.CategoryPreviewView; @@ -106,6 +107,8 @@ private Node createNormalView() { CategoryAdvancedView categoryAdvancedView = new CategoryAdvancedView(); categoryAdvancedView.sizeProperty().bind(sizeProperty()); + LearnCategoryBox learnCategoryBox = new LearnCategoryBox(); + List linksOfTheWeek = DataRepository2.getInstance().getLinksOfTheWeek(); WeekLinksView weekLinksView = new WeekLinksView(); @@ -140,7 +143,7 @@ private Node createNormalView() { CategoryPreviewView blogPreviewView = CategoryPreviewView.createBlogPreviewView(randomBlogs, PagePath.BLOGS); blogPreviewView.sizeProperty().bind(sizeProperty()); - VBox normalView = new VBox(categoryAdvancedView, weekLinksView, showCasePreviewView, peoplePreviewView, libraryPreviewView, booksPreviewView, videoPreviewView, blogPreviewView, tipsPreviewView); + VBox normalView = new VBox(categoryAdvancedView, weekLinksView, showCasePreviewView, peoplePreviewView, libraryPreviewView, booksPreviewView, videoPreviewView, blogPreviewView, tipsPreviewView, learnCategoryBox); normalView.getStyleClass().add("content-box"); PrettyScrollPane prettyScrollPane = new PrettyScrollPane(normalView); diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/category/MobileLearnCategoryPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/category/MobileLearnCategoryPage.java index 1c013639..3cf148d3 100644 --- a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/category/MobileLearnCategoryPage.java +++ b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/category/MobileLearnCategoryPage.java @@ -1,9 +1,13 @@ package com.dlsc.jfxcentral2.mobile.pages.category; import com.dlsc.jfxcentral.data.model.Learn; +import com.dlsc.jfxcentral2.mobile.components.LearnListCell; import com.dlsc.jfxcentral2.model.Size; import com.dlsc.jfxcentral2.utils.IkonUtil; import javafx.beans.property.ObjectProperty; +import javafx.scene.control.ListCell; +import javafx.scene.control.ListView; +import javafx.util.Callback; import org.kordamp.ikonli.Ikon; public abstract class MobileLearnCategoryPage extends MobileCategoryPageBase { @@ -21,4 +25,9 @@ protected Ikon getCategoryIkon() { protected String getSearchPromptText() { return "Search for a lesson"; } + + protected Callback, ListCell> cellFactory() { + return param -> new LearnListCell(); + } + } diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileLearnDetailsPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileLearnDetailsPage.java index 9c19f745..5e8eb577 100644 --- a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileLearnDetailsPage.java +++ b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileLearnDetailsPage.java @@ -1,14 +1,16 @@ package com.dlsc.jfxcentral2.mobile.pages.details; +import com.dlsc.jfxcentral.data.DataRepository2; import com.dlsc.jfxcentral.data.model.Learn; -import com.dlsc.jfxcentral2.components.PrettyScrollPane; -import com.dlsc.jfxcentral2.components.overviewbox.LearnOverviewBox; +import com.dlsc.jfxcentral.data.model.LearnJavaFX; +import com.dlsc.jfxcentral.data.model.LearnMobile; +import com.dlsc.jfxcentral.data.model.LearnRaspberryPi; +import com.dlsc.jfxcentral2.mobile.components.LearnPagination; import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader; import com.dlsc.jfxcentral2.model.Size; import javafx.beans.property.ObjectProperty; import javafx.scene.Node; import javafx.scene.layout.Priority; -import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import java.util.List; @@ -28,18 +30,25 @@ public List content() { header.sizeProperty().bind(sizeProperty()); header.setTitle(learn.getName()); - // overview box - LearnOverviewBox learnOverviewBox = new LearnOverviewBox(learn); - learnOverviewBox.sizeProperty().bind(sizeProperty()); - learnOverviewBox.setIcon(null); - learnOverviewBox.setTitle(null); - - PrettyScrollPane detailsContentPane = new PrettyScrollPane(new StackPane(learnOverviewBox)); - detailsContentPane.getStyleClass().add("mobile"); - detailsContentPane.setMaxHeight(Double.MAX_VALUE); - VBox.setVgrow(detailsContentPane, Priority.ALWAYS); - - return List.of(header, detailsContentPane); + // content + LearnPagination detailsView = new LearnPagination<>(); + if (learn instanceof LearnJavaFX) { + detailsView.setBaseURL(DataRepository2.getInstance().getRepositoryDirectoryURL() + "learn/javafx/" + learn.getId()); + List learnJavaFX = DataRepository2.getInstance().getLearnJavaFX(); + detailsView.getItems().setAll(learnJavaFX); + } else if (learn instanceof LearnMobile) { + detailsView.setBaseURL(DataRepository2.getInstance().getRepositoryDirectoryURL() + "learn/mobile/" + learn.getId()); + List learnMobile = DataRepository2.getInstance().getLearnMobile(); + detailsView.getItems().setAll(learnMobile); + } else if (learn instanceof LearnRaspberryPi) { + List learnRaspberryPi = DataRepository2.getInstance().getLearnRaspberryPi(); + detailsView.setBaseURL(DataRepository2.getInstance().getRepositoryDirectoryURL() + "learn/raspberrypi/" + learn.getId()); + detailsView.getItems().setAll(learnRaspberryPi); + } + detailsView.setSelectedItem(learn); + + VBox.setVgrow(detailsView, Priority.ALWAYS); + return List.of(header, detailsView); } } diff --git a/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css b/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css index 4de3a957..e01574cf 100644 --- a/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css +++ b/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css @@ -760,7 +760,7 @@ -fx-max-height: 1px; } -.mobile-details-page .overview-box .top-box-wrapper > .top-box { +.mobile-details-page .overview-box .top-box-wrapper > .top-box { -fx-spacing: 5px; } @@ -1167,4 +1167,126 @@ .mobile-person-detail-view > .person-content-box .person-linked-box { -fx-padding: 5px 15px; -fx-spacing: 15px; -} \ No newline at end of file +} + +/** ---------------------------------- + * LearnCategoryBox + */ +.learn-category-box { + -fx-spacing: 10px; +} + +.learn-category-box > .title { + -fx-font-family: "Spline Sans SemiBold"; + -fx-font-size: 20px; + -fx-text-fill: -grey-100; + -fx-padding: 10px 0 5px 0; +} + +.learn-category-box > .content { + -fx-spacing: 5px; +} + +.learn-category-box .learn-category-cell .title { + -fx-font-family: "Spline Sans SemiBold"; + -fx-font-size: 14px; +} + +.learn-category-box .learn-category-cell { + -fx-spacing: 5px; + -fx-border-color: -grey-10; + -fx-border-radius: 10px; + -fx-padding: 10px 5px 5px 5px; + -fx-background-radius: 10px; +} + +.learn-category-box .learn-category-cell .description { + -fx-text-fill: -grey-60; +} + +/** ---------------------------------- + * LearnListCell + */ +.learn-list-cell { + -fx-padding: 10px 5px; + -fx-border-color: -grey-10; + -fx-border-width: 0 0 1px 0; +} + +.learn-list-cell > .container { + -fx-spacing: 10px; + -fx-alignment: center-left; +} + +.learn-list-cell > .container > .title { + -fx-font-family: "Spline Sans Medium"; + -fx-font-size: 14px; + -fx-text-fill: -grey-100; +} + +.learn-list-cell .author-box { + -fx-spacing: 5px; + -fx-alignment: center-right; +} + +.learn-list-cell .author-box .avatar-view { + -fx-avatar-size: 28px; +} + +/** ---------------------------------- + * LearnPagination + */ +.learn-pagination { + -fx-background-color: -white; + -fx-padding: 0 20px 10px 20px; +} + +.learn-pagination .author-box { + -fx-spacing: 10px; + -fx-alignment: center-right; + -fx-padding: 10px 5px; +} + +.learn-pagination .author-box .avatar-view { + -fx-avatar-size: 28px; + -fx-border-color: -grey-30; + -fx-border-radius: 30px; +} + +.learn-pagination .author-box .date-label { + -fx-font-size: 15px; + -fx-text-fill: -grey-60; +} + +.learn-pagination .nav-box { + -fx-spacing: 10px; + -fx-alignment: center; + -fx-padding: 5px; +} + +.learn-pagination .nav-box .page-label { + -fx-font-size: 15px; + -fx-text-fill: -grey-60; + -fx-alignment: center; +} + +.learn-pagination .nav-box .nav-button { + -fx-background-color: -white; + -fx-background-radius: 50px; + -fx-border-color: -grey-10; + -fx-text-fill: -grey-60; + -fx-content-display: graphic-only; + -fx-padding: 5px; + -fx-border-radius: 50px; +} + +.learn-pagination .nav-box .nav-button:pressed { + -fx-background-color: -grey-10; + -fx-background-radius: 50px; + +} + +.learn-pagination .nav-box .nav-button .ikonli-font-icon { + -fx-icon-size: 20px; + -fx-icon-color: -grey-100; +}