Small redesign of diff expansion row
Replace arrows by text.
Add the Material 'unfold-more' icon.
Remove the dashes.
This change will help in reducing confusion as to where the arrows of
+10 buttons are expanding the file. We aim to do so by getting rid of
these arrows and replacing the arrows by where the file is expanded
compared to the button (+10 above or +10 below).
Screenshots: https://imgur.com/a/ikT2WsT
Change-Id: I7a91da046b3cfb4473dbdcda5cc461d3dc8748f4
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
index 33cd4cb..6fee68e 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
@@ -248,14 +248,12 @@
if (showPartialLinks) {
td.appendChild(this._createContextButton(
GrDiffBuilder.ContextButtonType.ABOVE, section, line, numLines));
- td.appendChild(document.createTextNode(' - '));
}
td.appendChild(this._createContextButton(
GrDiffBuilder.ContextButtonType.ALL, section, line, numLines));
if (showPartialLinks) {
- td.appendChild(document.createTextNode(' - '));
td.appendChild(this._createContextButton(
GrDiffBuilder.ContextButtonType.BELOW, section, line, numLines));
}
@@ -273,22 +271,26 @@
let text;
let groups = []; // The groups that replace this one if tapped.
-
if (type === GrDiffBuilder.ContextButtonType.ALL) {
+ const icon = this._createElement('iron-icon', 'showContext');
+ icon.setAttribute('icon', 'gr-icons:unfold-more');
+ Polymer.dom(button).appendChild(icon);
+
text = 'Show ' + numLines + ' common line';
if (numLines > 1) { text += 's'; }
groups.push(...line.contextGroups);
} else if (type === GrDiffBuilder.ContextButtonType.ABOVE) {
- text = '+' + context + '↑';
+ text = '+' + context + ' above';
groups = GrDiffGroup.hideInContextControl(line.contextGroups,
context, numLines);
} else if (type === GrDiffBuilder.ContextButtonType.BELOW) {
- text = '+' + context + '↓';
+ text = '+' + context + ' below';
groups = GrDiffGroup.hideInContextControl(line.contextGroups,
0, numLines - context);
}
-
- Polymer.dom(button).textContent = text;
+ const textSpan = this._createElement('span', 'showContext');
+ Polymer.dom(textSpan).textContent = text;
+ Polymer.dom(button).appendChild(textSpan);
button.addEventListener('tap', e => {
e.detail = {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
index 867a067..debb919 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
@@ -125,9 +125,9 @@
buttons = td.querySelectorAll('gr-button.showContext');
assert.equal(buttons.length, 3);
- assert.equal(Polymer.dom(buttons[0]).textContent, '+10↑');
+ assert.equal(Polymer.dom(buttons[0]).textContent, '+10 above');
assert.equal(Polymer.dom(buttons[1]).textContent, 'Show 11 common lines');
- assert.equal(Polymer.dom(buttons[2]).textContent, '+10↓');
+ assert.equal(Polymer.dom(buttons[2]).textContent, '+10 below');
});
test('newlines 1', () => {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index dea9789..af07552 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -191,11 +191,18 @@
.contextControl gr-button {
display: inline-block;
text-decoration: none;
+ vertical-align: top;
+ line-height: var(--line-height-mono, 18px);
--gr-button: {
color: var(--diff-context-control-color);
- padding: var(--spacing-xs);
+ padding: var(--spacing-xxs) var(--spacing-l);
}
}
+ .contextControl gr-button iron-icon {
+ /* should match line-height of gr-button */
+ width: var(--line-height-mono, 18px);
+ height: var(--line-height-mono, 18px);
+ }
.contextControl td:not(.lineNum) {
text-align: center;
}
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
index 75ab77a..d36ce3b 100644
--- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
+++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
@@ -24,6 +24,8 @@
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g>
<!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g>
+ <!-- This SVG is a copy from material.io https://material.io/icons/#unfold_more -->
+ <g id="unfold-more"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></g>
<!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></g>
<!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
