Merge pull request #1477 from ripcurlx/improve-create-offer-step-one

Create offer screen improvements part 1
This commit is contained in:
Manfred Karrer 2018-03-26 12:50:43 -05:00 committed by GitHub
commit ee7c79fe6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 85 additions and 49 deletions

View file

@ -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'

View file

@ -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 {

View file

@ -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));

View file

@ -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() {

View file

@ -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");
}
}
}