Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve new feature popup for ntp and account signing #3453

Merged
merged 1 commit into from
Oct 24, 2019
Merged

Improve new feature popup for ntp and account signing #3453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions core/src/main/resources/i18n/displayStrings.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2532,11 +2532,11 @@ popup.attention.forTradeWithId=Attention required for trade with ID {0}
popup.info.multiplePaymentAccounts.headline=Multiple payment accounts available
popup.info.multiplePaymentAccounts.msg=You have multiple payment accounts available for this offer. Please make sure you've picked the right one.

popup.news.launch.headline=Two Critical Updates
popup.news.launch.headline=Two Major Updates
popup.news.launch.accountSigning.headline=ACCOUNT SIGNING
popup.news.launch.accountSigning.description=Lift 0.01 BTC fiat trading limits by buying BTC from a signed peer.
popup.news.launch.ntp.headline=NEW TRADE PROTOCOL
popup.news.launch.ntp.description=Multisig escrows are now 2-of-2 with a new dispute resolution system.
popup.news.launch.ntp.description=New two level dispute resolution system to make Bisq more secure, scalable and censorship resistant.

popup.accountSigning.selectAccounts.headline=Select payment accounts
popup.accountSigning.selectAccounts.description=Based on the payment method and point of time all payment accounts that are connected to a dispute where a payout to the buyer occurred will be selected for you to sign.
Expand Down
31 changes: 19 additions & 12 deletions desktop/src/main/java/bisq/desktop/bisq.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -782,6 +782,14 @@ tree-table-view:focused {
-fx-padding: 27 2 0 2;
}

.close-icon {
-fx-text-fill: -bs-text-color;
}

.close-icon:hover {
-fx-text-fill: -fx-accent;
}

/*******************************************************************************
* *
* Tooltip *
Expand Down Expand Up @@ -838,6 +846,12 @@ textfield */
-fx-underline: false;
}

.hyperlink.highlight,
.hyperlink.highlight .text.hyperlink.no-underline {
-fx-text-fill: -fx-accent;
-fx-fill: -fx-accent;
}

/*******************************************************************************
* *
* Table *
Expand Down Expand Up @@ -1984,26 +1998,19 @@ textfield */
********************************************************************************************************************/

.news-version {
-fx-alignment: center;
-fx-font-size: 1.077em;
}

.news-headline {
-fx-font-size: 2.154em;
-fx-text-fill: -bs-rd-font-dark-gray;
-fx-font-family: "IBM Plex Sans Light";
-fx-alignment: center-left;
-fx-font-size: 1em;
}

.news-feature-headline {
-fx-font-size: 1.462em;
-fx-font-size: 1.077em;
-fx-text-fill: -bs-rd-font-dark-gray;
-fx-font-family: "IBM Plex Sans Light";
-fx-font-family: "IBM Plex Sans Medium";
}

.news-feature-description {
-fx-font-size: 1.231em;
-fx-font-size: 1em;
-fx-text-fill: -bs-rd-font-dark-gray;
-fx-font-family: "IBM Plex Sans Light";
}
/********************************************************************************************************************
* *
Expand Down
10 changes: 10 additions & 0 deletions desktop/src/main/java/bisq/desktop/components/HyperlinkWithIcon.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,21 @@ public HyperlinkWithIcon(String text, AwesomeIcon awesomeIcon) {
}

public HyperlinkWithIcon(String text, GlyphIcons icon) {
this(text, icon, null);
}

public HyperlinkWithIcon(String text, GlyphIcons icon, String style) {
super(text);

Text textIcon = FormBuilder.getIcon(icon);
textIcon.setOpacity(0.7);
textIcon.getStyleClass().addAll("hyperlink", "no-underline");

if (style != null) {
textIcon.getStyleClass().add(style);
getStyleClass().add(style);
}

setPadding(new Insets(0));

setIcon(textIcon);
Expand Down
51 changes: 31 additions & 20 deletions desktop/src/main/java/bisq/desktop/main/overlays/windows/NewTradeProtocolLaunchWindow.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@

package bisq.desktop.main.overlays.windows;

import bisq.desktop.components.AutoTooltipButton;
import bisq.desktop.components.AutoTooltipLabel;
import bisq.desktop.components.HyperlinkWithIcon;
import bisq.desktop.main.overlays.Overlay;
import bisq.desktop.util.FormBuilder;
import bisq.desktop.util.GUIUtil;
Expand All @@ -27,10 +27,12 @@
import bisq.core.locale.Res;
import bisq.core.user.DontShowAgainLookup;

import de.jensd.fx.fontawesome.AwesomeIcon;
import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;

import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
Expand All @@ -40,6 +42,7 @@

import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;

import lombok.extern.slf4j.Slf4j;
Expand All @@ -58,7 +61,7 @@ public class NewTradeProtocolLaunchWindow extends Overlay<NewTradeProtocolLaunch

@Override
public void show() {
width = 700;
width = 680;
hideCloseButton();
super.show();
}
Expand All @@ -71,9 +74,9 @@ public void show() {
@Override
protected void createGridPane() {
super.createGridPane();
gridPane.setVgap(20);
gridPane.setVgap(10);
gridPane.getColumnConstraints().get(0).setHalignment(HPos.CENTER);
gridPane.setPadding(new Insets(74, 64, 74, 64));
gridPane.setPadding(new Insets(84));
}

@Override
Expand All @@ -84,7 +87,8 @@ protected void addHeadLine() {
HBox.setHgrow(versionNumber, Priority.ALWAYS);
versionNumber.setMaxWidth(Double.MAX_VALUE);

Button closeButton = FormBuilder.getIconButton(MaterialDesignIcon.CLOSE);
Button closeButton = FormBuilder.getIconButton(MaterialDesignIcon.CLOSE,
"close-icon", "1.231em");
closeButton.setOnAction(event -> hide());
HBox.setHgrow(closeButton, Priority.NEVER);

Expand All @@ -94,10 +98,17 @@ protected void addHeadLine() {
GridPane.setColumnSpan(header, 2);
gridPane.getChildren().add(header);

Label headlineLabel = addLabel(gridPane, ++rowIndex, headLine);
headlineLabel.getStyleClass().add("news-headline");
GridPane.setMargin(headlineLabel, new Insets(10, 0, 0, 0));
GridPane.setColumnSpan(headlineLabel, 2);
headLineLabel = addLabel(gridPane, ++rowIndex, headLine);
headLineLabel.getStyleClass().add("popup-headline-information");
headlineIcon = new Label();
headlineIcon.getStyleClass().add("popup-icon-information");
headlineIcon.setManaged(true);
headlineIcon.setVisible(true);
FormBuilder.getIconForLabel(AwesomeIcon.INFO_SIGN, headlineIcon, "1em");

headLineLabel.setGraphic(headlineIcon);
GridPane.setHalignment(headLineLabel, HPos.LEFT);
GridPane.setColumnSpan(headLineLabel, 2);
}

@Override
Expand All @@ -116,9 +127,9 @@ protected void onShow() {

private void createContent() {
HBox content = new HBox();
content.setMinWidth(700);
content.setAlignment(Pos.CENTER);
content.setSpacing(20);
content.setMinWidth(680);
content.setAlignment(Pos.CENTER_LEFT);
content.setSpacing(40);

VBox accountSigning = getFeatureBox(Res.get("popup.news.launch.accountSigning.headline"),
Res.get("popup.news.launch.accountSigning.description"),
Expand All @@ -130,8 +141,9 @@ private void createContent() {
"image-new-trade-protocol-screenshot",
"https://docs.bisq.network/trading-rules");

content.getChildren().addAll(accountSigning, newTradeProtocol);
content.getChildren().addAll(accountSigning, new Separator(Orientation.VERTICAL), newTradeProtocol);

GridPane.setMargin(content, new Insets(40, 0, 0, 0));
GridPane.setRowIndex(content, ++rowIndex);
GridPane.setColumnSpan(content, 2);
GridPane.setHgrow(content, Priority.ALWAYS);
Expand All @@ -141,20 +153,19 @@ private void createContent() {
@NotNull
private VBox getFeatureBox(String title, String description, String imageId, String url) {
Label featureTitle = new Label(title);
featureTitle.setTextAlignment(TextAlignment.CENTER);
featureTitle.setTextAlignment(TextAlignment.LEFT);
featureTitle.getStyleClass().add("news-feature-headline");

ImageView sectionScreenshot = new ImageView();
sectionScreenshot.setId(imageId);

Label featureDescription = new Label(description);
featureDescription.setTextAlignment(TextAlignment.CENTER);
featureDescription.setTextAlignment(TextAlignment.LEFT);
featureDescription.getStyleClass().add("news-feature-description");
featureDescription.setWrapText(true);

AutoTooltipButton learnMoreButton = new AutoTooltipButton(Res.get("shared.learnMore"));
learnMoreButton.getStyleClass().add("action-button");
learnMoreButton.setOnAction(event -> {
HyperlinkWithIcon learnMore = new HyperlinkWithIcon(Res.get("shared.learnMore"), MaterialDesignIcon.LINK, "highlight");
learnMore.setOnAction(event -> {

if (DontShowAgainLookup.showAgain(GUIUtil.OPEN_WEB_PAGE_KEY)) {
hide();
Expand All @@ -167,8 +178,8 @@ private VBox getFeatureBox(String title, String description, String imageId, Str
}
});

VBox vBox = new VBox(featureTitle, sectionScreenshot, featureDescription, learnMoreButton);
vBox.setAlignment(Pos.CENTER);
VBox vBox = new VBox(featureTitle, sectionScreenshot, featureDescription, learnMore);
vBox.setAlignment(Pos.CENTER_LEFT);
vBox.setSpacing(20);
vBox.setMaxWidth(300);
return vBox;
Expand Down
7 changes: 6 additions & 1 deletion desktop/src/main/java/bisq/desktop/util/FormBuilder.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2102,8 +2102,13 @@ public static Button getIconButton(GlyphIcons icon) {
}

public static Button getIconButton(GlyphIcons icon, String styleClass) {
return getIconButton(icon, styleClass, "2em");
}

public static Button getIconButton(GlyphIcons icon, String styleClass, String iconSize) {
if (icon.fontFamily().equals(MATERIAL_DESIGN_ICONS)) {
Button textIcon = MaterialDesignIconFactory.get().createIconButton(icon, "", "2em", null, ContentDisplay.CENTER);
Button textIcon = MaterialDesignIconFactory.get().createIconButton(icon,
"", iconSize, null, ContentDisplay.CENTER);
textIcon.setId("icon-button");
textIcon.getGraphic().getStyleClass().add(styleClass);
textIcon.setPrefWidth(20);
Expand Down