From 2880b22f9fa28ecfadf5e47d39d60faede33af81 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 20 Apr 2017 14:00:28 -0700 Subject: [PATCH] External share buttons! --- scripts/system/html/SnapshotReview.html | 19 +++++++- scripts/system/html/css/SnapshotReview.css | 33 +++++++++++++ scripts/system/html/js/SnapshotReview.js | 54 ++++++++++++++++++++-- 3 files changed, 101 insertions(+), 5 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 1dff573014..3d8387890a 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -5,12 +5,29 @@ +
-
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 9cbc129ab6..a0602b2575 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -123,6 +123,39 @@ input[type=button].naked:active { .shareButton:active { background-color: white; } + +/* +// START styling of share overlay +*/ +.shareOverlayDiv { + text-align: center; +} +.shareControls { + text-align: left; + display: flex; + justify-content: center; + flex-direction: row; + align-items: flex-start; + height: 50px; +} +.shareOverlayLabel { + line-height: 75px; +} +.hifiShareControls { + text-align: left; + width: 40%; + margin-left: 10%; +} +.externalShareControls { + text-align: left; + width: 40%; + margin-right: 10%; +} +.cancelShare { +} +/* +// END styling of share overlay +*/ /* // END styling of snapshot pane and its contents */ diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 3ebff3f687..21affd772b 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -70,14 +70,44 @@ function createShareOverlay(parentID, isGif) { '' shareOverlayContainer.appendChild(shareBar); + var shareOverlayBackground = document.createElement("div"); + shareOverlayBackground.id = parentID + "shareOverlayBackground"; + shareOverlayBackground.style.display = "none"; + shareOverlayBackground.style.position = "absolute"; + shareOverlayBackground.style.zIndex = "1"; + shareOverlayBackground.style.top = "0px"; + shareOverlayBackground.style.left = "0px"; + shareOverlayBackground.style.backgroundColor = "black"; + shareOverlayBackground.style.opacity = "0.5"; + shareOverlayBackground.style.width = "100%"; + shareOverlayBackground.style.height = "100%"; + shareOverlayContainer.appendChild(shareOverlayBackground); + var shareOverlay = document.createElement("div"); shareOverlay.id = parentID + "shareOverlay"; + shareOverlay.className = "shareOverlayDiv"; shareOverlay.style.display = "none"; - shareOverlay.style.backgroundColor = "black"; - shareOverlay.style.opacity = "0.5"; shareOverlay.style.width = "100%"; shareOverlay.style.height = "100%"; + shareOverlay.style.zIndex = "2"; + var shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton"; + var inviteConnectionsCheckboxID = parentID + "inviteConnectionsCheckbox"; + shareOverlay.innerHTML = '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; shareOverlayContainer.appendChild(shareOverlay); + twttr.widgets.load(shareOverlay); return shareOverlayContainer; } @@ -85,15 +115,31 @@ function selectImageToShare(selectedID) { selectedID = selectedID.id; // Why is this necessary? var shareOverlayContainer = document.getElementById(selectedID + "shareOverlayContainer"); var shareBar = document.getElementById(selectedID + "shareBar"); + var shareOverlayBackground = document.getElementById(selectedID + "shareOverlayBackground"); var shareOverlay = document.getElementById(selectedID + "shareOverlay"); - shareOverlayContainer.style.outline = "4px solid #00b4ef"; - shareOverlayContainer.style.outlineOffset = "-4px"; + shareOverlay.style.outline = "4px solid #00b4ef"; + shareOverlay.style.outlineOffset = "-4px"; shareBar.style.display = "none"; + shareOverlayBackground.style.display = "inline"; shareOverlay.style.display = "inline"; } +function cancelSharing(selectedID) { + selectedID = selectedID.id; // Why is this necessary? + var shareOverlayContainer = document.getElementById(selectedID + "shareOverlayContainer"); + var shareBar = document.getElementById(selectedID + "shareBar"); + var shareOverlayBackground = document.getElementById(selectedID + "shareOverlayBackground"); + var shareOverlay = document.getElementById(selectedID + "shareOverlay"); + + shareOverlay.style.outline = "none"; + + shareBar.style.display = "inline"; + + shareOverlayBackground.style.display = "none"; + shareOverlay.style.display = "none"; +} function handleCaptureSetting(setting) { var stillAndGif = document.getElementById('stillAndGif');