From 86e5f2d9df5ed953a4b87e4124e6f54d8929911f Mon Sep 17 00:00:00 2001 From: axpoems <145597137+axpoems@users.noreply.github.com> Date: Thu, 7 Mar 2024 20:21:27 +0100 Subject: [PATCH] Add display hint for applied market filters Resolves #1740 --- .../offerbook/BisqEasyOfferbookView.java | 44 ++++++++++++++++++- .../src/main/resources/css/bisq_easy.css | 28 ++++++++++++ 2 files changed, 70 insertions(+), 2 deletions(-) diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookView.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookView.java index 62fdfc904d..2d9aed301b 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookView.java +++ b/apps/desktop/desktop/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 { 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 index ad9e2a53e8..6c3d8b88fa 100644 --- 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;