Modernize image diff layout
As per UX instructions, adds a border between the images and replaces
the image outline with a box shadow.
Change-Id: Iec157ce7e346cab217a49d6fcee5977c1702478c
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
index 27f8d39..ec78421 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
@@ -35,6 +35,7 @@
GrDiffBuilderImage.prototype.constructor = GrDiffBuilderImage;
GrDiffBuilderImage.prototype.renderDiff = function() {
+ this._outputEl.classList.add('image-diff');
const section = this._createElement('tbody', 'image-diff');
this._emitImagePair(section);
@@ -75,10 +76,10 @@
GrDiffBuilderImage.prototype._emitImagePair = function(section) {
const tr = this._createElement('tr');
- tr.appendChild(this._createElement('td'));
+ tr.appendChild(this._createElement('td', 'left lineNum blank'));
tr.appendChild(this._createImageCell(this._baseImage, 'left', section));
- tr.appendChild(this._createElement('td'));
+ tr.appendChild(this._createElement('td', 'right lineNum blank'));
tr.appendChild(this._createImageCell(
this._revisionImage, 'right', section));
@@ -126,7 +127,7 @@
addNamesInLabel = true;
}
- tr.appendChild(this._createElement('td'));
+ tr.appendChild(this._createElement('td', 'left lineNum blank'));
let td = this._createElement('td', 'left');
let label = this._createElement('label');
let nameSpan;
@@ -145,7 +146,7 @@
td.appendChild(label);
tr.appendChild(td);
- tr.appendChild(this._createElement('td'));
+ tr.appendChild(this._createElement('td', 'right lineNum blank'));
td = this._createElement('td', 'right');
label = this._createElement('label');
labelSpan = this._createElement('span', 'label');
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 997e1ba..409ccf9 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
@@ -544,7 +544,7 @@
return result;
};
- GrDiffBuilder.prototype._createElement = function(tagName, className) {
+ GrDiffBuilder.prototype._createElement = function(tagName, classStr) {
const el = document.createElement(tagName);
// When Shady DOM is being used, these classes are added to account for
// Polymer's polyfill behavior. In order to guarantee sufficient
@@ -553,8 +553,10 @@
// automatically) are not being used for performance reasons, this is
// done manually.
el.classList.add('style-scope', 'gr-diff');
- if (className) {
- el.classList.add(className);
+ if (classStr) {
+ for (const className of classStr.split(' ')) {
+ el.classList.add(className);
+ }
}
return el;
};
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 129bff1..a00ecb3 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
@@ -81,6 +81,13 @@
teardown(() => { sandbox.restore(); });
+ test('_createElement classStr applies all classes', () => {
+ const node = builder._createElement('div', 'test classes');
+ assert.isTrue(node.classList.contains('gr-diff'));
+ assert.isTrue(node.classList.contains('test'));
+ assert.isTrue(node.classList.contains('classes'));
+ });
+
test('context control buttons', () => {
const section = {};
const line = {contextGroup: {lines: []}};
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 718fa17..17b3187 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -55,11 +55,15 @@
background-color: var(--table-header-background-color);
}
.image-diff .gr-diff {
+ background-color: var(--table-header-background-color);
text-align: center;
}
.image-diff img {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
max-width: 50em;
- outline: 1px solid var(--border-color);
+ }
+ .image-diff .right.lineNum {
+ border-left: 1px solid var(--border-color);
}
.image-diff label,
.binary-diff label {
