Merge pull request #1734 from axpoems/offerbook-header

Update offerbook according to new revision
bisq-network · Mar 5, 2024 · 160440b · 160440b
2 parents 27948bc + 7633571
commit 160440b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 36 deletions.
diff --git a/.../main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookController.java b/.../main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookController.java
@@ -37,6 +37,7 @@
 import bisq.desktop.main.content.chat.ChatController;
 import bisq.desktop.main.content.components.MarketImageComposition;
 import bisq.offer.bisq_easy.BisqEasyOffer;
+import bisq.presentation.formatters.PriceFormatter;
 import bisq.settings.CookieKey;
 import bisq.settings.SettingsService;
 import javafx.scene.layout.StackPane;
@@ -206,15 +207,20 @@ protected void selectedChannelChanged(ChatChannel<? extends ChatMessage> chatCha
                 model.getSearchText().set("");
                 resetSelectedChildTarget();
 
-                String description = ((BisqEasyOfferbookChannel) chatChannel).getDescription();
-                String oneLineDescription = description.replace("\n", " ");
-                model.getChannelDescription().set(oneLineDescription);
+                String description = channel.getDescription();
+                String channelTitle = description.replace("\n", " ").replaceAll("\\s*\\([^)]*\\)", "");
+                model.getChannelTitle().set(channelTitle);
 
-                Market market = ((BisqEasyOfferbookChannel) chatChannel).getMarket();
+                String marketSpecs = channel.getDisplayString();
+                model.getChannelDescription().set(marketSpecs);
+
+                Market market = channel.getMarket();
                 StackPane marketsImage = MarketImageComposition.imageBoxForMarkets(
                         market.getBaseCurrencyCode().toLowerCase(),
                         market.getQuoteCurrencyCode().toLowerCase());
                 model.getChannelIconNode().set(marketsImage);
+
+                updateMarketPrice();
             }
         });
     }
@@ -246,6 +252,16 @@ void onSortMarkets(MarketSortType marketSortType) {
         model.getSortedMarketChannelItems().setComparator(marketSortType.getComparator());
     }
 
+    private void updateMarketPrice() {
+        Market selectedMarket = getModel().getSelectedMarketChannelItem().get().getMarket();
+        if (selectedMarket != null) {
+            marketPriceService
+                    .findMarketPrice(selectedMarket)
+                    .ifPresent(marketPrice ->
+                            model.getMarketPrice().set(PriceFormatter.format(marketPrice.getPriceQuote(), true)));
+        }
+    }
+
     private void updateFilteredMarketChannelItems() {
         model.getFilteredMarketChannelItems().setPredicate(item ->
                 model.getMarketFilterPredicate().test(item) &&

diff --git a/...p/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookModel.java b/...p/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookModel.java
@@ -45,6 +45,7 @@ public final class BisqEasyOfferbookModel extends ChatModel {
     private final ObjectProperty<Filters.OfferDirectionOrOwner> selectedOfferDirectionOrOwnerFilter = new SimpleObjectProperty<>();
     private final ObjectProperty<Filters.PeerReputation> selectedPeerReputationFilter = new SimpleObjectProperty<>();
     private final ObjectProperty<MarketSortType> selectedMarketSortType = new SimpleObjectProperty<>(MarketSortType.NUM_OFFERS);
+    private final StringProperty marketPrice = new SimpleStringProperty();
 
     @Setter
     private Predicate<MarketChannelItem> marketPricePredicate = marketChannelItem -> true;

diff --git a/...op/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookView.java b/...op/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookView.java
@@ -52,7 +52,7 @@ public final class BisqEasyOfferbookView extends ChatView<BisqEasyOfferbookView,
     private SearchBox marketSelectorSearchBox;
     private BisqTableView<MarketChannelItem> tableView;
     private VBox marketSelectionList;
-    private Subscription tableViewSelectionPin, selectedModelItemPin, marketSelectorHeaderIconPin, selectedMarketFilterPin,
+    private Subscription tableViewSelectionPin, selectedModelItemPin, channelHeaderIconPin, selectedMarketFilterPin,
             selectedOfferDirectionOrOwnerFilterPin, selectedPeerReputationFilterPin, selectedMarketSortTypePin;
     private Button createOfferButton;
     private DropdownMenu sortAndFilterMarketsMenu, filterOffersByDirectionOrOwnerMenu, filterOffersByPeerReputationMenu;
@@ -63,6 +63,7 @@ public final class BisqEasyOfferbookView extends ChatView<BisqEasyOfferbookView,
             atLeastTwoStars, atLeastOneStar;
     private DropdownTitleMenuItem atLeastTitle;
     private CheckBox hideUserMessagesCheckbox;
+    private Label channelHeaderIcon, marketPrice;
 
     public BisqEasyOfferbookView(BisqEasyOfferbookModel model,
                                  BisqEasyOfferbookController controller,
@@ -75,15 +76,21 @@ public BisqEasyOfferbookView(BisqEasyOfferbookModel model,
     protected void configTitleHBox() {
         super.configTitleHBox();
 
-        Label chatDomainTitle = new Label(Res.get("bisqEasy.offerbook"));
-        chatDomainTitle.getStyleClass().add("chat-header-title");
+        marketPrice = new Label();
+        HBox marketDescription = new HBox(5, channelDescription, marketPrice);
+        channelDescription.getStyleClass().add("offerbook-channel-market-code");
+        marketPrice.getStyleClass().addAll("chat-header-description", "offerbook-channel-market-price");
 
-        HBox headerTitle = new HBox(10, chatDomainTitle, channelDescription);
-        headerTitle.setAlignment(Pos.BASELINE_LEFT);
-        headerTitle.setPadding(new Insets(7, 0, 0, 0));
+        VBox titleAndDescription = new VBox(channelTitle, marketDescription);
+        channelTitle.getStyleClass().add("offerbook-channel-title");
+
+        channelHeaderIcon = new Label();
+        HBox headerTitle = new HBox(10, channelHeaderIcon, titleAndDescription);
+        headerTitle.setAlignment(Pos.CENTER_LEFT);
         HBox.setHgrow(headerTitle, Priority.ALWAYS);
 
-        titleHBox.getChildren().setAll(headerTitle, searchBox, headerDropdownMenu);
+        createOfferButton = createAndGetCreateOfferButton();
+        titleHBox.getChildren().setAll(headerTitle, createOfferButton, headerDropdownMenu);
     }
 
     @Override
@@ -105,6 +112,7 @@ protected void onViewAttached() {
 
         hideUserMessagesCheckbox.selectedProperty().bindBidirectional(getModel().getOfferOnly());
         marketSelectorSearchBox.textProperty().bindBidirectional(getModel().getMarketSelectorSearchText());
+        marketPrice.textProperty().bind(getModel().getMarketPrice());
 
         selectedModelItemPin = EasyBind.subscribe(getModel().getSelectedMarketChannelItem(), selected -> {
             tableView.getSelectionModel().select(selected);
@@ -114,7 +122,7 @@ protected void onViewAttached() {
                 getController().onSelectMarketChannelItem(item);
             }
         });
-        marketSelectorHeaderIconPin = EasyBind.subscribe(model.getChannelIconNode(), this::updateMarketSelectorHeaderIcon);
+        channelHeaderIconPin = EasyBind.subscribe(model.getChannelIconNode(), this::updateChannelHeaderIcon);
         selectedMarketFilterPin = EasyBind.subscribe(getModel().getSelectedMarketsFilter(), this::updateSelectedMarketFilter);
         selectedOfferDirectionOrOwnerFilterPin = EasyBind.subscribe(getModel().getSelectedOfferDirectionOrOwnerFilter(), filter ->
                 updateSelectedFilterInDropdownMenu(filter, filterOffersByDirectionOrOwnerMenu));
@@ -158,10 +166,11 @@ protected void onViewDetached() {
 
         hideUserMessagesCheckbox.selectedProperty().unbindBidirectional(getModel().getOfferOnly());
         marketSelectorSearchBox.textProperty().unbindBidirectional(getModel().getMarketSelectorSearchText());
+        marketPrice.textProperty().unbind();
 
         selectedModelItemPin.unsubscribe();
         tableViewSelectionPin.unsubscribe();
-        marketSelectorHeaderIconPin.unsubscribe();
+        channelHeaderIconPin.unsubscribe();
         selectedMarketFilterPin.unsubscribe();
         selectedOfferDirectionOrOwnerFilterPin.unsubscribe();
         selectedPeerReputationFilterPin.unsubscribe();
@@ -194,16 +203,16 @@ private BisqEasyOfferbookController getController() {
     }
 
     private void addMarketSelectionList() {
-        channelTitle.setGraphicTextGap(8);
-        HBox header = new HBox(channelTitle);
+        Label marketSelectionTitle = new Label(Res.get("bisqEasy.offerbook.markets"));
+        HBox header = new HBox(marketSelectionTitle);
         header.setMinHeight(HEADER_HEIGHT);
         header.setMaxHeight(HEADER_HEIGHT);
         header.setAlignment(Pos.CENTER_LEFT);
         header.setPadding(new Insets(4, 0, 0, 15));
         header.getStyleClass().add("chat-header-title");
 
         marketSelectorSearchBox = new SearchBox();
-        marketSelectorSearchBox.getStyleClass().add("market-selection-search-box");
+        marketSelectorSearchBox.getStyleClass().add("offerbook-search-box");
         sortAndFilterMarketsMenu = createAndGetSortAndFilterMarketsMenu();
         HBox subheader = new HBox(marketSelectorSearchBox, Spacer.fillHBox(), sortAndFilterMarketsMenu);
         subheader.setAlignment(Pos.CENTER);
@@ -217,12 +226,7 @@ private void addMarketSelectionList() {
         configTableView();
         VBox.setVgrow(tableView, Priority.ALWAYS);
 
-        createOfferButton = createAndGetCreateOfferButton();
-        HBox offerButtonContainer = new HBox(createOfferButton);
-        offerButtonContainer.setAlignment(Pos.CENTER);
-        offerButtonContainer.setPadding(new Insets(14, 20, 14, 20));
-
-        marketSelectionList = new VBox(header, Layout.hLine(), subheader, tableView, offerButtonContainer);
+        marketSelectionList = new VBox(header, Layout.hLine(), subheader, tableView);
         marketSelectionList.setPrefWidth(210);
         marketSelectionList.setMinWidth(210);
         marketSelectionList.setFillWidth(true);
@@ -269,12 +273,6 @@ private DropdownMenu createAndGetSortAndFilterMarketsMenu() {
     private Button createAndGetCreateOfferButton() {
         Button createOfferButton = new Button(Res.get("offer.createOffer"));
         createOfferButton.getStyleClass().addAll("create-offer-button", "normal-text");
-        createOfferButton.setMinWidth(170);
-
-        double height = 42;
-        createOfferButton.setMinHeight(height);
-        createOfferButton.setMaxHeight(height);
-        createOfferButton.setPrefHeight(height);
         return createOfferButton;
     }
 
@@ -308,8 +306,10 @@ private void addChatBox() {
 
         filterOffersByPeerReputationMenu = createAndGetPeerReputationFilterMenu();
         filterOffersByDirectionOrOwnerMenu = createAndGetOfferDirectionOrOwnerFilterMenu();
-
-        HBox subheaderContent = new HBox(30, checkbox, filterOffersByPeerReputationMenu, filterOffersByDirectionOrOwnerMenu);
+
+        searchBox.getStyleClass().add("offerbook-search-box");
+        HBox subheaderContent = new HBox(30, searchBox, Spacer.fillHBox(), checkbox,
+                filterOffersByPeerReputationMenu, filterOffersByDirectionOrOwnerMenu);
         subheaderContent.getStyleClass().add("offerbook-subheader-content");
         HBox.setHgrow(subheaderContent, Priority.ALWAYS);
 
@@ -374,8 +374,8 @@ private DropdownMenu createAndGetPeerReputationFilterMenu() {
         return dropdownMenu;
     }
 
-    private void updateMarketSelectorHeaderIcon(Node node) {
-        channelTitle.setGraphic(node);
+    private void updateChannelHeaderIcon(Node node) {
+        channelHeaderIcon.setGraphic(node);
     }
 
     private void updateSelectedMarketFilter(Filters.Markets marketFilter) {

diff --git a/apps/desktop/desktop/src/main/resources/css/bisq_easy.css b/apps/desktop/desktop/src/main/resources/css/bisq_easy.css
@@ -107,6 +107,20 @@
  * Offerbook                                                           *
  ******************************************************************************/
 
+.offerbook-channel-title {
+    -fx-font-size: 1.2em;
+    -fx-padding: 3 0 0 0;
+}
+
+.offerbook-channel-market-code {
+    -fx-font-family: "IBM Plex Sans Medium";
+    -fx-padding: -3 0 0 0;
+}
+
+.offerbook-channel-market-price {
+    -fx-padding: -3 0 0 0;
+}
+
 .market-selection {
     -fx-text-fill: -fx-light-text-color !important;
 }
@@ -128,7 +142,7 @@
     -fx-padding: 0 12 0 7;
 }
 
-.market-selection-search-box {
+.offerbook-search-box {
     -fx-background-radius: 0;
     -fx-background-color: -bisq-dark-grey-30;
     -fx-border-color: transparent;
@@ -138,7 +152,7 @@
     -fx-max-width: 160;
 }
 
-.market-selection-search-box .search-text-field {
+.offerbook-search-box .search-text-field {
     -fx-padding: 0 5 0 8;
 }
 
@@ -235,7 +249,7 @@
     -fx-background-radius: 8;
     -fx-border-color: transparent;
     -fx-border-radius: 8;
-    -fx-padding: 2 4 4 4;
+    -fx-padding: 4 50 4 50;
     -fx-cursor: hand;
 }
 

diff --git a/i18n/src/main/resources/bisq_easy.properties b/i18n/src/main/resources/bisq_easy.properties
@@ -370,7 +370,7 @@ bisqEasy.walletGuide.receive.link2=Bluewallet tutorial by BTC Sessions
 # Offerbook
 ######################################################
 
-bisqEasy.offerbook.selectMarket=Select market
+bisqEasy.offerbook.markets=Markets
 bisqEasy.offerbook.marketListCell.numOffers.one={0} offer
 bisqEasy.offerbook.marketListCell.numOffers.many={0} offers
 bisqEasy.offerbook.marketListCell.numOffers.tooltip.none=No offers yet available in the {0} market