ChangeScreen2: Add mouse hover highlight to file table

Some users noted this table is wide and its hard to correlate file
path with size or number of comments when there are many files updated
in a single change.  Add a light blue background under the row the
mouse is hovering on, giving the user a bit more context to find all
related data cells.

Change-Id: I62c81d640c9e17926ccfd8827c89739a7632adba
This commit is contained in:
Shawn Pearce
2013-12-11 00:49:25 -08:00
parent d1451ead6b
commit de540bf17c
2 changed files with 9 additions and 2 deletions

View File

@@ -64,6 +64,7 @@ class FileTable extends FlowPanel {
interface FileTableCss extends CssResource {
String table();
String nohover();
String pointer();
String reviewed();
String status();
@@ -406,7 +407,7 @@ class FileTable extends FlowPanel {
}
private void header(SafeHtmlBuilder sb) {
sb.openTr();
sb.openTr().setStyleName(R.css().nohover());
sb.openTh().setStyleName(R.css().pointer()).closeTh();
sb.openTh().setStyleName(R.css().reviewed()).closeTh();
sb.openTh().setStyleName(R.css().status()).closeTh();
@@ -586,7 +587,7 @@ class FileTable extends FlowPanel {
}
private void footer(SafeHtmlBuilder sb) {
sb.openTr();
sb.openTr().setStyleName(R.css().nohover());
sb.openTh().setStyleName(R.css().pointer()).closeTh();
sb.openTh().setStyleName(R.css().reviewed()).closeTh();
sb.openTh().setStyleName(R.css().status()).closeTh();

View File

@@ -22,6 +22,12 @@
.table tr {
vertical-align: top;
}
.table tr:hover {
background: rgba(209, 245, 248, 0.32);
}
.table tr.nohover:hover {
background: transparent;
}
.status {
padding-right: 4px;