diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceController.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceController.java index daa63dac0e..96a482edc1 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceController.java +++ b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceController.java @@ -51,27 +51,35 @@ public TradeWizardAmountAndPriceController(ServiceProvider serviceProvider, Consumer navigationButtonsVisibleHandler, Consumer closeAndNavigateToHandler) { this.owner = owner; - tradeWizardAmountController = new TradeWizardAmountController(serviceProvider, owner, - navigationButtonsVisibleHandler, closeAndNavigateToHandler); - tradeWizardPriceController = new TradeWizardPriceController(serviceProvider, owner); + tradeWizardAmountController = new TradeWizardAmountController(serviceProvider, + owner, + navigationButtonsVisibleHandler, + closeAndNavigateToHandler); + tradeWizardPriceController = new TradeWizardPriceController(serviceProvider, + owner, + navigationButtonsVisibleHandler); model = new TradeWizardAmountAndPriceModel(); view = new TradeWizardAmountAndPriceView(model, this, tradeWizardAmountController.getView().getRoot(), tradeWizardAmountController.getView().getOverlay(), - tradeWizardPriceController.getView().getRoot()); + tradeWizardPriceController.getView().getRoot(), + tradeWizardPriceController.getView().getOverlay()); } + @Override public void onActivate() { model.setHeadline(getHeadline()); model.getIsAmountOverlayVisible().bind(tradeWizardAmountController.getIsOverlayVisible()); + model.getIsPriceOverlayVisible().bind(tradeWizardPriceController.getIsOverlayVisible()); } @Override public void onDeactivate() { model.getIsAmountOverlayVisible().unbind(); + model.getIsPriceOverlayVisible().unbind(); } public void reset() { diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceModel.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceModel.java index cac151766f..016625a3fa 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceModel.java +++ b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceModel.java @@ -36,6 +36,7 @@ public class TradeWizardAmountAndPriceModel implements Model { private Direction direction; private Market market; private final BooleanProperty isAmountOverlayVisible = new SimpleBooleanProperty(); + private final BooleanProperty isPriceOverlayVisible = new SimpleBooleanProperty(); public void reset() { isCreateOfferMode = false; @@ -44,5 +45,6 @@ public void reset() { direction = null; market = null; isAmountOverlayVisible.set(false); + isPriceOverlayVisible.set(false); } } diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceView.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceView.java index 984281af9e..6b166418f2 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceView.java +++ b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/TradeWizardAmountAndPriceView.java @@ -32,18 +32,23 @@ @Slf4j public class TradeWizardAmountAndPriceView extends View { private final Label headline, amountAtPriceSymbol; - private final VBox priceSelection, content, amountOverlay; - private Subscription isAmountOverlayVisiblePin; + private final VBox priceSelection; + private final VBox priceOverlay; + private final VBox content; + private final VBox amountOverlay; + private Subscription isAmountOverlayVisiblePin, isPriceOverlayVisiblePin; public TradeWizardAmountAndPriceView(TradeWizardAmountAndPriceModel model, TradeWizardAmountAndPriceController controller, VBox amountSelection, VBox amountOverlay, - VBox priceSelection) { + VBox priceSelection, + VBox priceOverlay) { super(new VBox(), model, controller); this.amountOverlay = amountOverlay; this.priceSelection = priceSelection; + this.priceOverlay = priceOverlay; headline = new Label(); headline.getStyleClass().add("bisq-text-headline-2"); amountAtPriceSymbol = new Label("@"); @@ -55,14 +60,22 @@ public TradeWizardAmountAndPriceView(TradeWizardAmountAndPriceModel model, content = new VBox(20, headline, amountAndPriceHBox); content.getStyleClass().add("content-box"); - StackPane layeredContent = new StackPane(content, amountOverlay); + StackPane layeredContent = new StackPane(content, amountOverlay, priceOverlay); StackPane.setMargin(amountOverlay, new Insets(-TradeWizardView.TOP_PANE_HEIGHT, 0, 0, 0)); + // For unclear reasons the priceOverlay is not centered + StackPane.setMargin(priceOverlay, new Insets(-TradeWizardView.TOP_PANE_HEIGHT, 0, 0, 70)); root.getChildren().addAll(layeredContent); root.getStyleClass().add("amount-and-price-step"); } @Override protected void onViewAttached() { + if (model.isCreateOfferMode()) { + VBox.setMargin(headline, new Insets(0, 0, 0, 0)); + } else { + VBox.setMargin(headline, new Insets(30, 0, 10, 0)); + } + headline.textProperty().set(model.getHeadline()); amountAtPriceSymbol.visibleProperty().set(model.isShowPriceSelection()); amountAtPriceSymbol.managedProperty().set(model.isShowPriceSelection()); @@ -83,10 +96,26 @@ protected void onViewAttached() { } } }); + + isPriceOverlayVisiblePin = EasyBind.subscribe(model.getIsPriceOverlayVisible(), isPriceOverlayVisible -> { + if (isPriceOverlayVisible) { + priceOverlay.setVisible(true); + priceOverlay.setOpacity(1); + Transitions.blurStrong(content, 0); + Transitions.slideInTop(priceOverlay, 450); + } else { + Transitions.removeEffect(content); + if (priceOverlay.isVisible()) { + Transitions.fadeOut(priceOverlay, Transitions.DEFAULT_DURATION / 2, + () -> priceOverlay.setVisible(false)); + } + } + }); } @Override protected void onViewDetached() { isAmountOverlayVisiblePin.unsubscribe(); + isPriceOverlayVisiblePin.unsubscribe(); } } diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/amount/TradeWizardAmountView.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/amount/TradeWizardAmountView.java index cd1c9f3eaf..d0e690183c 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/amount/TradeWizardAmountView.java +++ b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/amount/TradeWizardAmountView.java @@ -47,8 +47,7 @@ public class TradeWizardAmountView extends View navigationButtonsVisibleHandler; private final MarketPriceService marketPriceService; private final SettingsService settingsService; private Subscription priceInputPin, isPriceInvalidPin, priceSpecPin, percentageInputPin, priceSliderValuePin, percentagePin; - public TradeWizardPriceController(ServiceProvider serviceProvider, Region owner) { + public TradeWizardPriceController(ServiceProvider serviceProvider, + Region owner, + Consumer navigationButtonsVisibleHandler) { marketPriceService = serviceProvider.getBondedRolesService().getMarketPriceService(); settingsService = serviceProvider.getSettingsService(); priceInput = new PriceInput(serviceProvider.getBondedRolesService().getMarketPriceService()); this.owner = owner; + this.navigationButtonsVisibleHandler = navigationButtonsVisibleHandler; model = new TradeWizardPriceModel(); view = new TradeWizardPriceView(model, this, priceInput); } @@ -98,6 +104,10 @@ public boolean validate() { } } + public ReadOnlyBooleanProperty getIsOverlayVisible() { + return model.getIsOverlayVisible(); + } + @Override public void onActivate() { settingsService.getCookie().asBoolean(CookieKey.CREATE_OFFER_USE_FIX_PRICE, getCookieSubKey()) @@ -161,6 +171,8 @@ public void onDeactivate() { percentagePin.unsubscribe(); view.getRoot().setOnKeyPressed(null); + navigationButtonsVisibleHandler.accept(true); + model.getIsOverlayVisible().set(false); } void onPercentageFocussed(boolean focussed) { @@ -244,6 +256,7 @@ void usePercentagePrice() { } void onShowOverlay() { + navigationButtonsVisibleHandler.accept(false); model.getIsOverlayVisible().set(true); view.getRoot().setOnKeyPressed(keyEvent -> { KeyHandlerUtil.handleEnterKeyEvent(keyEvent, () -> { @@ -253,6 +266,7 @@ void onShowOverlay() { } void onCloseOverlay() { + navigationButtonsVisibleHandler.accept(true); model.getIsOverlayVisible().set(false); view.getRoot().setOnKeyPressed(null); } diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/price/TradeWizardPriceView.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/price/TradeWizardPriceView.java index 94aa05c07d..769af3de0f 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/price/TradeWizardPriceView.java +++ b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/trade_wizard/amount_and_price/price/TradeWizardPriceView.java @@ -18,7 +18,6 @@ package bisq.desktop.main.content.bisq_easy.trade_wizard.amount_and_price.price; import bisq.desktop.common.Icons; -import bisq.desktop.common.Transitions; import bisq.desktop.common.threading.UIScheduler; import bisq.desktop.common.view.View; import bisq.desktop.components.containers.Spacer; @@ -37,8 +36,8 @@ import javafx.scene.control.Label; import javafx.scene.control.Slider; import javafx.scene.layout.HBox; -import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; +import lombok.Getter; import lombok.extern.slf4j.Slf4j; import org.fxmisc.easybind.EasyBind; import org.fxmisc.easybind.Subscription; @@ -51,17 +50,20 @@ public class TradeWizardPriceView extends View UIScheduler.run(this::updateFieldsBox).after(100)); - shouldShowLearnWhyOverlayPin = EasyBind.subscribe(model.getIsOverlayVisible(), showOverlay -> UIScheduler.run(() -> { - if (showOverlay) { - overlay.setVisible(true); - overlay.setManaged(true); - Transitions.blurStrong(content, 0); - Transitions.slideInTop(overlay, 450); - } else { - overlay.setVisible(false); - overlay.setManaged(false); - Transitions.removeEffect(content); - } - }).after(100)); - percentagePrice.setOnAction(e -> controller.usePercentagePrice()); fixedPrice.setOnAction(e -> controller.useFixedPrice()); showLearnWhyButton.setOnAction(e -> controller.onShowOverlay()); - closeLearnWhyButton.setOnAction(e -> controller.onCloseOverlay()); + closeOverlayButton.setOnAction(e -> controller.onCloseOverlay()); // Needed to trigger focusOut event on amount components // We handle all parents mouse events. @@ -205,12 +190,11 @@ protected void onViewDetached() { percentageFocussedPin.unsubscribe(); useFixPricePin.unsubscribe(); - shouldShowLearnWhyOverlayPin.unsubscribe(); percentagePrice.setOnAction(null); fixedPrice.setOnAction(null); showLearnWhyButton.setOnAction(null); - closeLearnWhyButton.setOnAction(null); + closeOverlayButton.setOnAction(null); Parent node = root; while (node.getParent() != null) { @@ -247,18 +231,21 @@ private void updateFieldsBox() { } } - private VBox createAndGetLearnWhyOverlay() { - Label learnWhyTitle = new Label(Res.get("bisqEasy.price.feedback.learnWhySection.title")); - learnWhyTitle.getStyleClass().addAll("learn-why-title-label", "large-text"); + private VBox createOverlay() { + Label headlineLabel = new Label(Res.get("bisqEasy.price.feedback.learnWhySection.title")); + headlineLabel.getStyleClass().addAll("learn-why-title-label", "large-text"); Label learnWhyIntroLabel = new Label(Res.get("bisqEasy.price.feedback.learnWhySection.description.intro")); - learnWhyIntroLabel.getStyleClass().addAll("learn-why-text", "learn-why-intro-label"); + learnWhyIntroLabel.getStyleClass().addAll("learn-why-text", "learn-why-intro-label", "wrap-text"); UnorderedList learnWhyExpositionList = new UnorderedList(Res.get("bisqEasy.price.feedback.learnWhySection.description.exposition"), "learn-why-text", 7, 10, "- ", "- "); - - VBox overlay = new VBox(10, learnWhyTitle, learnWhyIntroLabel, learnWhyExpositionList, closeLearnWhyButton); - overlay.getStyleClass().addAll("trade-wizard-feedback-bg", "learn-why-overlay"); - StackPane.setAlignment(overlay, Pos.TOP_CENTER); - StackPane.setMargin(overlay, new Insets(-63, 0, 0, 0)); - return overlay; + VBox.setMargin(closeOverlayButton, new Insets(10, 0, 0, 0)); + VBox content = new VBox(40, headlineLabel, learnWhyIntroLabel, learnWhyExpositionList, closeOverlayButton); + content.setAlignment(Pos.TOP_CENTER); + content.getStyleClass().setAll("trade-wizard-feedback-bg"); + content.setPadding(new Insets(30)); + + VBox vBox = new VBox(content, Spacer.fillVBox()); + content.setMaxWidth(700); + return vBox; } } diff --git a/apps/desktop/desktop/src/main/resources/css/bisq_easy.css b/apps/desktop/desktop/src/main/resources/css/bisq_easy.css index e672b0b804..7322043e50 100644 --- a/apps/desktop/desktop/src/main/resources/css/bisq_easy.css +++ b/apps/desktop/desktop/src/main/resources/css/bisq_easy.css @@ -725,12 +725,6 @@ -fx-alignment: top-center; } -.bisq-easy-trade-wizard-price-step-pane { - -fx-pref-width: 340; - -fx-max-width: 340; - -fx-min-width: 340; -} - .amount-and-price-step .content-box { -fx-padding: 40 0 0 0; -fx-alignment: top-center; @@ -1097,13 +1091,6 @@ -fx-alignment: baseline-left; } -.bisq-easy-trade-wizard-price-step .price-content { - -fx-alignment: center; - -fx-max-width: 340; - -fx-min-width: 340; - -fx-pref-width: 340; -} - .bisq-easy-trade-wizard-price-step .selection-models, .bisq-easy-trade-wizard-amount-step .selection-models { -fx-alignment: center; @@ -1161,7 +1148,7 @@ -fx-padding: 0 0 15 0; } -.bisq-easy-trade-wizard-price-step .learn-why-overlay .learn-why-text { +.learn-why-text { -fx-fill: -fx-light-text-color; -fx-text-fill: -fx-light-text-color; -fx-font-size: 1.15em; diff --git a/i18n/src/main/resources/bisq_easy.properties b/i18n/src/main/resources/bisq_easy.properties index 0c53ecf086..180551ea33 100644 --- a/i18n/src/main/resources/bisq_easy.properties +++ b/i18n/src/main/resources/bisq_easy.properties @@ -112,7 +112,7 @@ bisqEasy.price.feedback.sentence.some=Moderate bisqEasy.price.feedback.sentence.good=Good bisqEasy.price.feedback.sentence.veryGood=Very good bisqEasy.price.feedback.learnWhySection.openButton=Why? -bisqEasy.price.feedback.learnWhySection.closeButton=Back to Trade Price +bisqEasy.price.feedback.learnWhySection.closeButton=Close bisqEasy.price.feedback.learnWhySection.title=Why should I pay a higher price to the seller? bisqEasy.price.feedback.learnWhySection.description.intro=The reason for that is that the seller has to cover extra expenses \ and compensate for the seller's service, specifically: