Improve styles

bisq-network · Oct 27, 2024 · 0ad7bef · 0ad7bef
1 parent 04f8b92
commit 0ad7bef
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 38 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/.../content/bisq_easy/trade_wizard/directionAndMarket/TradeWizardDirectionAndMarketView.java b/.../content/bisq_easy/trade_wizard/directionAndMarket/TradeWizardDirectionAndMarketView.java
@@ -85,19 +85,18 @@ 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 = 325;
+        double tableHeight = 312;
         double tableWidth = 600;
         tableView.setPrefSize(tableWidth, tableHeight);
         tableView.setFixedCellSize(55);
         configTableView();
 
-        StackPane.setMargin(searchBox, new Insets(5, 0, 0, 15));
+        StackPane.setMargin(searchBox, new Insets(1, 0, 0, 15));
         StackPane tableViewWithSearchBox = new StackPane(tableView, searchBox);
         tableViewWithSearchBox.setAlignment(Pos.TOP_LEFT);
         tableViewWithSearchBox.setPrefSize(tableWidth, tableHeight);
@@ -123,6 +122,7 @@ public TradeWizardDirectionAndMarketView(TradeWizardDirectionAndMarketModel mode
         StackPane.setMargin(reputationInfo, new Insets(-TradeWizardView.TOP_PANE_HEIGHT, 0, 0, 0));
         root.getChildren().addAll(content, reputationInfo);
         root.setAlignment(Pos.CENTER);
+        root.getStyleClass().add("bisq-easy-trade-wizard-direction-step");
     }
 
     @Override
@@ -134,9 +134,13 @@ protected void onViewAttached() {
         // not when we set the selected item by code.
         tableView.setOnMouseClicked(e -> controller.onMarketListItemClicked(tableView.getSelectionModel().getSelectedItem()));
         quoteCurrencyLabel.setOnMouseClicked(e -> {
-            Bounds rootBounds = root.localToScreen(root.getBoundsInLocal());
-            Bounds labelBounds = quoteCurrencyLabel.localToScreen(quoteCurrencyLabel.getBoundsInLocal());
-            marketSelectionPopup.show(quoteCurrencyLabel, rootBounds.getMaxX() - 120, labelBounds.getMaxY() + 15);
+            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();
+            }
         });
 
         searchBox.textProperty().bindBidirectional(model.getSearchText());
@@ -261,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());
@@ -288,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 {