Add header to image diff container
Change-Id: If03cb253490c3e0c92ffe20f6130097f0ac9533d
diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 7f55f9a..6f2d85e 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -21,13 +21,39 @@
<template>
<style>
:host {
+ background-color: #f5f5f5;
border-top: 1px solid var(--border-color, #ddd);
+ font-family: var(--font-family);
display: block;
- margin-top: .5em;
- padding: 1em var(--default-horizontal-margin);
+ }
+ #header {
+ align-items: center;
+ border-bottom: 1px solid var(--border-color, #ddd);
+ display: inline-flex;
+ padding: .5em;
+ width: 100%;
+ }
+ h3 {
+ padding: 0 .5em;
+ }
+ #dropdown {
+ border: 1px solid var(--border-color);
+ border-radius: 2px;
+ font-size: var(--font-size-normal);
+ height: 2em;
+ margin-left: 1em;
+ padding: 0 .15em;
}
</style>
+ <div id="header">
+ <h3>Image Diff</h3>
+ <select id="dropdown">
+ <option value="resemble">Resemble Mode</option>
+ <option value="opacity">Opacity Mode</option>
+ </select>
+ </div>
+
<template is="dom-if" if="[[_showResembleMode]]" restamp="true">
<gr-resemble-diff-mode
base-image="[[baseImage]]"
@@ -39,11 +65,6 @@
base-image="[[baseImage]]"
revision-image="[[revisionImage]]"></gr-opacity-diff-mode>
</template>
-
- <select id="dropdown" on-change="handleSelect">
- <option value="resemble">Resemble Mode</option>
- <option value="opacity">Opacity Mode</option>
- </select>
</template>
<script src="gr-image-diff-tool.js"></script>
</dom-module>
\ No newline at end of file
