Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 15:49:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

More and more progress!

Browse source
This commit is contained in:
Zach Fox 2017-04-19 16:44:16 -07:00
parent a4f428a6e6
commit 0b4cd41d75
2 changed files with 62 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -80,6 +80,44 @@ input[type=button].naked:active {
max-height: 100%; max-height: 100%;
vertical-align: middle; vertical-align: middle;
} }
.gifLabel {
font-family: Raleway-SemiBold;
font-size: 18px;
color: white;
float: left;
text-shadow: 2px 2px 3px #000000;
margin-left: 20px;
}
.shareButtonDiv {
display: flex;
align-items: center;
font-family: Raleway-SemiBold;
font-size: 14px;
color: white;
float: right;
text-shadow: 2px 2px 3px #000000;
width: 100px;
height: 100%;
margin-right: 10px;
}
.shareButtonLabel {
vertical-align: middle;
}
.shareButton {
background-color: white;
width: 40px;
height: 40px;
border-radius: 50%;
border-width: 0;
margin-left: 5px;
}
.shareButton:hover {
background-color: #afafaf;
}
.shareButton:active {
background-color: white;
}
/* /*
// END styling of snapshot pane and its contents // END styling of snapshot pane and its contents
*/ */

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

@ -18,7 +18,7 @@ function addImage(data) {
var div = document.createElement("DIV"); var div = document.createElement("DIV");
var id = "p" + idCounter++; var id = "p" + idCounter++;
var img = document.createElement("IMG"); var img = document.createElement("IMG");
img.id = "img" + id; img.id = id + "img";
div.style.width = "100%"; div.style.width = "100%";
div.style.height = "" + Math.floor(100 / imageCount) + "%"; div.style.height = "" + Math.floor(100 / imageCount) + "%";
div.style.display = "flex"; div.style.display = "flex";
@ -31,11 +31,16 @@ function addImage(data) {
} }
img.src = data.localPath; img.src = data.localPath;
div.appendChild(img); div.appendChild(img);
div.appendChild(createShareOverlayDiv());
document.getElementById("snapshot-images").appendChild(div); document.getElementById("snapshot-images").appendChild(div);
div.appendChild(createShareOverlayDiv(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";
}
paths.push(data); paths.push(data);
} }
function createShareOverlayDiv() { function createShareOverlayDiv(parentID, isGif) {
var div = document.createElement("DIV"); var div = document.createElement("DIV");
div.style.position = "absolute"; div.style.position = "absolute";
div.style.display = "flex"; div.style.display = "flex";
@ -46,14 +51,24 @@ function createShareOverlayDiv() {
div.style.height = "100%"; div.style.height = "100%";
var shareBar = document.createElement("div"); var shareBar = document.createElement("div");
shareBar.style.backgroundColor = "black"; shareBar.id = parentID + "shareBar"
shareBar.style.opacity = "0.5"; shareBar.style.display = "none";
shareBar.style.width = "100%"; shareBar.style.width = "100%";
shareBar.style.height = "50px"; shareBar.style.height = "60px";
shareBar.style.lineHeight = "60px";
shareBar.style.clear = "both";
shareBar.style.marginLeft = "auto";
shareBar.style.marginRight = "auto";
shareBar.innerHTML = isGif ? '<span class="gifLabel">GIF</span>' : "";
var shareButtonID = parentID + "shareButton";
shareBar.innerHTML += '<div class="shareButtonDiv">' +
'<label class="shareButtonLabel" for="' + shareButtonID + '">SHARE</label>' +
'<input type="button" class="shareButton" id="' + shareButtonID + '" onclick="" />' +
'</div>'
div.appendChild(shareBar); div.appendChild(shareBar);
var shareOverlay = document.createElement("div"); var shareOverlay = document.createElement("div");
shareOverlay.style.display = "none"; shareOverlay.style.visibilty = "hidden";
shareOverlay.style.backgroundColor = "black"; shareOverlay.style.backgroundColor = "black";
shareOverlay.style.opacity = "0.5"; shareOverlay.style.opacity = "0.5";
div.appendChild(shareOverlay); div.appendChild(shareOverlay);
@ -100,7 +115,7 @@ window.onload = function () {
// TESTING FUNCTIONS START // TESTING FUNCTIONS START
// Uncomment and modify the lines below to test SnapshotReview in a browser. // Uncomment and modify the lines below to test SnapshotReview in a browser.
imageCount = 2; imageCount = 2;
addImage({ localPath: 'http://lorempixel.com/1512/1680' }); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/2017-01-27 50 Avatars!/!!!.gif' });
addImage({ localPath: 'http://lorempixel.com/553/255' }); addImage({ localPath: 'http://lorempixel.com/553/255' });
//addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'}); //addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'});
// TESTING FUNCTIONS END // TESTING FUNCTIONS END
@ -126,7 +141,7 @@ window.onload = function () {
message.action.forEach(addImage); message.action.forEach(addImage);
} else { } else {
var gifPath = message.action[0].localPath; var gifPath = message.action[0].localPath;
document.getElementById('imgp0').src = gifPath; document.getElementById('p0img').src = gifPath;
paths[0].localPath = gifPath; paths[0].localPath = gifPath;
} }
} else { } else {