Improve UI

This commit is contained in:
Manfred Karrer 2016-04-17 17:43:37 +02:00
parent be05a52e40
commit 822f64b13b
7 changed files with 49 additions and 32 deletions

View file

@ -52,8 +52,8 @@ public class BlockChainForm extends PaymentMethodForm {
private ComboBox<TradeCurrency> currencyComboBox; private ComboBox<TradeCurrency> currencyComboBox;
private Label addressLabel; private Label addressLabel;
public static int addFormForBuyer(GridPane gridPane, int gridRow, PaymentAccountContractData paymentAccountContractData) { public static int addFormForBuyer(GridPane gridPane, int gridRow, PaymentAccountContractData paymentAccountContractData, String labelTitle) {
addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, "Cryptocurrency address:", ((CryptoCurrencyAccountContractData) paymentAccountContractData).getAddress()); addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, labelTitle, ((CryptoCurrencyAccountContractData) paymentAccountContractData).getAddress());
if (((CryptoCurrencyAccountContractData) paymentAccountContractData).getPaymentId() != null) if (((CryptoCurrencyAccountContractData) paymentAccountContractData).getPaymentId() != null)
addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, "Payment ID:", ((CryptoCurrencyAccountContractData) paymentAccountContractData).getPaymentId()); addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, "Payment ID:", ((CryptoCurrencyAccountContractData) paymentAccountContractData).getPaymentId());

View file

@ -70,7 +70,7 @@ class CreateOfferDataModel extends ActivatableDataModel {
private final KeyRing keyRing; private final KeyRing keyRing;
private final P2PService p2PService; private final P2PService p2PService;
private final PriceFeed priceFeed; private final PriceFeed priceFeed;
private final String shortOfferId; final String shortOfferId;
private Navigation navigation; private Navigation navigation;
private final BlockchainService blockchainService; private final BlockchainService blockchainService;
private final BSFormatter formatter; private final BSFormatter formatter;

View file

@ -138,7 +138,7 @@ class CreateOfferViewModel extends ActivatableWithDataModel<CreateOfferDataModel
this.navigation = navigation; this.navigation = navigation;
this.formatter = formatter; this.formatter = formatter;
paymentLabel = BSResources.get("createOffer.fundsBox.paymentLabel", dataModel.getOfferId()); paymentLabel = BSResources.get("createOffer.fundsBox.paymentLabel", dataModel.shortOfferId);
if (dataModel.getAddressEntry() != null) { if (dataModel.getAddressEntry() != null) {
addressAsString = dataModel.getAddressEntry().getAddressString(); addressAsString = dataModel.getAddressEntry().getAddressString();
@ -441,6 +441,8 @@ class CreateOfferViewModel extends ActivatableWithDataModel<CreateOfferDataModel
public void onPaymentAccountSelected(PaymentAccount paymentAccount) { public void onPaymentAccountSelected(PaymentAccount paymentAccount) {
btcValidator.setMaxTradeLimitInBitcoin(paymentAccount.getPaymentMethod().getMaxTradeLimit()); btcValidator.setMaxTradeLimitInBitcoin(paymentAccount.getPaymentMethod().getMaxTradeLimit());
dataModel.onPaymentAccountSelected(paymentAccount); dataModel.onPaymentAccountSelected(paymentAccount);
if (amount.get() != null)
amountValidationResult.set(isBtcInputValid(amount.get()));
} }
public void onCurrencySelected(TradeCurrency tradeCurrency) { public void onCurrencySelected(TradeCurrency tradeCurrency) {
@ -491,15 +493,13 @@ class CreateOfferViewModel extends ActivatableWithDataModel<CreateOfferDataModel
calculateVolume(); calculateVolume();
// handle minAmount/amount relationship // handle minAmount/amount relationship
if (!dataModel.isMinAmountLessOrEqualAmount()) { if (!dataModel.isMinAmountLessOrEqualAmount())
minAmount.set(amount.get()); minAmount.set(amount.get());
/*amountValidationResult.set(new InputValidator.ValidationResult(false, else
BSResources.get("createOffer.validation.amountSmallerThanMinAmount")));*/
} else {
amountValidationResult.set(result); amountValidationResult.set(result);
if (minAmount.get() != null)
minAmountValidationResult.set(isBtcInputValid(minAmount.get())); if (minAmount.get() != null)
} minAmountValidationResult.set(isBtcInputValid(minAmount.get()));
} }
} }
} }

View file

@ -88,7 +88,7 @@ public class OfferDetailsWindow extends Overlay<OfferDetailsWindow> {
this.tradePrice = tradePrice; this.tradePrice = tradePrice;
rowIndex = -1; rowIndex = -1;
width = 900; width = 950;
createGridPane(); createGridPane();
addContent(); addContent();
display(); display();
@ -97,7 +97,7 @@ public class OfferDetailsWindow extends Overlay<OfferDetailsWindow> {
public void show(Offer offer) { public void show(Offer offer) {
this.offer = offer; this.offer = offer;
rowIndex = -1; rowIndex = -1;
width = 900; width = 950;
createGridPane(); createGridPane();
addContent(); addContent();
display(); display();
@ -172,7 +172,11 @@ public class OfferDetailsWindow extends Overlay<OfferDetailsWindow> {
} else { } else {
addLabelTextField(gridPane, ++rowIndex, "Bitcoin amount" + btcDirectionInfo, formatter.formatCoinWithCode(offer.getAmount())); addLabelTextField(gridPane, ++rowIndex, "Bitcoin amount" + btcDirectionInfo, formatter.formatCoinWithCode(offer.getAmount()));
addLabelTextField(gridPane, ++rowIndex, "Min. bitcoin amount:", formatter.formatCoinWithCode(offer.getMinAmount())); addLabelTextField(gridPane, ++rowIndex, "Min. bitcoin amount:", formatter.formatCoinWithCode(offer.getMinAmount()));
addLabelTextField(gridPane, ++rowIndex, CurrencyUtil.getNameByCode(offer.getCurrencyCode()) + " amount" + fiatDirectionInfo, formatter.formatFiatWithCode(offer.getVolumeByAmount(offer.getAmount()))); String amount = formatter.formatFiatWithCode(offer.getOfferVolume());
String minVolume = "";
if (!offer.getAmount().equals(offer.getMinAmount()))
minVolume = " (min. " + formatter.formatFiatWithCode(offer.getMinOfferVolume()) + ")";
addLabelTextField(gridPane, ++rowIndex, CurrencyUtil.getNameByCode(offer.getCurrencyCode()) + " amount" + fiatDirectionInfo, amount + minVolume);
} }
if (takeOfferHandlerOptional.isPresent()) { if (takeOfferHandlerOptional.isPresent()) {
@ -181,7 +185,7 @@ public class OfferDetailsWindow extends Overlay<OfferDetailsWindow> {
Fiat price = offer.getPrice(); Fiat price = offer.getPrice();
if (offer.getUseMarketBasedPrice()) { if (offer.getUseMarketBasedPrice()) {
addLabelTextField(gridPane, ++rowIndex, "Price:", formatter.formatPriceWithCode(price) + addLabelTextField(gridPane, ++rowIndex, "Price:", formatter.formatPriceWithCode(price) +
" (" + formatter.formatToPercentWithSymbol(offer.getMarketPriceMargin()) + ")"); " (distance from market price: " + formatter.formatToPercentWithSymbol(offer.getMarketPriceMargin()) + ")");
} else { } else {
addLabelTextField(gridPane, ++rowIndex, "Price:", formatter.formatPriceWithCode(price)); addLabelTextField(gridPane, ++rowIndex, "Price:", formatter.formatPriceWithCode(price));
} }

View file

@ -49,7 +49,7 @@ public class QRCodeWindow extends Overlay<QRCodeWindow> {
GridPane.setHalignment(qrCodeImageView, HPos.CENTER); GridPane.setHalignment(qrCodeImageView, HPos.CENTER);
gridPane.getChildren().add(qrCodeImageView); gridPane.getChildren().add(qrCodeImageView);
Label infoLabel = new Label("Payment request:\n" + bitcoinURI); Label infoLabel = new Label("Payment request:\n" + bitcoinURI.replace("%20", " ").replace("?", "\n?").replace("&", "\n&"));
infoLabel.setMouseTransparent(true); infoLabel.setMouseTransparent(true);
infoLabel.setWrapText(true); infoLabel.setWrapText(true);
infoLabel.setId("popup-qr-code-info"); infoLabel.setId("popup-qr-code-info");

View file

@ -162,7 +162,8 @@ public class BuyerStep2View extends TradeStepView {
gridRow = AliPayForm.addFormForBuyer(gridPane, gridRow, paymentAccountContractData); gridRow = AliPayForm.addFormForBuyer(gridPane, gridRow, paymentAccountContractData);
break; break;
case PaymentMethod.BLOCK_CHAINS_ID: case PaymentMethod.BLOCK_CHAINS_ID:
gridRow = BlockChainForm.addFormForBuyer(gridPane, gridRow, paymentAccountContractData); String labelTitle = "Sellers " + CurrencyUtil.getNameByCode(trade.getOffer().getCurrencyCode()) + " address:";
gridRow = BlockChainForm.addFormForBuyer(gridPane, gridRow, paymentAccountContractData, labelTitle);
break; break;
default: default:
log.error("Not supported PaymentMethod: " + paymentMethodName); log.error("Not supported PaymentMethod: " + paymentMethodName);
@ -224,7 +225,7 @@ public class BuyerStep2View extends TradeStepView {
if (!BitsquareApp.DEV_MODE && preferences.showAgain(key)) { if (!BitsquareApp.DEV_MODE && preferences.showAgain(key)) {
Popup popup = new Popup(); Popup popup = new Popup();
popup.headLine("Confirm that you have started the payment") popup.headLine("Confirm that you have started the payment")
.confirmation("Have you initiated the " + model.dataModel.getCurrencyCode() + .confirmation("Did you initiate the " + CurrencyUtil.getNameByCode(trade.getOffer().getCurrencyCode()) +
" payment to your trading partner?") " payment to your trading partner?")
.width(700) .width(700)
.actionButtonText("Yes, I have started the payment") .actionButtonText("Yes, I have started the payment")

View file

@ -122,37 +122,49 @@ public class SellerStep3View extends TradeStepView {
protected void addContent() { protected void addContent() {
addTradeInfoBlock(); addTradeInfoBlock();
TitledGroupBg titledGroupBg = addTitledGroupBg(gridPane, ++gridRow, 2, "Confirm payment receipt", Layout.GROUP_DISTANCE); TitledGroupBg titledGroupBg = addTitledGroupBg(gridPane, ++gridRow, 3, "Confirm payment receipt", Layout.GROUP_DISTANCE);
TextFieldWithCopyIcon field = addLabelTextFieldWithCopyIcon(gridPane, gridRow, "Amount to receive:", TextFieldWithCopyIcon field = addLabelTextFieldWithCopyIcon(gridPane, gridRow, "Amount to receive:",
model.getFiatAmount(), Layout.FIRST_ROW_AND_GROUP_DISTANCE).second; model.getFiatAmount(), Layout.FIRST_ROW_AND_GROUP_DISTANCE).second;
field.setCopyWithoutCurrencyPostFix(true); field.setCopyWithoutCurrencyPostFix(true);
String paymentDetails = ""; String myPaymentDetails = "";
String title = ""; String peersPaymentDetails = "";
String myTitle = "";
String peersTitle = "";
boolean isBlockChain = false; boolean isBlockChain = false;
String nameByCode = CurrencyUtil.getNameByCode(trade.getOffer().getCurrencyCode()); String nameByCode = CurrencyUtil.getNameByCode(trade.getOffer().getCurrencyCode());
Contract contract = trade.getContract(); Contract contract = trade.getContract();
if (contract != null) { if (contract != null) {
PaymentAccountContractData paymentAccountContractData = contract.getSellerPaymentAccountContractData(); PaymentAccountContractData myPaymentAccountContractData = contract.getSellerPaymentAccountContractData();
if (paymentAccountContractData instanceof CryptoCurrencyAccountContractData) { PaymentAccountContractData peersPaymentAccountContractData = contract.getBuyerPaymentAccountContractData();
paymentDetails = ((CryptoCurrencyAccountContractData) paymentAccountContractData).getAddress(); if (myPaymentAccountContractData instanceof CryptoCurrencyAccountContractData) {
title = "Your " + nameByCode + " address:"; myPaymentDetails = ((CryptoCurrencyAccountContractData) myPaymentAccountContractData).getAddress();
peersPaymentDetails = ((CryptoCurrencyAccountContractData) peersPaymentAccountContractData).getAddress();
myTitle = "Your " + nameByCode + " address:";
peersTitle = "Buyers " + nameByCode + " address:";
isBlockChain = true; isBlockChain = true;
} else { } else {
paymentDetails = paymentAccountContractData.getPaymentDetails(); myPaymentDetails = myPaymentAccountContractData.getPaymentDetails();
title = "Your payment account:"; peersPaymentDetails = peersPaymentAccountContractData.getPaymentDetails();
myTitle = "Your payment account:";
peersTitle = "Buyers payment account:";
} }
} }
TextFieldWithCopyIcon paymentDetailsTextField = addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, TextFieldWithCopyIcon myPaymentDetailsTextField = addLabelTextFieldWithCopyIcon(gridPane, ++gridRow,
title, StringUtils.abbreviate(paymentDetails, 56)).second; myTitle, StringUtils.abbreviate(myPaymentDetails, 56)).second;
paymentDetailsTextField.setMouseTransparent(false); myPaymentDetailsTextField.setMouseTransparent(false);
paymentDetailsTextField.setTooltip(new Tooltip(paymentDetails)); myPaymentDetailsTextField.setTooltip(new Tooltip(myPaymentDetails));
TextFieldWithCopyIcon peersPaymentDetailsTextField = addLabelTextFieldWithCopyIcon(gridPane, ++gridRow,
peersTitle, StringUtils.abbreviate(peersPaymentDetails, 56)).second;
peersPaymentDetailsTextField.setMouseTransparent(false);
peersPaymentDetailsTextField.setTooltip(new Tooltip(peersPaymentDetails));
if (!isBlockChain) { if (!isBlockChain) {
addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, "Reason for payment:", model.dataModel.getReference()); addLabelTextFieldWithCopyIcon(gridPane, ++gridRow, "Reason for payment:", model.dataModel.getReference());
GridPane.setRowSpan(titledGroupBg, 3); GridPane.setRowSpan(titledGroupBg, 4);
} }
Tuple3<Button, ProgressIndicator, Label> tuple = addButtonWithStatusAfterGroup(gridPane, ++gridRow, "Confirm payment receipt"); Tuple3<Button, ProgressIndicator, Label> tuple = addButtonWithStatusAfterGroup(gridPane, ++gridRow, "Confirm payment receipt");