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:
@@ -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();
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user