Merge pull request #638 from dlsc-software-consulting-gmbh/develop-ad…

…just-the-style Update UI components and enhance readability
dlsc-software-consulting-gmbh · Jul 23, 2024 · 8167245 · 8167245
2 parents 7b24597 + 1cdf81e
commit 8167245
Show file tree

Hide file tree

Showing 21 changed files with 130 additions and 73 deletions.
diff --git a/components/src/main/java/com/dlsc/jfxcentral2/components/Header.java b/components/src/main/java/com/dlsc/jfxcentral2/components/Header.java
@@ -28,6 +28,8 @@ public Header() {
         FontIcon icon = new FontIcon();
         icon.getStyleClass().add("header-icon");
         icon.iconCodeProperty().bind(iconProperty());
+        icon.managedProperty().bind(icon.visibleProperty());
+        icon.visibleProperty().bind(icon.iconCodeProperty().isNotNull());
 
         StackPane wrapper = new StackPane(icon);
         wrapper.getStyleClass().add("header-icon-wrapper");

diff --git a/components/src/main/java/com/dlsc/jfxcentral2/components/overviewbox/LibraryOverviewBox.java b/components/src/main/java/com/dlsc/jfxcentral2/components/overviewbox/LibraryOverviewBox.java
@@ -24,6 +24,8 @@ public LibraryOverviewBox(Library library) {
         Header header = new Header();
         header.titleProperty().bind(titleProperty());
         header.iconProperty().bind(iconProperty());
+        header.managedProperty().bind(header.visibleProperty());
+        header.visibleProperty().bind(titleProperty().isNotEmpty().and(iconProperty().isNotNull()));
 
         CustomMarkdownView markdownView = new CustomMarkdownView();
         markdownView.setBaseURL(DataRepository2.getInstance().getRepositoryDirectoryURL() + "libraries/" + library.getId());

diff --git a/components/src/main/java/com/dlsc/jfxcentral2/components/overviewbox/OverviewBox.java b/components/src/main/java/com/dlsc/jfxcentral2/components/overviewbox/OverviewBox.java
@@ -32,6 +32,8 @@ public OverviewBox(T model) {
         Header header = new Header();
         header.titleProperty().bind(titleProperty());
         header.iconProperty().bind(iconProperty());
+        header.managedProperty().bind(header.visibleProperty());
+        header.visibleProperty().bind(titleProperty().isNotEmpty().and(iconProperty().isNotNull()));
 
         topWrapper = new StackPane();
         topWrapper.getStyleClass().add("top-wrapper");

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/MobileBlogOverviewBox.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/MobileBlogOverviewBox.java
@@ -7,7 +7,6 @@
 import com.dlsc.jfxcentral2.components.SizeSupport;
 import com.dlsc.jfxcentral2.model.Size;
 import com.dlsc.jfxcentral2.utils.ExternalLinkUtil;
-import com.dlsc.jfxcentral2.utils.IkonUtil;
 import com.dlsc.jfxcentral2.utils.StringUtil;
 import com.rometools.rome.feed.synd.SyndEntry;
 import javafx.application.Platform;
@@ -20,6 +19,7 @@
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import org.kordamp.ikonli.antdesignicons.AntDesignIconsOutlined;
 import org.kordamp.ikonli.javafx.FontIcon;
@@ -42,8 +42,8 @@ public MobileBlogOverviewBox(Blog blog) {
 
         // top
         Header header = new Header();
-        header.setTitle("Recent posts found on " + blog.getName());
-        header.setIcon(IkonUtil.getModelIkon(Blog.class));
+        header.setTitle("Recent posts" );
+        header.setIcon(null);
 
         // center
         Label loadingTipsLabel = new Label(StringUtil.LOADING_TIPS, new FontIcon(AntDesignIconsOutlined.CLOUD_DOWNLOAD));
@@ -54,9 +54,12 @@ public MobileBlogOverviewBox(Blog blog) {
         listView.getStyleClass().addAll("posts-list", "mobile");
         listView.setCellFactory(param -> new PostViewCell());
         listView.setMaxHeight(Double.MAX_VALUE);
-        VBox.setVgrow(listView, Priority.ALWAYS);
 
-        getChildren().addAll(header, listView);
+        StackPane listWrapper = new StackPane(listView);
+        listWrapper.getStyleClass().add("list-wrapper");
+
+        VBox.setVgrow(listWrapper, Priority.ALWAYS);
+        getChildren().addAll(header, listWrapper);
 
         Service<Void> service = new Service<>() {
             @Override

diff --git a/...bile/components/MobileCategoryHeader.java → ...2/mobile/components/MobilePageHeader.java b/...bile/components/MobileCategoryHeader.java → ...2/mobile/components/MobilePageHeader.java
@@ -14,27 +14,27 @@
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
 import org.kordamp.ikonli.Ikon;
-import org.kordamp.ikonli.fontawesome.FontAwesome;
 import org.kordamp.ikonli.javafx.FontIcon;
+import org.kordamp.ikonli.materialdesign2.MaterialDesignA;
 
-public class MobileCategoryHeader extends StackPane {
+public class MobilePageHeader extends StackPane {
 
-    private static final String DEFAULT_STYLE_CLASS = "mobile-category-header";
+    private static final String DEFAULT_STYLE_CLASS = "mobile-page-header";
     private final SizeSupport sizeSupport = new SizeSupport(this);
 
-    public MobileCategoryHeader() {
+    public MobilePageHeader() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
 
         Button backButton = new Button();
         backButton.getStyleClass().add("back-button");
-        backButton.setGraphic(new FontIcon(FontAwesome.ANGLE_LEFT));
+        backButton.setGraphic(new FontIcon(MaterialDesignA.ARROW_LEFT));
         MobileLinkUtil.setGoToBackLink(backButton);
 
         HBox topBox = new HBox(backButton);
         topBox.getStyleClass().add("top-box");
 
         Label categoryTitle = new Label();
-        categoryTitle.getStyleClass().add("category-title");
+        categoryTitle.getStyleClass().add("title");
         categoryTitle.textProperty().bind(titleProperty());
         categoryTitle.graphicProperty().bind(Bindings.createObjectBinding(() -> {
             Ikon icon = getIcon();

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/MobilePersonDetailView.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/MobilePersonDetailView.java
@@ -26,8 +26,8 @@
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import org.kordamp.ikonli.Ikon;
-import org.kordamp.ikonli.fontawesome.FontAwesome;
 import org.kordamp.ikonli.javafx.FontIcon;
+import org.kordamp.ikonli.materialdesign2.MaterialDesignA;
 
 import java.util.List;
 
@@ -49,7 +49,7 @@ public MobilePersonDetailView() {
 
         Button backButton = new Button();
         backButton.getStyleClass().add("back-button");
-        backButton.setGraphic(new FontIcon(FontAwesome.ANGLE_LEFT));
+        backButton.setGraphic(new FontIcon(MaterialDesignA.ARROW_LEFT));
         MobileLinkUtil.setGoToBackLink(backButton);
         StackPane.setAlignment(backButton, Pos.TOP_LEFT);
 

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/home/HomePageHeader.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/home/HomePageHeader.java
@@ -2,6 +2,7 @@
 
 import com.dlsc.jfxcentral2.components.CustomImageView;
 import com.dlsc.jfxcentral2.components.SizeSupport;
+import com.dlsc.jfxcentral2.mobile.pages.MobileHomePage;
 import com.dlsc.jfxcentral2.model.Size;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.control.Label;
@@ -58,6 +59,12 @@ public HomePageHeader() {
                 updateView();
             }
         });
+
+        // click on the logo to go back to the normal view.
+        setOnMouseClicked(e -> {
+            MobileHomePage.getInstance().setContentType(MobileHomePage.ContentType.NORMAL);
+            requestFocus();
+        });
     }
 
     private void updateView() {

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileLinksOfTheWeekPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileLinksOfTheWeekPage.java
@@ -4,7 +4,7 @@
 import com.dlsc.jfxcentral.data.model.LinksOfTheWeek;
 import com.dlsc.jfxcentral2.components.CustomMarkdownView;
 import com.dlsc.jfxcentral2.components.MobilePageBase;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
 import com.dlsc.jfxcentral2.utils.IkonUtil;
 import javafx.beans.property.ObjectProperty;
@@ -36,7 +36,7 @@ public MobileLinksOfTheWeekPage() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
 
         // top header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.setTitle("Links of the Week");
         header.setIcon(IkonUtil.getModelIkon(LinksOfTheWeek.class));
 

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/category/MobileCategoryPageBase.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/category/MobileCategoryPageBase.java
@@ -2,7 +2,7 @@
 
 import com.dlsc.jfxcentral.data.model.ModelObject;
 import com.dlsc.jfxcentral2.components.MobilePageBase;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.mobile.components.ModelListCell;
 import com.dlsc.jfxcentral2.mobile.components.ModelListView;
 import com.dlsc.jfxcentral2.model.Size;
@@ -33,7 +33,7 @@ public MobileCategoryPageBase(ObjectProperty<Size> size) {
 
     public List<Node> content() {
         // header
-        MobileCategoryHeader header = createCategoryHeader();
+        MobilePageHeader header = createCategoryHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setTitle(getCategoryTitle());
         header.setIcon(getCategoryIkon());
@@ -66,8 +66,8 @@ protected Callback<ListView<T>, ListCell<T>> cellFactory() {
 
     protected abstract ObservableList<T> getCategoryItems();
 
-    protected MobileCategoryHeader createCategoryHeader() {
-        return new MobileCategoryHeader();
+    protected MobilePageHeader createCategoryHeader() {
+        return new MobilePageHeader();
     }
 
     protected String getSearchPromptText() {

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileBlogDetailsPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileBlogDetailsPage.java
@@ -1,11 +1,9 @@
 package com.dlsc.jfxcentral2.mobile.pages.details;
 
-import com.dlsc.jfxcentral.data.ImageManager;
 import com.dlsc.jfxcentral.data.model.Blog;
 import com.dlsc.jfxcentral2.mobile.components.MobileBlogOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
-import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.Priority;
@@ -24,7 +22,7 @@ public List<Node> content() {
         Blog blog = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setTitle(blog.getName());
 

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileBookDetailsPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileBookDetailsPage.java
@@ -3,9 +3,8 @@
 import com.dlsc.jfxcentral.data.model.Book;
 import com.dlsc.jfxcentral2.components.PrettyScrollPane;
 import com.dlsc.jfxcentral2.components.overviewbox.BookOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
-import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.Priority;
@@ -26,13 +25,15 @@ public List<Node> content() {
         Book book = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setTitle(book.getName());
 
         // overview
         BookOverviewBox bookOverviewBox = new BookOverviewBox(book);
         bookOverviewBox.sizeProperty().bind(sizeProperty());
+        bookOverviewBox.setIcon(null);
+        bookOverviewBox.setTitle(null);
 
         PrettyScrollPane detailsContentPane = new PrettyScrollPane(new StackPane(bookOverviewBox));
         detailsContentPane.getStyleClass().add("mobile");

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileCompanyDetailsPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileCompanyDetailsPage.java
@@ -4,10 +4,9 @@
 import com.dlsc.jfxcentral.data.model.Company;
 import com.dlsc.jfxcentral2.components.PrettyScrollPane;
 import com.dlsc.jfxcentral2.components.overviewbox.CompanyOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
 import com.dlsc.jfxcentral2.utils.IkonUtil;
-import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.Priority;
@@ -27,7 +26,7 @@ public List<Node> content() {
         Company company = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setIcon(IkonUtil.getModelIkon(Company.class));
         header.setTitle(company.getName());
@@ -36,6 +35,8 @@ public List<Node> content() {
         CompanyOverviewBox companyOverviewBox = new CompanyOverviewBox(company);
         companyOverviewBox.sizeProperty().bind(sizeProperty());
         companyOverviewBox.imageProperty().bind(ImageManager.getInstance().companyImageProperty(company));
+        companyOverviewBox.setIcon(null);
+        companyOverviewBox.setTitle(null);
 
         PrettyScrollPane detailsContentPane = new PrettyScrollPane(new StackPane(companyOverviewBox));
         detailsContentPane.getStyleClass().add("mobile");

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
@@ -3,7 +3,7 @@
 import com.dlsc.jfxcentral.data.model.Learn;
 import com.dlsc.jfxcentral2.components.PrettyScrollPane;
 import com.dlsc.jfxcentral2.components.overviewbox.LearnOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
@@ -24,13 +24,15 @@ public List<Node> content() {
         Learn learn = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         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");

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileLibraryDetailsPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileLibraryDetailsPage.java
@@ -1,12 +1,10 @@
 package com.dlsc.jfxcentral2.mobile.pages.details;
 
-import com.dlsc.jfxcentral.data.ImageManager;
 import com.dlsc.jfxcentral.data.model.Library;
 import com.dlsc.jfxcentral2.components.PrettyScrollPane;
 import com.dlsc.jfxcentral2.components.overviewbox.LibraryOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
-import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.Priority;
@@ -26,13 +24,15 @@ public List<Node> content() {
         Library library = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setTitle(library.getName());
 
         // overview box
         LibraryOverviewBox libraryOverviewBox = new LibraryOverviewBox(library);
         libraryOverviewBox.sizeProperty().bind(sizeProperty());
+        libraryOverviewBox.setIcon(null);
+        libraryOverviewBox.setTitle(null);
 
         PrettyScrollPane detailsContentPane = new PrettyScrollPane(new StackPane(libraryOverviewBox));
         detailsContentPane.getStyleClass().add("mobile");

diff --git a/.../main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileShowcaseMobileDetailsPage.java b/.../main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileShowcaseMobileDetailsPage.java
@@ -1,12 +1,10 @@
 package com.dlsc.jfxcentral2.mobile.pages.details;
 
-import com.dlsc.jfxcentral.data.ImageManager;
 import com.dlsc.jfxcentral.data.model.RealWorldApp;
 import com.dlsc.jfxcentral2.components.PrettyScrollPane;
 import com.dlsc.jfxcentral2.components.overviewbox.ShowcaseOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
-import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.StackPane;
@@ -24,13 +22,16 @@ public List<Node> content() {
         RealWorldApp app = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setTitle(app.getName());
 
         // overview box
         ShowcaseOverviewBox appOverviewBox = new ShowcaseOverviewBox(app);
         appOverviewBox.sizeProperty().bind(sizeProperty());
+        appOverviewBox.setIcon(null);
+        appOverviewBox.setTitle(null);
+
         PrettyScrollPane scrollPane = new PrettyScrollPane(new StackPane(appOverviewBox));
         scrollPane.getStyleClass().add("mobile");
 

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileTipDetailsPage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/details/MobileTipDetailsPage.java
@@ -1,12 +1,10 @@
 package com.dlsc.jfxcentral2.mobile.pages.details;
 
-import com.dlsc.jfxcentral.data.ImageManager;
 import com.dlsc.jfxcentral.data.model.Tip;
 import com.dlsc.jfxcentral2.components.PrettyScrollPane;
 import com.dlsc.jfxcentral2.components.overviewbox.TipOverviewBox;
-import com.dlsc.jfxcentral2.mobile.components.MobileCategoryHeader;
+import com.dlsc.jfxcentral2.mobile.components.MobilePageHeader;
 import com.dlsc.jfxcentral2.model.Size;
-import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.property.ObjectProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.Priority;
@@ -26,13 +24,15 @@ public List<Node> content() {
         Tip tip = getItem();
 
         // header
-        MobileCategoryHeader header = new MobileCategoryHeader();
+        MobilePageHeader header = new MobilePageHeader();
         header.sizeProperty().bind(sizeProperty());
         header.setTitle(tip.getName());
 
         // overview
         TipOverviewBox tipOverviewBox = new TipOverviewBox(tip);
         tipOverviewBox.sizeProperty().bind(sizeProperty());
+        tipOverviewBox.setIcon(null);
+        tipOverviewBox.setTitle(null);
 
         PrettyScrollPane detailsContentPane = new PrettyScrollPane(new StackPane(tipOverviewBox));
         detailsContentPane.getStyleClass().add("mobile");