glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

updated the tooltips

Browse source
This commit is contained in:
Metamaps 2014-11-12 13:31:15 -05:00
parent ea689f182c
commit 842313bb07
5 changed files with 166 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/src/Metamaps.GlobalUI.js
View file

@ -324,6 +324,8 @@ Metamaps.GlobalUI.Account = {
Metamaps.Realtime.close();
Metamaps.Filter.close();
$('.sidebarAccountIcon div').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
@ -337,6 +339,7 @@ Metamaps.GlobalUI.Account = {
close: function () {
var self = Metamaps.GlobalUI.Account;
$('.sidebarAccountIcon div').removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.sidebarAccountBox #user_email').blur();

11
app/assets/javascripts/src/Metamaps.js
View file

@ -1822,6 +1822,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.Account.close();
Metamaps.Filter.close();
$('.sidebarCollaborateIcon div').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
@ -1833,7 +1834,7 @@ Metamaps.Realtime = {
},
close: function () {
var self = Metamaps.Realtime;
$(".sidebarCollaborateIcon div").removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.sidebarCollaborateBox').fadeOut(200, function () {
@ -3063,6 +3064,8 @@ Metamaps.Filter = {
Metamaps.GlobalUI.Account.close();
Metamaps.Realtime.close();
$('.sidebarFilterIcon div').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
@ -3076,6 +3079,8 @@ Metamaps.Filter = {
},
close: function () {
var self = Metamaps.Filter;
$('.sidebarFilterIcon div').removeClass('hide');
if (!self.changing) {
self.changing = true;
@ -4121,6 +4126,7 @@ Metamaps.Map = {
Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data;
},
leavePrivateMap: function(){
var map = Metamaps.Active.Map;
@ -4274,7 +4280,7 @@ Metamaps.Map.InfoBox = {
},
open: function () {
var self = Metamaps.Map.InfoBox;
$('.mapInfoIcon div').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
$('.mapInfoBox').fadeIn(200, function () {
@ -4286,6 +4292,7 @@ Metamaps.Map.InfoBox = {
close: function () {
var self = Metamaps.Map.InfoBox;
$('.mapInfoIcon div').removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.mapInfoBox').fadeOut(200, function () {

145
app/assets/stylesheets/clean.css
View file

@ -763,17 +763,160 @@
background-position: 0 0;
cursor:pointer;
}
.mapControls:hover, .infoAndHelp:hover {
z-index: 4;
}
.zoomExtents {
margin-bottom:5px;
border-radius: 2px;
background-image: url(extents_sprite.png);
}
.zoomExtents:hover {
background-position: -32px 0;
}
.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
.sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .sidebarAccountIcon:hover .tooltipsUnder,
.mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
display: block;
}
.hide {
display: none !important;
}
.tooltips {
display: none;
position: absolute;
background: black;
text-align: center;
right: 45px;
color: white;
border-radius: 2px;
font-family: din-regular;
line-height: 15px;
font-size: 12px;
padding: 3px 5px 2px;
white-space: nowrap;
margin-top: 5px;
}
.tooltipsUnder {
display: none;
position: absolute;
background: black;
text-align: center;
color: white;
border-radius: 2px;
font-family: din-regular;
line-height: 15px;
font-size: 12px;
padding: 3px 5px 2px;
white-space: nowrap;
margin-top: 36px;
}
.tooltipsAbove {
display: none;
position: absolute;
background: black;
text-align: center;
text-transform: none;
color: white;
border-radius: 2px;
font-family: din-regular;
line-height: 15px;
font-size: 12px;
padding: 3px 5px 2px;
white-space: nowrap;
margin-top: -23px;
font-style: normal;
}
.sidebarCollaborateIcon .tooltipsUnder {
margin-left: -3px;
}
.sidebarFilterIcon .tooltipsUnder {
margin-left: -4px;
}
.sidebarForkIcon .tooltipsUnder {
margin-left: -34px;
}
.sidebarForkIcon div:after{
left: 45%;
}
.addMap .tooltipsUnder {
margin-left: -36px;
}
.addMap div:after {
left: 45%;
}
.mapInfoIcon .tooltipsAbove {
left: -11px;
}
.openCheatsheet .tooltipsAbove {
left: 29px;
}
.sidebarAccountIcon .tooltipsUnder {
margin-left: -8px;
margin-top: 40px;
}
.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after {
content: '';
position: absolute;
top: 57%;
left: 100%;
margin-top: -6px;
width: 0;
height: 0;
border-left: 4px solid #000000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarAccountIcon div:after {
left: 38%;
}
.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon div:after {
content: '';
position: absolute;
top: 128%;
margin-top: -30px;
width: 0;
height: 0;
border-bottom: 4px solid #000000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.mapInfoIcon div:after, .openCheatsheet div:after {
content: '';
position: absolute;
top: 77%;
left: 41%;
margin-top: 5px;
width: 0;
height: 0;
border-top: 4px solid #000000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.zoomIn {
background-image: url(zoom_sprite.png);
background-position: 0 0;
background-position: 0 /…0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}

10
app/views/layouts/_lowermapelements.html.erb
View file

@ -1,12 +1,12 @@
<div class="mapControls mapElement">
<div class="zoomExtents mapControl"></div>
<div class="zoomIn mapControl"></div>
<div class="zoomOut mapControl"></div>
<div class="zoomExtents mapControl"><div class="tooltips">Center View</div></div>
<div class="zoomIn mapControl"><div class="tooltips">Zoom In</div></div>
<div class="zoomOut mapControl"><div class="tooltips">Zoom In</div></div>
</div>
<div class="infoAndHelp">
<%= render :partial => 'maps/mapinfobox' %>
<div class="mapInfoIcon infoElement mapElement"></div>
<div class="openCheatsheet openLightbox infoElement" data-open="cheatsheet"></div>
<div class="mapInfoIcon infoElement mapElement"><div class="tooltipsAbove">Map Info</div></div>
<div class="openCheatsheet openLightbox infoElement" data-open="cheatsheet"><div class="tooltipsAbove">Help</div></div>
<div class="clearfloat"></div>
</div>

10
app/views/layouts/_upperelements.html.erb
View file

@ -22,7 +22,7 @@
<% if authenticated? %>
<!-- Realtime -->
<div class="sidebarCollaborate upperRightEl">
<div class="sidebarCollaborateIcon upperRightIcon blue"></div>
<div class="sidebarCollaborateIcon upperRightIcon blue"><div class="tooltipsUnder">Junto</div></div>
<div class="sidebarCollaborateBox upperRightBox">
<h3 class="realtimeBoxTitle">REALTIME</h3>
<span class="realtimeOnOff rtOff">OFF</span>
@ -43,7 +43,7 @@
<!-- filtering -->
<div class="sidebarFilter upperRightEl">
<div class="sidebarFilterIcon upperRightIcon"></div>
<div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>
<div class="sidebarFilterBox upperRightBox">
<%= render :partial => 'shared/filterBox' %>
</div>
@ -52,7 +52,7 @@
<% if authenticated? %>
<!-- fork map -->
<div class="sidebarFork upperRightEl">
<div class="sidebarForkIcon upperRightIcon"></div>
<div class="sidebarForkIcon upperRightIcon"><div class="tooltipsUnder">Save to new map</div></div>
</div> <!-- end sidebarFork -->
<% end %>
@ -61,14 +61,14 @@
<% if authenticated? %>
<!-- create new map -->
<div class="addMap openLightbox upperRightEl upperRightIcon" data-open="newmap">
<div class="addMap openLightbox upperRightEl upperRightIcon" data-open="newmap"><div class="tooltipsUnder">Create new map</div>
</div><!-- end addMap -->
<% end %>
<!-- Account / Sign in -->
<% if !(controller_name == "sessions" && action_name == "new") %>
<div class="sidebarAccount upperRightEl">
<div class="sidebarAccountIcon">
<div class="sidebarAccountIcon"><div class="tooltipsUnder">Account</div>
<% if user && user.image %>
<%= image_tag user.image.url(:square), :size => "32x32" %>
<% elsif !authenticated? %>