Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-04-16 14:16:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Soooo much progress today

Browse source
This commit is contained in:
Zach Fox 2017-04-20 17:17:35 -07:00
parent 16b4af8a9d
commit 01e78612c7
4 changed files with 69 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
scripts/system/html/SnapshotReview.html
View file

@ -27,7 +27,7 @@
<body>
<div class="title">
<label>Snap</label>
<label>Snapshot Review</label>
<label id="settingsLabel" for="snapshotSettings">Settings</label>
<input type="button" class="hifi-glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
</div>
@ -40,10 +40,9 @@
<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>
<input type="radio" name="cameraCaptures" id="stillAndGif" value="stillAndGif" /><label for="stillAndGif"><span><span></span></span>Still + GIF</label>
<br />
<input type="radio" name="cameraCaptures" id="stillOnly" value="stillOnly" /><label for="stillOnly"><span><span></span></span>Still Only</label>
</form>
</div>
<div id="snap-button" onclick="takeSnapshot()">

10
scripts/system/html/css/SnapshotReview.css
View file

@ -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 {

40
scripts/system/html/css/hifi-style.css
View file

@ -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;
}

28
scripts/system/html/js/SnapshotReview.js
View file

@ -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 {