Added initial support for a drawer control.

dlsc-software-consulting-gmbh · Aug 28, 2024 · 1f849d8 · 1f849d8
1 parent c906c23
commit 1f849d8
Show file tree

Hide file tree

Showing 5 changed files with 262 additions and 8 deletions.
diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/BottomMenuBar.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/components/BottomMenuBar.java
@@ -34,6 +34,7 @@ public BottomMenuBar() {
 
         CustomToggleButton homeButton = new CustomToggleButton();
         homeButton.setText("Home");
+        homeButton.setPrefWidth(0);
         homeButton.setGraphic(new FontIcon(MaterialDesign.MDI_HOME));
         homeButton.setMaxWidth(Double.MAX_VALUE);
         homeButton.setUserData(PagePath.HOME);
@@ -48,6 +49,7 @@ public BottomMenuBar() {
         HBox.setHgrow(homeButton, Priority.ALWAYS);
 
         CustomToggleButton linksWeekButton = new CustomToggleButton();
+        linksWeekButton.setPrefWidth(0);
         linksWeekButton.setText("News");
         linksWeekButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(LinksOfTheWeek.class)));
         linksWeekButton.setMaxWidth(Double.MAX_VALUE);
@@ -56,6 +58,7 @@ public BottomMenuBar() {
         HBox.setHgrow(linksWeekButton, Priority.ALWAYS);
 
         CustomToggleButton showcasesButton = new CustomToggleButton();
+        showcasesButton.setPrefWidth(0);
         showcasesButton.setText("Apps");
         showcasesButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(RealWorldApp.class)));
         showcasesButton.setMaxWidth(Double.MAX_VALUE);
@@ -64,6 +67,7 @@ public BottomMenuBar() {
         HBox.setHgrow(showcasesButton, Priority.ALWAYS);
 
         CustomToggleButton libraryButton = new CustomToggleButton();
+        libraryButton.setPrefWidth(0);
         libraryButton.setText("Libs");
         libraryButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Library.class)));
         libraryButton.setMaxWidth(Double.MAX_VALUE);
@@ -72,6 +76,7 @@ public BottomMenuBar() {
         HBox.setHgrow(libraryButton, Priority.ALWAYS);
 
         CustomToggleButton peopleButton = new CustomToggleButton();
+        peopleButton.setPrefWidth(0);
         peopleButton.setText("People");
         peopleButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Person.class)));
         peopleButton.setMaxWidth(Double.MAX_VALUE);

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/CategoriesPane.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/CategoriesPane.java
@@ -0,0 +1,158 @@
+package com.dlsc.jfxcentral2.mobile.pages;
+
+import com.dlsc.jfxcentral.data.model.Blog;
+import com.dlsc.jfxcentral.data.model.Book;
+import com.dlsc.jfxcentral.data.model.Company;
+import com.dlsc.jfxcentral.data.model.Documentation;
+import com.dlsc.jfxcentral.data.model.LearnJavaFX;
+import com.dlsc.jfxcentral.data.model.LearnMobile;
+import com.dlsc.jfxcentral.data.model.LearnRaspberryPi;
+import com.dlsc.jfxcentral.data.model.Member;
+import com.dlsc.jfxcentral.data.model.Tip;
+import com.dlsc.jfxcentral.data.model.Tool;
+import com.dlsc.jfxcentral.data.model.Tutorial;
+import com.dlsc.jfxcentral.data.model.Video;
+import com.dlsc.jfxcentral2.utils.IkonUtil;
+import com.dlsc.jfxcentral2.utils.MobileLinkUtil;
+import com.dlsc.jfxcentral2.utils.PagePath;
+import javafx.scene.control.Button;
+import javafx.scene.layout.GridPane;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.TilePane;
+import org.kordamp.ikonli.javafx.FontIcon;
+
+public class CategoriesPane extends GridPane {
+
+    public CategoriesPane() {
+        getStyleClass().add("categories-pane");
+
+        setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
+
+        Button booksButton = new Button();
+        booksButton.setText("Books");
+        booksButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Book.class)));
+        booksButton.setMaxWidth(Double.MAX_VALUE);
+        booksButton.setUserData(PagePath.HOME);
+        MobileLinkUtil.setLink(booksButton, PagePath.BOOKS);
+
+        Button blogsButton = new Button();
+        blogsButton.setText("Blogs");
+        blogsButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Blog.class)));
+        blogsButton.setMaxWidth(Double.MAX_VALUE);
+        blogsButton.setUserData(PagePath.BLOGS);
+        MobileLinkUtil.setLink(blogsButton, PagePath.BLOGS);
+
+        Button companiesButton = new Button();
+        companiesButton.setText("Companies");
+        companiesButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Company.class)));
+        companiesButton.setMaxWidth(Double.MAX_VALUE);
+        companiesButton.setUserData(PagePath.COMPANIES);
+        MobileLinkUtil.setLink(companiesButton, PagePath.COMPANIES);
+
+        Button docsButton = new Button();
+        docsButton.setText("Docs");
+        docsButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Documentation.class)));
+        docsButton.setMaxWidth(Double.MAX_VALUE);
+        docsButton.setUserData(PagePath.DOCUMENTATION);
+        MobileLinkUtil.setLink(docsButton, PagePath.DOCUMENTATION);
+
+        Button tutorialsButton = new Button();
+        tutorialsButton.setText("Tutorials");
+        tutorialsButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Tutorial.class)));
+        tutorialsButton.setMaxWidth(Double.MAX_VALUE);
+        tutorialsButton.setUserData(PagePath.TUTORIALS);
+        MobileLinkUtil.setLink(tutorialsButton, PagePath.TUTORIALS);
+
+        Button tipsButton = new Button();
+        tipsButton.setText("Tips");
+        tipsButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Tip.class)));
+        tipsButton.setMaxWidth(Double.MAX_VALUE);
+        tipsButton.setUserData(PagePath.TIPS);
+        MobileLinkUtil.setLink(tipsButton, PagePath.TIPS);
+
+        Button toolsButton = new Button();
+        toolsButton.setText("Tools");
+        toolsButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Tool.class)));
+        toolsButton.setMaxWidth(Double.MAX_VALUE);
+        toolsButton.setUserData(PagePath.TOOLS);
+        MobileLinkUtil.setLink(toolsButton, PagePath.TOOLS);
+
+        Button videosButton = new Button();
+        videosButton.setText("Videos");
+        videosButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(Video.class)));
+        videosButton.setMaxWidth(Double.MAX_VALUE);
+        videosButton.setUserData(PagePath.VIDEOS);
+        MobileLinkUtil.setLink(videosButton, PagePath.VIDEOS);
+
+        Button learnJavaFXButton = new Button();
+        learnJavaFXButton.setText("Learn JFX");
+        learnJavaFXButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(LearnJavaFX.class)));
+        learnJavaFXButton.setMaxWidth(Double.MAX_VALUE);
+        learnJavaFXButton.setUserData(PagePath.LEARN_JAVAFX);
+        MobileLinkUtil.setLink(learnJavaFXButton, PagePath.LEARN_JAVAFX);
+
+        Button learnMobileButton = new Button();
+        learnMobileButton.setText("Learn Mobile");
+        learnMobileButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(LearnMobile.class)));
+        learnMobileButton.setMaxWidth(Double.MAX_VALUE);
+        learnMobileButton.setUserData(PagePath.LEARN_MOBILE);
+        MobileLinkUtil.setLink(learnMobileButton, PagePath.LEARN_MOBILE);
+
+        Button learnRaspberryPiButton = new Button();
+        learnRaspberryPiButton.setText("Learn PI");
+        learnRaspberryPiButton.setGraphic(new FontIcon(IkonUtil.getModelIkon(LearnRaspberryPi.class)));
+        learnRaspberryPiButton.setMaxWidth(Double.MAX_VALUE);
+        learnRaspberryPiButton.setUserData(PagePath.LEARN_RASPBERRYPI);
+        MobileLinkUtil.setLink(learnRaspberryPiButton, PagePath.LEARN_RASPBERRYPI);
+
+        GridPane.setHgrow(videosButton, Priority.ALWAYS);
+        GridPane.setHgrow(toolsButton, Priority.ALWAYS);
+        GridPane.setHgrow(docsButton, Priority.ALWAYS);
+        GridPane.setHgrow(tipsButton, Priority.ALWAYS);
+        GridPane.setHgrow(tutorialsButton, Priority.ALWAYS);
+        GridPane.setHgrow(booksButton, Priority.ALWAYS);
+        GridPane.setHgrow(blogsButton, Priority.ALWAYS);
+        GridPane.setHgrow(companiesButton, Priority.ALWAYS);
+        GridPane.setHgrow(learnJavaFXButton, Priority.ALWAYS);
+        GridPane.setHgrow(learnMobileButton, Priority.ALWAYS);
+        GridPane.setHgrow(learnRaspberryPiButton, Priority.ALWAYS);
+
+        GridPane.setVgrow(videosButton, Priority.ALWAYS);
+        GridPane.setVgrow(toolsButton, Priority.ALWAYS);
+        GridPane.setVgrow(docsButton, Priority.ALWAYS);
+        GridPane.setVgrow(tipsButton, Priority.ALWAYS);
+        GridPane.setVgrow(tutorialsButton, Priority.ALWAYS);
+        GridPane.setVgrow(booksButton, Priority.ALWAYS);
+        GridPane.setVgrow(blogsButton, Priority.ALWAYS);
+        GridPane.setVgrow(companiesButton, Priority.ALWAYS);
+        GridPane.setVgrow(learnJavaFXButton, Priority.ALWAYS);
+        GridPane.setVgrow(learnMobileButton, Priority.ALWAYS);
+        GridPane.setVgrow(learnRaspberryPiButton, Priority.ALWAYS);
+
+        videosButton.setPrefWidth(0);
+        toolsButton.setPrefWidth(0);
+        docsButton.setPrefWidth(0);
+        tipsButton.setPrefWidth(0);
+        tutorialsButton.setPrefWidth(0);
+        booksButton.setPrefWidth(0);
+        blogsButton.setPrefWidth(0);
+        companiesButton.setPrefWidth(0);
+        learnJavaFXButton.setPrefWidth(0);
+        learnMobileButton.setPrefWidth(0);
+        learnRaspberryPiButton.setPrefWidth(0);
+
+        add(videosButton, 0, 0);
+        add(toolsButton, 1, 0);
+        add(docsButton, 2, 0);
+        add(tipsButton, 3, 0);
+        add(tutorialsButton, 4, 0);
+
+        add(learnJavaFXButton, 0, 1);
+        add(learnRaspberryPiButton, 1, 1);
+        add(learnMobileButton, 2, 1);
+        add(booksButton, 3, 1);
+        add(blogsButton, 4, 1);
+
+        add(companiesButton, 0, 2);
+    }
+}
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
@@ -21,14 +21,21 @@
 import com.dlsc.jfxcentral2.mobile.home.WeekLinksView;
 import com.dlsc.jfxcentral2.utils.PagePath;
 import javafx.beans.binding.Bindings;
+import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.ReadOnlyObjectWrapper;
+import javafx.beans.property.SimpleBooleanProperty;
+import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.ToggleButton;
 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 javafx.scene.shape.Rectangle;
 
 import java.util.ArrayList;
 import java.util.Collections;
@@ -73,10 +80,12 @@ private MobileHomePage() {
         searchTextField = new MobileSearchTextField();
         searchTextField.setRight(createSearchCancelButton());
         searchTextField.setPromptText("Search for anything...");
-        searchView.searchTextProperty().bindBidirectional(searchTextField.textProperty());
         searchTextField.setOnMousePressed(event -> setContentType(ContentType.SEARCH));
+        searchTextField.setOnTouchPressed(event -> setContentType(ContentType.SEARCH));
         searchTextField.textProperty().addListener(it -> setContentType(ContentType.SEARCH));
 
+        searchView.searchTextProperty().bindBidirectional(searchTextField.textProperty());
+
         HBox.setHgrow(searchTextField, Priority.ALWAYS);
         HBox searchWrapper = new HBox(searchTextField);
         searchWrapper.getStyleClass().add("search-wrapper");
@@ -150,10 +159,51 @@ private Node createNormalView() {
         VBox normalView = new VBox(showCasePreviewView, peoplePreviewView, libraryPreviewView, booksPreviewView, videoPreviewView, blogPreviewView, tipsPreviewView, learnCategoryBox);
         normalView.getStyleClass().add("content-box");
 
-        ScrollPane ScrollPane = new ScrollPane(normalView);
-        ScrollPane.getStyleClass().add("mobile");
-        VBox.setVgrow(ScrollPane, Priority.ALWAYS);
-        return ScrollPane;
+        ScrollPane scrollPane = new ScrollPane(normalView);
+        scrollPane.getStyleClass().add("mobile");
+        VBox.setVgrow(scrollPane, Priority.ALWAYS);
+
+        Node drawerContent = createDrawerContent();
+        StackPane.setAlignment(drawerContent, Pos.BOTTOM_CENTER);
+
+        return new StackPane(scrollPane, drawerContent);
+    }
+
+    private Node createDrawerContent() {
+        ToggleButton title = new ToggleButton("Content");
+        title.setMaxWidth(Double.MAX_VALUE);
+        title.getStyleClass().add("title");
+        title.selectedProperty().bindBidirectional(showDrawerProperty());
+
+        CategoriesPane content = new CategoriesPane();
+        content.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
+        content.setAlignment(Pos.CENTER);
+        VBox.setVgrow(content, Priority.ALWAYS);
+
+        VBox drawer = new VBox(title, content);
+        drawer.getStyleClass().add("drawer");
+        drawer.setPrefHeight(300);
+        drawer.setMaxHeight(Region.USE_PREF_SIZE);
+
+        drawer.translateYProperty().bind(Bindings.createDoubleBinding(() -> isShowDrawer() ? 0d : drawer.getHeight() - title.getHeight(), showDrawer));
+
+        Rectangle clip = new Rectangle();
+        clip.widthProperty().bind(drawer.widthProperty());
+        clip.heightProperty().bind(drawer.heightProperty().add(50));
+        clip.setLayoutY(-50);
+        drawer.setClip(clip);
+
+        return drawer;
+    }
+
+    private final BooleanProperty showDrawer = new SimpleBooleanProperty(this, "showDrawer", true);
+
+    public boolean isShowDrawer() {
+        return showDrawer.get();
+    }
+
+    public BooleanProperty showDrawerProperty() {
+        return showDrawer;
     }
 
     private <T extends ModelObject> List<T> getRandomSample(List<T> list, int sampleSize) {

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/skin/MainPageSkin.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/skin/MainPageSkin.java
@@ -11,6 +11,7 @@
 import javafx.scene.Node;
 import javafx.scene.control.SkinBase;
 import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.StackPane;
 
 import java.util.Optional;
 import java.util.function.Function;
@@ -19,6 +20,7 @@ public class MainPageSkin extends SkinBase<MainPage> {
 
     private final BorderPane borderPane = new BorderPane();
     private final BottomMenuBar bottomMenuBar = new BottomMenuBar();
+    private final StackPane centerPane = new StackPane();
 
     public MainPageSkin(MainPage control) {
         super(control);
@@ -27,6 +29,9 @@ public MainPageSkin(MainPage control) {
         bottomMenuBar.managedProperty().bind(bottomMenuBar.visibleProperty());
         bottomMenuBar.setVisible(false);
 
+        centerPane.getStyleClass().add("content-pane");
+
+        borderPane.setCenter(centerPane);
         borderPane.setBottom(bottomMenuBar);
         getChildren().add(borderPane);
     }
@@ -41,7 +46,7 @@ public void onMobileResponseEvent(MobileResponseEvent event) {
         Node newView = event.mobileResponse().getView();
         invokeLifecycleMethod(newView, MobilePageBase::getViewWillAppear);
 
-        borderPane.setCenter(newView);
+        centerPane.getChildren().setAll(newView);
 
         // Old view did disappear
         invokeLifecycleMethod(oldView, MobilePageBase::getViewDidDisappear);

diff --git a/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css b/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css
@@ -535,8 +535,12 @@
     -fx-background-color: -white;
 }
 
+.mobile-home-page .mobile-search-text-field {
+    -fx-padding: 0px 10px;
+}
+
 .mobile-home-page .content-box {
-    -fx-padding: 5px 15px 10px 15px;
+    -fx-padding: 5px 15px 50px 15px;
     -fx-spacing: 30px;
 }
 
@@ -549,12 +553,44 @@
     -fx-alignment: center-left;
 }
 
+.mobile-home-page .drawer {
+    -fx-background-color: -background;
+    -fx-background-radius: 32px 32px 0px 0px;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.25), 30, 0.2, 0, 0); /* 20% alpha */;
+}
+
+.mobile-home-page .drawer > .title {
+    -fx-background-radius: 32px 32px 0px 0px;
+    -fx-background-color: -background;
+    -fx-padding: 10px;
+    -fx-font-size: 1.2em;
+    -fx-font-family: "Roboto Condensed";
+    -fx-font-weight: bold;
+}
+
+.mobile-home-page .drawer > .categories-pane {
+    -fx-font-size: 12px;
+}
+
+.mobile-home-page .drawer > .categories-pane > .button {
+    -fx-content-display: top;
+    -fx-background-color: transparent;
+    -fx-text-fill: -grey-60;
+    -fx-padding: 0 0 5px 0;
+    -fx-graphic-text-gap: 0px;
+}
+
+.mobile-home-page .drawer > .categories-pane > .button .ikonli-font-icon {
+    -fx-icon-size: 24px;
+    -fx-icon-color: -grey-60;
+}
+
 /** ----------------------------------
  * MobileSearchTextField
  */
 .mobile-search-text-field {
     -fx-background-radius: 1000px;
-    -fx-padding: 0px 10px;
+    -fx-padding: 5px 10px;
 }
 
 .mobile-search-text-field > .ikonli-font-icon {