Hide image diff if revision or base is missing
Change-Id: Ibd5a63794908f3284f94b7175d956ccf8e465600
diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 55d1c46..6d96b86 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -22,13 +22,13 @@
<style>
:host {
background-color: #f5f5f5;
- border-top: 1px solid var(--border-color, #ddd);
font-family: var(--font-family);
display: block;
}
#header {
align-items: center;
border-bottom: 1px solid var(--border-color, #ddd);
+ border-top: 1px solid var(--border-color, #ddd);
display: inline-flex;
padding: .5em;
width: 100%;
@@ -45,7 +45,6 @@
padding: 0 .15em;
}
</style>
-
<div id="header">
<h3>Image Diff</h3>
<select value="{{_observeMode::change}}" id="dropdown">
@@ -53,13 +52,11 @@
<option value="opacity">Opacity Mode</option>
</select>
</div>
-
<template is="dom-if" if="[[_showResembleMode]]" restamp="true">
<gr-resemble-diff-mode
base-image="[[baseImage]]"
revision-image="[[revisionImage]]"></gr-resemble-diff-mode>
</template>
-
<template is="dom-if" if="[[_showOpacityMode]]" restamp="true">
<gr-opacity-diff-mode
base-image="[[baseImage]]"
@@ -67,4 +64,4 @@
</template>
</template>
<script src="gr-image-diff-tool.js"></script>
-</dom-module>
\ No newline at end of file
+</dom-module>
diff --git a/gr-image-diff-tool/gr-image-diff-tool.js b/gr-image-diff-tool/gr-image-diff-tool.js
index 95df491..811db7c 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.js
+++ b/gr-image-diff-tool/gr-image-diff-tool.js
@@ -23,6 +23,13 @@
is: 'gr-image-diff-tool',
properties: {
+ baseImage: Object,
+ revisionImage: Object,
+ hidden: {
+ type: Boolean,
+ value: false,
+ reflectToAttribute: true,
+ },
_showResembleMode: Boolean,
_showOpacityMode: Boolean,
_observeMode: {
@@ -32,6 +39,10 @@
},
attached() {
+ if (!this.baseImage || !this.revisionImage) {
+ // No need to show the diff tool if there are no images.
+ this.hidden = true;
+ }
const diff_mode = this._getMode();
diff_mode === DiffModes.OPACITY ?
this._displayOpacityMode() : this._displayResembleMode();
@@ -64,4 +75,4 @@
this._setMode(DiffModes.OPACITY);
},
});
-})();
\ No newline at end of file
+})();
diff --git a/gr-image-diff-tool/gr-image-diff-tool_test.html b/gr-image-diff-tool/gr-image-diff-tool_test.html
index ec1a4be..645422a 100644
--- a/gr-image-diff-tool/gr-image-diff-tool_test.html
+++ b/gr-image-diff-tool/gr-image-diff-tool_test.html
@@ -41,8 +41,9 @@
let sandbox;
setup(() => {
- element = fixture('basicFixture');
sandbox = sinon.sandbox.create();
+ element = fixture('basicFixture');
+ flushAsynchronousOperations();
});
teardown(() => { sandbox.restore(); });
@@ -79,4 +80,4 @@
assert.equal(element._setMode.callCount, 3);
});
});
-</script>
\ No newline at end of file
+</script>
