From 4270086a2250bc89cfbe9b65987a2bb1a1109251 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Wed, 19 Apr 2017 17:47:12 -0700
Subject: [PATCH] Support 1 and 2 images

---
 scripts/system/html/css/SnapshotReview.css | 13 ++++--
 scripts/system/html/js/SnapshotReview.js   | 52 +++++++++++++++-------
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index 636edd9756..9cbc129ab6 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -17,6 +17,8 @@ body {
 // START styling of top bar and its contents
 */
 .snapsection {
+    padding-left: 8px;
+    padding-right: 8px;
     padding-top: 12px;
     margin: 8px;
 }
@@ -68,17 +70,20 @@ input[type=button].naked:active {
 // START styling of snapshot pane and its contents
 */
 #snapshot-pane {
+    width: 100%;
     height: 510px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 #snapshot-images {
-    position: relative;
+    width: 100%;
 }
 
 #snapshot-images img {
     max-width: 100%;
     max-height: 100%;
-    vertical-align: middle;
 }
 
 .gifLabel {
@@ -126,11 +131,13 @@ input[type=button].naked:active {
 // START styling of snapshot controls (bottom panel) and its contents
 */
 #snapshot-controls {
+    padding-left: 8px;
+    padding-right: 8px;
     width: 100%;
     position: absolute;
     left: 0;
     bottom: 14px;
-    margin-bottom: 14px;
+    margin-bottom: 4px;
     overflow: hidden;
 }
 #snap-settings {
diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index b0c53be502..3ebff3f687 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -18,13 +18,13 @@ function addImage(data) {
     var div = document.createElement("DIV");
     var id = "p" + idCounter++;
     var img = document.createElement("IMG");
+    div.id = id;
     img.id = id + "img";
     div.style.width = "100%";
     div.style.height = "" + Math.floor(100 / imageCount) + "%";
     div.style.display = "flex";
     div.style.justifyContent = "center";
     div.style.alignItems = "center";
-    div.style.marginBottom = "5px";
     div.style.position = "relative";
     if (imageCount > 1) {
         img.setAttribute("class", "multiple");
@@ -32,23 +32,26 @@ function addImage(data) {
     img.src = data.localPath;
     div.appendChild(img);
     document.getElementById("snapshot-images").appendChild(div);
-    div.appendChild(createShareOverlayDiv(id, img.src.split('.').pop().toLowerCase() === "gif"));
+    div.appendChild(createShareOverlay(id, img.src.split('.').pop().toLowerCase() === "gif"));
     img.onload = function () {
         var shareBar = document.getElementById(id + "shareBar");
         shareBar.style.width = img.clientWidth;
         shareBar.style.display = "inline";
+
+        document.getElementById(id).style.height = img.clientHeight;
     }
     paths.push(data);
 }
-function createShareOverlayDiv(parentID, isGif) {
-    var div = document.createElement("DIV");
-    div.style.position = "absolute";
-    div.style.display = "flex";
-    div.style.alignItems = "flex-end";
-    div.style.top = "0px";
-    div.style.left = "0px";
-    div.style.width = "100%";
-    div.style.height = "100%";
+function createShareOverlay(parentID, isGif) {
+    var shareOverlayContainer = document.createElement("DIV");
+    shareOverlayContainer.id = parentID + "shareOverlayContainer";
+    shareOverlayContainer.style.position = "absolute";
+    shareOverlayContainer.style.top = "0px";
+    shareOverlayContainer.style.left = "0px";
+    shareOverlayContainer.style.display = "flex";
+    shareOverlayContainer.style.alignItems = "flex-end";
+    shareOverlayContainer.style.width = "100%";
+    shareOverlayContainer.style.height = "100%";
 
     var shareBar = document.createElement("div");
     shareBar.id = parentID + "shareBar"
@@ -63,18 +66,35 @@ function createShareOverlayDiv(parentID, isGif) {
     var shareButtonID = parentID + "shareButton";
     shareBar.innerHTML += '<div class="shareButtonDiv">' +
             '<label class="shareButtonLabel" for="' + shareButtonID + '">SHARE</label>' +
-            '<input type="button" class="shareButton" id="' + shareButtonID + '" onclick="" />' +
+            '<input type="button" class="shareButton" id="' + shareButtonID + '" onclick="selectImageToShare(' + parentID + ')" />' +
         '</div>'
-    div.appendChild(shareBar);
+    shareOverlayContainer.appendChild(shareBar);
 
     var shareOverlay = document.createElement("div");
-    shareOverlay.style.visibilty = "hidden";
+    shareOverlay.id = parentID + "shareOverlay";
+    shareOverlay.style.display = "none";
     shareOverlay.style.backgroundColor = "black";
     shareOverlay.style.opacity = "0.5";
-    div.appendChild(shareOverlay);
+    shareOverlay.style.width = "100%";
+    shareOverlay.style.height = "100%";
+    shareOverlayContainer.appendChild(shareOverlay);
 
-    return div;
+    return shareOverlayContainer;
 }
+function selectImageToShare(selectedID) {
+    selectedID = selectedID.id; // Why is this necessary?
+    var shareOverlayContainer = document.getElementById(selectedID + "shareOverlayContainer");
+    var shareBar = document.getElementById(selectedID + "shareBar");
+    var shareOverlay = document.getElementById(selectedID + "shareOverlay");
+
+    shareOverlayContainer.style.outline = "4px solid #00b4ef";
+    shareOverlayContainer.style.outlineOffset = "-4px";
+
+    shareBar.style.display = "none";
+
+    shareOverlay.style.display = "inline";
+}
+
 function handleCaptureSetting(setting) {
     var stillAndGif = document.getElementById('stillAndGif');
     var stillOnly = document.getElementById('stillOnly');