diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index c0d5991e0b..b03b748082 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -170,12 +170,6 @@ input[type=button].naked:active { height: 40px; display: inline-block; } -.blastToConnections { - background-image: url(../img/fb_logo.png); -} -.shareWithEveryone { - background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center; -} .shareControlsHelp { height: 25px; line-height: 25px; @@ -193,22 +187,32 @@ input[type=button].naked:active { */ /* -// START styling of uploading message +// START styling of confirmation message */ -.uploadingMessage { +.confirmationMessageContainer { width: 100%; height: 100%; position: absolute; + background-color: rgba(0, 0, 0, 0.45); text-align: center; - background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; + pointer-events: none; + color: white; + font-weight: bold; + font-size: 16px; } -.uploadingMessage > img { +.confirmationMessage { + width: 130px; + height: 130px; + margin: 50px auto 0 auto; +} +.confirmationMessage > img { width: 72px; height: 72px; display: block; - margin: 60px auto 10px auto; + margin: 0 auto; + padding: 10px 0 0 0; } /* // END styling of uploading message diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index beae7d0884..c2577bb8c0 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -140,9 +140,9 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled '' + '
'; @@ -205,6 +205,45 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b updateShareInfo(id, image_data.story_id); } } +function showConfirmationMessage(selectedID, destination) { + if (selectedID.id) { + selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID + } + + var opacity = 2.0, + confirmationMessageContainer = document.createElement("div"), + confirmationMessage = document.createElement("div"); + confirmationMessageContainer.className = "confirmationMessageContainer"; + + confirmationMessage.className = "confirmationMessage"; + + var socialIcon = document.createElement("img"); + switch (destination) { + case 'blast': + socialIcon.src = "img/blast_icon.svg"; + confirmationMessage.appendChild(socialIcon); + confirmationMessage.innerHTML += 'Blast Sent!'; + confirmationMessage.style.backgroundColor = "#EA4C5F"; + break; + case 'hifi': + socialIcon.src = "img/hifi_icon.svg"; + confirmationMessage.appendChild(socialIcon); + confirmationMessage.innerHTML += 'Snap Shared!'; + confirmationMessage.style.backgroundColor = "#1FC6A6"; + break; + } + + confirmationMessageContainer.appendChild(confirmationMessage); + document.getElementById(selectedID).appendChild(confirmationMessageContainer); + + setInterval(function () { + if (opacity <= 0.05) { + confirmationMessageContainer.remove(); + } + opacity -= 0.05; + confirmationMessageContainer.style.opacity = opacity; + }, 50); +} function showUploadingMessage(selectedID, destination) { if (selectedID.id) { selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID @@ -278,7 +317,7 @@ function blastToConnections(selectedID, isGif) { selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID } - document.getElementById(selectedID + "blastToConnectionsButton").disabled = true; + document.getElementById(selectedID + "blastToConnectionsButton").onclick = function () { }; var storyID = document.getElementById(selectedID).getAttribute("data-story-id"); @@ -289,6 +328,7 @@ function blastToConnections(selectedID, isGif) { story_id: storyID, isGif: isGif })); + showConfirmationMessage(selectedID, 'blast'); } else { showUploadingMessage(selectedID, 'blast'); } @@ -298,7 +338,7 @@ function shareWithEveryone(selectedID, isGif) { selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID } - document.getElementById(selectedID + "shareWithEveryoneButton").disabled = true; + document.getElementById(selectedID + "shareWithEveryoneButton").onclick = function () { }; var storyID = document.getElementById(selectedID).getAttribute("data-story-id"); @@ -309,6 +349,7 @@ function shareWithEveryone(selectedID, isGif) { story_id: storyID, isGif: isGif })); + showConfirmationMessage(selectedID, 'hifi'); } else { showUploadingMessage(selectedID, 'hifi'); } @@ -384,7 +425,7 @@ function handleCaptureSetting(setting) { window.onload = function () { // Uncomment the line below to test functionality in a browser. // See definition of "testInBrowser()" to modify tests. - testInBrowser(1); + //testInBrowser(2); openEventBridge(function () { // Set up a handler for receiving the data, and tell the .js we are ready to receive it. EventBridge.scriptEventReceived.connect(function (message) { @@ -492,7 +533,7 @@ function testInBrowser(test) { } else if (test === 2) { addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true); - showUploadingMessage("p0", 'facebook'); - showUploadingMessage("p1", 'twitter'); + showConfirmationMessage("p0", 'blast'); + showConfirmationMessage("p1", 'hifi'); } }