Improve the way inline comments are shown
We now use a bit prettier formatting, essentially emulating
the look-and-feel of Google's internal Mondrian product.
Change-Id: Ia912359a4baee50c1b5988d16d1aa4fd1f55c8e6
Signed-off-by: Shawn O. Pearce <sop@google.com>
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java
index e0f439b..24302c0 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java
@@ -54,6 +54,7 @@
String commentEditorPanel();
String commentHolder();
String commentPanel();
+ String commentPanelBorder();
String commentPanelAuthorCell();
String commentPanelButtons();
String commentPanelContent();
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/changes/ChangeScreen.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/changes/ChangeScreen.java
index 072b98b..9288788 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/changes/ChangeScreen.java
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/changes/ChangeScreen.java
@@ -321,6 +321,7 @@
final CommentPanel cp =
new CommentPanel(author, msg.getWrittenOn(), msg.getMessage());
cp.setRecent(isRecent);
+ cp.addStyleName(Gerrit.RESOURCES.css().commentPanelBorder());
if (i == msgList.size() - 1) {
cp.addStyleName(Gerrit.RESOURCES.css().commentPanelLast());
cp.setOpen(true);
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css b/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css
index 4f482dc..061ae25 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css
@@ -99,36 +99,36 @@
/** CommentPanel **/
-.commentPanel {
+.commentPanelBorder {
border-top: 1px solid lightgray;
border-left: 1px solid lightgray;
border-right: 1px solid lightgray;
}
-.commentPanelLast {
+.commentPanelBorder.commentPanelLast {
border-bottom: 1px solid lightgray;
}
@if user.agent safari {
- .commentPanel {
+ .commentPanelBorder {
\-webkit-border-top-left-radius: 8px;
\-webkit-border-top-right-radius: 8px;
\-webkit-border-bottom-left-radius: 0px;
\-webkit-border-bottom-right-radius: 0px;
}
- .commentPanelLast {
+ .commentPanelBorder.commentPanelLast {
\-webkit-border-bottom-left-radius: 8px;
\-webkit-border-bottom-right-radius: 8px;
}
}
@if user.agent gecko1_8 {
- .commentPanel {
+ .commentPanelBorder {
\-moz-border-radius-topleft: 8px;
\-moz-border-radius-topright: 8px;
\-moz-border-radius-bottomleft: 0;
\-moz-border-radius-bottomright: 0;
}
- .commentPanelLast {
+ .commentPanelBorder.commentPanelLast {
\-moz-border-radius-bottomleft: 8px;
\-moz-border-radius-bottomright: 8px;
}
@@ -555,9 +555,21 @@
color: #006000;
}
-.patchContentTable tr.commentHolder .diffText {
- background: #F2F4F7;
- white-space: normal;
+.patchContentTable tr.commentHolder {
+ background: #E5ECF9;
+}
+.patchContentTable tr.commentHolder .iconCell {
+ background: white;
+}
+.patchContentTable td.commentHolder {
+ padding-left: 0;
+ padding-right: 0;
+ border-top: 1px solid black;
+ border-left: 1px solid black;
+ border-right: 1px solid black;
+}
+.patchContentTable td.commentHolder.commentPanelLast {
+ border-bottom: 1px solid black;
}
.patchContentTable .commentPanel {
font-family: norm-font;
@@ -565,6 +577,15 @@
.patchContentTable .commentPanel td {
font-family: norm-font;
}
+.patchContentTable .commentPanelMessage {
+ padding-left: 1px;
+ padding-right: 1px;
+ white-space: normal;
+}
+.patchContentTable .commentPanelButtons,
+.patchContentTable .commentPanel textarea {
+ margin-left: 1px;
+}
.lineNumber {
padding-left: 0.2em;
@@ -645,7 +666,8 @@
.patchContentTable .activeRow .diffText,
.patchContentTable .activeRow .wdc,
.patchContentTable .activeRow .wdd,
-.patchContentTable .activeRow .wdi {
+.patchContentTable .activeRow .wdi,
+.patchContentTable .activeRow td.commentHolder.commentPanelLast {
border-bottom: 1px solid blue;
}
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/AbstractPatchContentTable.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/AbstractPatchContentTable.java
index 07bf17e..22a64fb 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/AbstractPatchContentTable.java
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/AbstractPatchContentTable.java
@@ -119,6 +119,12 @@
}
p = p.getParent();
}
+
+ if (Gerrit.RESOURCES.css().commentHolder().equals(
+ table.getCellFormatter().getStyleName(row - 1, cell))) {
+ table.getCellFormatter().addStyleName(row - 1, cell,
+ Gerrit.RESOURCES.css().commentPanelLast());
+ }
return;
}
}
@@ -411,6 +417,7 @@
styleCommentRow(row);
}
table.setWidget(row, column, ed);
+ styleLastCommentCell(row, column);
int span = 1;
for (int r = row + 1; r < table.getRowCount(); r++) {
@@ -449,7 +456,8 @@
protected void insertRow(final int row) {
table.insertRow(row);
- table.getCellFormatter().setStyleName(row, 0, Gerrit.RESOURCES.css().iconCell());
+ table.getCellFormatter().setStyleName(row, 0,
+ Gerrit.RESOURCES.css().iconCell());
}
@Override
@@ -506,12 +514,14 @@
if (line.getStatus() == PatchLineComment.Status.DRAFT) {
final CommentEditorPanel plc = new CommentEditorPanel(line);
table.setWidget(row, col, plc);
+ styleLastCommentCell(row, col);
} else {
final AccountInfo author = accountCache.get(line.getAuthor());
final PublishedCommentPanel panel =
new PublishedCommentPanel(author, line);
table.setWidget(row, col, panel);
+ styleLastCommentCell(row, col);
CommentList l = (CommentList) getRowItem(row);
if (l == null) {
@@ -528,7 +538,16 @@
private void styleCommentRow(final int row) {
final CellFormatter fmt = table.getCellFormatter();
final Element iconCell = fmt.getElement(row, 0);
- UIObject.setStyleName(DOM.getParent(iconCell), Gerrit.RESOURCES.css().commentHolder(), true);
+ UIObject.setStyleName(DOM.getParent(iconCell), Gerrit.RESOURCES.css()
+ .commentHolder(), true);
+ }
+
+ private void styleLastCommentCell(final int row, final int col) {
+ final CellFormatter fmt = table.getCellFormatter();
+ fmt.removeStyleName(row - 1, col, //
+ Gerrit.RESOURCES.css().commentPanelLast());
+ fmt.setStyleName(row, col, Gerrit.RESOURCES.css().commentHolder());
+ fmt.addStyleName(row, col, Gerrit.RESOURCES.css().commentPanelLast());
}
protected static class CommentList {
