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 {