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

finished up map info box in terms of dynamically switching pages to other maps. styled other tips.

Browse source
This commit is contained in:
Connor Turland 2014-11-19 22:42:14 -05:00
parent 2fe33f0f57
commit a20f6b760f
6 changed files with 83 additions and 53 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

@ -165,6 +165,9 @@ Metamaps.GlobalUI = {
clearTimeout(self.notifyTimeOut);
Metamaps.Famous.toast.hide();
},
shareInvite: function(inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
}
};

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

@ -1335,7 +1335,7 @@ Metamaps.SynapseCard = {
add_user_info: function (synapse) {
var u = '<div id="edgeUser" class="hoverForTip">';
u += '<img src="" width="24" height="24" />'
u += '<div class="tip">Created by ' + synapse.get("user_name") + '</div></div>';
u += '<div class="tip">' + synapse.get("user_name") + '</div></div>';
$('#editSynLowerBar').append(u);
// get mapper image
@ -4503,7 +4503,7 @@ Metamaps.Map.InfoBox = {
isOpen: false,
changing: false,
selectingPermission: false,
changePermissionText: "<div class='tip'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
init: function () {
@ -4631,9 +4631,17 @@ Metamaps.Map.InfoBox = {
createContributorList: function () {
var self = Metamaps.Map.InfoBox;
var mapperNames = Metamaps.Mappers.pluck("name");
var string = "";
return mapperNames.length > 0 ? mapperNames.join(", ") : "No one has added anything yet.";
string += "<ul>";
Metamaps.Mappers.each(function(m){
string += '<li><img class="rtUserImage" width="25" height="25" src="' + m.get("image") + '" />' + m.get("name") + '</li>';
});
string += "</ul>";
return string;
},
updateNumbers: function () {
var self = Metamaps.Map.InfoBox;

84
app/assets/stylesheets/application.css
View file

@ -531,7 +531,7 @@ input[type="submit"]:active {
background: #FFFFFF;
height: 14px;
margin: 0;
padding: 10px 6px;
padding: 14px 6px;
border: none;
border-radius: 2px;
outline: none;
@ -1360,9 +1360,14 @@ float: left;
#new_topic .tt-suggestion,
#new_synapse .tt-suggestion {
background: #F5F5F5;
width: 270px;
position: relative;
}
#new_topic .tt-suggestion {
width: 256px;
}
#new_synapse .tt-suggestion {
width: 270px;
}
#new_topic .autocompleteSection {
float: left;
}
@ -1460,25 +1465,25 @@ float: left;
#new_topic .topicOriginatorIcon img {
border-radius: 12px;
}
#new_topic .topicOriginatorIcon:hover .tip,
#new_synapse .synapseOriginatorIcon:hover .tip {
display: block;
#new_topic .topicOriginatorIcon .tooltips {
left: 32px;
top: -2px;
right: auto;
}
#new_topic .tip,
#new_synapse .tip {
display: none;
#new_topic .topicOriginatorIcon .tooltips:after {
content: '';
position: absolute;
background: white;
width: auto;
top: 0;
left: 23px;
color: black;
white-space: nowrap;
border-radius: 4px;
font-size: 15px !important;
line-height: 15px;
padding: 2px 5px 2px;
z-index: 100;
top: 57%;
left: -4px;
margin-top: -6px;
width: 0;
height: 0;
border-right: 4px solid #000000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
#new_topic .topicOriginatorIcon:hover .tooltips {
display:block;
}
#new_synapse .tt-dropdown-menu {
@ -1509,7 +1514,7 @@ float: left;
top: 4px;
}
#new_synapse .synapseOriginatorIcon .tooltips {
right: 36px;
right: 32px;
top: -2px;
}
#new_synapse .synapseOriginatorIcon .tooltips:after {
@ -1609,7 +1614,6 @@ float: left;
margin: 9px 0px 9px 56px;
padding: 0;
width: 64px;
cursor: pointer;
}
#mapContribs {
float: left;
@ -1647,8 +1651,6 @@ float: left;
background: #202020;
min-width: 180px;
max-width: 250px;
min-height: 44px;
max-height: 188px;
text-align: center;
color: black;
border-radius: 4px;
@ -1663,6 +1665,11 @@ float: left;
left: -10px;
}
.mapContributors .tip ul {
max-height: 188px;
overflow-y: auto;
}
.mapContributors .tip li {
list-style-type: none;
white-space: nowrap;
@ -1682,7 +1689,7 @@ float: left;
.mapContributors div:after {
content: '';
position: absolute;
margin-top: -124px;
top: -4px;
left: 21px;
width: 0;
height: 0;
@ -1699,14 +1706,32 @@ float: left;
border-radius: 14px;
}
.mapInfoBox .mapPermission .tip {
top: 0;
right: 32px;
}
.mapInfoBox .hoverForTip:hover .tip {
display: block;
}
.mapInfoBox .mapPermission .tooltips {
top: -20px;
right: 36px;
width: 155px;
white-space: normal;
text-align: center;
}
.mapInfoBox .mapPermission .tooltips:after {
content: '';
position: absolute;
right: -4px;
top: 24px;
width: 0;
height: 0;
border-left: 4px solid black;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.mapInfoBox.yourMap .mapPermission.hoverForTip:hover .tooltips {
display: block;
}
.mapTopics {
background-image: url(topic32.png);
background-position: 13px center;
@ -2318,6 +2343,9 @@ and it won't be important on password protected instances */
#joinCodesBox {
margin-top: 30px;
}
#joinCodesBox button {
margin: 16px 198px 0;
}
/* new map */
.new_map {

11
app/views/layouts/_lightboxes.html.erb
View file

@ -227,12 +227,13 @@
<h3>SHARE INVITE</h3>
<div class="leaveSpace"></div>
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, as well as building an active community of contributors and healthy culture. As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
<p>Copy and send the link + access code below. The access code below is your personal code and can be used multiple times.</p>
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
<div id="joinCodesBox">
<p class="joinCodes">HTTP://METAMAPS.CC/JOIN</p>
<% mapper = current_user %>
<p class="joinCodes">ACCESS CODE: <%= mapper.code %></p>
<% mapper = current_user %>
<p class="joinCodes">http://metamaps.cc/join?code=<%= mapper.code %></p>
<button class="button" onclick="Metamaps.GlobalUI.shareInvite('http://metamaps.cc/join?code=<%= mapper.code %>');">COPY INVITE LINK!</button>
</div>
</div>

4
app/views/layouts/_templates.html.erb
View file

@ -13,7 +13,7 @@
<img id="mapContribs" class="{{contributors_class}}"
width="25" height="25" src="{{contributor_image}}" />
<span>{{contributor_count}}</span>
<div class="tip">{{contributor_list}}</div>
<div class="tip">{{{contributor_list}}}</div>
</div>
<div class="infoStatIcon mapTopics">
{{topic_count}}
@ -177,7 +177,7 @@
<div class="topicNumSynapses">{{synapseCount}}</div>
<div class="topicOriginatorIcon hoverForTip">
<img width="24" height="24" src="{{originatorImage}}" />
<span class="tip topicOriginator">{{originator}}</span>
<span class="tooltips topicOriginator">{{originator}}</span>
</div>
<div class="topicPermission {{permission}}"></div>
</div>

18
app/views/maps/_mapinfobox.html.erb
View file

@ -23,17 +23,9 @@
<img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" class="multiple" />
<% end %>
<span><%= @map.contributors.count %></span>
<% contributorList = ''
@map.contributors.each_with_index do |c, index|
comma = (index+1) == @map.contributors.count ? '' : ', '
contributorList += c.name + comma
end
if @map.contributors.count == 0
contributorList = 'No one has added anything yet.'
end %>
<div class="tip"> <ul><% @map.contributors.each_with_index do |c, index| %>
<li > <img class="rtUserImage" width="25" height="25" src="<%= @map.contributors[index].image.url(:square) %>" />
<%= @map.contributors[index].name %>
<div class="tip"> <ul><% @map.contributors.each_with_index do |c, index| %>
<li > <img class="rtUserImage" width="25" height="25" src="<%= c.image.url(:square) %>" />
<%= c.name %>
</li>
<% end %></ul></div>
</div>
@ -44,9 +36,7 @@
<%= @map.synapses.count %>
</div>
<div class="infoStatIcon mapPermission <%= @map.permission %> hoverForTip">
<% if @map.user == user %>
<div class="tip">As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>
<% end %>
<div class="tooltips">As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>
</div>
<div class="clearfloat"></div>
</div>