Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-06-07 00:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

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

@ -20,8 +20,8 @@ body {
.title { .title {
padding: 6px 10px; padding: 6px 10px;
text-align: left; text-align: left;
height: 20px; height: 26px;
line-height: 20px; line-height: 26px;
clear: both; clear: both;
} }
@ -43,7 +43,7 @@ body {
} }
.hifi-glyph { .hifi-glyph {
font-size: 30px; font-size: 30px;
top: -7px; top: -4px;
} }
input[type=button].naked { input[type=button].naked {
color: #afafaf; color: #afafaf;
@ -64,7 +64,7 @@ input[type=button].naked:active {
*/ */
#snapshot-pane { #snapshot-pane {
width: 100%; width: 100%;
height: 574px; height: 560px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -170,7 +170,7 @@ input[type=button].naked:active {
margin-left: 10px; margin-left: 10px;
} }
#snap-settings form input { #snap-settings form input {
margin-bottom: 10px; margin-bottom: 5px;
} }
#snap-button { #snap-button {

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

@ -92,3 +92,43 @@ hr {
//margin: -10px; //margin: -10px;
padding: 0; 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; div.id = id;
img.id = id + "img"; img.id = id + "img";
div.style.width = "100%"; div.style.width = "100%";
div.style.height = "" + Math.floor(100 / imageCount) + "%"; div.style.height = "" + 502 / imageCount + "px";
div.style.display = "flex"; div.style.display = "flex";
div.style.justifyContent = "center"; div.style.justifyContent = "center";
div.style.alignItems = "center"; div.style.alignItems = "center";
@ -32,13 +32,16 @@ function addImage(data) {
img.src = data.localPath; img.src = data.localPath;
div.appendChild(img); div.appendChild(img);
document.getElementById("snapshot-images").appendChild(div); document.getElementById("snapshot-images").appendChild(div);
div.appendChild(createShareOverlay(id, img.src.split('.').pop().toLowerCase() === "gif")); var isGif = img.src.split('.').pop().toLowerCase() === "gif";
img.onload = function () { div.appendChild(createShareOverlay(id, isGif));
var shareBar = document.getElementById(id + "shareBar"); if (!isGif) {
shareBar.style.width = img.clientWidth; img.onload = function () {
shareBar.style.display = "inline"; 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); paths.push(data);
} }
@ -195,7 +198,16 @@ window.onload = function () {
message.data.forEach(addImage); message.data.forEach(addImage);
} else { } else {
var gifPath = message.data[0].localPath; 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; paths[0].localPath = gifPath;
} }
} else { } else {