styling for map info box mostly complete
This commit is contained in:
parent
51221ee3f7
commit
f9f147304f
7 changed files with 195 additions and 49 deletions
BIN
app/assets/images/delete_mapinfo.png
Normal file
BIN
app/assets/images/delete_mapinfo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 348 B |
BIN
app/assets/images/share_sprite_mapinfo.png
Normal file
BIN
app/assets/images/share_sprite_mapinfo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1 KiB |
|
@ -821,15 +821,15 @@ Metamaps.TopicCard = {
|
|||
|
||||
$el.attr('maxlength', '140');
|
||||
|
||||
$('.showcard .title').append('<div class="titleCounter"></div>');
|
||||
$('.showcard .title').append('<div class="nameCounter forTopic"></div>');
|
||||
|
||||
var callback = function (data) {
|
||||
$('.titleCounter').html(data.all + '/140');
|
||||
$('.nameCounter.forTopic').html(data.all + '/140');
|
||||
};
|
||||
Countable.live(el, callback);
|
||||
});
|
||||
bipName.bind("best_in_place:deactivate", function () {
|
||||
$('.titleCounter').remove();
|
||||
$('.nameCounter.forTopic').remove();
|
||||
});
|
||||
|
||||
//bind best_in_place ajax callbacks
|
||||
|
@ -3247,6 +3247,8 @@ Metamaps.Topic = {
|
|||
createTopicLocally: function () {
|
||||
var self = Metamaps.Topic;
|
||||
|
||||
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
|
||||
|
||||
var metacode = Metamaps.Metacodes.findWhere({
|
||||
name: Metamaps.Create.newTopic.metacode
|
||||
});
|
||||
|
@ -3383,6 +3385,8 @@ Metamaps.Synapse = {
|
|||
synapse,
|
||||
mapping;
|
||||
|
||||
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
|
||||
|
||||
//for each node in this array we will create a synapse going to the position2 node.
|
||||
var synapsesToCreate = [];
|
||||
|
||||
|
@ -3451,6 +3455,9 @@ Metamaps.Synapse = {
|
|||
*
|
||||
*/
|
||||
Metamaps.Map = {
|
||||
events: {
|
||||
editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
|
||||
},
|
||||
init: function () {
|
||||
var self = Metamaps.Map;
|
||||
|
||||
|
@ -3467,6 +3474,8 @@ Metamaps.Map = {
|
|||
|
||||
self.InfoBox.init();
|
||||
self.CheatSheet.init();
|
||||
|
||||
$(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper);
|
||||
},
|
||||
launch: function (id) {
|
||||
var bb = Metamaps.Backbone;
|
||||
|
@ -3552,6 +3561,11 @@ Metamaps.Map = {
|
|||
|
||||
Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
|
||||
Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data;
|
||||
},
|
||||
editedByActiveMapper: function () {
|
||||
if (Metamaps.Active.Mapper) {
|
||||
Metamaps.Mappers.add(Metamaps.Active.Mapper);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -3598,9 +3612,8 @@ Metamaps.Map.InfoBox = {
|
|||
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>",
|
||||
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="input">{{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">{{desc}}</span>',
|
||||
deleteHTML: "<a href='/maps/{{id}}' class='delete' data-bypass='true' data-confirm='Delete this map (nodes and synapses will remain)?' data-method='delete' rel='nofollow'>Delete</a>",
|
||||
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 () {
|
||||
var self = Metamaps.Map.InfoBox;
|
||||
|
||||
|
@ -3657,7 +3670,9 @@ Metamaps.Map.InfoBox = {
|
|||
obj["name"] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get("name")}) : map.get("name");
|
||||
obj["desc"] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get("desc")}) : map.get("desc");
|
||||
obj["map_creator_tip"] = isCreator ? self.changePermissionText : "";
|
||||
obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : "";
|
||||
obj["contributors_class"] = Metamaps.Mappers.length > 1 ? "multiple" : "";
|
||||
obj["contributors_class"] += Metamaps.Mappers.length === 2 ? " mTwo" : "";
|
||||
obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "/assets/user.png";
|
||||
obj["contributor_list"] = self.createContributorList();
|
||||
obj["user_name"] = isCreator ? "You" : map.get("user_name");
|
||||
|
||||
|
@ -3675,6 +3690,24 @@ Metamaps.Map.InfoBox = {
|
|||
$('.mapInfoBox.canEdit .best_in_place').best_in_place();
|
||||
|
||||
// because anyone who can edit the map can change the map title
|
||||
var bipName = $('.mapInfoBox .best_in_place_name');
|
||||
bipName.unbind("best_in_place:activate").bind("best_in_place:activate", function () {
|
||||
var $el = bipName.find('textarea');
|
||||
var el = $el[0];
|
||||
|
||||
$el.attr('maxlength', '140');
|
||||
|
||||
$('.mapInfoName').append('<div class="nameCounter forMap"></div>');
|
||||
|
||||
var callback = function (data) {
|
||||
$('.nameCounter.forMap').html(data.all + '/140');
|
||||
};
|
||||
Countable.live(el, callback);
|
||||
});
|
||||
bipName.unbind("best_in_place:deactivate").bind("best_in_place:deactivate", function () {
|
||||
$('.nameCounter.forMap').remove();
|
||||
});
|
||||
|
||||
$('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
|
||||
var name = $(this).html();
|
||||
$('.mapName').html(name);
|
||||
|
@ -3695,15 +3728,22 @@ Metamaps.Map.InfoBox = {
|
|||
var self = Metamaps.Map.InfoBox;
|
||||
var mapper = Metamaps.Active.Mapper;
|
||||
|
||||
if (mapper && Metamaps.Mappers.get(mapper.id) === undefined) {
|
||||
Metamaps.Mappers.add(mapper);
|
||||
var contributors_class = "";
|
||||
if (Metamaps.Mappers.length === 2) contributors_class = "multiple mTwo";
|
||||
else if (Metamaps.Mappers.length > 2) contributors_class = "multiple";
|
||||
|
||||
var contributors_image = "/assets/user.png";
|
||||
if (Metamaps.Mappers.length > 0) {
|
||||
// get the first contributor and use their image
|
||||
contributors_image = Metamaps.Mappers.models[0].get("image");
|
||||
}
|
||||
$('.mapContributors').text(Metamaps.Mappers.length)
|
||||
.append('<div class="tip">' + self.createContributorList() + '</div>');
|
||||
$('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class);
|
||||
$('.mapContributors span').text(Metamaps.Mappers.length)
|
||||
$('.mapContributors .tip').text(self.createContributorList());
|
||||
$('.mapTopics').text(Metamaps.Topics.length);
|
||||
$('.mapSynapses').text(Metamaps.Synapses.length);
|
||||
|
||||
$('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted());
|
||||
$('.mapEditedAt').html('<span>Last edited: </span>' + Metamaps.Util.nowDateFormatted());
|
||||
},
|
||||
onPermissionClick: function (event) {
|
||||
var self = Metamaps.Map.InfoBox;
|
||||
|
|
|
@ -1405,7 +1405,7 @@ float: left;
|
|||
color: #F5F5F5;
|
||||
border-radius: 2px;
|
||||
width: 360px;
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
padding: 0;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
|
@ -1414,21 +1414,29 @@ float: left;
|
|||
.mapInfoName {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
padding: 26px 16px;
|
||||
padding: 13px 16px;
|
||||
margin: 13px 0;
|
||||
position: relative;
|
||||
}
|
||||
.mapInfoName input {
|
||||
.mapInfoName textarea {
|
||||
width: 328px;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
color: #F5F5F5;
|
||||
font-family: 'din-medium', helvetica, sans-serif;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
resize: none;
|
||||
}
|
||||
.mapInfoBox.canEdit #mapInfoName:hover {
|
||||
background-image: url(edit.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.mapInfoStat {
|
||||
background-color: #E0E0E0;
|
||||
font-size: 18px;
|
||||
|
@ -1451,10 +1459,34 @@ float: left;
|
|||
text-align: left;
|
||||
}
|
||||
.mapContributors {
|
||||
background-image: url(MMCCicon_mapper.png);
|
||||
background-position: 13px center;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
margin: 9px 0px 9px 56px;
|
||||
padding: 0;
|
||||
width: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#mapContribs {
|
||||
float: left;
|
||||
border: 2px solid #424242;
|
||||
background-color: #fff;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
#mapContribs.multiple.mTwo {
|
||||
box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242;
|
||||
}
|
||||
#mapContribs.multiple {
|
||||
box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242,4px 3px 0 0 #B5B5B5,5px 4px 0 0 #424242;
|
||||
}
|
||||
.mapContributors span {
|
||||
height: 20px;
|
||||
padding-top: 5px;
|
||||
padding-left: 8px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.infoStatIcon .tip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
@ -1478,7 +1510,7 @@ float: left;
|
|||
right: 32px;
|
||||
}
|
||||
.mapInfoBox .hoverForTip:hover .tip {
|
||||
display: block;
|
||||
display: none;
|
||||
}
|
||||
.mapTopics {
|
||||
background-image: url(topic32.png);
|
||||
|
@ -1552,7 +1584,7 @@ float: left;
|
|||
color: #E0E0E0;
|
||||
margin: 8px;
|
||||
padding-right: 16px;
|
||||
height: 106px;
|
||||
height: 115px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
overflow-y: auto;
|
||||
|
@ -1573,14 +1605,22 @@ float: left;
|
|||
resize: none;
|
||||
width: 340px;
|
||||
}
|
||||
.mapInfoBox.canEdit .mapInfoDesc:hover {
|
||||
background-image: url(edit.png);
|
||||
background-position: top right;
|
||||
background-repeat: no-repeat;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.mapInfoBox .mapInfoMeta {
|
||||
height: 35px;
|
||||
border-top: 1px solid #F5F5F5;
|
||||
padding: 6px 0 7px 16px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.mapInfoBox .mapInfoMeta p {
|
||||
margin: 4px 0;
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
color: #F5F5F5;
|
||||
}
|
||||
|
@ -1593,6 +1633,43 @@ float: left;
|
|||
color: #dab539;
|
||||
}
|
||||
|
||||
.mapInfoButtonsWrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 4px;
|
||||
}
|
||||
.mapInfoButtonsWrapper > div {
|
||||
float: right;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapInfoShareIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(share_sprite_mapinfo.png);
|
||||
background-repeat: no-repeat;
|
||||
margin: 4px auto 0;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
.mapInfoShare:hover .mapInfoShareIcon {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.mapInfoDelete {
|
||||
background-image: url(delete_mapinfo.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 8px;
|
||||
}
|
||||
.mapInfoButtonsWrapper span {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: block;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
/* lightboxes */
|
||||
|
||||
#lightbox_overlay {
|
||||
|
|
|
@ -1,3 +1,23 @@
|
|||
.nameCounter {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
right: 2px;
|
||||
font-size: 11px;
|
||||
font-family: helvetica;
|
||||
color: #727272;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.nameCounter.forMap {
|
||||
color: #FFF;
|
||||
bottom: -11px;
|
||||
}
|
||||
|
||||
.nameCounter.forTopic {
|
||||
|
||||
}
|
||||
|
||||
|
||||
#center-container {
|
||||
position:relative;
|
||||
height:100%;
|
||||
|
@ -85,15 +105,6 @@
|
|||
text-align:center;
|
||||
resize: none;
|
||||
}
|
||||
.titleCounter {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
right: 2px;
|
||||
font-size: 11px;
|
||||
font-family: helvetica;
|
||||
color: #727272;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.CardOnGraph .scroll {
|
||||
display:block;
|
||||
|
|
|
@ -6,11 +6,13 @@
|
|||
<div class="templates">
|
||||
|
||||
<script type="text/template" id="mapInfoBoxTemplate">
|
||||
<div class="mapInfoName">{{{name}}}</div>
|
||||
<div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
|
||||
|
||||
<div class="mapInfoStat">
|
||||
<div class="infoStatIcon mapContributors hoverForTip">
|
||||
{{contributor_count}}
|
||||
<img id="mapContribs" class="{{contributors_class}}"
|
||||
width="25" height="25" src="{{contributor_image}}" />
|
||||
<span>{{contributor_count}}</span>
|
||||
<div class="tip">{{contributor_list}}</div>
|
||||
</div>
|
||||
<div class="infoStatIcon mapTopics">
|
||||
|
@ -24,17 +26,22 @@
|
|||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
<div class="mapInfoDesc">
|
||||
<div class="mapInfoDesc" id="mapInfoDesc">
|
||||
{{{desc}}}
|
||||
</div>
|
||||
|
||||
<div class="mapInfoMeta">
|
||||
<p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
|
||||
<p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
|
||||
</div>
|
||||
|
||||
<div class="mapInfoButtonsWrapper">
|
||||
<div class="mapInfoDelete">
|
||||
{{{delete}}}
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
<div class="mapInfoShare">
|
||||
<div class="mapInfoShareIcon"></div>
|
||||
<span>Share</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
@ -5,11 +5,20 @@
|
|||
<div class="mapInfoBox mapElement mapElementHidden permission <%= @map && @map.user == user ? " yourMap" : "" %><%= @map && @map.authorize_to_edit(user) ? " canEdit" : "" %>">
|
||||
|
||||
<% if @map %>
|
||||
<div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div>
|
||||
<div class="mapInfoName" id="mapInfoName"><%= best_in_place @map, :name, :type => :textarea, :activator => "#mapInfoName", :classes => 'best_in_place_name' %></div>
|
||||
|
||||
<div class="mapInfoStat">
|
||||
<div class="infoStatIcon mapContributors hoverForTip">
|
||||
<%= @map.contributors.count %>
|
||||
<% if @map.contributors.count == 0 %>
|
||||
<img id="mapContribs" width="25" height="25" src="/assets/user.png" />
|
||||
<% elsif @map.contributors.count == 1 %>
|
||||
<img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" />
|
||||
<% elsif @map.contributors.count == 2 %>
|
||||
<img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" class="multiple mTwo" />
|
||||
<% elsif @map.contributors.count > 2 %>
|
||||
<img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" class="multiple" />
|
||||
<% end %>
|
||||
<span><%= @map.contributors.count %></span>
|
||||
<% contributorList = ''
|
||||
@map.contributors.each_with_index do |c, index|
|
||||
comma = (index+1) == @map.contributors.count ? '' : ', '
|
||||
|
@ -34,22 +43,24 @@
|
|||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="mapInfoDesc">
|
||||
<div class="mapInfoDesc" id="mapInfoDesc">
|
||||
<% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated? && @map.desc != "" && @map.desc != nil )%>
|
||||
<%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %>
|
||||
<%= best_in_place @map, :desc, :activator => "#mapInfoDesc", :type => :textarea, :nil => "Click to add description...", :classes => 'best_in_place_desc' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="mapInfoMeta">
|
||||
<p class="mapCreatedAt"><span>Created by:</span> <%= @map.user == user ? "You" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
|
||||
<p class="mapEditedAt"><span>Last edited:</span> <%= @map.updated_at.strftime("%m/%d/%Y") %></p>
|
||||
</div>
|
||||
|
||||
<div class="mapInfoButtonsWrapper">
|
||||
<div class="mapInfoDelete">
|
||||
<% if @map.user == user %>
|
||||
<%= link_to 'Delete', map_path(@map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete,
|
||||
:data => { :bypass => 'true'} %>
|
||||
<% end %>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
<div class="mapInfoShare">
|
||||
<div class="mapInfoShareIcon"></div>
|
||||
<span>Share</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
Loading…
Reference in a new issue