Update clientWebSwitchButton to MenuButton with download options

Refactored the `clientWebSwitchButton` to be a `MenuButton` that provides download options for different platforms like Desktop, Apple Store, and Google Play. Added corresponding CSS styles to improve visual presentation and maintain consistency.
dlsc-software-consulting-gmbh · Sep 16, 2024 · dff6889 · dff6889
1 parent 9f2c50f
commit dff6889
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/components/src/main/java/com/dlsc/jfxcentral2/components/WelcomeView.java b/components/src/main/java/com/dlsc/jfxcentral2/components/WelcomeView.java
@@ -5,15 +5,22 @@
 import com.dlsc.jfxcentral2.utils.OSUtil;
 import com.dlsc.jfxcentral2.utils.PagePath;
 import com.jpro.webapi.WebAPI;
+import javafx.scene.Node;
 import javafx.scene.control.Button;
+import javafx.scene.control.CustomMenuItem;
 import javafx.scene.control.Label;
+import javafx.scene.control.MenuButton;
+import javafx.scene.control.MenuItem;
 import javafx.scene.layout.FlowPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import one.jpro.platform.routing.LinkUtil;
+import org.kordamp.ikonli.Ikon;
 import org.kordamp.ikonli.javafx.FontIcon;
+import org.kordamp.ikonli.materialdesign.MaterialDesign;
 
 import java.text.MessageFormat;
 
@@ -22,7 +29,7 @@ public class WelcomeView extends PaneBase {
     private final VBox labelBox;
     private final FlowPane flowPane;
     private final Button openJFXProjectButton;
-    private final Button clientWebSwitchButton;
+    private final Node clientWebSwitchButton;
     private final Button jfxcentralDataButton;
     private final Button jfxCentralButton;
     private double xOffset;
@@ -82,13 +89,25 @@ public WelcomeView(boolean mobile) {
         ExternalLinkUtil.setExternalLink(jfxcentralDataButton, "https://github.com/dlsc-software-consulting-gmbh/jfxcentral-data");
 
         Region graphicRegion = new Region();
-        clientWebSwitchButton = new Button("Install locally", graphicRegion);
-        if (WebAPI.isBrowser()) {
-            clientWebSwitchButton.setText("Install locally");
+        if (true) {
+            clientWebSwitchButton = new MenuButton();
+
             graphicRegion.getStyleClass().add("download-region");
-            ExternalLinkUtil.setExternalLink(clientWebSwitchButton, "https://downloads.hydraulic.dev/jfxcentral2/download.html");
+            HBox graphic = new HBox(new Label("Install locally"), graphicRegion);
+            graphic.getStyleClass().add("install-graphic");
+            ((MenuButton) clientWebSwitchButton).setGraphic(graphic);
+
+            MenuItem downloadMenuItem = createMenuItem("Desktop", "https://downloads.hydraulic.dev/jfxcentral2/download.html", MaterialDesign.MDI_DESKTOP_MAC);
+
+            MenuItem downloadMobileMenuItem = createMenuItem("Apple Store", "https://apps.apple.com/jp/app/jfxcentral/id1613971561", MaterialDesign.MDI_APPLE);
+
+            // TODO: Add Google Play link
+            MenuItem downloadGoogleMenuItem = createMenuItem("Google Play", "https://play.google.com/store/apps", MaterialDesign.MDI_GOOGLE_PLAY);
+
+            ((MenuButton) clientWebSwitchButton).getItems().addAll(downloadMenuItem, downloadMobileMenuItem, downloadGoogleMenuItem);
+
         } else {
-            clientWebSwitchButton.setText("Online Version");
+            clientWebSwitchButton = new Button("Online Version", graphicRegion);
             graphicRegion.getStyleClass().add("openjfx-region");
             ExternalLinkUtil.setExternalLink(clientWebSwitchButton, "https://www.jfx-central.com/");
         }
@@ -131,4 +150,11 @@ protected void layoutBySize() {
         content.getChildren().setAll(labelBox, flowPane);
         getChildren().setAll(content);
     }
+
+    private MenuItem createMenuItem(String text, String url, Ikon ikon) {
+        Label label = new Label(text, ikon != null ? new FontIcon(ikon) : null);
+        StackPane wrapper = new StackPane(label);
+        LinkUtil.setExternalLink(label, url);
+        return new CustomMenuItem(wrapper);
+    }
 }
diff --git a/components/src/main/resources/com/dlsc/jfxcentral2/theme.css b/components/src/main/resources/com/dlsc/jfxcentral2/theme.css
@@ -1534,6 +1534,8 @@
     -fx-shape: "M8.79164 25V22.2222H2.19442C1.63886 22.2222 1.15275 22.0139 0.736084 21.5972C0.319417 21.1806 0.111084 20.6944 0.111084 20.1389V2.08333C0.111084 1.52778 0.319417 1.04167 0.736084 0.625C1.15275 0.208333 1.63886 0 2.19442 0H14.6944V2.08333H2.19442V20.1389H25.8055V15.2778H27.8889V20.1389C27.8889 20.6944 27.6805 21.1806 27.2639 21.5972C26.8472 22.0139 26.3611 22.2222 25.8055 22.2222H19.2083V25H8.79164ZM20.9444 14.7917L14.4861 8.33333L15.9444 6.875L19.9027 10.8333V0H21.9861V10.8333L25.9444 6.875L27.4027 8.33333L20.9444 14.7917Z";
     -fx-pref-width: 28px;
     -fx-pref-height: 25px;
+    -fx-max-width: 28px;
+    -fx-max-height: 25px;
     -fx-background-color: -grey-100;
 }
 
@@ -1571,6 +1573,16 @@
     -fx-background-color: -bg;
 }
 
+.welcome-view .flow-pane .install-button.menu-button {
+    -fx-content-display: graphic-only;
+}
+
+.welcome-view .flow-pane .install-button.menu-button .install-graphic {
+    -fx-font-weight: bold;
+    -fx-alignment: center;
+    -fx-spacing: 15px;
+}
+
 .welcome-view .flow-pane .openjfx-button {
     -bg: -green;
     -fx-background-color: -bg;
@@ -1660,6 +1672,13 @@
     -fx-max-height: 60px;
 }
 
+.welcome-view:md .flow-pane .fill-button {
+    -fx-pref-width: 300px;
+    -fx-pref-height: 50px;
+    -fx-max-width: 300px;
+    -fx-max-height: 50px;
+}
+
 .welcome-view:md {
     -fx-pref-width: -md-width;
     -fx-pref-height: 1024px;