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 Label amountDescriptionLabel, priceCurrencyLabel, priceDescriptionLabel, volumeDescriptionLabel,
waitingForFundsLabel, marketBasedPriceLabel, percentagePriceDescription, tradeFeeDescriptionLabel,
resultLabel, tradeFeeInBtcLabel, tradeFeeInBsqLabel, xLabel;
resultLabel, tradeFeeInBtcLabel, tradeFeeInBsqLabel, xLabel, fakeXLabel;
protected Label amountBtcLabel, volumeCurrencyLabel, minAmountBtcLabel;
private ComboBox<PaymentAccount> paymentAccountsComboBox;
private ComboBox<TradeCurrency> currencyComboBox;
@ -492,6 +492,7 @@ public abstract class MutableOfferView<M extends MutableOfferViewModel> extends
xLabel.getStyleClass().add("small");
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"));
fakeXLabel.getStyleClass().add("small");
}
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"));
Label fakeXLabel = new Label();
fakeXLabel = new Label();
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
// Fixed/Percentage toggle
@ -1381,12 +1382,13 @@ public abstract class MutableOfferView<M extends MutableOfferViewModel> extends
updatePriceToggleButtons(model.getDataModel().getUseMarketBasedPrice().getValue()));
secondRowHBox = new HBox();
secondRowHBox.setSpacing(5);
secondRowHBox.setAlignment(Pos.CENTER_LEFT);
secondRowHBox.getChildren().addAll(amountInputBoxTuple.second, fakeXLabel, fixedPriceBox, priceTypeToggleButton);
GridPane.setRowIndex(secondRowHBox, ++gridRow);
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);
}

View file

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

View file

@ -129,7 +129,7 @@ public class BuyerStep4View extends TradeStepView {
gridPane.getColumnConstraints().get(1).setHgrow(Priority.SOMETIMES);
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, 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");
addCompactTopLabelTextField(gridPane, ++gridRow, miningFee, model.getTxFee());
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.setManaged(false);
withdrawAddressTextField.setVisible(false);
@ -155,7 +156,7 @@ public class BuyerStep4View extends TradeStepView {
withdrawToExternalWalletButton.setDefaultButton(false);
hBox.getChildren().addAll(useSavingsWalletButton, label, withdrawToExternalWalletButton);
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);
useSavingsWalletButton.setOnAction(e -> {