diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 0aa422ca84..7d4239985f 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -111,20 +111,70 @@ input[type=button].naked:active { justify-content: space-between; flex-direction: row; align-items: center; - height: 45px; - line-height: 60px; + height: 65px; + line-height: 65px; width: calc(100% - 8px); position: absolute; bottom: 4px; left: 4px; right: 4px; } +.showShareButtonsButtonDiv { + display: inline-flex; + align-items: center; + font-family: Raleway-SemiBold; + font-size: 14px; + color: white; + width: 60px; + height: 100%; + margin-right: 10px; + margin-bottom: 15px; +} +.showShareButtonsButtonDiv > label { + text-shadow: 2px 2px 3px #000000; + margin-bottom: -10px; + margin-left: 12px; +} +.showShareButton.active { + border-color: #00b4ef; + border-width: 3px; + background-color: white; +} +.showShareButton.active:hover { + background-color: #afafaf; +} +.showShareButton.active:active { + background-color: white; +} +.showShareButton.inactive { + border-width: 0; + background-color: white; +} +.showShareButton.inactive:hover { + background-color: #afafaf; +} +.showShareButton.inactive:active { + background-color: white; +} +.showShareButtonDots { + display: block; + width: 40px; + height: 40px; + font-family: HiFi-Glyphs; + font-size: 60px; + position: absolute; + left: 6px; + bottom: 42px; + color: white; + pointer-events: none; +} .shareButtons { display: flex; align-items: center; - margin-left: 15px; + margin-left: 0; + margin-bottom: 15px; height: 100%; - width: 75%; + width: calc(100% - 60px); } .blastToConnections { text-align: left; @@ -155,58 +205,15 @@ input[type=button].naked:active { margin-right: 8px; border-radius: 3px; } -.showShareButtonsButtonDiv { - display: inline-flex; - align-items: center; - font-family: Raleway-SemiBold; - font-size: 14px; - color: white; - height: 100%; - margin-right: 10px; -} -.showShareButtonsButtonDiv > label { - text-shadow: 2px 2px 3px #000000; -} -.showShareButton { - width: 40px; - height: 40px; - border-radius: 50%; - border-width: 0; - margin-left: 5px; - outline: none; -} -.showShareButton.active { - border-color: #00b4ef; - border-width: 3px; - background-color: white; -} -.showShareButton.active:hover { - background-color: #afafaf; -} -.showShareButton.active:active { - background-color: white; -} -.showShareButton.inactive { - border-width: 0; - background-color: white; -} -.showShareButton.inactive:hover { - background-color: #afafaf; -} -.showShareButton.inactive:active { - background-color: white; -} -.showShareButtonDots { - display: block; - width: 40px; - height: 40px; - font-family: HiFi-Glyphs; - font-size: 60px; +.shareControlsHelp { + height: 25px; + line-height: 25px; position: absolute; - right: 20px; - bottom: 12px; - color: #00b4ef; - pointer-events: none; + bottom: 0; + left: 65px; + right: 0; + font-family: Raleway-Regular; + font-weight: 400; } /* // END styling of share overlay diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 8a569bdf5c..5045f1a5e9 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -76,14 +76,15 @@ function selectImageToShare(selectedID, isSelected) { image = document.getElementById(selectedID + 'img'), shareBar = document.getElementById(selectedID + "shareBar"), shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"), - showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton"), + shareBarHelp = document.getElementById(selectedID + "shareBarHelp"), + showShareButtonsButtonDiv = document.getElementById(selectedID + "showShareButtonsButtonDiv"), itr, containers = document.getElementsByClassName("shareControls"); if (isSelected) { - showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false); }; - showShareButtonsButton.classList.remove("inactive"); - showShareButtonsButton.classList.add("active"); + showShareButtonsButtonDiv.onclick = function () { selectImageToShare(selectedID, false); }; + showShareButtonsButtonDiv.classList.remove("inactive"); + showShareButtonsButtonDiv.classList.add("active"); image.onclick = function () { selectImageToShare(selectedID, false); }; imageContainer.style.outline = "4px solid #00b4ef"; @@ -92,6 +93,7 @@ function selectImageToShare(selectedID, isSelected) { shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)"; shareButtonsDiv.style.visibility = "visible"; + shareBarHelp.style.visibility = "visible"; for (itr = 0; itr < containers.length; itr += 1) { var parentID = containers[itr].id.slice(0, 2); @@ -100,9 +102,9 @@ function selectImageToShare(selectedID, isSelected) { } } } else { - showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true); }; - showShareButtonsButton.classList.remove("active"); - showShareButtonsButton.classList.add("inactive"); + showShareButtonsButtonDiv.onclick = function () { selectImageToShare(selectedID, true); }; + showShareButtonsButtonDiv.classList.remove("active"); + showShareButtonsButtonDiv.classList.add("inactive"); image.onclick = function () { selectImageToShare(selectedID, true); }; imageContainer.style.outline = "none"; @@ -110,13 +112,14 @@ function selectImageToShare(selectedID, isSelected) { shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)"; shareButtonsDiv.style.visibility = "hidden"; + shareBarHelp.style.visibility = "hidden"; } } function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) { var shareBar = document.createElement("div"), + shareBarHelpID = parentID + "shareBarHelp", shareButtonsDivID = parentID + "shareButtonsDiv", showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv", - showShareButtonsButtonID = parentID + "showShareButtonsButton", showShareButtonsLabelID = parentID + "showShareButtonsLabel", blastToConnectionsButtonID = parentID + "blastToConnectionsButton", shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton", @@ -125,25 +128,25 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled shareBar.id = parentID + "shareBar"; shareBar.className = "shareControls"; - var shareBarInnerHTML = '
' + - '