Skip to content

Commit

Permalink
Merge pull request #1234 from aspire2dev/aspire2dev/fix_learn_issues
Browse files Browse the repository at this point in the history 
Fix learn view issues with resizing and texts and buttons out of alignment
  • Loading branch information
@alvasw
alvasw authored Oct 2, 2023
2 parents 6da3025 + 41922ac commit 0710a16
Show file tree
Hide file tree
Showing 4 changed files with 245 additions and 153 deletions.
162 changes: 93 additions & 69 deletions desktop/src/main/java/bisq/desktop/common/utils/GridPaneUtil.java
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -13,119 +14,142 @@
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);
}

/**
* Get headline label. If no icon is passed, outputs a simple headline.
*/
public static Label getHeadline(String headline,
String headlineStyleClass,
String headlineImageId,
double graphicTextGap) {
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
* 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,
double headlineImageIdGap,
Insets headlineMargin,
String info,
String infoLabelStyleClass,
Insets infoMargin,
double infoLineSpace,
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,
headlineImageIdGap);
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);
infoLabel.setLineSpacing(infoLineSpace);
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);
}
}
111 changes: 57 additions & 54 deletions desktop/src/main/java/bisq/desktop/main/content/academy/overview/OverviewAcademyView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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.setHgap(PADDING);
root.setPadding(new Insets(0, 0, 0, 0));
root.setHgap(20);
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();

Expand Down Expand Up @@ -84,8 +79,9 @@ private void addHeaderBox() {
VBox.setVgrow(headlineLabel, Priority.ALWAYS);
VBox.setVgrow(contentLabel, Priority.ALWAYS);
VBox vBox = new VBox(20, headlineLabel, contentLabel);
GridPane.setMargin(vBox, new Insets(20, 0, 0, 0));
GridPane.setHgrow(vBox, Priority.ALWAYS);
root.add(vBox, 0, 0, 2, 1);
root.add(vBox, 0, rowIndex, 2, 1);
}

private void addSmallBox(String leftIconId,
Expand All @@ -94,52 +90,59 @@ 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(22, 20, 0, 20);
Insets infoInsets = new Insets(23, 20, 0, 20);
Insets buttonInsets = new Insets(30, 20, 30, 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,
10d,
headlineInsets,
Res.get("academy.overview." + leftTopic + ".content"),
Res.get("academy.overview.selectButton"),
leftNavigationTarget
);

VBox rightBox = getWidgetBox(
rightIconId,
"bisq-text-3",
infoInsets,
1d,
"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,
10d,
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,
1d,
"bisq-box-2",
groupInsets);
root.add(gridPane, 0, ++rowIndex, 2, 1);
}
}
Loading

0 comments on commit 0710a16

Please sign in to comment.