mirror of
https://github.com/overte-org/overte.git
synced 2025-04-08 07:12:40 +02:00
Another checkpoint
This commit is contained in:
Zach Fox
parent
0beceae59b
commit
7817c72ea1
12 changed files with 116 additions and 65 deletions
|
|
@ -125,36 +125,21 @@ input[type=button].naked:active {
|
|||
font-family: Raleway-SemiBold;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
width: 60px;
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.showShareButtonsButtonDiv.active:hover {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background-size: 2px;
|
||||
}
|
||||
.showShareButtonsButtonDiv > label {
|
||||
text-shadow: 2px 2px 3px #000000;
|
||||
margin-bottom: -10px;
|
||||
margin-bottom: -14px;
|
||||
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;
|
||||
.showShareButtonsButtonDiv:hover > label {
|
||||
text-shadow: none;
|
||||
}
|
||||
.showShareButtonDots {
|
||||
display: block;
|
||||
|
|
@ -164,56 +149,44 @@ input[type=button].naked:active {
|
|||
font-size: 60px;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
bottom: 42px;
|
||||
bottom: 32px;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
.shareButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-bottom: 15px;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
height: 40px;
|
||||
width: calc(100% - 60px);
|
||||
margin-bottom: 25px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.shareButtons img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.shareButton {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
.blastToConnections {
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
height: 29px;
|
||||
background-image: url(../img/fb_logo.png);
|
||||
}
|
||||
.shareWithEveryone {
|
||||
background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center;
|
||||
border-width: 0px;
|
||||
text-align: left;
|
||||
margin-right: 8px;
|
||||
height: 29px;
|
||||
width: 30px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.facebookButton {
|
||||
background-image: url(../img/fb_logo.png);
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.twitterButton {
|
||||
background-image: url(../img/twitter_logo.png);
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.shareControlsHelp {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 65px;
|
||||
left: 73px;
|
||||
right: 0;
|
||||
font-family: Raleway-Regular;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
padding-left: 8px;
|
||||
color: white;
|
||||
}
|
||||
/*
|
||||
// END styling of share overlay
|
||||
|
|
|
|||
20
scripts/system/html/img/blast_icon.svg
Normal file
20
scripts/system/html/img/blast_icon.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M39.3,25.9c1.6,4.2,3.2,8.4,4.8,12.5c0.1,0.3,0.2,0.6,0,0.9c-0.3,0.3-0.6,0.3-1,0.2c-4-0.8-8.1-1.7-12.1-2.5
|
||||
c-0.5-0.1-1-0.1-1.5,0.1c-0.5,0.2-1,0.4-1.5,0.6c-0.8,0.3-0.9,0.7-0.4,1.4c2.1,2.7,4.2,5.5,6.3,8.2c0.1,0.2,0.2,0.3,0.3,0.5
|
||||
c0.2,0.4,0.1,0.7-0.3,1c-0.1,0.1-0.3,0.2-0.5,0.2c-1.5,0.6-3,1.1-4.4,1.7c-0.8,0.3-1,0.3-1.5-0.4c-2.3-3-4.6-5.9-6.9-8.9
|
||||
c-0.5-0.6-0.6-0.6-1.3-0.4c-0.3,0.1-0.6,0.2-0.8,0.3c-1,0.3-2-0.1-2.3-1.1c-1.2-3.2-2.5-6.5-3.7-9.7c-0.4-1.1,0-2,1.1-2.5
|
||||
c0.9-0.4,1.9-0.7,2.8-1.1c2.7-1,5.3-2,8-3c0.5-0.2,0.9-0.5,1.2-0.9c2.4-3.3,4.9-6.6,7.4-9.9c0.2-0.3,0.4-0.5,0.8-0.5
|
||||
c0.4,0,0.5,0.4,0.7,0.7C36.1,17.5,37.7,21.7,39.3,25.9z"/>
|
||||
<path class="st0" d="M38.2,15.6c-0.2,0-0.4-0.1-0.6-0.2c-0.6-0.3-0.7-1.1-0.4-1.6l3.7-6.1C41.3,7.1,42,7,42.6,7.3
|
||||
c0.6,0.3,0.7,1.1,0.4,1.6l-3.7,6.1C39,15.4,38.6,15.6,38.2,15.6z"/>
|
||||
<path class="st0" d="M53.1,36.7c-0.1,0-0.2,0-0.3,0l-7.4-1.6c-0.6-0.1-1-0.8-0.9-1.4c0.1-0.6,0.8-1,1.4-0.9l7.4,1.6
|
||||
c0.6,0.1,1,0.8,0.9,1.4C54.1,36.4,53.6,36.7,53.1,36.7z"/>
|
||||
<path class="st0" d="M42.5,24.8c-0.4,0-0.9-0.3-1.1-0.7c-0.3-0.6,0-1.3,0.6-1.6l7.5-3.5c0.6-0.3,1.3,0,1.6,0.6
|
||||
c0.3,0.6,0,1.3-0.6,1.6L43,24.7C42.8,24.8,42.7,24.8,42.5,24.8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
13
scripts/system/html/img/fb_icon.svg
Normal file
13
scripts/system/html/img/fb_icon.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M22.3,32c1.9,0,3.8,0,5.8,0c0.4,0,0.4,0,0.4,0.4c0,6,0,12.1,0,18.1h7.8c0-6,0-12.1,0-18.1c0-0.4,0-0.4,0.4-0.4
|
||||
c1.9,0,3.8,0,5.8,0c0.3,0,0.3,0,0.4-0.3c0.2-1.2,0.3-2.5,0.5-3.7c0.1-1.2,0.3-2.3,0.4-3.5h-7.4c0-0.1,0-0.2,0-0.3c0-1.6,0-3.3,0-4.9
|
||||
c0-0.4,0.1-0.8,0.2-1.2c0.3-1.1,1-1.7,2.1-1.9c0.5-0.1,1.1-0.1,1.6-0.1c1.1,0,2.3,0,3.4,0c0.3,0,0.3-0.1,0.3-0.3c0-2,0-4.1,0-6.1
|
||||
c0-0.2-0.1-0.3-0.3-0.4c-2-0.2-4-0.3-6-0.2c-2.2,0.1-4.2,0.7-6,2.1c-1.5,1.3-2.4,2.9-2.8,4.8c-0.3,1-0.3,2.1-0.3,3.2
|
||||
c0,1.7,0,3.4,0,5v0.4h-0.3c-2,0-3.9,0-5.9,0c-0.3,0-0.3,0.1-0.3,0.3c0,2.3,0,4.6,0,6.9C22,32,22,32,22.3,32z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,012 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
19
scripts/system/html/img/hifi_icon.svg
Normal file
19
scripts/system/html/img/hifi_icon.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M12,52.3c6.5,0,13.2,0,20.2,0c6.5,0,13.4,0,20.6,0c3.5,0,5-1.6,5-5.6c0-10.2,0-20.5,0-30.7c0-4-1.3-5.5-5-5.5
|
||||
c-4.8,0-9.6,0-14.4,0l-5.9,0c-2,0-4,0-6,0c-4.8,0-9.7,0-14.5,0c-3.5,0-4.9,1.5-4.9,5.5c0,10.3,0,20.6,0,30.9
|
||||
C7.1,50.6,8.6,52.3,12,52.3z M41.9,43.3C41.9,43.3,41.9,43.3,41.9,43.3c0.1-0.1,0.1-0.1,0.1-0.2c1.4-1.5,2.8-3,4.3-4.6l0.8-0.9
|
||||
c0.6,0.6,1.1,1.2,1.7,1.8c1.8,1.9,3.7,3.9,5.4,6c0.2,0.3,0.3,1.2,0,2.7c-0.1,0.1-0.5,0.2-1.5,0.4c-4.4,0.9-7.7-0.6-10.2-4.5
|
||||
C42.4,43.8,42.2,43.5,41.9,43.3z M54.5,32.1c0,2.7,0,5.5,0,8.2L53.3,39c-1.4-1.5-2.8-3-4.2-4.4c-1.7-1.8-2.3-1.8-3.9,0
|
||||
c-1.4,1.5-2.8,3-4.2,4.5l-1.5,1.6l-3.4-3.6c-3.4-3.7-6.8-7.3-10.2-10.9c-1.1-1.2-1.8-1.8-2.4-1.8c-0.6,0-1.3,0.6-2.4,1.8
|
||||
c-2.6,2.8-5.4,5.5-8.1,8.4l-3,2.9v-4.4c0-1.6,0.2-3.2,0.2-4.8c0-4.1,0.1-8.4,0.1-12.5c0-0.7,0.1-1.1,0.3-1.3
|
||||
c0.2-0.2,0.6-0.3,1.2-0.3c13.7,0,27.3,0,41.2,0c0.5,0,1,0,1.2,0.3c0.1,0.2,0.2,0.5,0.2,0.9C54.5,20.9,54.5,26.6,54.5,32.1z
|
||||
M12.7,40.2c2.7-2.7,5.2-5.4,7.9-8.3c0.9-1,1.9-2.1,2.9-3.1L42,48.5c-0.2,0-0.4,0-0.6,0c-9.6,0-19.3,0-28.9,0c-0.8,0-1.5,0-1.7-0.2
|
||||
c-0.2-0.2-0.2-1-0.3-2l0-0.1C10.2,43.7,10.9,42,12.7,40.2z"/>
|
||||
<path class="st0" d="M37,23.7c0,2.1,1.4,3.8,3.3,3.8c1.9,0,3.4-1.6,3.4-3.7c0-2.1-1.4-3.8-3.3-3.8C38.5,19.9,37,21.6,37,23.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
12
scripts/system/html/img/twitter_icon.svg
Normal file
12
scripts/system/html/img/twitter_icon.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M13.1,43.9c4.5,0,8.2-0.9,11.8-3.6c-3.7-0.7-6.2-2.3-7.6-5.5c0.9-0.2,1.7-0.3,2.9-0.6c-3.6-1.7-5.8-4-6.2-7.9
|
||||
c1.1,0.2,2,0.4,3.6,0.8c-3.3-3.5-4.5-6.9-2.5-11.1c4.8,4.9,10.2,8.2,16.6,8.5c0.7-2.3,1-4.6,2-6.4c2.2-3.9,7.4-5.2,11-2.6
|
||||
c2,1.4,3.6,1.2,5.5,0.4c0.4-0.2,0.7-0.2,1.7-0.5c-1.1,1.5-1.8,2.5-2.7,3.8c1.1-0.1,2-0.3,2.9-0.4c0,0.2,0.1,0.3,0,0.4
|
||||
c-2.6,3.4-2.9,4-3.8,8.9c-3.1,15.7-19.7,23.9-34,16.7C14.2,44.6,13.9,44.4,13.1,43.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 854 B |
Binary file not shown.
|
Before Width: | Height: | Size: 552 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -90,7 +90,7 @@ function selectImageToShare(selectedID, isSelected) {
|
|||
imageContainer.style.outline = "4px solid #00b4ef";
|
||||
imageContainer.style.outlineOffset = "-4px";
|
||||
|
||||
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
||||
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
|
||||
|
||||
shareButtonsDiv.style.visibility = "visible";
|
||||
shareBarHelp.style.visibility = "visible";
|
||||
|
|
@ -136,11 +136,11 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
|
|||
'</div>' +
|
||||
'<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
|
||||
if (canBlast) {
|
||||
shareBarInnerHTML += '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />';
|
||||
shareBarInnerHTML += '<div class="shareButton blastToConnections' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')"><img src="img/blast_icon.svg"></div>';
|
||||
}
|
||||
shareBarInnerHTML += '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
|
||||
'<a class="facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
|
||||
'<a class="twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
|
||||
shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')"><img src="img/hifi_icon.svg"></div>' +
|
||||
'<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
|
||||
'<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
|
||||
'</div>';
|
||||
|
||||
shareBar.innerHTML = shareBarInnerHTML;
|
||||
|
|
@ -214,16 +214,16 @@ function showUploadingMessage(selectedID, destination) {
|
|||
var socialIcon = document.createElement("img");
|
||||
switch (destination) {
|
||||
case 'blast':
|
||||
socialIcon.src = "img/shareIcon.png";
|
||||
socialIcon.src = "img/blast_icon.svg";
|
||||
break;
|
||||
case 'hifi':
|
||||
socialIcon.src = "img/shareToFeed.png";
|
||||
socialIcon.src = "img/hifi_icon.svg";
|
||||
break;
|
||||
case 'facebook':
|
||||
socialIcon.src = "img/fb_logo72.png";
|
||||
socialIcon.src = "img/fb_icon.svg";
|
||||
break;
|
||||
case 'twitter':
|
||||
socialIcon.src = "img/twitter_logo72.png";
|
||||
socialIcon.src = "img/twitter_icon.svg";
|
||||
break;
|
||||
}
|
||||
uploadingMessage.appendChild(socialIcon);
|
||||
|
|
@ -330,20 +330,34 @@ function shareButtonHovered(destination, selectedID) {
|
|||
if (selectedID.id) {
|
||||
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
||||
}
|
||||
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
|
||||
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
|
||||
shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes,
|
||||
itr;
|
||||
|
||||
for (itr = 0; itr < shareButtonsDiv.length; itr += 1) {
|
||||
shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)";
|
||||
}
|
||||
|
||||
switch (destination) {
|
||||
case 'blast':
|
||||
shareBarHelp.style.backgroundColor = "#EA4C5F";
|
||||
shareBarHelp.innerHTML = "Blast to my connections";
|
||||
document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F";
|
||||
break;
|
||||
case 'hifi':
|
||||
shareBarHelp.style.backgroundColor = "#1FC6A6";
|
||||
shareBarHelp.innerHTML = "Share in Snapshots Feed";
|
||||
document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6";
|
||||
break;
|
||||
case 'facebook':
|
||||
shareBarHelp.style.backgroundColor = "#3C58A0";
|
||||
shareBarHelp.innerHTML = "Share on Facebook";
|
||||
document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
|
||||
break;
|
||||
case 'twitter':
|
||||
shareBarHelp.style.backgroundColor = "#00B4EE";
|
||||
shareBarHelp.innerHTML = "Share on Twitter";
|
||||
document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue