diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html
index 145cfb16a9..2a68217976 100644
--- a/scripts/system/html/SnapshotReview.html
+++ b/scripts/system/html/SnapshotReview.html
@@ -1,7 +1,7 @@
<html>
<head>
<title>Share</title>
- <link rel="stylesheet" type="text/css" href="css/edit-style.css">
+ <link rel="stylesheet" type="text/css" href="css/hifi-style.css">
<link rel="stylesheet" type="text/css" href="css/SnapshotReview.css">
<script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="js/SnapshotReview.js"></script>
@@ -10,6 +10,9 @@
<body>
<div class="snapsection title">
<label>Snap</label>
+
+ <label id="settingsLabel" for="snapshotSettings">Settings</label>
+ <input type="button" class="hifi-glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
</div>
<hr />
<div id="snapshot-pane">
@@ -17,29 +20,16 @@
</div>
</div>
<div id="snapshot-controls">
- <div class="snapsection" id="snap-buttons">
- <div id="sharing">
- <div class="button">
- <span class="compound-button">
- <input type="button" class="blue" id="share" value="Share in Feed" onclick="shareSelected()" />
- <span class="glyph"></span>
- </span>
- </div>
- </div>
- <div class="button">
- <input type="button" class="black" id="close" value="Don't Share" onclick="doNotShare()" />
- </div>
+ <div id="snap-settings">
+ <label>CAMERA CAPTURES</label><br />
+ <form action="">
+ <input type="radio" name="cameraCaptures" id="stillAndGif" value="stillAndGif" />
+ <label for="stillAndGif">Still + GIF</label><br />
+ <input type="radio" name="cameraCaptures" id="stillOnly" value="stillOnly" />
+ <label for="stillOnly">Still Only</label>
+ </form>
</div>
- <hr />
- <div class="snapsection" id="snap-settings">
- <span class="setting">
- <input type="button" class="glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
- <label for="snapshotSettings">Settings</label>
- </span>
- <span class="setting checkbox">
- <input id="openFeed" type="checkbox" checked />
- <label for="openFeed">Open feed after</label>
- </span>
+ <div id="snap-button" onclick="takeSnapshot()">
</div>
</div>
</body>
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index 34b690a021..058fe141dd 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -9,40 +9,66 @@
*/
body {
- padding-top: 0;
- padding-bottom: 14px;
+ padding: 0;
}
+/*
+// START styling of top bar and its contents
+*/
.snapsection {
- padding-top: 14px;
- text-align: center;
+ padding-top: 12px;
}
.snapsection.title {
padding-top: 0;
text-align: left;
+ height: 24px;
+ clear: both;
}
.title label {
- font-size: 18px;
position: relative;
- top: 12px;
+ top: 10px;
+ font-size: 18px;
+ float: left;
}
+#snapshotSettings {
+ position: relative;
+ top: 4px;
+ float: right;
+}
+#settingsLabel {
+ position: relative;
+ float: right;
+ top: 12px;
+ font-family: Raleway-SemiBold;
+ font-size: 14px;
+}
+.hifi-glyph {
+ font-size: 30px;
+}
+input[type=button].naked {
+ color: #afafaf;
+ background: none;
+}
+input[type=button].naked:hover {
+ color: #ffffff;
+}
+input[type=button].naked:active {
+ color: #afafaf;
+}
+/*
+// END styling of top bar and its contents
+*/
+
+/*
+// START styling of snapshot pane and its contents
+*/
#snapshot-pane {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- padding-top: 56px;
- padding-bottom: 175px;
}
#snapshot-images {
- height: 100%;
- width: 100%;
position: relative;
}
@@ -77,23 +103,59 @@ body {
#snapshot-images img.multiple {
padding-left: 28px;
}
+/*
+// END styling of snapshot pane and its contents
+*/
+/*
+// START styling of snapshot controls (bottom panel) and its contents
+*/
#snapshot-controls {
width: 100%;
position: absolute;
left: 0;
bottom: 14px;
+ margin-bottom: 14px;
+ overflow: hidden;
+}
+#snap-settings {
+ float: left;
+ margin-left: 10px;
+}
+#snap-settings label {
+ margin-bottom: 50px;
+}
+#snap-settings form input {
+ margin-bottom: 50px;
}
+#snap-button {
+ width: 65px;
+ height: 65px;
+ border-radius: 50%;
+ background: #EA4C5F;
+ border: 3px solid white;
+ margin-left: auto;
+ margin-right: auto;
+}
+#snap-button:hover {
+ background: #C62147;
+}
+#snap-button:active {
+ background: #EA4C5F;
+}
+/*
+// END styling of snapshot controls (bottom panel) and its contents
+*/
+
+/*
+// START misc styling
+*/
.prompt {
font-family: Raleway-SemiBold;
font-size: 14px;
}
-div.button {
- padding-top: 21px;
-}
-
.compound-button {
position: relative;
height: auto;
@@ -103,7 +165,7 @@ div.button {
padding-left: 40px;
}
-.compound-button .glyph {
+.compound-button {
display: inline-block;
position: absolute;
left: 12px;
@@ -114,36 +176,6 @@ div.button {
background-repeat: no-repeat;
background-size: 23px 23px;
}
-
-.setting {
- display: inline-table;
- height: 28px;
-}
-
-.setting label {
- display: table-cell;
- vertical-align: middle;
- font-family: Raleway-SemiBold;
- font-size: 14px;
-}
-
-.setting + .setting {
- margin-left: 18px;
-}
-
-input[type=button].naked {
- font-size: 40px;
- line-height: 40px;
- width: 30px;
- padding: 0;
- margin: 0 0 -6px 0;
- position: relative;
- top: -6px;
- left: -8px;
- background: none;
-}
-
-input[type=button].naked:hover {
- color: #00b4ef;
- background: none;
-}
+/*
+// END misc styling
+*/
diff --git a/scripts/system/html/css/hifi-style.css b/scripts/system/html/css/hifi-style.css
new file mode 100644
index 0000000000..52d4c72b23
--- /dev/null
+++ b/scripts/system/html/css/hifi-style.css
@@ -0,0 +1,90 @@
+/*
+// hifi-style.css
+//
+// Created by Zach Fox on 2017-04-18
+// Copyright 2017 High Fidelity, Inc.
+//
+// Distributed under the Apache License, Version 2.0.
+// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+
+@font-face {
+ font-family: Raleway-Regular;
+ src: url(../../../../resources/fonts/Raleway-Regular.ttf), /* Windows production */
+ url(../../../../fonts/Raleway-Regular.ttf), /* OSX production */
+ url(../../../../interface/resources/fonts/Raleway-Regular.ttf); /* Development, running script in /HiFi/examples */
+}
+
+@font-face {
+ font-family: Raleway-Light;
+ src: url(../../../../resources/fonts/Raleway-Light.ttf),
+ url(../../../../fonts/Raleway-Light.ttf),
+ url(../../../../interface/resources/fonts/Raleway-Light.ttf);
+}
+
+@font-face {
+ font-family: Raleway-Bold;
+ src: url(../../../../resources/fonts/Raleway-Bold.ttf),
+ url(../../../../fonts/Raleway-Bold.ttf),
+ url(../../../../interface/resources/fonts/Raleway-Bold.ttf);
+}
+
+@font-face {
+ font-family: Raleway-SemiBold;
+ src: url(../../../../resources/fonts/Raleway-SemiBold.ttf),
+ url(../../../../fonts/Raleway-SemiBold.ttf),
+ url(../../../../interface/resources/fonts/Raleway-SemiBold.ttf);
+}
+
+@font-face {
+ font-family: FiraSans-SemiBold;
+ src: url(../../../../resources/fonts/FiraSans-SemiBold.ttf),
+ url(../../../../fonts/FiraSans-SemiBold.ttf),
+ url(../../../../interface/resources/fonts/FiraSans-SemiBold.ttf);
+}
+
+@font-face {
+ font-family: AnonymousPro-Regular;
+ src: url(../../../../resources/fonts/AnonymousPro-Regular.ttf),
+ url(../../../../fonts/AnonymousPro-Regular.ttf),
+ url(../../../../interface/resources/fonts/AnonymousPro-Regular.ttf);
+}
+
+@font-face {
+ font-family: HiFi-Glyphs;
+ src: url(../../../../resources/fonts/hifi-glyphs.ttf),
+ url(../../../../fonts/hifi-glyphs.ttf),
+ url(../../../../interface/resources/fonts/hifi-glyphs.ttf);
+}
+
+body {
+ color: #afafaf;
+ background-color: #404040;
+ font-family: Raleway-Regular;
+ font-size: 15px;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+hr {
+ border: none;
+ background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
+ width: 100%;
+ margin: 21px -21px 0 -21px;
+ padding: 14px 21px 0 21px;
+}
+
+.hifi-glyph {
+ font-family: HiFi-Glyphs;
+ border: none;
+ //margin: -10px;
+ padding: 0;
+}
diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index f140c54e09..7fec372c94 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -124,3 +124,9 @@ function snapshotSettings() {
action: "openSettings"
}));
}
+function takeSnapshot() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "snapshot",
+ action: "takeSnapshot"
+ }));
+}
diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js
index 6039bc09c1..47abf41021 100644
--- a/scripts/system/snapshot.js
+++ b/scripts/system/snapshot.js
@@ -75,6 +75,11 @@ function onMessage(message) {
tablet.loadQMLOnTop("TabletGeneralPreferences.qml");
}
break;
+ case 'takeSnapshot':
+ // In settings, first store the paths to the last snapshot
+ //
+ onClicked();
+ break;
case 'setOpenFeedFalse':
Settings.setValue('openFeedAfterShare', false);
break;