Merge pull request #2962 from axpoems/use-popup-for-market-selection

More improvements in create offer wizard - inital step
bisq-network · Oct 28, 2024 · 89eb239 · 89eb239
2 parents 6543ae0 + 0ad7bef
commit 89eb239
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 62 deletions.
diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/components/controls/skins/BisqPopupSkin.java b/apps/desktop/desktop/src/main/java/bisq/desktop/components/controls/skins/BisqPopupSkin.java
@@ -14,6 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
  */
+
 package bisq.desktop.components.controls.skins;
 
 import bisq.desktop.components.controls.BisqPopup;
@@ -22,8 +23,8 @@
 import javafx.scene.control.Skin;
 import lombok.Getter;
 
+@Getter
 public class BisqPopupSkin implements Skin<BisqPopup> {
-    @Getter
     private final BisqPopup skinnable;
 
     public BisqPopupSkin(final BisqPopup popup) {

diff --git a/...nt/bisq_easy/trade_wizard/directionAndMarket/TradeWizardDirectionAndMarketController.java b/...nt/bisq_easy/trade_wizard/directionAndMarket/TradeWizardDirectionAndMarketController.java
@@ -197,10 +197,6 @@ void onMarketListItemClicked(TradeWizardDirectionAndMarketView.ListItem item) {
                 .ifPresent(bisqEasyOfferbookSelectionService::selectChannel);
     }
 
-    void updateNavigationButtonsVisibility(boolean shouldShow) {
-        navigationButtonsVisibleHandler.accept(shouldShow);
-    }
-
     private void setDirection(Direction direction) {
         model.getDirection().set(direction);
     }

diff --git a/.../content/bisq_easy/trade_wizard/directionAndMarket/TradeWizardDirectionAndMarketView.java b/.../content/bisq_easy/trade_wizard/directionAndMarket/TradeWizardDirectionAndMarketView.java
@@ -22,6 +22,7 @@
 import bisq.desktop.common.Transitions;
 import bisq.desktop.common.view.View;
 import bisq.desktop.components.containers.Spacer;
+import bisq.desktop.components.controls.BisqPopup;
 import bisq.desktop.components.controls.BisqTooltip;
 import bisq.desktop.components.controls.SearchBox;
 import bisq.desktop.components.table.BisqTableColumn;
@@ -30,6 +31,7 @@
 import bisq.desktop.main.content.components.MarketImageComposition;
 import bisq.i18n.Res;
 import bisq.offer.Direction;
+import javafx.geometry.Bounds;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.CacheHint;
@@ -44,6 +46,7 @@
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.TextAlignment;
+import javafx.stage.PopupWindow;
 import javafx.util.Callback;
 import lombok.EqualsAndHashCode;
 import lombok.Getter;
@@ -62,7 +65,7 @@ public class TradeWizardDirectionAndMarketView extends View<StackPane, TradeWiza
     private final VBox content;
     private final BisqTableView<TradeWizardDirectionAndMarketView.ListItem> tableView;
     private final SearchBox searchBox;
-    private final StackPane tableViewWithSearchBox;
+    private final BisqPopup marketSelectionPopup;
     private Subscription directionSubscription, showReputationInfoPin, marketPin;
     private Button withoutReputationButton, backToBuyButton;
     private Button gainReputationButton;
@@ -82,26 +85,27 @@ public TradeWizardDirectionAndMarketView(TradeWizardDirectionAndMarketModel mode
 
         searchBox = new SearchBox();
         searchBox.setPromptText(Res.get("bisqEasy.tradeWizard.market.columns.name").toUpperCase());
-        searchBox.setMinWidth(140);
-        searchBox.setMaxWidth(140);
+        searchBox.setMinWidth(170);
+        searchBox.setMaxWidth(170);
         searchBox.getStyleClass().add("bisq-easy-trade-wizard-market-search");
 
         tableView = new BisqTableView<>(model.getSortedList());
-        tableView.getStyleClass().add("bisq-easy-trade-wizard-market");
-        double tableHeight = 250;
+        double tableHeight = 312;
         double tableWidth = 600;
         tableView.setPrefSize(tableWidth, tableHeight);
-        tableView.setFixedCellSize(50);
+        tableView.setFixedCellSize(55);
         configTableView();
 
-        StackPane.setMargin(searchBox, new Insets(5, 0, 0, 15));
-        tableViewWithSearchBox = new StackPane(tableView, searchBox);
+        StackPane.setMargin(searchBox, new Insets(1, 0, 0, 15));
+        StackPane tableViewWithSearchBox = new StackPane(tableView, searchBox);
         tableViewWithSearchBox.setAlignment(Pos.TOP_LEFT);
         tableViewWithSearchBox.setPrefSize(tableWidth, tableHeight);
         tableViewWithSearchBox.setMaxWidth(tableWidth);
         tableViewWithSearchBox.setMaxHeight(tableHeight);
         tableViewWithSearchBox.getStyleClass().add("markets-table-container");
-        updateMarketSelectionTableVisibility(false);
+        marketSelectionPopup = new BisqPopup();
+        marketSelectionPopup.setContentNode(tableViewWithSearchBox);
+        marketSelectionPopup.setAnchorLocation(PopupWindow.AnchorLocation.WINDOW_TOP_RIGHT);
 
         buyButton = createAndGetDirectionButton(Res.get("bisqEasy.tradeWizard.directionAndMarket.buy"));
         sellButton = createAndGetDirectionButton(Res.get("bisqEasy.tradeWizard.directionAndMarket.sell"));
@@ -116,9 +120,9 @@ public TradeWizardDirectionAndMarketView(TradeWizardDirectionAndMarketModel mode
         setupReputationInfo();
 
         StackPane.setMargin(reputationInfo, new Insets(-TradeWizardView.TOP_PANE_HEIGHT, 0, 0, 0));
-        StackPane.setMargin(tableViewWithSearchBox, new Insets(130, 0, 0, 0));
-        root.getChildren().addAll(content, tableViewWithSearchBox, reputationInfo);
+        root.getChildren().addAll(content, reputationInfo);
         root.setAlignment(Pos.CENTER);
+        root.getStyleClass().add("bisq-easy-trade-wizard-direction-step");
     }
 
     @Override
@@ -130,18 +134,14 @@ protected void onViewAttached() {
         // not when we set the selected item by code.
         tableView.setOnMouseClicked(e -> controller.onMarketListItemClicked(tableView.getSelectionModel().getSelectedItem()));
         quoteCurrencyLabel.setOnMouseClicked(e -> {
-            updateMarketSelectionTableVisibility(!tableViewWithSearchBox.isVisible());
-            if (tableViewWithSearchBox.isVisible()) {
-                e.consume();
+            if (!marketSelectionPopup.isShowing()) {
+                Bounds rootBounds = root.localToScreen(root.getBoundsInLocal());
+                Bounds labelBounds = quoteCurrencyLabel.localToScreen(quoteCurrencyLabel.getBoundsInLocal());
+                marketSelectionPopup.show(quoteCurrencyLabel, rootBounds.getMaxX() - 115, labelBounds.getMaxY() + 15);
+            } else {
+                marketSelectionPopup.hide();
             }
         });
-        // TODO: Add keyEvent handler in root for ESC
-        root.setOnMouseClicked(e -> {
-            if (tableViewWithSearchBox.isVisible()) {
-                updateMarketSelectionTableVisibility(false);
-            }
-        });
-        updateMarketSelectionTableVisibility(false);
 
         searchBox.textProperty().bindBidirectional(model.getSearchText());
 
@@ -190,7 +190,6 @@ protected void onViewDetached() {
         searchBox.textProperty().unbindBidirectional(model.getSearchText());
         tableView.setOnMouseClicked(null);
         quoteCurrencyLabel.setOnMouseClicked(null);
-        root.setOnMouseClicked(null);
 
         if (model.getShowReputationInfo().get()) {
             Transitions.removeEffect(content);
@@ -208,12 +207,6 @@ protected void onViewDetached() {
         marketPin.unsubscribe();
     }
 
-    private void updateMarketSelectionTableVisibility(boolean shouldShow) {
-        tableViewWithSearchBox.setVisible(shouldShow);
-        tableViewWithSearchBox.setManaged(shouldShow);
-        controller.updateNavigationButtonsVisibility(!shouldShow);
-    }
-
     private Button createAndGetDirectionButton(String title) {
         Button button = new Button(title);
         button.getStyleClass().add("card-button");
@@ -272,19 +265,19 @@ private void configTableView() {
         tableView.getColumns().add(tableView.getSelectionMarkerColumn());
         tableView.getColumns().add(new BisqTableColumn.Builder<TradeWizardDirectionAndMarketView.ListItem>()
                 .left()
-                .minWidth(180)
+                .minWidth(200)
                 .comparator(Comparator.comparing(TradeWizardDirectionAndMarketView.ListItem::getQuoteCurrencyDisplayName))
                 .setCellFactory(getNameCellFactory())
                 .build());
         tableView.getColumns().add(new BisqTableColumn.Builder<TradeWizardDirectionAndMarketView.ListItem>()
                 .title(Res.get("bisqEasy.tradeWizard.market.columns.numOffers"))
-                .minWidth(60)
+                .minWidth(80)
                 .valueSupplier(TradeWizardDirectionAndMarketView.ListItem::getNumOffers)
                 .comparator(Comparator.comparing(TradeWizardDirectionAndMarketView.ListItem::getNumOffersAsInteger))
                 .build());
         tableView.getColumns().add(new BisqTableColumn.Builder<TradeWizardDirectionAndMarketView.ListItem>()
                 .title(Res.get("bisqEasy.tradeWizard.market.columns.numPeers"))
-                .minWidth(60)
+                .minWidth(80)
                 .valueSupplier(TradeWizardDirectionAndMarketView.ListItem::getNumUsers)
                 .comparator(Comparator.comparing(TradeWizardDirectionAndMarketView.ListItem::getNumUsersAsInteger))
                 .build());
@@ -299,7 +292,6 @@ TableCell<TradeWizardDirectionAndMarketView.ListItem, TradeWizardDirectionAndMar
             {
                 label.setPadding(new Insets(0, 0, 0, 10));
                 label.setGraphicTextGap(8);
-                label.getStyleClass().add("bisq-text-8");
             }
 
             @Override

diff --git a/apps/desktop/desktop/src/main/resources/css/bisq_easy.css b/apps/desktop/desktop/src/main/resources/css/bisq_easy.css
@@ -1068,46 +1068,29 @@
  ******************************************************************************/
 
 .markets-table-container {
-    -fx-background-color: -bisq-dark-grey-20;
-    -fx-background-radius: 4;
-    -fx-border-color: -bisq-dark-grey-20;
-    -fx-border-radius: 4;
-    -fx-padding: 4;
 }
 
-.bisq-easy-trade-wizard-market.table-view.table-view {
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-}
-
-.bisq-easy-trade-wizard-market.table-view.table-view .column-header {
-    -fx-pref-height: 40px;
+.bisq-easy-trade-wizard-direction-step .bisq-popup {
+    -fx-font-size: 1.25em;
+    -fx-background-radius: 6;
+    -fx-padding: 4;
 }
 
-.bisq-easy-trade-wizard-market.table-view.table-view .column-header .label {
-    -fx-alignment: center;
+.bisq-easy-trade-wizard-direction-step .bisq-popup .table-view {
+    -fx-font-size: 0.8em;
 }
 
-.bisq-easy-trade-wizard-market.table-view.table-view .table-row-cell:hover {
+.bisq-easy-trade-wizard-direction-step .bisq-popup .table-view .table-row-cell:hover {
     -fx-cursor: hand;
 }
 
-.bisq-easy-trade-wizard-market.table-view.table-view .table-row-cell {
-    -fx-pref-height: 55px;
-    -fx-border-width: 0;
-}
-
-.bisq-easy-trade-wizard-market.table-view.table-view .table-cell {
-    -fx-padding: 0;
-}
-
 .bisq-easy-trade-wizard-market-search {
     -fx-background-color: -bisq-dark-grey-20;
 }
 
 .bisq-easy-trade-wizard-market-search .search-text-field {
     -fx-font-family: "IBM Plex Sans Light";
-    -fx-font-size: 0.9em;
+    -fx-font-size: 0.7em;
 }
 
 .bisq-easy-trade-wizard-quote-currency {