How can i replicate GMail current hovered row marker with GWT?

Question

I just want to know how would you do, with a GWT CellTable, to replicate the GMail hovered row marker:

I created this classes:

public class MarkerCell extends ImageResourceCell {

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, ImageResource value, SafeHtmlBuilder sb) {
        value = Images.INSTANCE.selectedRowMarker();
        super.render(context, value, sb);
    }
    
}


public class MarkerColumn<T> extends Column<T, ImageResource> {

    public MarkerColumn() {
        super(new MarkerCell());
    }

    @Override
    public ImageResource getValue(T object) {
        return Images.INSTANCE.selectedRowMarker();
    }

}

and i used it in this way:

MarkerColumn<GfsFile> marker = new MarkerColumn<GfsFile>();
marker.setSortable(false);
table.addColumn(marker);

Excluding the hover event handling that should hide/unhide the marker, the result is not quite as i expected:

What approach would you use to get closer to GMail?

Answer 1

I would embed the row marker image as part of the each row and attach a style that sets the opacity to 0. Then add a :hover state to the row selectorClass that sets the opacity to 1. The trick is getting the css selector right. I think cell table uses table rows so it should be something like

tr:hover .selectorImageStyle {opacity:1 }