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 index 64653dec..e21d57cb 100644 --- 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 new file mode 100644 index 00000000..c4c7a7c1 --- /dev/null +++ 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); + } +} \ 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 24fe5605..e68a1dd0 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 @@ -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 List getRandomSample(List 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 index 956e519d..376aee26 100644 --- 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 { 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 index c59bcf83..09153233 100644 --- 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 {