Add display hint for applied market filters

Resolves bisq-network#1740
axpoems · Mar 7, 2024 · 0590ca1 · 0590ca1
1 parent 4dc2286
commit 0590ca1
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
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
@@ -20,6 +20,7 @@
 import bisq.chat.ChatChannel;
 import bisq.chat.ChatMessage;
 import bisq.desktop.common.Layout;
+import bisq.desktop.common.utils.ImageUtil;
 import bisq.desktop.components.containers.Spacer;
 import bisq.desktop.components.controls.DropdownMenu;
 import bisq.desktop.components.controls.DropdownMenuItem;
@@ -33,11 +34,13 @@
 import javafx.css.PseudoClass;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
+import javafx.scene.Cursor;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.Label;
 import javafx.scene.control.SeparatorMenuItem;
+import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Priority;
@@ -63,7 +66,9 @@ public final class BisqEasyOfferbookView extends ChatView<BisqEasyOfferbookView,
             atLeastTwoStars, atLeastOneStar;
     private DropdownTitleMenuItem atLeastTitle;
     private CheckBox hideUserMessagesCheckbox;
-    private Label channelHeaderIcon, marketPrice;
+    private Label channelHeaderIcon, marketPrice, removeWithOffersFilter;
+    private HBox withOffersDisplayHint;
+    private ImageView defaultCloseIcon, activeCloseIcon;
 
     public BisqEasyOfferbookView(BisqEasyOfferbookModel model,
                                  BisqEasyOfferbookController controller,
@@ -113,6 +118,8 @@ protected void onViewAttached() {
         hideUserMessagesCheckbox.selectedProperty().bindBidirectional(getModel().getOfferOnly());
         marketSelectorSearchBox.textProperty().bindBidirectional(getModel().getMarketSelectorSearchText());
         marketPrice.textProperty().bind(getModel().getMarketPrice());
+        withOffersDisplayHint.visibleProperty().bind(getModel().getSelectedMarketsFilter().isEqualTo(Filters.Markets.WITH_OFFERS));
+        withOffersDisplayHint.managedProperty().bind(getModel().getSelectedMarketsFilter().isEqualTo(Filters.Markets.WITH_OFFERS));
 
         selectedModelItemPin = EasyBind.subscribe(getModel().getSelectedMarketChannelItem(), selected -> {
             tableView.getSelectionModel().select(selected);
@@ -150,6 +157,10 @@ protected void onViewAttached() {
         atLeastOneStar.setOnAction(e -> setPeerReputationFilter(atLeastOneStar));
 
         createOfferButton.setOnAction(e -> getController().onCreateOffer());
+
+        removeWithOffersFilter.setOnMouseClicked(e -> getModel().getSelectedMarketsFilter().set(Filters.Markets.ALL));
+        withOffersDisplayHint.setOnMouseEntered(e -> removeWithOffersFilter.setGraphic(activeCloseIcon));
+        withOffersDisplayHint.setOnMouseExited(e -> removeWithOffersFilter.setGraphic(defaultCloseIcon));
     }
 
     private void setOfferDirectionOrOwnerFilter(DropdownFilterMenuItem<?> filterMenuItem) {
@@ -167,6 +178,8 @@ protected void onViewDetached() {
         hideUserMessagesCheckbox.selectedProperty().unbindBidirectional(getModel().getOfferOnly());
         marketSelectorSearchBox.textProperty().unbindBidirectional(getModel().getMarketSelectorSearchText());
         marketPrice.textProperty().unbind();
+        withOffersDisplayHint.visibleProperty().unbind();
+        withOffersDisplayHint.managedProperty().unbind();
 
         selectedModelItemPin.unsubscribe();
         tableViewSelectionPin.unsubscribe();
@@ -192,6 +205,10 @@ protected void onViewDetached() {
         atLeastTwoStars.setOnAction(null);
         atLeastOneStar.setOnAction(null);
         createOfferButton.setOnAction(null);
+
+        removeWithOffersFilter.setOnMouseClicked(null);
+        withOffersDisplayHint.setOnMouseEntered(null);
+        withOffersDisplayHint.setOnMouseExited(null);
     }
 
     private BisqEasyOfferbookModel getModel() {
@@ -218,6 +235,12 @@ private void addMarketSelectionList() {
         subheader.setAlignment(Pos.CENTER);
         subheader.getStyleClass().add("market-selection-subheader");
 
+        setUpWithOffersFiltersDisplayHint();
+        HBox appliedFiltersSection = new HBox(withOffersDisplayHint);
+        appliedFiltersSection.setAlignment(Pos.CENTER_RIGHT);
+        appliedFiltersSection.getStyleClass().add("market-selection-applied-filters");
+        HBox.setHgrow(appliedFiltersSection, Priority.ALWAYS);
+
         tableView = new BisqTableView<>(getModel().getSortedMarketChannelItems());
         tableView.getStyleClass().add("market-selection-list");
         tableView.allowVerticalScrollbar();
@@ -226,13 +249,30 @@ private void addMarketSelectionList() {
         configTableView();
         VBox.setVgrow(tableView, Priority.ALWAYS);
 
-        marketSelectionList = new VBox(header, Layout.hLine(), subheader, tableView);
+        marketSelectionList = new VBox(header, Layout.hLine(), subheader, appliedFiltersSection, tableView);
         marketSelectionList.setPrefWidth(210);
         marketSelectionList.setMinWidth(210);
         marketSelectionList.setFillWidth(true);
         marketSelectionList.getStyleClass().add("chat-container");
     }
 
+    private void setUpWithOffersFiltersDisplayHint() {
+        Label withOffersLabel = new Label(Res.get("bisqEasy.offerbook.dropdownMenu.sortAndFilterMarkets.withOffers"));
+        withOffersLabel.getStyleClass().add("small-text");
+        removeWithOffersFilter = new Label();
+        defaultCloseIcon = ImageUtil.getImageViewById("close");
+        defaultCloseIcon.setScaleX(0.4);
+        defaultCloseIcon.setScaleY(0.4);
+        activeCloseIcon = ImageUtil.getImageViewById("close-white");
+        activeCloseIcon.setScaleX(0.4);
+        activeCloseIcon.setScaleY(0.4);
+        removeWithOffersFilter.setGraphic(defaultCloseIcon);
+        removeWithOffersFilter.setCursor(Cursor.HAND);
+        withOffersDisplayHint = new HBox(withOffersLabel, removeWithOffersFilter);
+        withOffersDisplayHint.setAlignment(Pos.CENTER);
+        withOffersDisplayHint.getStyleClass().add("filter-display-hint");
+    }
+
     private DropdownMenu createAndGetSortAndFilterMarketsMenu() {
         DropdownMenu dropdownMenu = new DropdownMenu("sort-grey", "sort-white", true);
         dropdownMenu.setTooltip(Res.get("bisqEasy.offerbook.dropdownMenu.sortAndFilterMarkets.tooltip"));

diff --git a/apps/desktop/desktop/src/main/resources/css/bisq_easy.css b/apps/desktop/desktop/src/main/resources/css/bisq_easy.css
@@ -217,6 +217,34 @@
     -fx-text-fill: -fx-light-text-color;
 }
 
+.market-selection-applied-filters {
+    -fx-pref-height: 35;
+    -fx-padding: 5;
+}
+
+.market-selection-applied-filters .filter-display-hint {
+    -fx-background-color: transparent;
+    -fx-border-color: -bisq-mid-grey-20;
+    -fx-border-width: 1;
+    -fx-border-radius: 4;
+    -fx-min-height: 20;
+    -fx-pref-height: 20;
+    -fx-max-height: 20;
+    -fx-padding: 0 0 0 5;
+}
+
+.market-selection-applied-filters .filter-display-hint:hover {
+    -fx-border-color: -bisq-white;
+}
+
+.market-selection-applied-filters .filter-display-hint:hover .label {
+    -fx-text-fill: -bisq-white;
+}
+
+.market-selection-applied-filters .filter-display-hint .label {
+    -fx-text-fill: -fx-mid-text-color;
+}
+
 .market-selection-list .column-header-background {
     -fx-max-height: 0;
     -fx-pref-height: 0;