mirror of
https://github.com/bisq-network/bisq.git
synced 2025-02-24 23:18:17 +01:00
Merge pull request #1477 from ripcurlx/improve-create-offer-step-one
Create offer screen improvements part 1
This commit is contained in:
commit
ee7c79fe6a
5 changed files with 85 additions and 49 deletions
|
@ -30,6 +30,7 @@ repositories {
|
|||
jcenter()
|
||||
maven { url 'https://jitpack.io' }
|
||||
maven { url 'https://raw.githubusercontent.com/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'
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -23,7 +23,6 @@ import bisq.desktop.common.view.FxmlView;
|
|||
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.Label;
|
|||
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 javafx.geometry.VPos;
|
|||
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 org.jetbrains.annotations.NotNull;
|
|||
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 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
|
||||
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 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
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,6 +1079,7 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
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);
|
||||
|
@ -1086,32 +1087,21 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
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 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
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 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
|
||||
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 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
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 @@ public class CreateOfferView extends ActivatableViewAndModel<AnchorPane, CreateO
|
|||
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));
|
||||
|
|
|
@ -715,10 +715,14 @@ public class BSFormatter {
|
|||
}
|
||||
|
||||
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() {
|
||||
|
|
|
@ -47,6 +47,7 @@ import javafx.scene.Node;
|
|||
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.HBox;
|
|||
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 java.util.concurrent.CopyOnWriteArraySet;
|
|||
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 class FormBuilder {
|
|||
.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");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue