Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve style of matching offers table in trade wizard #1868

Merged
merged 6 commits into from
Mar 23, 2024
Merged

Improve style of matching offers table in trade wizard #1868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1876c26
Refactor: improve styles
axpoems Mar 18, 2024
0c656ca
Improve matching offers table styles
axpoems Mar 18, 2024
1b934cd
Remove selection column and use the marker as reference instead
axpoems Mar 18, 2024
6606114
Show cursor hand when hovering in a row
axpoems Mar 18, 2024
ae58304
Use reputation cell to mark selected row
axpoems Mar 18, 2024
e3f5c30
Improve styles of matching offers table
axpoems Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 32 additions & 96 deletions .../desktop/main/content/bisq_easy/trade_wizard/select_offer/TradeWizardSelectOfferView.java
View file
Open in desktop
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
Open in desktop
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
Loading