From 01e78612c7ece62d22d1bf9d16b583ac287e760d Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 20 Apr 2017 17:17:35 -0700 Subject: [PATCH] Soooo much progress today --- scripts/system/html/SnapshotReview.html | 9 +++-- scripts/system/html/css/SnapshotReview.css | 10 +++--- scripts/system/html/css/hifi-style.css | 40 ++++++++++++++++++++++ scripts/system/html/js/SnapshotReview.js | 28 ++++++++++----- 4 files changed, 69 insertions(+), 18 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index e785fde69d..400be4abdc 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -27,7 +27,7 @@
- +
@@ -40,10 +40,9 @@

- -
- - + +
+
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 58866feef0..1e233b22f3 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -20,8 +20,8 @@ body { .title { padding: 6px 10px; text-align: left; - height: 20px; - line-height: 20px; + height: 26px; + line-height: 26px; clear: both; } @@ -43,7 +43,7 @@ body { } .hifi-glyph { font-size: 30px; - top: -7px; + top: -4px; } input[type=button].naked { color: #afafaf; @@ -64,7 +64,7 @@ input[type=button].naked:active { */ #snapshot-pane { width: 100%; - height: 574px; + height: 560px; display: flex; justify-content: center; align-items: center; @@ -170,7 +170,7 @@ input[type=button].naked:active { margin-left: 10px; } #snap-settings form input { - margin-bottom: 10px; + margin-bottom: 5px; } #snap-button { diff --git a/scripts/system/html/css/hifi-style.css b/scripts/system/html/css/hifi-style.css index e95ceca4da..41cda569c9 100644 --- a/scripts/system/html/css/hifi-style.css +++ b/scripts/system/html/css/hifi-style.css @@ -92,3 +92,43 @@ hr { //margin: -10px; padding: 0; } + +input[type=radio] { + width: 2em; + margin: 0; + padding: 0; + font-size: 1em; + opacity: 0; +} +input[type=radio] + label{ + display: inline-block; + margin-left: -2em; + line-height: 2em; +} +input[type=radio] + label > span{ + display: inline-block; + width: 20px; + height: 20px; + margin: 5px; + border-radius: 50%; + background: #6B6A6B; + background-image: linear-gradient(#7D7D7D, #6B6A6B); + vertical-align: bottom; +} +input[type=radio]:checked + label > span{ + background-image: linear-gradient(#7D7D7D, #6B6A6B); +} +input[type=radio]:active + label > span, +input[type=radio]:hover + label > span{ + background-image: linear-gradient(#FFFFFF, #AFAFAF); +} +input[type=radio]:checked + label > span > span, +input[type=radio]:active + label > span > span{ + display: block; + width: 10px; + height: 10px; + margin: 2.5px; + border: 2px solid #36CDFF; + border-radius: 50%; + background: #00B4EF; +} \ No newline at end of file diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 3346635a6a..aae1fc5787 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -21,7 +21,7 @@ function addImage(data) { div.id = id; img.id = id + "img"; div.style.width = "100%"; - div.style.height = "" + Math.floor(100 / imageCount) + "%"; + div.style.height = "" + 502 / imageCount + "px"; div.style.display = "flex"; div.style.justifyContent = "center"; div.style.alignItems = "center"; @@ -32,13 +32,16 @@ function addImage(data) { img.src = data.localPath; div.appendChild(img); document.getElementById("snapshot-images").appendChild(div); - 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"; + var isGif = img.src.split('.').pop().toLowerCase() === "gif"; + div.appendChild(createShareOverlay(id, isGif)); + if (!isGif) { + 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; + document.getElementById(id).style.height = img.clientHeight; + } } paths.push(data); } @@ -195,7 +198,16 @@ window.onload = function () { message.data.forEach(addImage); } else { var gifPath = message.data[0].localPath; - document.getElementById('p0img').src = gifPath; + var p0img = document.getElementById('p0img'); + p0img.src = gifPath; + + p0img.onload = function () { + var shareBar = document.getElementById("p0shareBar"); + shareBar.style.width = p0img.clientWidth; + shareBar.style.display = "inline"; + document.getElementById('p0').style.height = p0img.clientHeight; + } + paths[0].localPath = gifPath; } } else {