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 @@ Share - + @@ -10,6 +10,9 @@
+ + +
@@ -17,29 +20,16 @@
-
-
-
- - - - -
-
-
- -
+
+
+
+ +
+ + +
-
-
- - - - - - - - +
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;