Add info icon for popups, improve wording for buy/sell offer book/markets

gui/src/main/java/io/bitsquare/gui/components/HyperlinkWithIcon.java

@@ -4,29 +4,50 @@ import de.jensd.fx.fontawesome.AwesomeDude;
 import de.jensd.fx.fontawesome.AwesomeIcon;
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
+import javafx.geometry.Insets;
 import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
 import javafx.scene.control.Tooltip;
-import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.Priority;
 
-public class HyperlinkWithIcon extends AnchorPane {
+public class HyperlinkWithIcon extends HBox {
     private final Hyperlink hyperlink;
     private final Label openLinkIcon;
 
     public HyperlinkWithIcon(String text, AwesomeIcon awesomeIcon) {
+        this(text, awesomeIcon, false);
+    }
+
+    public HyperlinkWithIcon(String text, boolean isCentered) {
+        this(text, AwesomeIcon.INFO_SIGN, isCentered);
+    }
+
+    public HyperlinkWithIcon(String text, AwesomeIcon awesomeIcon, boolean isCentered) {
+        setSpacing(5);
         hyperlink = new Hyperlink(text);
 
         openLinkIcon = new Label();
-        openLinkIcon.setLayoutY(3);
         openLinkIcon.getStyleClass().add("external-link-icon");
+
         AwesomeDude.setIcon(openLinkIcon, awesomeIcon);
+        openLinkIcon.setMinWidth(20);
+        HBox.setMargin(openLinkIcon, new Insets(awesomeIcon == AwesomeIcon.INFO_SIGN ? 2 : 3, 0, 0, 0));
 
-        AnchorPane.setLeftAnchor(hyperlink, 0.0);
+        if (isCentered) {
-        AnchorPane.setRightAnchor(hyperlink, 15.0);
+            Pane spacer1 = new Pane();
-        AnchorPane.setRightAnchor(openLinkIcon, 4.0);
+            spacer1.setMaxWidth(Double.MAX_VALUE);
-        AnchorPane.setTopAnchor(openLinkIcon, awesomeIcon == AwesomeIcon.INFO_SIGN ? 2.0 : 3.0);
+            HBox.setHgrow(spacer1, Priority.ALWAYS);
 
-        getChildren().addAll(hyperlink, openLinkIcon);
+            Pane spacer2 = new Pane();
+            spacer2.setMaxWidth(Double.MAX_VALUE);
+            HBox.setHgrow(spacer2, Priority.ALWAYS);
+
+            getChildren().addAll(spacer1, hyperlink, openLinkIcon, spacer2);
+        } else {
+            getChildren().addAll(hyperlink, openLinkIcon);
+        }
     }
 
     public void setOnAction(EventHandler<ActionEvent> handler) {
@@ -36,6 +57,7 @@ public class HyperlinkWithIcon extends AnchorPane {
 
     public void setTooltip(Tooltip tooltip) {
         hyperlink.setTooltip(tooltip);
+        // TODO does not use the right style
         openLinkIcon.setTooltip(tooltip);
     }
 }

gui/src/main/java/io/bitsquare/gui/main/disputes/trader/TraderDisputeView.java

@@ -27,6 +27,7 @@ import io.bitsquare.common.UserThread;
 import io.bitsquare.common.crypto.KeyRing;
 import io.bitsquare.gui.common.view.ActivatableView;
 import io.bitsquare.gui.common.view.FxmlView;
+import io.bitsquare.gui.components.HyperlinkWithIcon;
 import io.bitsquare.gui.components.TableGroupHeadline;
 import io.bitsquare.gui.main.disputes.DisputeSummaryPopup;
 import io.bitsquare.gui.popups.ContractPopup;
@@ -588,26 +589,27 @@ public class TraderDisputeView extends ActivatableView<VBox, Void> {
                     @Override
                     public TableCell<Dispute, Dispute> call(TableColumn<Dispute, Dispute> column) {
                         return new TableCell<Dispute, Dispute>() {
-                            private Hyperlink hyperlink;
+                            private HyperlinkWithIcon field;
 
                             @Override
                             public void updateItem(final Dispute item, boolean empty) {
                                 super.updateItem(item, empty);
 
                                 if (item != null && !empty) {
+                                    field = new HyperlinkWithIcon(item.getShortTradeId(), true);
                                     Optional<Trade> tradeOptional = tradeManager.getTradeById(item.getTradeId());
-                                    hyperlink = new Hyperlink(item.getShortTradeId());
                                     if (tradeOptional.isPresent()) {
-                                        hyperlink.setMouseTransparent(false);
+                                        field.setMouseTransparent(false);
-                                        Tooltip.install(hyperlink, new Tooltip(item.getShortTradeId()));
+                                        field.setTooltip(new Tooltip("Open popup for details"));
-                                        hyperlink.setOnAction(event -> tradeDetailsPopup.show(tradeOptional.get()));
+                                        field.setOnAction(event -> tradeDetailsPopup.show(tradeOptional.get()));
                                     } else {
-                                        hyperlink.setMouseTransparent(true);
+                                        field.setMouseTransparent(true);
                                     }
-                                    setGraphic(hyperlink);
+                                    setGraphic(field);
                                 } else {
                                     setGraphic(null);
-                                    setId(null);
+                                    if (field != null)
+                                        field.setOnAction(null);
                                 }
                             }
                         };

gui/src/main/java/io/bitsquare/gui/main/markets/charts/MarketsChartsView.java

@@ -19,12 +19,14 @@ package io.bitsquare.gui.main.markets.charts;
 
 import io.bitsquare.common.UserThread;
 import io.bitsquare.common.util.Tuple2;
+import io.bitsquare.gui.Navigation;
 import io.bitsquare.gui.common.view.ActivatableViewAndModel;
 import io.bitsquare.gui.common.view.FxmlView;
-import io.bitsquare.gui.main.markets.statistics.MarketStatisticItem;
+import io.bitsquare.gui.main.MainView;
+import io.bitsquare.gui.main.offer.BuyOfferView;
+import io.bitsquare.gui.main.offer.SellOfferView;
 import io.bitsquare.gui.main.offer.offerbook.OfferBookListItem;
 import io.bitsquare.gui.util.BSFormatter;
-import io.bitsquare.locale.CurrencyUtil;
 import io.bitsquare.locale.TradeCurrency;
 import io.bitsquare.trade.offer.Offer;
 import javafx.beans.property.ReadOnlyObjectWrapper;
@@ -37,6 +39,7 @@ import javafx.scene.chart.AreaChart;
 import javafx.scene.chart.NumberAxis;
 import javafx.scene.chart.XYChart;
 import javafx.scene.control.*;
+import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import javafx.util.Callback;
@@ -52,6 +55,7 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
     private NumberAxis xAxis, yAxis;
     XYChart.Series seriesBuy, seriesSell;
     private final ListChangeListener<OfferBookListItem> changeListener;
+    private Navigation navigation;
     private final BSFormatter formatter;
     private TableView<Offer> buyOfferTableView;
     private TableView<Offer> sellOfferTableView;
@@ -67,8 +71,9 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
     ///////////////////////////////////////////////////////////////////////////////////////////
 
     @Inject
-    public MarketsChartsView(MarketsChartsViewModel model, BSFormatter formatter) {
+    public MarketsChartsView(MarketsChartsViewModel model, Navigation navigation, BSFormatter formatter) {
         super(model);
+        this.navigation = navigation;
         this.formatter = formatter;
 
         changeListener = c -> updateChartData();
@@ -148,7 +153,7 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
 
 
     private Tuple2<TableView<Offer>, VBox> getOfferTable(Offer.Direction direction) {
-        TableView<Offer> tableView = new TableView();
+        TableView<Offer> tableView = new TableView<>();
 
         // price
         TableColumn<Offer, Offer> priceColumn = new TableColumn<>();
@@ -156,11 +161,9 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
         priceColumn.setMinWidth(120);
         priceColumn.setCellValueFactory((offer) -> new ReadOnlyObjectWrapper<>(offer.getValue()));
         priceColumn.setCellFactory(
-                new Callback<TableColumn<Offer, Offer>, TableCell<Offer,
+                new Callback<TableColumn<Offer, Offer>, TableCell<Offer, Offer>>() {
-                        Offer>>() {
                     @Override
-                    public TableCell<Offer, Offer> call(
+                    public TableCell<Offer, Offer> call(TableColumn<Offer, Offer> column) {
-                            TableColumn<Offer, Offer> column) {
                         return new TableCell<Offer, Offer>() {
                             @Override
                             public void updateItem(final Offer item, boolean empty) {
@@ -181,11 +184,9 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
         amountColumn.setMinWidth(120);
         amountColumn.setCellValueFactory((offer) -> new ReadOnlyObjectWrapper<>(offer.getValue()));
         amountColumn.setCellFactory(
-                new Callback<TableColumn<Offer, Offer>, TableCell<Offer,
+                new Callback<TableColumn<Offer, Offer>, TableCell<Offer, Offer>>() {
-                        Offer>>() {
                     @Override
-                    public TableCell<Offer, Offer> call(
+                    public TableCell<Offer, Offer> call(TableColumn<Offer, Offer> column) {
-                            TableColumn<Offer, Offer> column) {
                         return new TableCell<Offer, Offer>() {
                             @Override
                             public void updateItem(final Offer item, boolean empty) {
@@ -206,11 +207,9 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
         volumeColumn.textProperty().bind(volumeColumnLabel);
         volumeColumn.setCellValueFactory((offer) -> new ReadOnlyObjectWrapper<>(offer.getValue()));
         volumeColumn.setCellFactory(
-                new Callback<TableColumn<Offer, Offer>, TableCell<Offer,
+                new Callback<TableColumn<Offer, Offer>, TableCell<Offer, Offer>>() {
-                        Offer>>() {
                     @Override
-                    public TableCell<Offer, Offer> call(
+                    public TableCell<Offer, Offer> call(TableColumn<Offer, Offer> column) {
-                            TableColumn<Offer, Offer> column) {
                         return new TableCell<Offer, Offer>() {
                             @Override
                             public void updateItem(final Offer item, boolean empty) {
@@ -225,12 +224,54 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
                 });
         tableView.getColumns().add(volumeColumn);
 
+        // select
+        TableColumn<Offer, Offer> selectColumn = new TableColumn<>("I want to:");
+        selectColumn.setMinWidth(100);
+        selectColumn.setCellValueFactory((offer) -> new ReadOnlyObjectWrapper<>(offer.getValue()));
+        selectColumn.setCellFactory(
+                new Callback<TableColumn<Offer, Offer>, TableCell<Offer, Offer>>() {
+                    @Override
+                    public TableCell<Offer, Offer> call(TableColumn<Offer, Offer> column) {
+                        return new TableCell<Offer, Offer>() {
+                            final Button button = new Button();
+                            final ImageView iconView = new ImageView();
+
+                            {
+                                button.setGraphic(iconView);
+                                button.setMinWidth(70);
+                            }
+
+                            @Override
+                            public void updateItem(final Offer item, boolean empty) {
+                                super.updateItem(item, empty);
+                                if (item != null && !empty) {
+                                    boolean isSellOffer = item.getDirection() == Offer.Direction.SELL;
+                                    iconView.setId(isSellOffer ? "image-buy" : "image-sell");
+                                    button.setText(isSellOffer ? "Buy" : "Sell");
+                                    button.setOnAction(e -> {
+                                        if (isSellOffer)
+                                            navigation.navigateTo(MainView.class, BuyOfferView.class);
+                                        else
+                                            navigation.navigateTo(MainView.class, SellOfferView.class);
+                                    });
+                                    setGraphic(button);
+                                } else {
+                                    setGraphic(null);
+                                    if (button != null)
+                                        button.setOnAction(null);
+                                }
+                            }
+                        };
+                    }
+                });
+        tableView.getColumns().add(selectColumn);
+
         tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
         Label placeholder = new Label("Currently there are no offers available");
         placeholder.setWrapText(true);
         tableView.setPlaceholder(placeholder);
 
-        Label titleLabel = new Label(direction.equals(Offer.Direction.BUY) ? "Offers for buy bitcoin (bid)" : "Offers for sell bitcoin (ask)");
+        Label titleLabel = new Label(direction.equals(Offer.Direction.BUY) ? "Buy-bitcoin offers (bid)" : "Sell-bitcoin offers (ask)");
         titleLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 16; -fx-alignment: center");
         UserThread.execute(() -> titleLabel.prefWidthProperty().bind(tableView.widthProperty()));
 
@@ -256,10 +297,10 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
         yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis, "", ""));
 
         seriesBuy = new XYChart.Series();
-        seriesBuy.setName("Offers for  buy bitcoin  ");
+        seriesBuy.setName("Buy-bitcoin offers  ");
 
         seriesSell = new XYChart.Series();
-        seriesSell.setName("Offers for sell bitcoin");
+        seriesSell.setName("Sell-bitcoin offers");
 
         areaChart = new AreaChart<>(xAxis, yAxis);
         areaChart.setAnimated(false);
@@ -277,119 +318,4 @@ public class MarketsChartsView extends ActivatableViewAndModel<VBox, MarketsChar
         seriesBuy.getData().addAll(model.getBuyData());
         seriesSell.getData().addAll(model.getSellData());
     }
-
-
-    private TableColumn<MarketStatisticItem, MarketStatisticItem> getCurrencyColumn() {
-        TableColumn<MarketStatisticItem, MarketStatisticItem> column = new TableColumn<MarketStatisticItem, MarketStatisticItem>("Currency") {
-            {
-                setMinWidth(100);
-            }
-        };
-        column.setCellValueFactory((item) -> new ReadOnlyObjectWrapper<>(item.getValue()));
-        column.setCellFactory(
-                new Callback<TableColumn<MarketStatisticItem, MarketStatisticItem>, TableCell<MarketStatisticItem,
-                        MarketStatisticItem>>() {
-                    @Override
-                    public TableCell<MarketStatisticItem, MarketStatisticItem> call(
-                            TableColumn<MarketStatisticItem, MarketStatisticItem> column) {
-                        return new TableCell<MarketStatisticItem, MarketStatisticItem>() {
-                            @Override
-                            public void updateItem(final MarketStatisticItem item, boolean empty) {
-                                super.updateItem(item, empty);
-                                if (item != null && !empty)
-                                    setText(CurrencyUtil.getNameByCode(item.currencyCode));
-                                else
-                                    setText("");
-                            }
-                        };
-                    }
-                });
-        return column;
-    }
-
-    private TableColumn<MarketStatisticItem, MarketStatisticItem> getNumberOfOffersColumn() {
-        TableColumn<MarketStatisticItem, MarketStatisticItem> column = new TableColumn<MarketStatisticItem, MarketStatisticItem>("Total offers") {
-            {
-                setMinWidth(100);
-            }
-        };
-        column.setCellValueFactory((item) -> new ReadOnlyObjectWrapper<>(item.getValue()));
-        column.setCellFactory(
-                new Callback<TableColumn<MarketStatisticItem, MarketStatisticItem>, TableCell<MarketStatisticItem,
-                        MarketStatisticItem>>() {
-                    @Override
-                    public TableCell<MarketStatisticItem, MarketStatisticItem> call(
-                            TableColumn<MarketStatisticItem, MarketStatisticItem> column) {
-                        return new TableCell<MarketStatisticItem, MarketStatisticItem>() {
-                            @Override
-                            public void updateItem(final MarketStatisticItem item, boolean empty) {
-                                super.updateItem(item, empty);
-                                if (item != null && !empty)
-                                    setText(String.valueOf(item.numberOfOffers));
-                                else
-                                    setText("");
-                            }
-                        };
-                    }
-                });
-        return column;
-    }
-
-    private TableColumn<MarketStatisticItem, MarketStatisticItem> getTotalAmountColumn() {
-        TableColumn<MarketStatisticItem, MarketStatisticItem> column = new TableColumn<MarketStatisticItem, MarketStatisticItem>("Total amount (BTC)") {
-            {
-                setMinWidth(130);
-            }
-        };
-        column.setCellValueFactory((item) -> new ReadOnlyObjectWrapper<>(item.getValue()));
-        column.setCellFactory(
-                new Callback<TableColumn<MarketStatisticItem, MarketStatisticItem>, TableCell<MarketStatisticItem,
-                        MarketStatisticItem>>() {
-                    @Override
-                    public TableCell<MarketStatisticItem, MarketStatisticItem> call(
-                            TableColumn<MarketStatisticItem, MarketStatisticItem> column) {
-                        return new TableCell<MarketStatisticItem, MarketStatisticItem>() {
-                            @Override
-                            public void updateItem(final MarketStatisticItem item, boolean empty) {
-                                super.updateItem(item, empty);
-                                if (item != null && !empty)
-                                    setText(formatter.formatCoin(item.totalAmount));
-                                else
-                                    setText("");
-                            }
-                        };
-                    }
-                });
-        return column;
-    }
-
-    private TableColumn<MarketStatisticItem, MarketStatisticItem> getSpreadColumn() {
-        TableColumn<MarketStatisticItem, MarketStatisticItem> column = new TableColumn<MarketStatisticItem, MarketStatisticItem>("Spread") {
-            {
-                setMinWidth(130);
-            }
-        };
-        column.setCellValueFactory((item) -> new ReadOnlyObjectWrapper<>(item.getValue()));
-        column.setCellFactory(
-                new Callback<TableColumn<MarketStatisticItem, MarketStatisticItem>, TableCell<MarketStatisticItem,
-                        MarketStatisticItem>>() {
-                    @Override
-                    public TableCell<MarketStatisticItem, MarketStatisticItem> call(
-                            TableColumn<MarketStatisticItem, MarketStatisticItem> column) {
-                        return new TableCell<MarketStatisticItem, MarketStatisticItem>() {
-                            @Override
-                            public void updateItem(final MarketStatisticItem item, boolean empty) {
-                                super.updateItem(item, empty);
-                                if (item != null && !empty && item.spread != null)
-                                    setText(formatter.formatFiatWithCode(item.spread));
-                                else
-                                    setText("");
-                            }
-                        };
-                    }
-                });
-        return column;
-    }
-
-
 }

gui/src/main/java/io/bitsquare/gui/main/offer/offerbook/OfferBookView.java

@@ -20,6 +20,7 @@ package io.bitsquare.gui.main.offer.offerbook;
 import io.bitsquare.gui.Navigation;
 import io.bitsquare.gui.common.view.ActivatableViewAndModel;
 import io.bitsquare.gui.common.view.FxmlView;
+import io.bitsquare.gui.components.HyperlinkWithIcon;
 import io.bitsquare.gui.components.TableGroupHeadline;
 import io.bitsquare.gui.main.MainView;
 import io.bitsquare.gui.main.account.AccountView;
@@ -63,6 +64,7 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
 
     private OfferView.OfferActionHandler offerActionHandler;
     private int gridRow = 0;
+    private TableGroupHeadline offerBookTitle;
 
 
     ///////////////////////////////////////////////////////////////////////////////////////////
@@ -114,7 +116,7 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
         // createOfferButton
         createOfferButton = addButtonAfterGroup(root, ++gridRow, "Create new offer");
 
-        TableGroupHeadline offerBookTitle = new TableGroupHeadline("Offer book");
+        offerBookTitle = new TableGroupHeadline("");
         GridPane.setRowIndex(offerBookTitle, ++gridRow);
         GridPane.setColumnSpan(offerBookTitle, 2);
         GridPane.setMargin(offerBookTitle, new Insets(20, -10, -10, -10));
@@ -187,6 +189,7 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
     }
 
     public void setDirection(Offer.Direction direction) {
+        offerBookTitle.setText(direction == Offer.Direction.SELL ? "Buy-bitcoin offers" : "Sell-bitcoin offers");
         model.setDirection(direction);
     }
 
@@ -372,21 +375,21 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
                     @Override
                     public TableCell<OfferBookListItem, OfferBookListItem> call(TableColumn<OfferBookListItem, OfferBookListItem> column) {
                         return new TableCell<OfferBookListItem, OfferBookListItem>() {
+                            private HyperlinkWithIcon field;
+
                             @Override
                             public void updateItem(final OfferBookListItem item, boolean empty) {
                                 super.updateItem(item, empty);
-                                Hyperlink hyperlink = null;
+
                                 if (item != null && !empty) {
-                                    hyperlink = new Hyperlink(model.getPaymentMethod(item));
+                                    field = new HyperlinkWithIcon(model.getPaymentMethod(item), true);
-                                    hyperlink.setTooltip(new Tooltip(model.getPaymentMethodToolTip(item)));
+                                    field.setOnAction(event -> offerDetailsPopup.show(item.getOffer()));
-                                    hyperlink.setOnAction(event -> offerDetailsPopup.show(item.getOffer()));
+                                    field.setTooltip(new Tooltip(model.getPaymentMethodToolTip(item)));
-                                    setGraphic(hyperlink);
+                                    setGraphic(field);
                                 } else {
-                                    if (hyperlink != null) {
-                                        hyperlink.setText("");
-                                        hyperlink.setTooltip(null);
-                                    }
                                     setGraphic(null);
+                                    if (field != null)
+                                        field.setOnAction(null);
                                 }
                             }
                         };
@@ -396,7 +399,7 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
     }
 
     private TableColumn<OfferBookListItem, OfferBookListItem> getActionColumn() {
-        TableColumn<OfferBookListItem, OfferBookListItem> column = new TableColumn<OfferBookListItem, OfferBookListItem>("") {
+        TableColumn<OfferBookListItem, OfferBookListItem> column = new TableColumn<OfferBookListItem, OfferBookListItem>("I want to:") {
             {
                 setMinWidth(80);
                 setSortable(false);
@@ -434,12 +437,9 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
                                         // set first row button as default
                                         button.setDefaultButton(getIndex() == 0);
                                         tableRow.setOnMouseClicked(null);
-                                        // tableRow.setTooltip(null);
                                     } else {
                                         button.setDefaultButton(false);
                                         tableRow.setOnMouseClicked(e -> onShowInfo(isPaymentAccountValidForOffer, hasMatchingArbitrator));
-                                       /* tableRow.setTooltip(
-                                                new Tooltip(hasMatchingArbitrator ? "No matching payment account." : "No matching accepted arbitrators."));*/
                                     }
                                 }
                             }
@@ -472,6 +472,8 @@ public class OfferBookView extends ActivatableViewAndModel<GridPane, OfferBookVi
                                     setGraphic(button);
                                 } else {
                                     setGraphic(null);
+                                    if (button != null)
+                                        button.setOnAction(null);
                                     TableRow tableRow = getTableRow();
                                     if (tableRow != null) tableRow.setOpacity(1);
                                 }

gui/src/main/java/io/bitsquare/gui/main/portfolio/closedtrades/ClosedTradesView.fxml

@@ -28,7 +28,7 @@
 
     <TableView fx:id="table" VBox.vgrow="ALWAYS">
         <columns>
-            <TableColumn text="Trade ID" fx:id="tradeIdColumn" minWidth="80" sortable="false"/>
+            <TableColumn text="Trade ID" fx:id="tradeIdColumn" minWidth="120" maxWidth="120" sortable="false"/>
             <TableColumn text="Date/Time" fx:id="dateColumn" minWidth="150"/>
             <TableColumn text="Trade amount in BTC" fx:id="amountColumn" minWidth="130"/>
             <TableColumn text="Price" fx:id="priceColumn" minWidth="100"/>

gui/src/main/java/io/bitsquare/gui/main/portfolio/closedtrades/ClosedTradesView.java

@@ -19,6 +19,7 @@ package io.bitsquare.gui.main.portfolio.closedtrades;
 
 import io.bitsquare.gui.common.view.ActivatableViewAndModel;
 import io.bitsquare.gui.common.view.FxmlView;
+import io.bitsquare.gui.components.HyperlinkWithIcon;
 import io.bitsquare.gui.popups.OfferDetailsPopup;
 import io.bitsquare.gui.popups.TradeDetailsPopup;
 import io.bitsquare.gui.util.BSFormatter;
@@ -83,26 +84,26 @@ public class ClosedTradesView extends ActivatableViewAndModel<VBox, ClosedTrades
                     public TableCell<ClosedTradableListItem, ClosedTradableListItem> call(TableColumn<ClosedTradableListItem,
                             ClosedTradableListItem> column) {
                         return new TableCell<ClosedTradableListItem, ClosedTradableListItem>() {
-                            private Hyperlink hyperlink;
+                            private HyperlinkWithIcon field;
 
                             @Override
                             public void updateItem(final ClosedTradableListItem item, boolean empty) {
                                 super.updateItem(item, empty);
-
                                 if (item != null && !empty) {
-                                    hyperlink = new Hyperlink(model.getTradeId(item));
+                                    field = new HyperlinkWithIcon(model.getTradeId(item), true);
-                                    Tooltip.install(hyperlink, new Tooltip(model.getTradeId(item)));
+                                    field.setOnAction(event -> {
-                                    hyperlink.setOnAction(event -> {
                                         Tradable tradable = item.getTradable();
                                         if (tradable instanceof Trade)
                                             tradeDetailsPopup.show((Trade) tradable);
                                         else if (tradable instanceof OpenOffer)
                                             offerDetailsPopup.show(tradable.getOffer());
                                     });
-                                    setGraphic(hyperlink);
+                                    field.setTooltip(new Tooltip("Open popup for details"));
+                                    setGraphic(field);
                                 } else {
                                     setGraphic(null);
-                                    setId(null);
+                                    if (field != null)
+                                        field.setOnAction(null);
                                 }
                             }
                         };

gui/src/main/java/io/bitsquare/gui/main/portfolio/failedtrades/FailedTradesView.fxml

@@ -28,7 +28,7 @@
 
     <TableView fx:id="table" VBox.vgrow="ALWAYS">
         <columns>
-            <TableColumn text="Trade ID" fx:id="tradeIdColumn" minWidth="100" sortable="false"/>
+            <TableColumn text="Trade ID" fx:id="tradeIdColumn" minWidth="120" maxWidth="120" sortable="false"/>
             <TableColumn text="Date" fx:id="dateColumn" minWidth="130"/>
             <TableColumn text="Trade amount in BTC" fx:id="amountColumn" minWidth="130"/>
             <TableColumn text="Price" fx:id="priceColumn" minWidth="100"/>

gui/src/main/java/io/bitsquare/gui/main/portfolio/failedtrades/FailedTradesView.java

@@ -19,8 +19,8 @@ package io.bitsquare.gui.main.portfolio.failedtrades;
 
 import io.bitsquare.gui.common.view.ActivatableViewAndModel;
 import io.bitsquare.gui.common.view.FxmlView;
+import io.bitsquare.gui.components.HyperlinkWithIcon;
 import io.bitsquare.gui.popups.TradeDetailsPopup;
-import io.bitsquare.trade.Trade;
 import javafx.beans.property.ReadOnlyObjectWrapper;
 import javafx.fxml.FXML;
 import javafx.scene.control.*;
@@ -74,23 +74,20 @@ public class FailedTradesView extends ActivatableViewAndModel<VBox, FailedTrades
                     public TableCell<FailedTradesListItem, FailedTradesListItem> call(TableColumn<FailedTradesListItem,
                             FailedTradesListItem> column) {
                         return new TableCell<FailedTradesListItem, FailedTradesListItem>() {
-                            private Hyperlink hyperlink;
+                            private HyperlinkWithIcon field;
 
                             @Override
                             public void updateItem(final FailedTradesListItem item, boolean empty) {
                                 super.updateItem(item, empty);
-
                                 if (item != null && !empty) {
-                                    hyperlink = new Hyperlink(model.getTradeId(item));
+                                    field = new HyperlinkWithIcon(model.getTradeId(item), true);
-                                    Tooltip.install(hyperlink, new Tooltip(model.getTradeId(item)));
+                                    field.setOnAction(event -> tradeDetailsPopup.show(item.getTrade()));
-                                    hyperlink.setOnAction(event -> {
+                                    field.setTooltip(new Tooltip("Open popup for details"));
-                                        Trade trade = item.getTrade();
+                                    setGraphic(field);
-                                        tradeDetailsPopup.show(trade);
-                                    });
-                                    setGraphic(hyperlink);
                                 } else {
                                     setGraphic(null);
-                                    setId(null);
+                                    if (field != null)
+                                        field.setOnAction(null);
                                 }
                             }
                         };

gui/src/main/java/io/bitsquare/gui/main/portfolio/openoffer/OpenOffersView.java

@@ -20,6 +20,7 @@ package io.bitsquare.gui.main.portfolio.openoffer;
 import io.bitsquare.gui.Navigation;
 import io.bitsquare.gui.common.view.ActivatableViewAndModel;
 import io.bitsquare.gui.common.view.FxmlView;
+import io.bitsquare.gui.components.HyperlinkWithIcon;
 import io.bitsquare.gui.main.MainView;
 import io.bitsquare.gui.main.funds.FundsView;
 import io.bitsquare.gui.main.funds.withdrawal.WithdrawalView;
@@ -109,19 +110,21 @@ public class OpenOffersView extends ActivatableViewAndModel<VBox, OpenOffersView
                     public TableCell<OpenOfferListItem, OpenOfferListItem> call(TableColumn<OpenOfferListItem,
                             OpenOfferListItem> column) {
                         return new TableCell<OpenOfferListItem, OpenOfferListItem>() {
+                            private HyperlinkWithIcon field;
 
                             @Override
                             public void updateItem(final OpenOfferListItem item, boolean empty) {
                                 super.updateItem(item, empty);
 
                                 if (item != null && !empty) {
-                                    Hyperlink hyperlink = new Hyperlink(model.getTradeId(item));
+                                    field = new HyperlinkWithIcon(model.getTradeId(item), true);
-                                    Tooltip.install(hyperlink, new Tooltip(model.getTradeId(item)));
+                                    field.setOnAction(event -> offerDetailsPopup.show(item.getOffer()));
-                                    hyperlink.setOnAction(event -> offerDetailsPopup.show(item.getOffer()));
+                                    field.setTooltip(new Tooltip("Open popup for details"));
-                                    setGraphic(hyperlink);
+                                    setGraphic(field);
                                 } else {
                                     setGraphic(null);
-                                    setId(null);
+                                    if (field != null)
+                                        field.setOnAction(null);
                                 }
                             }
                         };

gui/src/main/java/io/bitsquare/gui/main/portfolio/pendingtrades/PendingTradesView.java

@@ -20,6 +20,7 @@ package io.bitsquare.gui.main.portfolio.pendingtrades;
 import io.bitsquare.common.UserThread;
 import io.bitsquare.gui.common.view.ActivatableViewAndModel;
 import io.bitsquare.gui.common.view.FxmlView;
+import io.bitsquare.gui.components.HyperlinkWithIcon;
 import io.bitsquare.gui.popups.OpenEmergencyTicketPopup;
 import io.bitsquare.gui.popups.TradeDetailsPopup;
 import io.bitsquare.trade.Trade;
@@ -224,20 +225,21 @@ public class PendingTradesView extends ActivatableViewAndModel<VBox, PendingTrad
                     public TableCell<PendingTradesListItem, PendingTradesListItem> call(TableColumn<PendingTradesListItem,
                             PendingTradesListItem> column) {
                         return new TableCell<PendingTradesListItem, PendingTradesListItem>() {
-                            private Hyperlink hyperlink;
+                            private HyperlinkWithIcon field;
 
                             @Override
                             public void updateItem(final PendingTradesListItem item, boolean empty) {
                                 super.updateItem(item, empty);
 
                                 if (item != null && !empty) {
-                                    hyperlink = new Hyperlink(model.formatTradeId(item.getId()));
+                                    field = new HyperlinkWithIcon(model.formatTradeId(item.getId()), true);
-                                    Tooltip.install(hyperlink, new Tooltip(model.formatTradeId(item.getId())));
+                                    field.setOnAction(event -> tradeDetailsPopup.show(item.getTrade()));
-                                    hyperlink.setOnAction(event -> tradeDetailsPopup.show(item.getTrade()));
+                                    field.setTooltip(new Tooltip("Open popup for details"));
-                                    setGraphic(hyperlink);
+                                    setGraphic(field);
                                 } else {
                                     setGraphic(null);
-                                    setId(null);
+                                    if (field != null)
+                                        field.setOnAction(null);
                                 }
                             }
                         };