commit 087a9969ea5ba18dbf70623f4c48ef7e6ceac8a2
author Raeggin Williams <raeggin@google.com> Tue Jul 24 15:37:42 2018 -0700
committer Kasper Nilsson <kaspern@google.com> Mon Aug 06 15:39:42 2018 -0700
tree ff55bfad68aa08568ede0a47140798e32faa47af
parent 00ca3cf24a0142e82188ce67c22c40e4a2c4fbad

Center image diff controls for opacity mode

Based on Ib7583025.

Change-Id: I3550cf4c4c24578e3e839c139adeb7107d6fba99

gr-opacity-diff-mode/gr-opacity-diff-mode.html

diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.html b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
index d884ba9..c4604e4 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -20,6 +20,9 @@
       :host {
         display: block;
       }
+      .wrapper {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+      }
       img {
         display: block;
         height: var(--img-height);
@@ -31,34 +34,68 @@
         opacity: var(--my-opacity-value);
         z-index: 1;
       }
-      #imageDivContainer {
-        display: flex;
+      #imageDiffContainer {
         height: var(--div-height);
-        justify-content: space-around;
+        margin: auto;
+        width: var(--div-width);
+      }
+      #controlsContainer {
+        border-top: 1px solid var(--border-color, #ddd);
+        display: flex;
+      }
+      #controlsBox {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 1em;
+        min-width: 32em;
+        width: 100%;
+      }
+      label {
+        padding: 1em .5em;
+      }
+      input {
+        padding: 1em 0;
+      }
+      .cell {
+        align-items: center;
+        display: flex;
+      }
+      #opacitySlider {
+        width: 10em;
       }
     </style>
-    <div id="imageDivContainer">
-      <img id="imageBase"/>
-      <img data-opacity$="{{opacityValue}}" id="imageRevision"/>
+    <div class="wrapper">
+      <div id="imageDiffContainer">
+        <img id="imageBase"/>
+        <img data-opacity$="{{opacityValue}}" id="imageRevision"/>
+      </div>
+      <div id="controlsContainer">
+        <div id="controlsBox">
+          <div class="cell">
+            <input
+                id="scaleSizesToggle"
+                on-tap="handleScaleSizesToggle"
+                type="checkbox">
+            <label for="scaleSizesToggle">
+              Scale to same size
+            </label>
+          </div>
+          <div class="cell">
+            <label for="opacitySlider">
+              Revision image opacity
+            </label>
+            <input
+                id="opacitySlider"
+                max="1.0"
+                min="0.0"
+                on-input="handleOpacityChange"
+                step=".01"
+                type="range"
+                value="0.5"/>
+          </div>
+        </div>
+      </div>
     </div>
-    <div>
-      <label>
-        <input
-            id="scaleSizesToggle"
-            on-tap="handleScaleSizesToggle"
-            type="checkbox">
-        Scale to same size
-      </label>
-    </div>
-    <label for="opacitySlider">Opacity</label>
-    <input
-      id="opacitySlider"
-      max="1.0"
-      min="0.0"
-      on-input="handleOpacityChange"
-      step=".01"
-      type="range"
-      value="1.0"/>
   </template>
  <script src="gr-opacity-diff-mode.js"></script>
-</dom-module>
\ No newline at end of file
+</dom-module>

gr-opacity-diff-mode/gr-opacity-diff-mode.js

diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.js b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
index 237d413..6855d0c 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.js
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -26,13 +26,13 @@
       if (this.revisionImage) {
         const srcRevision = this.computeSrcString(this.revisionImage);
         this.$.imageRevision.setAttribute('src', srcRevision);
-        this.resizeDiffContainerHeight();
+        this.handleOpacityChange();
       }
       if (this.baseImage) {
         const srcBase = this.computeSrcString(this.baseImage);
         this.$.imageBase.setAttribute('src', srcBase);
-        this.resizeDiffContainerHeight();
       }
+      this.resizeDiffContainerHeight();
     },
 
     handleOpacityChange() {
@@ -62,7 +62,11 @@
           this.baseImage ? this.baseImage._height : 0,
           this.revisionImage ? this.revisionImage._height : 0);
       this.customStyle['--div-height'] = maxHeight + 'px';
+      const maxWidth = Math.max(
+          this.baseImage ? this.baseImage._width : 0,
+          this.revisionImage ? this.revisionImage._width : 0);
+      this.customStyle['--div-width'] = maxWidth + 'px';
       this.updateStyles();
     },
   });
-})();
\ No newline at end of file
+})();