Adapt DAO news view to match design

bisq-network · Feb 14, 2019 · 42051b5 · 42051b5
1 parent c815a88
commit 42051b5
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 41 deletions.
diff --git a/core/src/main/resources/i18n/displayStrings.properties b/core/src/main/resources/i18n/displayStrings.properties
@@ -1770,6 +1770,29 @@ dao.feeTx.confirm.details={0} fee: {1}\n\
   Transaction size: {4} Kb\n\n\
   Are you sure you want to publish the {5} transaction?
 
+dao.news.bisqDAO.title=THE BISQ DAO
+dao.news.bisqDAO.description=Just as the Bisq exchange is decentralized and censorship-resistant, so is its \
+  governance model - and the Bisq DAO and BSQ token are the tools that make it possible.
+dao.news.bisqDAO.readMoreLink=Learn More About the Bisq DAO
+
+dao.news.pastContribution.title=MADE PAST CONTRIBUTIONS? REQUEST BSQ
+dao.news.pastContribution.description=If you have contributed to Bisq please use the BSQ address below and make a \
+  request for taking part of the BSQ genesis distribution.
+dao.news.pastContribution.yourAddress=Your BSQ Wallet Address
+dao.news.pastContribution.requestNow=Request now
+
+dao.news.DAOOnTestnet.title=RUN THE BISQ DAO ON TESTNET
+dao.news.DAOOnTestnet.description=The main net Bisq DAO is not launched yet but you can learn about the Bisq DAO \
+  by running it on testnet.
+dao.news.DAOOnTestnet.firstSection.title=1. Switch to Testnet Mode
+dao.news.DAOOnTestnet.firstSection.content=Switch to testnet from the Settings screen.
+dao.news.DAOOnTestnet.secondSection.title=2. Acquire Some BSQ
+dao.news.DAOOnTestnet.secondSection.content=Request BSQ on Slack or Buy BSQ on Bisq.
+dao.news.DAOOnTestnet.thirdSection.title=3. Participate in a Voting Cycle
+dao.news.DAOOnTestnet.thirdSection.content=Making proposals and voting on proposals to change various aspects of Bisq.
+dao.news.DAOOnTestnet.fourthSection.title=4. Explore a BSQ Block Explorer
+dao.news.DAOOnTestnet.fourthSection.content=Since BSQ is just bitcoin, you can see BSQ transactions on any bitcoin block explorer.
+dao.news.DAOOnTestnet.readMoreLink=Read the full documentation
 
 ####################################################################
 # Windows

diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css
@@ -32,10 +32,15 @@ bg color of non edit textFields: fafafa
     src: url("/fonts/IBMPlexSans-Medium.ttf");
 }
 
+@font-face {
+    src: url("/fonts/IBMPlexSans-Light.ttf");
+}
+
 @font-face {
     src: url("/fonts/IBMPlexMono-Regular.ttf");
 }
 
+
 .root {
     -bs-very-dark-grey3: #444; /* 3 usages */
     -bs-grey: #666666; /* 8 usages */
@@ -2007,6 +2012,43 @@ textfield */
     -fx-text-fill: -fx-accent;
 }
 
+.dao-news-titled-group .titled-group-bg-label-active {
+    -fx-font-size: 0.923em;
+}
+
+.dao-news-teaser {
+    -fx-font-size: 1.538em;
+    -fx-font-family: "IBM Plex Sans Light";
+}
+
+.dao-news-section-header {
+    -fx-font-size: 1.923em;
+    -fx-text-fill: -bs-rd-green-dark;
+    -fx-font-family: "IBM Plex Sans Light";
+}
+
+.dao-news-section-content, .dao-news-content, .dao-news-section-link {
+    -fx-font-size: 0.923em;
+}
+
+.dao-news-section-content {
+    -fx-text-fill: -bs-rd-black;
+}
+
+.dao-news-content, .dao-news-section-link, .dao-news-section-link .hyperlink {
+    -fx-text-fill: -bs-rd-font-light;
+    -fx-fill: -bs-rd-font-light;
+}
+
+.dao-news-link {
+    -fx-text-fill: -fx-accent;
+    -fx-padding: 16 0 0 0;
+}
+
+.dao-news-link .hyperlink {
+    -fx-fill: -fx-accent;
+}
+
 /********************************************************************************************************************
  *                                                                                                                  *
  * Notifications                                                                                                              *

diff --git a/desktop/src/main/java/bisq/desktop/main/dao/news/NewsView.fxml b/desktop/src/main/java/bisq/desktop/main/dao/news/NewsView.fxml
@@ -17,11 +17,11 @@
   ~ along with Bisq. If not, see <http://www.gnu.org/licenses/>.
   -->
 
-<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.geometry.Insets?>
-<GridPane fx:id="root" fx:controller="bisq.desktop.main.dao.news.NewsView"
-          xmlns:fx="http://javafx.com/fxml" hgap="5.0" vgap="5.0">
+<HBox fx:id="root" fx:controller="bisq.desktop.main.dao.news.NewsView"
+      xmlns:fx="http://javafx.com/fxml">
     <padding>
         <Insets bottom="15.0" left="15.0" right="15.0" top="15.0"/>
     </padding>
-</GridPane>
+</HBox>
diff --git a/desktop/src/main/java/bisq/desktop/main/dao/news/NewsView.java b/desktop/src/main/java/bisq/desktop/main/dao/news/NewsView.java
@@ -3,9 +3,9 @@
 import bisq.desktop.common.view.ActivatableView;
 import bisq.desktop.common.view.FxmlView;
 import bisq.desktop.components.BsqAddressTextField;
+import bisq.desktop.components.TitledGroupBg;
 import bisq.desktop.main.presentation.DaoPresentation;
-import bisq.desktop.util.FormBuilder;
-import bisq.desktop.util.GUIUtil;
+import bisq.desktop.util.Layout;
 
 import bisq.core.btc.wallet.BsqWalletService;
 import bisq.core.locale.Res;
@@ -18,15 +18,23 @@
 import javax.inject.Inject;
 
 import javafx.scene.control.Button;
+import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
+import javafx.scene.control.Separator;
+import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.GridPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
 
-import static bisq.desktop.util.FormBuilder.addLabelBsqAddressTextField;
-import static bisq.desktop.util.FormBuilder.addTitledGroupBg;
+import javafx.geometry.Insets;
+import javafx.geometry.Orientation;
+
+import static bisq.desktop.util.FormBuilder.*;
 
 @FxmlView
-public class NewsView extends ActivatableView<GridPane, Void> {
+public class NewsView extends ActivatableView<HBox, Void> {
 
     private final Preferences preferences;
     private final BsqWalletService bsqWalletService;
@@ -43,37 +51,108 @@ private NewsView(Preferences preferences, BsqWalletService bsqWalletService,
 
     @Override
     protected void initialize() {
-        int gridRow = 0;
-
-        addTitledGroupBg(root, gridRow, 6,
-                Res.get("dao.wallet.receive.dao.headline"), 0);
-        FormBuilder.addMultilineLabel(root, gridRow, Res.get("dao.wallet.receive.daoInfo"), 10);
-
-        Button daoInfoButton = FormBuilder.addButton(root, ++gridRow, Res.get("dao.wallet.receive.daoInfo.button"));
-        daoInfoButton.setOnAction(e -> {
-            GUIUtil.openWebPage("https://bisq.network/dao");
-        });
-
-        FormBuilder.addMultilineLabel(root, ++gridRow, Res.get("dao.wallet.receive.daoTestnetInfo"));
-        Button daoContributorInfoButton = FormBuilder.addButton(root, ++gridRow, Res.get("dao.wallet.receive.daoTestnetInfo.button"));
-        daoContributorInfoButton.setOnAction(e -> {
-            GUIUtil.openWebPage("https://bisq.network/dao-testnet");
-        });
-
-        FormBuilder.addMultilineLabel(root, ++gridRow, Res.get("dao.wallet.receive.daoContributorInfo"));
-
-        Button daoTestnetInfoButton = FormBuilder.addButton(root, ++gridRow, Res.get("dao.wallet.receive.daoContributorInfo.button"));
-        daoTestnetInfoButton.setOnAction(e -> {
-            GUIUtil.openWebPage("https://bisq.network/dao-genesis");
-        });
-
-        addTitledGroupBg(root, ++gridRow, 1,
-                Res.get("dao.wallet.receive.fundYourWallet"), 20);
-        Tuple3<Label, BsqAddressTextField, VBox> tuple = addLabelBsqAddressTextField(root, gridRow,
-                Res.get("dao.wallet.receive.bsqAddress"),
-                40);
+
+        root.setSpacing(20);
+
+        AnchorPane bisqDAOPane = createBisqDAOContent();
+        HBox.setHgrow(bisqDAOPane, Priority.SOMETIMES);
+        Separator separator = new Separator();
+        separator.setOrientation(Orientation.VERTICAL);
+        HBox.setHgrow(separator, Priority.NEVER);
+        GridPane bisqDAOOnTestnetPane = createBisqDAOOnTestnetContent();
+        HBox.setHgrow(bisqDAOOnTestnetPane, Priority.SOMETIMES);
+        Pane spacer = new Pane();
+        HBox.setHgrow(spacer, Priority.ALWAYS);
+
+        root.getChildren().addAll(bisqDAOPane, separator, bisqDAOOnTestnetPane, spacer);
+    }
+
+    private GridPane createBisqDAOOnTestnetContent() {
+        GridPane gridPane = new GridPane();
+        gridPane.setMaxWidth(370);
+
+        int rowIndex = 0;
+
+        TitledGroupBg titledGroupBg = addTitledGroupBg(gridPane, rowIndex, 14, Res.get("dao.news.DAOOnTestnet.title"));
+        titledGroupBg.getStyleClass().addAll("last", "dao-news-titled-group");
+        Label daoTestnetDescription = addMultilineLabel(gridPane, ++rowIndex, Res.get("dao.news.DAOOnTestnet.description"), 0, 370);
+        daoTestnetDescription.getStyleClass().add("dao-news-content");
+
+        rowIndex = addInfoSection(gridPane, rowIndex, Res.get("dao.news.DAOOnTestnet.firstSection.title"),
+                Res.get("dao.news.DAOOnTestnet.firstSection.content"),
+                "https://docs.bisq.network/getting-started-dao.html#switch-to-testnet-mode");
+        rowIndex = addInfoSection(gridPane, rowIndex, Res.get("dao.news.DAOOnTestnet.secondSection.title"),
+                Res.get("dao.news.DAOOnTestnet.secondSection.content"),
+                "https://docs.bisq.network/getting-started-dao.html#acquire-some-bsq");
+        rowIndex = addInfoSection(gridPane, rowIndex, Res.get("dao.news.DAOOnTestnet.thirdSection.title"),
+                Res.get("dao.news.DAOOnTestnet.thirdSection.content"),
+                "https://docs.bisq.network/getting-started-dao.html#participate-in-a-voting-cycle");
+        rowIndex = addInfoSection(gridPane, rowIndex, Res.get("dao.news.DAOOnTestnet.fourthSection.title"),
+                Res.get("dao.news.DAOOnTestnet.fourthSection.content"),
+                "https://docs.bisq.network/getting-started-dao.html#explore-a-bsq-block-explorer");
+
+        Hyperlink hyperlink = addHyperlinkWithIcon(gridPane, ++rowIndex, Res.get("dao.news.DAOOnTestnet.readMoreLink"),
+                "https://docs.bisq.network/user-dao-intro.html");
+        hyperlink.getStyleClass().add("dao-news-link");
+
+        return gridPane;
+    }
+
+    private int addInfoSection(GridPane gridPane, int rowIndex, String title, String content, String linkURL) {
+
+        Label titleLabel = addLabel(gridPane, ++rowIndex, title);
+        GridPane.setMargin(titleLabel, new Insets(6, 0, 0, 0));
+
+        titleLabel.getStyleClass().add("dao-news-section-header");
+        Label contentLabel = addMultilineLabel(gridPane, ++rowIndex, content, -Layout.FLOATING_LABEL_DISTANCE, 370);
+        contentLabel.getStyleClass().add("dao-news-section-content");
+
+        Hyperlink link = addHyperlinkWithIcon(gridPane, ++rowIndex, "Read More", linkURL);
+        link.getStyleClass().add("dao-news-section-link");
+        GridPane.setMargin(link, new Insets(0, 0, 25, 0));
+
+        return rowIndex;
+    }
+
+    private AnchorPane createBisqDAOContent() {
+        AnchorPane anchorPane = new AnchorPane();
+        anchorPane.setMinWidth(373);
+
+        GridPane bisqDAOPane = new GridPane();
+        AnchorPane.setTopAnchor(bisqDAOPane, 0d);
+        bisqDAOPane.setVgap(5);
+        bisqDAOPane.setMaxWidth(373);
+
+        int rowIndex = 0;
+        TitledGroupBg theBisqDaoTitledGroup = addTitledGroupBg(bisqDAOPane, rowIndex, 3, Res.get("dao.news.bisqDAO.title"));
+        theBisqDaoTitledGroup.getStyleClass().addAll("last", "dao-news-titled-group");
+        Label daoTeaserContent = addMultilineLabel(bisqDAOPane, ++rowIndex, Res.get("dao.news.bisqDAO.description"));
+        daoTeaserContent.getStyleClass().add("dao-news-teaser");
+        Hyperlink hyperlink = addHyperlinkWithIcon(bisqDAOPane, ++rowIndex, Res.get("dao.news.bisqDAO.readMoreLink"), "https://bisq.network/dao");
+        hyperlink.getStyleClass().add("dao-news-link");
+
+        GridPane pastContributorsPane = new GridPane();
+        AnchorPane.setBottomAnchor(pastContributorsPane, 0d);
+
+        pastContributorsPane.setVgap(5);
+        pastContributorsPane.setMaxWidth(373);
+
+        rowIndex = 0;
+        TitledGroupBg contributorsTitledGroup = addTitledGroupBg(pastContributorsPane, rowIndex, 4, Res.get("dao.news.pastContribution.title"));
+        contributorsTitledGroup.getStyleClass().addAll("last", "dao-news-titled-group");
+        Label pastContributionDescription = addMultilineLabel(pastContributorsPane, ++rowIndex, Res.get("dao.news.pastContribution.description"));
+        pastContributionDescription.getStyleClass().add("dao-news-content");
+        Tuple3<Label, BsqAddressTextField, VBox> tuple = addLabelBsqAddressTextField(pastContributorsPane, ++rowIndex,
+                Res.get("dao.news.pastContribution.yourAddress"),
+                Layout.FIRST_ROW_DISTANCE);
         addressTextField = tuple.second;
-        GridPane.setColumnSpan(tuple.third, 3);
+        Button requestNowButton = addPrimaryActionButton(pastContributorsPane, ++rowIndex, Res.get("dao.news.pastContribution.requestNow"), 0);
+        requestNowButton.setMaxWidth(Double.MAX_VALUE);
+        GridPane.setHgrow(requestNowButton, Priority.ALWAYS);
+
+        anchorPane.getChildren().addAll(bisqDAOPane, pastContributorsPane);
+
+        return anchorPane;
     }
 
     @Override

diff --git a/desktop/src/main/java/bisq/desktop/util/FormBuilder.java b/desktop/src/main/java/bisq/desktop/util/FormBuilder.java
@@ -49,6 +49,7 @@
 import de.jensd.fx.fontawesome.AwesomeDude;
 import de.jensd.fx.fontawesome.AwesomeIcon;
 import de.jensd.fx.glyphs.GlyphIcons;
+import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;
 import de.jensd.fx.glyphs.materialdesignicons.utils.MaterialDesignIconFactory;
 
 import com.jfoenix.controls.JFXComboBox;
@@ -158,9 +159,13 @@ public static Label addMultilineLabel(GridPane gridPane, int rowIndex, double to
     }
 
     public static Label addMultilineLabel(GridPane gridPane, int rowIndex, String text, double top) {
+        return addMultilineLabel(gridPane, rowIndex, text, top, 600);
+    }
+
+    public static Label addMultilineLabel(GridPane gridPane, int rowIndex, String text, double top, double maxWidth) {
         Label label = new AutoTooltipLabel(text);
         label.setWrapText(true);
-        label.setMaxWidth(600);
+        label.setMaxWidth(maxWidth);
         GridPane.setHalignment(label, HPos.LEFT);
         GridPane.setHgrow(label, Priority.ALWAYS);
         GridPane.setRowIndex(label, rowIndex);
@@ -319,7 +324,6 @@ public static HyperlinkWithIcon addHyperlinkWithIcon(GridPane gridPane, int rowI
         return hyperlinkWithIcon;
     }
 
-
     ///////////////////////////////////////////////////////////////////////////////////////////
     // Label  + HyperlinkWithIcon
     ///////////////////////////////////////////////////////////////////////////////////////////

diff --git a/desktop/src/main/resources/fonts/IBMPlexSans-Light.ttf b/desktop/src/main/resources/fonts/IBMPlexSans-Light.ttf