Fix learn view issues with resizing and texts and buttons out of alignment

desktop/src/main/java/bisq/desktop/common/utils/GridPaneUtil.java

@@ -1,5 +1,6 @@
 package bisq.desktop.common.utils;
 
+import bisq.common.util.StringUtils;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.control.Button;
@@ -13,119 +14,140 @@
 import javafx.scene.text.TextFlow;
 import lombok.extern.slf4j.Slf4j;
 
+/**
+ * SLF4J implementation using Lombok.
+ */
 @Slf4j
-
 public class GridPaneUtil {
-    public static void setColumnConstraints50percent(GridPane pane) {
-        setGridPaneTwoColumnsConstraints(pane, 50, 50);
+    /**
+     * Set the grid pane with two column constraints.
+     */
+    public static void setGridPaneTwoColumnsConstraints(GridPane pane) {
+        setGridPaneMultiColumnsConstraints(pane, 2);
     }
 
     /**
-     * Set the grid pane with two column constraints
+     * Set the grid pane with two column constraints.
      */
-    public static void setGridPaneTwoColumnsConstraints(GridPane pane, int percentageCol1, int percentageCol2) {
-        ColumnConstraints col1 = new ColumnConstraints();
-        col1.setPercentWidth(percentageCol1);
-        ColumnConstraints col2 = new ColumnConstraints();
-        col2.setPercentWidth(percentageCol2);
-        pane.getColumnConstraints().addAll(col1, col2);
+    public static void setGridPaneMultiColumnsConstraints(GridPane pane, int numColumns) {
+        for (int i = 0; i < numColumns; i++) {
+            ColumnConstraints col = new ColumnConstraints();
+            col.setPercentWidth(100d / numColumns);
+            pane.getColumnConstraints().add(col);
+        }
     }
 
     /**
-     * Get a standard 50/50 two column grid pane with the layout specified
+     * Get a custom two column grid pane with the layout and column widths specified.
      */
-    public static GridPane getStandardTwoColumnsGridPane(int hGap, int vGap, Insets gridPadding) {
-        return getTwoColumnsGridPane(hGap, vGap, gridPadding, 50, 50);
+    public static GridPane getTwoColumnsGridPane(int horizontalGap,
+                                                 int verticalGap,
+                                                 Insets gridPadding) {
+        GridPane gridPane = getGridPane(horizontalGap, verticalGap, gridPadding);
+        setGridPaneTwoColumnsConstraints(gridPane);
+        return gridPane;
     }
 
     /**
-     * Get a custom two column grid pane with the layout and column widths specified
+     * Get a GridPane with the horizontal and vertical gaps configured and paddings.
      */
-    public static GridPane getTwoColumnsGridPane(int hGap, int vGap, Insets gridPadding, int col1PercentWidth, int col2PercentWidth) {
+    public static GridPane getGridPane(int horizontalGap, int verticalGap, Insets gridPadding) {
         GridPane gridPane = new GridPane();
-        gridPane.setHgap(hGap);
-        gridPane.setVgap(vGap);
+        gridPane.setHgap(horizontalGap);
+        gridPane.setVgap(verticalGap);
         gridPane.setPadding(gridPadding);
-        if(col1PercentWidth + col2PercentWidth == 100) {
-            setGridPaneTwoColumnsConstraints(gridPane, col1PercentWidth, col2PercentWidth);
-        }
         return gridPane;
     }
 
     /**
-     *  Get icon and text as a label. See example at Dashboard, multiple trade protocols box
+     *  Get icon and text as a label. See example at Dashboard, multiple trade protocols box.
      */
     public static HBox getIconAndText(String labelStyleClass, String text, String imageId) {
         Label label = new Label(text);
         label.getStyleClass().add(labelStyleClass);
         label.setWrapText(true);
         ImageView bulletPoint = ImageUtil.getImageViewById(imageId);
         HBox.setMargin(bulletPoint, new Insets(-3, 0, 0, 4));
-        HBox hBox = new HBox(15, bulletPoint, label);
-        hBox.setAlignment(Pos.CENTER_LEFT);
-        return hBox;
+        HBox horizontalBox = new HBox(15, bulletPoint, label);
+        horizontalBox.setAlignment(Pos.CENTER_LEFT);
+        return horizontalBox;
     }
 
     /**
-     * Column box using the standard style. See example at Dashboard, multiple trade protocols box
+     *  Get info as a Text wrapped on a TextFlow. This allows for correct wrapping of the text.
      */
-    public static void fillColumnStandardStyle(GridPane gridPane,
-                                          int columnIndex,
-                                          Button button,
-                                          String headline,
-                                          String headlineImageId,
-                                          String info) {
-        String groupPaneStyleClass = "bisq-box-1";
-        String headlineLabelStyleClass = "bisq-text-headline-2";
-        String infoLabelStyleClass = "bisq-text-3";
-        String buttonStyleClass = "large-button";
-        fillColumn(gridPane,
-                columnIndex,
-                button,
-                buttonStyleClass,
-                headline,
-                headlineLabelStyleClass,
-                headlineImageId,
-                info,
-                infoLabelStyleClass,
-                groupPaneStyleClass);
+    public static TextFlow getInfoLabel(String info, String infoLabelStyleClass) {
+        Text infoLabelText = new Text(info);
+        infoLabelText.getStyleClass().add(infoLabelStyleClass);
+        return new TextFlow(infoLabelText);
     }
 
     /**
-     * Column box using a custom style. See example at Bisq Easy, best for beginners section
+     *  Get headline label. If no icon is passed, outputs a simple headline.
+     */
+    public static Label getHeadline(String headline,
+                                    String headlineStyleClass,
+                                    String headlineImageId,
+                                    double graphicTextGap) {
+        if (graphicTextGap <= 0d) {
+            throw new IllegalArgumentException("When an image is passed, the graphicsTextGraph "
+                    + "must be greater than 0");
+        }
+        Label headlineLabel;
+        if (StringUtils.isNotEmpty(headlineImageId)) {
+            headlineLabel = new Label(headline, ImageUtil.getImageViewById(headlineImageId));
+            headlineLabel.setGraphicTextGap(graphicTextGap);
+        } else {
+            headlineLabel = new Label(headline);
+        }
+        headlineLabel.getStyleClass().add(headlineStyleClass);
+        headlineLabel.setWrapText(true);
+        return headlineLabel;
+    }
+
+    /**
+     * Column box using a custom style. See example at Bisq Easy, best for beginners section.
      */
     public static void fillColumn(GridPane gridPane,
-                                     int columnIndex,
-                                     Button button,
-                                     String buttonStyleClass,
-                                     String headline,
-                                     String headlineStyleClass,
-                                     String headlineImageId,
-                                     String info,
-                                     String infoLabelStyleClass,
-                                     String groupPaneStyleClass) {
+                                  int columnIndex,
+                                  Button button,
+                                  String buttonStyleClass,
+                                  Insets buttonMargin,
+                                  String headline,
+                                  String headlineStyleClass,
+                                  String headlineImageId,
+                                  Insets headlineMargin,
+                                  String info,
+                                  String infoLabelStyleClass,
+                                  Insets infoMargin,
+                                  String groupPaneStyleClass,
+                                  Insets groupPadding) {
+
+        int gridPaneRows = 3;
+
+        int rowCount = gridPane.getRowCount();
+        //Reposition to previous count if this is a "right side" of a column
+        if (columnIndex == 1) {
+            rowCount = rowCount - gridPaneRows;
+        }
 
         Pane group = new Pane();
         group.getStyleClass().add(groupPaneStyleClass);
-        GridPane.setMargin(group, new Insets(-36, -48, -44, -48));
+        group.setPadding(groupPadding);
 
-        gridPane.add(group, columnIndex, 0, 1, 3);
+        gridPane.add(group, columnIndex, rowCount, 1, gridPaneRows);
 
-        Label headlineLabel = new Label(headline, ImageUtil.getImageViewById(headlineImageId));
-        headlineLabel.setGraphicTextGap(16.0);
-        headlineLabel.getStyleClass().add(headlineStyleClass);
-        headlineLabel.setWrapText(true);
-        GridPane.setMargin(headlineLabel, new Insets(0, 0, 10, 0));
-        gridPane.add(headlineLabel, columnIndex, 0);
+        Label headlineLabel = getHeadline(headline, headlineStyleClass, headlineImageId, 16.0);
+        GridPane.setMargin(headlineLabel, headlineMargin);
+        gridPane.add(headlineLabel, columnIndex, rowCount);
 
-        Text infoLabelText = new Text(info);
-        infoLabelText.getStyleClass().add(infoLabelStyleClass);
-        TextFlow infoLabel = new TextFlow(infoLabelText);
-        gridPane.add(infoLabel, columnIndex, 1);
+        TextFlow infoLabel = getInfoLabel(info, infoLabelStyleClass);
+        GridPane.setMargin(infoLabel, infoMargin);
+        gridPane.add(infoLabel, columnIndex, rowCount + 1);
 
         button.getStyleClass().add(buttonStyleClass);
         button.setMaxWidth(Double.MAX_VALUE);
-        GridPane.setMargin(button, new Insets(20, 0, 0, 0));
-        gridPane.add(button, columnIndex, 2);
+        GridPane.setMargin(button, buttonMargin);
+        gridPane.add(button, columnIndex, rowCount + 2);
     }
 }

desktop/src/main/java/bisq/desktop/main/content/academy/overview/OverviewAcademyView.java

@@ -17,15 +17,14 @@
 
 package bisq.desktop.main.content.academy.overview;
 
-import bisq.desktop.common.utils.ImageUtil;
+import bisq.desktop.common.utils.GridPaneUtil;
 import bisq.desktop.common.view.NavigationTarget;
 import bisq.desktop.common.view.View;
 import bisq.i18n.Res;
 import javafx.geometry.Insets;
 import javafx.scene.Cursor;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
-import javafx.scene.layout.ColumnConstraints;
 import javafx.scene.layout.GridPane;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
@@ -34,21 +33,17 @@
 @Slf4j
 public class OverviewAcademyView extends View<GridPane, OverviewAcademyModel, OverviewAcademyController> {
     private static final int PADDING = 20;
-    private int rowIndex;
+    private int rowIndex = 0;
 
     public OverviewAcademyView(OverviewAcademyModel model, OverviewAcademyController controller) {
         super(new GridPane(), model, controller);
 
-        root.setPadding(new Insets(20, 0, 0, 0));
+        root.setPadding(new Insets(0, 0, 0, 0));
         root.setHgap(PADDING);
         root.setVgap(PADDING);
         root.setCursor(Cursor.HAND);
 
-        ColumnConstraints col1 = new ColumnConstraints();
-        col1.setPercentWidth(50);
-        ColumnConstraints col2 = new ColumnConstraints();
-        col2.setPercentWidth(50);
-        root.getColumnConstraints().addAll(col1, col2);
+        GridPaneUtil.setGridPaneTwoColumnsConstraints(root);
 
         addHeaderBox();
 
@@ -85,7 +80,7 @@ private void addHeaderBox() {
         VBox.setVgrow(contentLabel, Priority.ALWAYS);
         VBox vBox = new VBox(20, headlineLabel, contentLabel);
         GridPane.setHgrow(vBox, Priority.ALWAYS);
-        root.add(vBox, 0, 0, 2, 1);
+        root.add(vBox, 0, rowIndex, 2, 1);
     }
 
     private void addSmallBox(String leftIconId,
@@ -94,52 +89,55 @@ private void addSmallBox(String leftIconId,
                              String rightTopic,
                              NavigationTarget leftNavigationTarget,
                              NavigationTarget rightNavigationTarget) {
-        VBox leftBox = getWidgetBox(
-                leftIconId,
+
+        Insets gridPaneInsets = new Insets(0, 0, 0, 0);
+        GridPane gridPane = GridPaneUtil.getGridPane(20, 0, gridPaneInsets);
+        GridPaneUtil.setGridPaneTwoColumnsConstraints(gridPane);
+
+        Insets groupInsets = new Insets(20, 20, 20, 20);
+        Insets headlineInsets = new Insets(20, 20, 0, 20);
+        Insets infoInsets = new Insets(20, 20, 0, 20);
+        Insets buttonInsets = new Insets(20, 20, 20, 20);
+
+        Button leftBoxButton = new Button(Res.get("academy.overview.selectButton"));
+        leftBoxButton.getStyleClass().addAll("medium-large-button",
+                "outlined-button",
+                "grey-outlined-button");
+        leftBoxButton.setOnAction(e -> controller.onSelect(leftNavigationTarget));
+        GridPaneUtil.fillColumn(gridPane,
+                0,
+                leftBoxButton,
+                "",
+                buttonInsets,
                 Res.get("academy.overview." + leftTopic),
+                "bisq-text-headline-2",
+                leftIconId,
+                headlineInsets,
                 Res.get("academy.overview." + leftTopic + ".content"),
-                Res.get("academy.overview.selectButton"),
-                leftNavigationTarget
-        );
-
-        VBox rightBox = getWidgetBox(
-                rightIconId,
+                "bisq-text-3",
+                infoInsets,
+                "bisq-box-2",
+                groupInsets);
+
+        Button rightBoxButton = new Button(Res.get("academy.overview.selectButton"));
+        rightBoxButton.getStyleClass().addAll("medium-large-button",
+                "outlined-button",
+                "grey-outlined-button");
+        rightBoxButton.setOnAction(e -> controller.onSelect(rightNavigationTarget));
+        GridPaneUtil.fillColumn(gridPane,
+                1,
+                rightBoxButton,
+                "",
+                buttonInsets,
                 Res.get("academy.overview." + rightTopic),
+                "bisq-text-headline-2",
+                rightIconId,
+                headlineInsets,
                 Res.get("academy.overview." + rightTopic + ".content"),
-                Res.get("academy.overview.selectButton"),
-                rightNavigationTarget
-        );
-        GridPane.setHgrow(leftBox, Priority.ALWAYS);
-        GridPane.setHgrow(rightBox, Priority.ALWAYS);
-        root.add(leftBox, 0, ++rowIndex, 1, 1);
-        root.add(rightBox, 1, rowIndex, 1, 1);
-    }
-
-    private VBox getWidgetBox(String iconId, String headline, String content, String buttonLabel, NavigationTarget navigationTarget) {
-        Label headlineLabel = new Label(headline);
-        headlineLabel.setWrapText(true);
-        headlineLabel.getStyleClass().add("bisq-text-headline-2");
-        headlineLabel.setGraphic(ImageUtil.getImageViewById(iconId));
-        headlineLabel.setGraphicTextGap(15);
-        headlineLabel.setMinHeight(35);
-
-        Label contentLabel = new Label(content);
-        contentLabel.setWrapText(true);
-        contentLabel.getStyleClass().add("bisq-text-3");
-
-        Button button = new Button(buttonLabel);
-        button.setMaxWidth(Double.MAX_VALUE);
-        // button.getStyleClass().addAll("medium-large-button", "outlined-button", "grey-outlined-button");
-        button.getStyleClass().addAll("medium-large-button", "outlined-button", "grey-outlined-button");
-        button.setOnAction(e -> controller.onSelect(navigationTarget));
-
-        VBox.setVgrow(headlineLabel, Priority.ALWAYS);
-        VBox.setVgrow(contentLabel, Priority.ALWAYS);
-        VBox.setMargin(button, new Insets(10, 0, 10, 0));
-        VBox vBox = new VBox(20, headlineLabel, contentLabel, button);
-        vBox.setOnMouseClicked(e -> controller.onSelect(navigationTarget));
-        vBox.getStyleClass().add("bisq-box-2");
-        vBox.setPadding(new Insets(PADDING));
-        return vBox;
+                "bisq-text-3",
+                infoInsets,
+                "bisq-box-2",
+                groupInsets);
+        root.add(gridPane, 0, ++rowIndex, 2, 1);
     }
 }