Synchronize padding between create and take offer views

This commit is contained in:
Christoph Atteneder 2018-11-21 10:44:35 +01:00
parent d8487644bd
commit 88955efae7
No known key found for this signature in database
GPG key ID: CD5DC1C529CDFD3B
3 changed files with 35 additions and 27 deletions

View file

@ -144,7 +144,7 @@ public abstract class MutableOfferView<M extends MutableOfferViewModel> extends
private FundsTextField totalToPayTextField; private FundsTextField totalToPayTextField;
private Label amountDescriptionLabel, priceCurrencyLabel, priceDescriptionLabel, volumeDescriptionLabel, private Label amountDescriptionLabel, priceCurrencyLabel, priceDescriptionLabel, volumeDescriptionLabel,
waitingForFundsLabel, marketBasedPriceLabel, percentagePriceDescription, tradeFeeDescriptionLabel, waitingForFundsLabel, marketBasedPriceLabel, percentagePriceDescription, tradeFeeDescriptionLabel,
resultLabel, tradeFeeInBtcLabel, tradeFeeInBsqLabel, xLabel; resultLabel, tradeFeeInBtcLabel, tradeFeeInBsqLabel, xLabel, fakeXLabel;
protected Label amountBtcLabel, volumeCurrencyLabel, minAmountBtcLabel; protected Label amountBtcLabel, volumeCurrencyLabel, minAmountBtcLabel;
private ComboBox<PaymentAccount> paymentAccountsComboBox; private ComboBox<PaymentAccount> paymentAccountsComboBox;
private ComboBox<TradeCurrency> currencyComboBox; private ComboBox<TradeCurrency> currencyComboBox;
@ -492,6 +492,7 @@ public abstract class MutableOfferView<M extends MutableOfferViewModel> extends
xLabel.getStyleClass().add("small"); xLabel.getStyleClass().add("small");
xIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em")); xIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em"));
fakeXIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em")); fakeXIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em"));
fakeXLabel.getStyleClass().add("small");
} }
private void maybeShowClearXchangeWarning(PaymentAccount paymentAccount) { private void maybeShowClearXchangeWarning(PaymentAccount paymentAccount) {
@ -1367,9 +1368,9 @@ public abstract class MutableOfferView<M extends MutableOfferViewModel> extends
Tuple2<Label, VBox> amountInputBoxTuple = getTradeInputBox(minAmountValueCurrencyBox, Res.get("createOffer.amountPriceBox.minAmountDescription")); Tuple2<Label, VBox> amountInputBoxTuple = getTradeInputBox(minAmountValueCurrencyBox, Res.get("createOffer.amountPriceBox.minAmountDescription"));
Label fakeXLabel = new Label(); fakeXLabel = new Label();
fakeXIcon = getIconForLabel(MaterialDesignIcon.CLOSE, "2em", fakeXLabel); fakeXIcon = getIconForLabel(MaterialDesignIcon.CLOSE, "2em", fakeXLabel);
fakeXLabel.setPadding(new Insets(24, 3, 0, 3)); fakeXLabel.getStyleClass().add("opaque-icon-character");
fakeXLabel.setVisible(false); // we just use it to get the same layout as the upper row fakeXLabel.setVisible(false); // we just use it to get the same layout as the upper row
// Fixed/Percentage toggle // Fixed/Percentage toggle
@ -1381,12 +1382,13 @@ public abstract class MutableOfferView<M extends MutableOfferViewModel> extends
updatePriceToggleButtons(model.getDataModel().getUseMarketBasedPrice().getValue())); updatePriceToggleButtons(model.getDataModel().getUseMarketBasedPrice().getValue()));
secondRowHBox = new HBox(); secondRowHBox = new HBox();
secondRowHBox.setSpacing(5); secondRowHBox.setSpacing(5);
secondRowHBox.setAlignment(Pos.CENTER_LEFT); secondRowHBox.setAlignment(Pos.CENTER_LEFT);
secondRowHBox.getChildren().addAll(amountInputBoxTuple.second, fakeXLabel, fixedPriceBox, priceTypeToggleButton); secondRowHBox.getChildren().addAll(amountInputBoxTuple.second, fakeXLabel, fixedPriceBox, priceTypeToggleButton);
GridPane.setRowIndex(secondRowHBox, ++gridRow); GridPane.setRowIndex(secondRowHBox, ++gridRow);
GridPane.setColumnIndex(secondRowHBox, 0); GridPane.setColumnIndex(secondRowHBox, 0);
GridPane.setMargin(secondRowHBox, new Insets(0, 10, 18, 0)); GridPane.setMargin(secondRowHBox, new Insets(0, 10, 10, 0));
gridPane.getChildren().add(secondRowHBox); gridPane.getChildren().add(secondRowHBox);
} }

View file

@ -129,14 +129,15 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
private VBox priceAsPercentageInputBox, amountRangeBox; private VBox priceAsPercentageInputBox, amountRangeBox;
private HBox fundingHBox, amountValueCurrencyBox, priceValueCurrencyBox, volumeValueCurrencyBox, private HBox fundingHBox, amountValueCurrencyBox, priceValueCurrencyBox, volumeValueCurrencyBox,
priceAsPercentageValueCurrencyBox, minAmountValueCurrencyBox, advancedOptionsBox, priceAsPercentageValueCurrencyBox, minAmountValueCurrencyBox, advancedOptionsBox,
takeOfferBox, buttonBox; takeOfferBox, buttonBox, firstRowHBox;
private ComboBox<PaymentAccount> paymentAccountsComboBox; private ComboBox<PaymentAccount> paymentAccountsComboBox;
private Label amountDescriptionLabel, private Label amountDescriptionLabel,
paymentMethodLabel, paymentMethodLabel,
priceCurrencyLabel, priceAsPercentageLabel, priceCurrencyLabel, priceAsPercentageLabel,
volumeCurrencyLabel, priceDescriptionLabel, volumeDescriptionLabel, volumeCurrencyLabel, priceDescriptionLabel, volumeDescriptionLabel,
waitingForFundsLabel, offerAvailabilityLabel, amountCurrency, priceAsPercentageDescription, waitingForFundsLabel, offerAvailabilityLabel, amountCurrency, priceAsPercentageDescription,
tradeFeeDescriptionLabel, resultLabel, tradeFeeInBtcLabel, tradeFeeInBsqLabel; tradeFeeDescriptionLabel, resultLabel, tradeFeeInBtcLabel, tradeFeeInBsqLabel, xLabel,
fakeXLabel;
private InputTextField amountTextField; private InputTextField amountTextField;
private TextField paymentMethodTextField, currencyTextField, priceTextField, priceAsPercentageTextField, private TextField paymentMethodTextField, currencyTextField, priceTextField, priceAsPercentageTextField,
volumeTextField, amountRangeTextField; volumeTextField, amountRangeTextField;
@ -566,6 +567,8 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
} }
private void updateOfferElementsStyle() { private void updateOfferElementsStyle() {
GridPane.setColumnSpan(firstRowHBox, 1);
final String activeInputStyle = "input-with-border"; final String activeInputStyle = "input-with-border";
final String readOnlyInputStyle = "input-with-border-readonly"; final String readOnlyInputStyle = "input-with-border-readonly";
amountValueCurrencyBox.getStyleClass().remove(activeInputStyle); amountValueCurrencyBox.getStyleClass().remove(activeInputStyle);
@ -580,8 +583,10 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
minAmountValueCurrencyBox.getStyleClass().add(readOnlyInputStyle); minAmountValueCurrencyBox.getStyleClass().add(readOnlyInputStyle);
resultLabel.getStyleClass().add("small"); resultLabel.getStyleClass().add("small");
xLabel.getStyleClass().add("small");
xIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em")); xIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em"));
fakeXIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em")); fakeXIcon.setStyle(String.format("-fx-font-family: %s; -fx-font-size: %s;", MaterialDesignIcon.CLOSE.fontFamily(), "1em"));
fakeXLabel.getStyleClass().add("small");
} }
/////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////
@ -822,9 +827,7 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
columnConstraints1.setMinWidth(200); columnConstraints1.setMinWidth(200);
ColumnConstraints columnConstraints2 = new ColumnConstraints(); ColumnConstraints columnConstraints2 = new ColumnConstraints();
columnConstraints2.setHgrow(Priority.ALWAYS); columnConstraints2.setHgrow(Priority.ALWAYS);
ColumnConstraints columnConstraints3 = new ColumnConstraints(); gridPane.getColumnConstraints().addAll(columnConstraints1, columnConstraints2);
columnConstraints3.setHgrow(Priority.NEVER);
gridPane.getColumnConstraints().addAll(columnConstraints1, columnConstraints2, columnConstraints3);
scrollPane.setContent(gridPane); scrollPane.setContent(gridPane);
} }
@ -1094,10 +1097,10 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
VBox amountBox = amountInputBoxTuple.second; VBox amountBox = amountInputBoxTuple.second;
// x // x
Label xLabel = new Label(); xLabel = new Label();
xIcon = getIconForLabel(MaterialDesignIcon.CLOSE, "2em", xLabel); xIcon = getIconForLabel(MaterialDesignIcon.CLOSE, "2em", xLabel);
xIcon.getStyleClass().add("opaque-icon"); xIcon.getStyleClass().add("opaque-icon");
xLabel.setPadding(new Insets(24, 3, 0, 3)); xLabel.getStyleClass().addAll("opaque-icon-character");
// price // price
Tuple3<HBox, TextField, Label> priceValueCurrencyBoxTuple = getNonEditableValueBox(); Tuple3<HBox, TextField, Label> priceValueCurrencyBoxTuple = getNonEditableValueBox();
@ -1114,7 +1117,7 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
// = // =
resultLabel = new AutoTooltipLabel("="); resultLabel = new AutoTooltipLabel("=");
resultLabel.getStyleClass().add("opaque-icon-character"); resultLabel.getStyleClass().addAll("opaque-icon-character");
// volume // volume
Tuple3<HBox, InfoInputTextField, Label> volumeValueCurrencyBoxTuple = getNonEditableValueBoxWithInfo(); Tuple3<HBox, InfoInputTextField, Label> volumeValueCurrencyBoxTuple = getNonEditableValueBoxWithInfo();
@ -1127,13 +1130,14 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
volumeDescriptionLabel = volumeInputBoxTuple.first; volumeDescriptionLabel = volumeInputBoxTuple.first;
VBox volumeBox = volumeInputBoxTuple.second; VBox volumeBox = volumeInputBoxTuple.second;
HBox hBox = new HBox(); firstRowHBox = new HBox();
hBox.setSpacing(5); firstRowHBox.setSpacing(5);
hBox.setAlignment(Pos.CENTER_LEFT); firstRowHBox.setAlignment(Pos.CENTER_LEFT);
hBox.getChildren().addAll(amountBox, xLabel, priceBox, resultLabel, volumeBox); firstRowHBox.getChildren().addAll(amountBox, xLabel, priceBox, resultLabel, volumeBox);
GridPane.setRowIndex(hBox, gridRow); GridPane.setColumnSpan(firstRowHBox, 2);
GridPane.setMargin(hBox, new Insets(Layout.COMPACT_FIRST_ROW_AND_GROUP_DISTANCE, 10, 0, 0)); GridPane.setRowIndex(firstRowHBox, gridRow);
gridPane.getChildren().add(hBox); GridPane.setMargin(firstRowHBox, new Insets(Layout.COMPACT_FIRST_ROW_AND_GROUP_DISTANCE, 10, 0, 0));
gridPane.getChildren().add(firstRowHBox);
} }
private void addSecondRow() { private void addSecondRow() {
@ -1162,10 +1166,10 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
amountRangeBox = amountInputBoxTuple.second; amountRangeBox = amountInputBoxTuple.second;
amountRangeBox.setVisible(false); amountRangeBox.setVisible(false);
Label fakeXLabel = new Label(); fakeXLabel = new Label();
fakeXIcon = getIconForLabel(MaterialDesignIcon.CLOSE, "2em", fakeXLabel); fakeXIcon = getIconForLabel(MaterialDesignIcon.CLOSE, "2em", fakeXLabel);
fakeXLabel.setPadding(new Insets(14, 3, 0, 3));
fakeXLabel.setVisible(false); // we just use it to get the same layout as the upper row fakeXLabel.setVisible(false); // we just use it to get the same layout as the upper row
fakeXLabel.getStyleClass().add("opaque-icon-character");
HBox hBox = new HBox(); HBox hBox = new HBox();
hBox.setSpacing(5); hBox.setSpacing(5);
@ -1173,7 +1177,7 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
hBox.getChildren().addAll(amountRangeBox, fakeXLabel, priceAsPercentageInputBox); hBox.getChildren().addAll(amountRangeBox, fakeXLabel, priceAsPercentageInputBox);
GridPane.setRowIndex(hBox, ++gridRow); GridPane.setRowIndex(hBox, ++gridRow);
GridPane.setMargin(hBox, new Insets(0, 10, 18, 0)); GridPane.setMargin(hBox, new Insets(0, 10, 10, 0));
gridPane.getChildren().add(hBox); gridPane.getChildren().add(hBox);
} }
@ -1252,10 +1256,11 @@ public class TakeOfferView extends ActivatableViewAndModel<AnchorPane, TakeOffer
private Tuple2<Label, VBox> getTradeInputBox(HBox amountValueBox, String promptText) { private Tuple2<Label, VBox> getTradeInputBox(HBox amountValueBox, String promptText) {
Label descriptionLabel = new AutoTooltipLabel(promptText); Label descriptionLabel = new AutoTooltipLabel(promptText);
descriptionLabel.setId("input-description-label"); descriptionLabel.setId("input-description-label");
descriptionLabel.setPrefWidth(190); descriptionLabel.setPrefWidth(170);
VBox box = new VBox(); VBox box = new VBox();
box.setSpacing(4); box.setPadding(new Insets(10, 0, 0, 0));
box.setSpacing(2);
box.getChildren().addAll(descriptionLabel, amountValueBox); box.getChildren().addAll(descriptionLabel, amountValueBox);
return new Tuple2<>(descriptionLabel, box); return new Tuple2<>(descriptionLabel, box);
} }

View file

@ -129,7 +129,7 @@ public class BuyerStep4View extends TradeStepView {
gridPane.getColumnConstraints().get(1).setHgrow(Priority.SOMETIMES); gridPane.getColumnConstraints().get(1).setHgrow(Priority.SOMETIMES);
addTitledGroupBg(gridPane, gridRow, 5, Res.get("portfolio.pending.step5_buyer.groupTitle"), 0); addTitledGroupBg(gridPane, gridRow, 5, Res.get("portfolio.pending.step5_buyer.groupTitle"), 0);
addCompactTopLabelTextField(gridPane, gridRow, getBtcTradeAmountLabel(), model.getTradeVolume(), Layout.FIRST_ROW_DISTANCE); addCompactTopLabelTextField(gridPane, gridRow, getBtcTradeAmountLabel(), model.getTradeVolume(), Layout.TWICE_FIRST_ROW_DISTANCE);
addCompactTopLabelTextField(gridPane, ++gridRow, getFiatTradeAmountLabel(), model.getFiatVolume()); addCompactTopLabelTextField(gridPane, ++gridRow, getFiatTradeAmountLabel(), model.getFiatVolume());
addCompactTopLabelTextField(gridPane, ++gridRow, Res.get("portfolio.pending.step5_buyer.refunded"), model.getSecurityDeposit()); addCompactTopLabelTextField(gridPane, ++gridRow, Res.get("portfolio.pending.step5_buyer.refunded"), model.getSecurityDeposit());
@ -139,7 +139,8 @@ public class BuyerStep4View extends TradeStepView {
Res.get("portfolio.pending.step5_buyer.takersMiningFee"); Res.get("portfolio.pending.step5_buyer.takersMiningFee");
addCompactTopLabelTextField(gridPane, ++gridRow, miningFee, model.getTxFee()); addCompactTopLabelTextField(gridPane, ++gridRow, miningFee, model.getTxFee());
withdrawTitledGroupBg = addTitledGroupBg(gridPane, ++gridRow, 1, Res.get("portfolio.pending.step5_buyer.withdrawBTC"), Layout.COMPACT_GROUP_DISTANCE); withdrawTitledGroupBg = addTitledGroupBg(gridPane, ++gridRow, 1, Res.get("portfolio.pending.step5_buyer.withdrawBTC"), Layout.COMPACT_GROUP_DISTANCE);
addCompactTopLabelTextField(gridPane, gridRow, Res.get("portfolio.pending.step5_buyer.amount"), model.getPayoutAmount(), Layout.COMPACT_FIRST_ROW_AND_GROUP_DISTANCE); withdrawTitledGroupBg.getStyleClass().add("last");
addCompactTopLabelTextField(gridPane, gridRow, Res.get("portfolio.pending.step5_buyer.amount"), model.getPayoutAmount(), Layout.FIRST_ROW_AND_GROUP_DISTANCE);
withdrawAddressTextField = addInputTextField(gridPane, ++gridRow, Res.get("portfolio.pending.step5_buyer.withdrawToAddress")); withdrawAddressTextField = addInputTextField(gridPane, ++gridRow, Res.get("portfolio.pending.step5_buyer.withdrawToAddress"));
withdrawAddressTextField.setManaged(false); withdrawAddressTextField.setManaged(false);
withdrawAddressTextField.setVisible(false); withdrawAddressTextField.setVisible(false);
@ -155,7 +156,7 @@ public class BuyerStep4View extends TradeStepView {
withdrawToExternalWalletButton.setDefaultButton(false); withdrawToExternalWalletButton.setDefaultButton(false);
hBox.getChildren().addAll(useSavingsWalletButton, label, withdrawToExternalWalletButton); hBox.getChildren().addAll(useSavingsWalletButton, label, withdrawToExternalWalletButton);
GridPane.setRowIndex(hBox, ++gridRow); GridPane.setRowIndex(hBox, ++gridRow);
GridPane.setMargin(hBox, new Insets(15, 10, 0, 0)); GridPane.setMargin(hBox, new Insets(5, 10, 0, 0));
gridPane.getChildren().add(hBox); gridPane.getChildren().add(hBox);
useSavingsWalletButton.setOnAction(e -> { useSavingsWalletButton.setOnAction(e -> {