Merge pull request #2859 from axpoems/add-rep-score-page

Add reputation score page content

apps/desktop/desktop/src/main/java/bisq/desktop/main/content/reputation/score/ReputationScoreView.java

@@ -17,20 +17,68 @@
 
 package bisq.desktop.main.content.reputation.score;
 
+import bisq.desktop.common.utils.ImageUtil;
 import bisq.desktop.common.view.View;
+import bisq.desktop.components.containers.Spacer;
+import bisq.i18n.Res;
 import javafx.geometry.Insets;
+import javafx.geometry.Pos;
 import javafx.scene.control.Label;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import lombok.extern.slf4j.Slf4j;
 
 @Slf4j
 public class ReputationScoreView extends View<VBox, ReputationScoreModel, ReputationScoreController> {
  public ReputationScoreView(ReputationScoreModel model, ReputationScoreController controller) {
- super(new VBox(50), model, controller);
+ super(new VBox(), model, controller);
 
- root.setPadding(new Insets(0, 40, 40, 40));
+ Label headlineLabel = new Label(Res.get("reputation.reputationScore.headline"));
+ headlineLabel.getStyleClass().add("reputation-score-headline");
 
- root.getChildren().addAll(new Label("TODO"));
+ Label introLabel = new Label(Res.get("reputation.reputationScore.intro"));
+
+ Label sellerReputationLabel = new Label(Res.get("reputation.reputationScore.sellerReputation"));
+ sellerReputationLabel.setAlignment(Pos.TOP_LEFT);
+ ImageView offerImage = ImageUtil.getImageViewById("offer-reputation");
+ VBox offerBox = new VBox(offerImage);
+ offerBox.setAlignment(Pos.BOTTOM_CENTER);
+ HBox sellerReputationBox = new HBox(sellerReputationLabel, Spacer.fillHBox(), offerBox);
+ sellerReputationBox.getStyleClass().add("reputation-score-card-large");
+
+ Label explanationIntroLabel = new Label(Res.get("reputation.reputationScore.explanation.intro"));
+
+ Label scoreTitleLabel = new Label(Res.get("reputation.reputationScore.explanation.score.title"));
+ scoreTitleLabel.getStyleClass().add("card-title");
+ Label scoreDescriptionLabel = new Label(Res.get("reputation.reputationScore.explanation.score.description"));
+ VBox scoreBox = new VBox(20, scoreTitleLabel, scoreDescriptionLabel);
+ scoreBox.getStyleClass().add("reputation-score-card-small");
+ Label rankingTitleLabel = new Label(Res.get("reputation.reputationScore.explanation.ranking.title"));
+ rankingTitleLabel.getStyleClass().add("card-title");
+ Label rankingDescriptionLabel = new Label(Res.get("reputation.reputationScore.explanation.ranking.description"));
+ VBox rankingBox = new VBox(20, rankingTitleLabel, rankingDescriptionLabel);
+ rankingBox.getStyleClass().add("reputation-score-card-small");
+ HBox scoreAndReputationBox = new HBox(20, scoreBox, rankingBox);
+
+ Label starsTitleLabel = new Label(Res.get("reputation.reputationScore.explanation.stars.title"));
+ starsTitleLabel.getStyleClass().add("card-title");
+ Label starsDescriptionLabel = new Label(Res.get("reputation.reputationScore.explanation.stars.description"));
+ ImageView starsTableImage = ImageUtil.getImageViewById("stars-reputation-table");
+ VBox starsTableBox = new VBox(starsTableImage);
+ starsTableBox.setAlignment(Pos.CENTER);
+ VBox starsBox = new VBox(20, starsTitleLabel, starsDescriptionLabel, starsTableBox);
+ starsBox.getStyleClass().add("reputation-score-card-large");
+
+ Label closingLabel = new Label(Res.get("reputation.reputationScore.closing"));
+
+ VBox contentBox = new VBox(20);
+ contentBox.getChildren().addAll(headlineLabel, introLabel, sellerReputationBox, explanationIntroLabel,
+ scoreAndReputationBox, starsBox, closingLabel);
+ contentBox.getStyleClass().add("bisq-common-bg");
+ root.getChildren().addAll(contentBox);
+ root.setPadding(new Insets(0, 40, 20, 40));
+ root.getStyleClass().add("reputation-score");
  }
 
  @Override

apps/desktop/desktop/src/main/resources/css/application.css

@@ -353,3 +353,40 @@
 .build-reputation .user-profile-selection {
  -fx-padding: 0 5 0 20;
 }
+
+.reputation-score .reputation-score-card-small,
+.reputation-score .reputation-score-card-large {
+ -fx-background-color: -bisq-dark-grey-40;
+ -fx-background-radius: 8 8 8 8;
+ -fx-padding: 40;
+}
+
+.reputation-score .reputation-score-card-small .label,
+.reputation-score .reputation-score-card-large .label {
+ -fx-line-spacing: 7px;
+ -fx-wrap-text: true;
+}
+
+.reputation-score .reputation-score-card-small .card-title,
+.reputation-score .reputation-score-card-large .card-title {
+ -fx-font-size: 1.7em !important;
+}
+
+.reputation-score .reputation-score-card-large {
+ -fx-max-width: 1000;
+ -fx-min-width: 800;
+}
+
+.reputation-score .reputation-score-card-small {
+ -fx-max-width: 490;
+ -fx-min-width: 390;
+}
+
+.reputation-score .reputation-score-headline {
+ -fx-font-size: 2.5em !important;
+}
+
+.reputation-score .label {
+ -fx-font-size: 1.15em;
+ -fx-font-family: "IBM Plex Sans Light";
+}

apps/desktop/desktop/src/main/resources/css/containers.css

@@ -350,6 +350,7 @@
  -fx-font-family: "IBM Plex Sans Light";
 }
 
+
 /*******************************************************************************
  * *
  * RichTable *

apps/desktop/desktop/src/main/resources/css/images.css

@@ -1586,3 +1586,16 @@
 #sound-off {
  -fx-image: url("/images/video/sound_off.png");
 }
+
+
+/* ------------------------------------------------------------------------------------ */
+/* Reputation */
+/* ------------------------------------------------------------------------------------ */
+
+#offer-reputation {
+ -fx-image: url("/images/reputation/offer-rep.png");
+}
+
+#stars-reputation-table {
+ -fx-image: url("/images/reputation/rep-table.png");
+}

i18n/src/main/resources/reputation.properties

@@ -206,6 +206,25 @@ reputation.details.table.columns.source=Type
 reputation.details.table.columns.lockTime=Lock time
 reputation.details.table.columns.score=Score
 
+reputation.reputationScore.headline=Reputation score
+reputation.reputationScore.intro=In this section Bisq reputation is explained so that you can make informed decisions when taking an offer.
+reputation.reputationScore.sellerReputation=The reputation of a seller is the best signal\n\
+ to predict the security of a trade in Bisq Easy.
+reputation.reputationScore.explanation.intro=Reputation at Bisq2 is captured in three elements:
+reputation.reputationScore.explanation.score.title=Score
+reputation.reputationScore.explanation.score.description=This is the total score a seller has built up so far.\n\
+ The score can be increased in several ways. The best way to do so is by burning or locking BSQ.\
+ This means the seller has put a stake upfront and, as a result, can be regarded as trustworthy.\n\
+ Further reading on how to increase the score can be found in 'Build reputation' section.\n\
+ At Bisq, we recommend trading with sellers who have a score of at least 30,000.
+reputation.reputationScore.explanation.ranking.title=Ranking
+reputation.reputationScore.explanation.ranking.description=Ranks users from highest to lowest score.\n\
+ As a rule of thumb when trading: the higher the rank, the better security.
+reputation.reputationScore.explanation.stars.title=Stars
+reputation.reputationScore.explanation.stars.description=This is a graphical representation of the score. See the conversion table below for how stars are calculated.\n\
+ At Bisq, we recommend trading with sellers with at least 3 stars.
+reputation.reputationScore.closing=For more details on how a seller has built their reputation, see 'Ranking' section and click 'Show details' in the user.
+
 
 ################################################################################
 # Bonded roles