Skip to content

Commit

Permalink
Merge pull request #1868 from axpoems/improve-matching-offers-table
Browse files Browse the repository at this point in the history 
Improve style of matching offers table in trade wizard
  • Loading branch information
@alvasw
alvasw authored Mar 23, 2024
2 parents e22d69a + e3f5c30 commit a386acf
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 129 deletions.
128 changes: 32 additions & 96 deletions .../desktop/main/content/bisq_easy/trade_wizard/select_offer/TradeWizardSelectOfferView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@

@Slf4j
class TradeWizardSelectOfferView extends View<VBox, TradeWizardSelectOfferModel, TradeWizardSelectOfferController> {
private final static int TABLE_WIDTH = 800;
private final HBox noMatchingOffersBox;
private static final int TABLE_WIDTH = 800;

private final HBox noMatchingOffersBox;
private final BisqTableView<ListItem> tableView;
private final Label headlineLabel, subtitleLabel;
private Button goBackButton, browseOfferbookButton;
Expand All @@ -85,14 +85,16 @@ class TradeWizardSelectOfferView extends View<VBox, TradeWizardSelectOfferModel,
tableView = new BisqTableView<>(model.getSortedList());
tableView.getStyleClass().add("bisq-easy-trade-wizard-select-offer");
tableView.setMinWidth(TABLE_WIDTH);
tableView.setMaxWidth(tableView.getMinWidth());
// fits 4 rows
tableView.setMaxHeight(262); // 4 * 55 (row height) + 40 (header height) + 2 (border)
tableView.setMaxHeight(260); // 4 * 55 (row height) + 40 (header height)

VBox tableContainer = new VBox(tableView);
tableContainer.getStyleClass().add("matching-offers-table-container");

noMatchingOffersBox = new HBox(25);

VBox.setMargin(noMatchingOffersBox, new Insets(10, 0, 0, 0));
root.getChildren().addAll(Spacer.fillVBox(), headlineLabel, subtitleLabel, tableView, noMatchingOffersBox, Spacer.fillVBox());
root.getChildren().addAll(Spacer.fillVBox(), headlineLabel, subtitleLabel, tableContainer, noMatchingOffersBox, Spacer.fillVBox());
}

@Override
Expand Down Expand Up @@ -169,10 +171,11 @@ private void maybeConfigTableView() {
return;
}

// Selection marker
tableView.getColumns().add(tableView.getSelectionMarkerColumn());

// Maker
String peer = model.getDirection() == Direction.BUY ?
Res.get("offer.seller") :
Res.get("offer.buyer");
String peer = model.getDirection() == Direction.BUY ? Res.get("offer.seller") : Res.get("offer.buyer");
tableView.getColumns().add(new BisqTableColumn.Builder<ListItem>()
.title(peer)
.left()
Expand Down Expand Up @@ -203,26 +206,19 @@ private void maybeConfigTableView() {
}

// BTC amount
String baseAmountTitle = model.getDirection().isBuy() ?
Res.get("bisqEasy.tradeWizard.review.table.baseAmount.buyer") :
Res.get("bisqEasy.tradeWizard.review.table.baseAmount.seller");
String baseAmountTitle = model.getDirection().isBuy()
? Res.get("bisqEasy.tradeWizard.review.table.baseAmount.buyer")
: Res.get("bisqEasy.tradeWizard.review.table.baseAmount.seller");
tableView.getColumns().add(new BisqTableColumn.Builder<ListItem>()
.title(baseAmountTitle)
.minWidth(160)
.valueSupplier(ListItem::getBaseAmountDisplayString)
.comparator(Comparator.comparing(ListItem::getBaseAmountAsLong))
.build());

tableView.getColumns().add(new BisqTableColumn.Builder<ListItem>()
.minWidth(170)
.isSortable(false)
.setCellFactory(getSelectButtonCellFactory())
.right()
.build());
isTableViewConfigured = true;
}


private Callback<TableColumn<ListItem, ListItem>, TableCell<ListItem, ListItem>> getMakerCellFactory() {
return new Callback<>() {
@Override
Expand All @@ -234,12 +230,12 @@ public TableCell<ListItem, ListItem> call(TableColumn<ListItem, ListItem> column

{
userName.setId("chat-user-name");
int size = 20;
int size = 30;
catIcon.setFitWidth(size);
catIcon.setFitHeight(size);
StackPane catIconWithRing = ImageUtil.addRingToNode(catIcon, size, 1.5, "-bisq-dark-grey-50");
hBox = new HBox(10, catIconWithRing, userName);
hBox.setAlignment(Pos.CENTER_LEFT);
hBox.setAlignment(Pos.CENTER);
}

@Override
Expand All @@ -262,19 +258,27 @@ public void updateItem(final ListItem item, boolean empty) {

private Callback<TableColumn<ListItem, ListItem>, TableCell<ListItem, ListItem>> getReputationCellFactory() {
return new Callback<>() {


@Override
public TableCell<ListItem, ListItem> call(TableColumn<ListItem, ListItem> column) {
return new TableCell<>() {
private final ReputationScoreDisplay reputationScoreDisplay = new ReputationScoreDisplay();
private Subscription selectedItemPin;
private TableRow<ListItem> tableRow;

{
reputationScoreDisplay.setAlignment(Pos.CENTER);
}

@Override
public void updateItem(final ListItem item, boolean empty) {
super.updateItem(item, empty);

if (item != null && !empty) {
getTableRow().setOnMouseClicked(e -> reputationScoreDisplay.useWhiteAcceptStar());
tableRow = getTableRow();
tableRow.setOnMouseClicked(e -> {
reputationScoreDisplay.useWhiteAcceptStar();
controller.onSelectRow(item);
});

selectedItemPin = EasyBind.subscribe(tableView.getSelectionModel().selectedItemProperty(),
selectedItem -> {
Expand All @@ -288,89 +292,21 @@ public void updateItem(final ListItem item, boolean empty) {
reputationScoreDisplay.setReputationScore(item.getReputationScore());
setGraphic(reputationScoreDisplay);
} else {
setGraphic(null);
if (tableRow != null) {
tableRow.setOnMouseClicked(null);
tableRow = null;
}
if (selectedItemPin != null) {
selectedItemPin.unsubscribe();
}
setGraphic(null);
}
}
};
}
};
}

private Callback<TableColumn<ListItem, ListItem>, TableCell<ListItem, ListItem>> getSelectButtonCellFactory() {
return column -> new TableCell<>() {

private final Button button = new Button(Res.get("bisqEasy.tradeWizard.selectOffer.table.select"));
private TableRow<ListItem> tableRow;
private Subscription selectedItemPin;

{
button.setMinWidth(160);
button.setMaxWidth(160);
}

@Override
public void updateItem(final ListItem item, boolean empty) {
super.updateItem(item, empty);

if (item != null && !empty) {
button.setOnAction(e -> {
tableView.getSelectionModel().select(item);
controller.onSelect(item);
});

tableRow = getTableRow();
tableRow.setOnMouseEntered(e -> {
if (!tableRow.isSelected()) {
button.setVisible(true);
button.getStyleClass().remove("white-button");
button.getStyleClass().add("outlined-button");
}
});
tableRow.setOnMouseExited(e -> {
button.getStyleClass().remove("outlined-button");
if (!tableRow.isSelected()) {
button.setVisible(tableView.getSelectionModel().getSelectedItem() == null);
button.getStyleClass().remove("white-button");
}
});
tableRow.setOnMouseClicked(e -> controller.onSelectRow(item));

selectedItemPin = EasyBind.subscribe(tableView.getSelectionModel().selectedItemProperty(),
selectedItem -> {
if (item.equals(selectedItem)) {
button.setVisible(true);
button.getStyleClass().remove("outlined-button");
button.getStyleClass().add("white-button");
button.setText(Res.get("bisqEasy.tradeWizard.selectOffer.table.reviewTakeOffer"));
} else {
button.setVisible(selectedItem == null);
button.getStyleClass().remove("white-button");
button.setText(Res.get("bisqEasy.tradeWizard.selectOffer.table.select"));
}
});

setGraphic(button);
} else {
button.setOnAction(null);
if (tableRow != null) {
tableRow.setOnMouseEntered(null);
tableRow.setOnMouseExited(null);
tableRow.setOnMouseClicked(null);
tableRow = null;
}
if (selectedItemPin != null) {
selectedItemPin.unsubscribe();
selectedItemPin = null;
}
setGraphic(null);
}
}
};
}

@ToString
@EqualsAndHashCode
@Getter
Expand Down
52 changes: 19 additions & 33 deletions apps/desktop/desktop/src/main/resources/css/bisq_easy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,53 +725,39 @@


/*******************************************************************************
* TradeWizardTakeOfferView.tableView *
* TradeWizardTakeOfferView.tableView *
******************************************************************************/

.bisq-easy-trade-wizard-select-trade.table-view {
-fx-font-size: 1.15em;
}

.bisq-easy-trade-wizard-select-offer.table-view .column-header {
-fx-pref-height: 40px;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell {
-fx-pref-height: 55px;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell .table-cell {
-fx-background-color: -bisq-dark-grey-40;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:hover .table-cell {
-fx-background-color: -bisq-darker-grey;
.matching-offers-table-container {
-fx-background-color: -bisq-dark-grey-20;
-fx-border-width: 0 0 5px 0;
-fx-border-color: -bisq-dark-grey-20;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:selected .table-cell {
-fx-background-color: -bisq2-green;
.bisq-easy-trade-wizard-select-offer.table-view {
-fx-background-insets: 0;
-fx-padding: 0;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:empty {
-fx-border-color: derive(-bisq-dark-grey-40, -30%);
.bisq-easy-trade-wizard-select-offer.table-view .column-header {
-fx-pref-height: 40px;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:empty .table-cell {
-fx-background-color: derive(-bisq-dark-grey-40, -15%);
.bisq-easy-trade-wizard-select-offer.table-view .column-header .label {
-fx-alignment: center;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:empty:hover .table-cell {
-fx-background-color: derive(-bisq-dark-grey-40, -15%);
.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:hover {
-fx-cursor: hand;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:selected .button.white-button .text {
-fx-fill: -bisq-black !important;
-fx-font-family: "IBM Plex Sans Medium" !important;
.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell {
-fx-pref-height: 55px;
-fx-border-width: 0;
}

.bisq-easy-trade-wizard-select-offer.table-view .table-row-cell:hover .button.outlined-button .text {
-fx-fill: -bisq2-green;
-fx-font-family: "IBM Plex Sans Medium";
.bisq-easy-trade-wizard-select-offer.table-view .table-cell {
-fx-padding: 0;
}

/* the text property from list view need to set to apply the color to the button label */
Expand Down

0 comments on commit a386acf

Please sign in to comment.