Skip to content

Commit

Permalink
Add range marker to slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@HenrikJannsen
HenrikJannsen committed Sep 13, 2024
1 parent 8bd539d commit cd1eb71
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 58 deletions.
79 changes: 57 additions & 22 deletions ...desktop/src/main/java/bisq/desktop/main/content/bisq_easy/components/AmountComponent.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
import org.fxmisc.easybind.EasyBind;
import org.fxmisc.easybind.Subscription;

import java.util.Optional;

import static com.google.common.base.Preconditions.checkArgument;

@Slf4j
Expand Down Expand Up @@ -93,12 +95,16 @@ public void setMinMaxRange(Monetary minRangeValue, Monetary maxRangeValue) {
controller.setMinMaxRange(minRangeValue, maxRangeValue);
}

public void setReputationBasedQuoteSideAmount(Monetary reputationBasedQuoteSideAmount) {
controller.setReputationBasedQuoteSideAmount(reputationBasedQuoteSideAmount);
public void setLeftMarkerQuoteSideValue(Monetary quoteSideAmount) {
controller.setLeftMarkerQuoteSideValue(quoteSideAmount);
}

public void setRightMarkerQuoteSideValue(Monetary quoteSideAmount) {
controller.setRightMarkerQuoteSideValue(quoteSideAmount);
}

public Monetary getReputationBasedQuoteSideAmount() {
return controller.model.getReputationBasedQuoteSideAmount();
return controller.model.getRightMarkerQuoteSideValue();
}

public void applyReputationBasedQuoteSideAmount() {
Expand Down Expand Up @@ -128,6 +134,9 @@ public void setDescription(String description) {
}

private static class Controller implements bisq.desktop.common.view.Controller {
private static final String SLIDER_TRACK_DEFAULT_COLOR = "-bisq-dark-grey-50";
private static final String SLIDER_TRACK_MARKER_COLOR = "-bisq2-green";

private final Model model;
@Getter
private final View view;
Expand Down Expand Up @@ -243,13 +252,18 @@ public void setMinMaxRange(Monetary minRangeValue, Monetary maxRangeValue) {
applyInitialRangeValues();
}

public void setReputationBasedQuoteSideAmount(Monetary reputationBasedQuoteSideAmount) {
model.setReputationBasedQuoteSideAmount(reputationBasedQuoteSideAmount);
public void setLeftMarkerQuoteSideValue(Monetary quoteSideAmount) {
model.setLeftMarkerQuoteSideValue(quoteSideAmount);
applySliderTrackStyle();
}

public void setRightMarkerQuoteSideValue(Monetary quoteSideAmount) {
model.setRightMarkerQuoteSideValue(quoteSideAmount);
applySliderTrackStyle();
}

public void applyReputationBasedQuoteSideAmount() {
quoteSideAmountInput.setAmount(model.getReputationBasedQuoteSideAmount());
quoteSideAmountInput.setAmount(model.getRightMarkerQuoteSideValue());
}

public void setQuote(PriceQuote priceQuote) {
Expand Down Expand Up @@ -414,22 +428,37 @@ private void applyInitialRangeValues() {
private void applySliderTrackStyle() {
Monetary minRangeMonetary = model.getMinRangeQuoteSideValue().get();
Monetary maxRangeMonetary = model.getMaxRangeQuoteSideValue().get();
Monetary reputationBasedQuoteSideAmount = model.getReputationBasedQuoteSideAmount();
if (reputationBasedQuoteSideAmount != null &&
minRangeMonetary != null &&
maxRangeMonetary != null) {
double repAmount = reputationBasedQuoteSideAmount.getValue() - minRangeMonetary.getValue();
double range = model.getMaxRangeMonetary().get().getValue() - minRangeMonetary.getValue();
double reputationBasedAmountOnSlider = range != 0 ? repAmount / range : 0;
String rightSideColor = "-bisq-dark-grey-50";
model.getSliderTrackStyle().set(String.format(
"-track-color: linear-gradient(to right, " +
"-bisq2-green 0%%, " +
"-bisq2-green %1$.1f%%, " +
rightSideColor + " %1$.1f%%, " +
rightSideColor + " 100%%);",
100 * reputationBasedAmountOnSlider));
if (minRangeMonetary == null || maxRangeMonetary == null) {
return;
}
long minRangeMonetaryValue = minRangeMonetary.getValue();
long maxRangeMonetaryValue = maxRangeMonetary.getValue();
double range = maxRangeMonetaryValue - minRangeMonetaryValue;

// If left value is not set we use minRange
// If left value is set but right value not set we don't show any marker
Monetary markerQuoteSideValue = model.getLeftMarkerQuoteSideValue();
long leftMarkerQuoteSideValue = Optional.ofNullable(markerQuoteSideValue).orElse(minRangeMonetary).getValue();
double left = leftMarkerQuoteSideValue - minRangeMonetaryValue;
double leftPercentage = range != 0 ? 100 * left / range : 0;

long rightMarkerQuoteSideValue = Optional.ofNullable(model.getRightMarkerQuoteSideValue()).orElse(minRangeMonetary).getValue();
double right = rightMarkerQuoteSideValue - minRangeMonetaryValue;
double rightPercentage = range != 0 ? 100 * right / range : 0;

// E.g.: -bisq-dark-grey-50 0%, -bisq-dark-grey-50 30.0%, -bisq2-green 30.0%, -bisq2-green 60.0%, -bisq-dark-grey-50 60.0%, -bisq-dark-grey-50 100%)
String segments = String.format(
SLIDER_TRACK_DEFAULT_COLOR + " 0%%, " +
SLIDER_TRACK_DEFAULT_COLOR + " %1$.1f%%, " +

SLIDER_TRACK_MARKER_COLOR + " %1$.1f%%, " +
SLIDER_TRACK_MARKER_COLOR + " %2$.1f%%, " +

SLIDER_TRACK_DEFAULT_COLOR + " %2$.1f%%, " +
SLIDER_TRACK_DEFAULT_COLOR + " 100%%)",
leftPercentage, rightPercentage);
String style = "-track-color: linear-gradient(to right, " + segments + ";";
model.getSliderTrackStyle().set(style);
}

@Override
Expand All @@ -446,6 +475,8 @@ public void onDeactivate() {
maxRangeCustomValuePin.unsubscribe();
baseSideAmountValidPin.unsubscribe();
quoteSideAmountValidPin.unsubscribe();
model.setLeftMarkerQuoteSideValue(null);
model.setRightMarkerQuoteSideValue(null);
}

private void setQuoteFromBase() {
Expand Down Expand Up @@ -500,7 +531,9 @@ private static class Model implements bisq.desktop.common.view.Model {
@Setter
private ObjectProperty<Monetary> maxRangeQuoteSideValue = new SimpleObjectProperty<>();
@Setter
private Monetary reputationBasedQuoteSideAmount;
private Monetary leftMarkerQuoteSideValue;
@Setter
private Monetary rightMarkerQuoteSideValue;
private final StringProperty sliderTrackStyle = new SimpleStringProperty();
@Setter
private Market market = MarketRepository.getDefault();
Expand All @@ -522,6 +555,8 @@ void reset() {
sliderFocus.set(false);
market = MarketRepository.getDefault();
direction = Direction.BUY;
leftMarkerQuoteSideValue = null;
rightMarkerQuoteSideValue = null;
}
}

Expand Down
6 changes: 3 additions & 3 deletions ...java/bisq/desktop/main/content/bisq_easy/take_offer/amount/TakeOfferAmountController.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ public void init(BisqEasyOffer bisqEasyOffer, Optional<Monetary> optionalReputat
maxAmount = reputationBasedQuoteSideAmount.isGreaterThan(offersQuoteSideMaxOrFixedAmount)
? offersQuoteSideMaxOrFixedAmount
: reputationBasedQuoteSideAmount;
amountComponent.setReputationBasedQuoteSideAmount(maxAmount);
amountComponent.setRightMarkerQuoteSideValue(maxAmount);
applyQuoteSideMinMaxRange(quoteSideMinAmount, maxAmount);

long sellersScore = reputationService.getReputationScore(userIdentityService.getSelectedUserIdentity().getUserProfile()).getTotalScore();
Expand Down Expand Up @@ -186,7 +186,7 @@ private void applyQuoteSideMinMaxRange(Monetary minRangeValue, Monetary maxRange

if (reputationBasedQuoteSideAmount.isLessThan(maxRangeValue)) {
model.getIsAmountLimitInfoVisible().set(true);
amountComponent.setReputationBasedQuoteSideAmount(reputationBasedQuoteSideAmount);
amountComponent.setRightMarkerQuoteSideValue(reputationBasedQuoteSideAmount);
amountComponent.setQuoteSideAmount(reputationBasedQuoteSideAmount);
String formattedAmount = AmountFormatter.formatAmountWithCode(reputationBasedQuoteSideAmount);
model.getAmountLimitInfoOverlayInfo().set(Res.get("bisqEasy.takeOffer.amount.buyer.limitInfo.overlay.info", sellersReputationScore, formattedAmount) + "\n\n");
Expand All @@ -209,7 +209,7 @@ private void applyQuoteSideMinMaxRange(Monetary minRangeValue, Monetary maxRange
BisqEasyTradeAmountLimits.getReputationBasedQuoteSideAmount(marketPriceService, bisqEasyOffer.getMarket(), myReputationScore)
.ifPresent(myReputationBasedQuoteSideAmount -> {
model.getIsAmountHyperLinkDisabled().set(myReputationBasedQuoteSideAmount.isGreaterThan(maxRangeValue));
amountComponent.setReputationBasedQuoteSideAmount(myReputationBasedQuoteSideAmount);
amountComponent.setRightMarkerQuoteSideValue(myReputationBasedQuoteSideAmount);
String formattedAmount = AmountFormatter.formatAmountWithCode(myReputationBasedQuoteSideAmount);
model.getIsAmountLimitInfoVisible().set(true);
model.getAmountLimitInfo().set(Res.get("bisqEasy.tradeWizard.amount.seller.limitInfo", myReputationScore));
Expand Down
Loading

0 comments on commit cd1eb71

Please sign in to comment.