styling for map info box mostly complete

This commit is contained in:
Connor Turland 2014-10-14 16:34:09 -04:00
parent 51221ee3f7
commit f9f147304f
7 changed files with 195 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -821,15 +821,15 @@ Metamaps.TopicCard = {
$el.attr('maxlength', '140'); $el.attr('maxlength', '140');
$('.showcard .title').append('<div class="titleCounter"></div>'); $('.showcard .title').append('<div class="nameCounter forTopic"></div>');
var callback = function (data) { var callback = function (data) {
$('.titleCounter').html(data.all + '/140'); $('.nameCounter.forTopic').html(data.all + '/140');
}; };
Countable.live(el, callback); Countable.live(el, callback);
}); });
bipName.bind("best_in_place:deactivate", function () { bipName.bind("best_in_place:deactivate", function () {
$('.titleCounter').remove(); $('.nameCounter.forTopic').remove();
}); });
//bind best_in_place ajax callbacks //bind best_in_place ajax callbacks
@ -3247,6 +3247,8 @@ Metamaps.Topic = {
createTopicLocally: function () { createTopicLocally: function () {
var self = Metamaps.Topic; var self = Metamaps.Topic;
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
var metacode = Metamaps.Metacodes.findWhere({ var metacode = Metamaps.Metacodes.findWhere({
name: Metamaps.Create.newTopic.metacode name: Metamaps.Create.newTopic.metacode
}); });
@ -3383,6 +3385,8 @@ Metamaps.Synapse = {
synapse, synapse,
mapping; mapping;
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
//for each node in this array we will create a synapse going to the position2 node. //for each node in this array we will create a synapse going to the position2 node.
var synapsesToCreate = []; var synapsesToCreate = [];
@ -3451,6 +3455,9 @@ Metamaps.Synapse = {
* *
*/ */
Metamaps.Map = { Metamaps.Map = {
events: {
editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
},
init: function () { init: function () {
var self = Metamaps.Map; var self = Metamaps.Map;
@ -3467,6 +3474,8 @@ Metamaps.Map = {
self.InfoBox.init(); self.InfoBox.init();
self.CheatSheet.init(); self.CheatSheet.init();
$(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper);
}, },
launch: function (id) { launch: function (id) {
var bb = Metamaps.Backbone; var bb = Metamaps.Backbone;
@ -3552,6 +3561,11 @@ Metamaps.Map = {
Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data; Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_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, changing: false,
selectingPermission: 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='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>', 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">{{desc}}</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>',
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>",
init: function () { init: function () {
var self = Metamaps.Map.InfoBox; 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["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["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["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["contributor_list"] = self.createContributorList();
obj["user_name"] = isCreator ? "You" : map.get("user_name"); obj["user_name"] = isCreator ? "You" : map.get("user_name");
@ -3675,6 +3690,24 @@ Metamaps.Map.InfoBox = {
$('.mapInfoBox.canEdit .best_in_place').best_in_place(); $('.mapInfoBox.canEdit .best_in_place').best_in_place();
// because anyone who can edit the map can change the map title // 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 () { $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
var name = $(this).html(); var name = $(this).html();
$('.mapName').html(name); $('.mapName').html(name);
@ -3695,15 +3728,22 @@ Metamaps.Map.InfoBox = {
var self = Metamaps.Map.InfoBox; var self = Metamaps.Map.InfoBox;
var mapper = Metamaps.Active.Mapper; var mapper = Metamaps.Active.Mapper;
if (mapper && Metamaps.Mappers.get(mapper.id) === undefined) { var contributors_class = "";
Metamaps.Mappers.add(mapper); 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) $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class);
.append('<div class="tip">' + self.createContributorList() + '</div>'); $('.mapContributors span').text(Metamaps.Mappers.length)
$('.mapContributors .tip').text(self.createContributorList());
$('.mapTopics').text(Metamaps.Topics.length); $('.mapTopics').text(Metamaps.Topics.length);
$('.mapSynapses').text(Metamaps.Synapses.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) { onPermissionClick: function (event) {
var self = Metamaps.Map.InfoBox; var self = Metamaps.Map.InfoBox;

View file

@ -1405,7 +1405,7 @@ float: left;
color: #F5F5F5; color: #F5F5F5;
border-radius: 2px; border-radius: 2px;
width: 360px; width: 360px;
height: 300px; min-height: 300px;
padding: 0; padding: 0;
font-style: normal; font-style: normal;
text-align: center; text-align: center;
@ -1414,21 +1414,29 @@ float: left;
.mapInfoName { .mapInfoName {
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
height: 20px; padding: 13px 16px;
padding: 26px 16px; margin: 13px 0;
position: relative;
} }
.mapInfoName input { .mapInfoName textarea {
width: 328px; width: 328px;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
height: 20px;
color: #F5F5F5; color: #F5F5F5;
font-family: 'din-medium', helvetica, sans-serif; font-family: 'din-medium', helvetica, sans-serif;
border: 0; border: 0;
outline: none; outline: none;
background: none; background: none;
text-align: center; 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 { .mapInfoStat {
background-color: #E0E0E0; background-color: #E0E0E0;
font-size: 18px; font-size: 18px;
@ -1451,10 +1459,34 @@ float: left;
text-align: left; text-align: left;
} }
.mapContributors { .mapContributors {
background-image: url(MMCCicon_mapper.png);
background-position: 13px center;
position: relative; 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 { .infoStatIcon .tip {
display: none; display: none;
position: absolute; position: absolute;
@ -1478,7 +1510,7 @@ float: left;
right: 32px; right: 32px;
} }
.mapInfoBox .hoverForTip:hover .tip { .mapInfoBox .hoverForTip:hover .tip {
display: block; display: none;
} }
.mapTopics { .mapTopics {
background-image: url(topic32.png); background-image: url(topic32.png);
@ -1552,7 +1584,7 @@ float: left;
color: #E0E0E0; color: #E0E0E0;
margin: 8px; margin: 8px;
padding-right: 16px; padding-right: 16px;
height: 106px; height: 115px;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
overflow-y: auto; overflow-y: auto;
@ -1573,14 +1605,22 @@ float: left;
resize: none; resize: none;
width: 340px; width: 340px;
} }
.mapInfoBox.canEdit .mapInfoDesc:hover {
background-image: url(edit.png);
background-position: top right;
background-repeat: no-repeat;
cursor: text;
}
.mapInfoBox .mapInfoMeta { .mapInfoBox .mapInfoMeta {
height: 35px; height: 35px;
border-top: 1px solid #F5F5F5; border-top: 1px solid #F5F5F5;
padding: 6px 0 7px 16px; padding: 6px 0 7px 16px;
text-align: left; text-align: left;
position: relative;
} }
.mapInfoBox .mapInfoMeta p { .mapInfoBox .mapInfoMeta p {
margin: 4px 0; margin: 2px 0;
font-size: 12px; font-size: 12px;
color: #F5F5F5; color: #F5F5F5;
} }
@ -1593,6 +1633,43 @@ float: left;
color: #dab539; 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 */ /* lightboxes */
#lightbox_overlay { #lightbox_overlay {

View file

@ -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 { #center-container {
position:relative; position:relative;
height:100%; height:100%;
@ -85,15 +105,6 @@
text-align:center; text-align:center;
resize: none; resize: none;
} }
.titleCounter {
position: absolute;
bottom: 1px;
right: 2px;
font-size: 11px;
font-family: helvetica;
color: #727272;
line-height: 11px;
}
.CardOnGraph .scroll { .CardOnGraph .scroll {
display:block; display:block;

View file

@ -6,11 +6,13 @@
<div class="templates"> <div class="templates">
<script type="text/template" id="mapInfoBoxTemplate"> <script type="text/template" id="mapInfoBoxTemplate">
<div class="mapInfoName">{{{name}}}</div> <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
<div class="mapInfoStat"> <div class="mapInfoStat">
<div class="infoStatIcon mapContributors hoverForTip"> <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 class="tip">{{contributor_list}}</div>
</div> </div>
<div class="infoStatIcon mapTopics"> <div class="infoStatIcon mapTopics">
@ -24,17 +26,22 @@
</div> </div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>
<div class="mapInfoDesc"> <div class="mapInfoDesc" id="mapInfoDesc">
{{{desc}}} {{{desc}}}
</div> </div>
<div class="mapInfoMeta"> <div class="mapInfoMeta">
<p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p> <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
<p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p> <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
</div> <div class="mapInfoButtonsWrapper">
<div class="mapInfoDelete">
<div class="mapInfoDelete"> <span>Delete</span>
{{{delete}}} </div>
<div class="mapInfoShare">
<div class="mapInfoShareIcon"></div>
<span>Share</span>
</div>
</div>
</div> </div>
</script> </script>

View file

@ -5,11 +5,20 @@
<div class="mapInfoBox mapElement mapElementHidden permission <%= @map && @map.user == user ? " yourMap" : "" %><%= @map && @map.authorize_to_edit(user) ? " canEdit" : "" %>"> <div class="mapInfoBox mapElement mapElementHidden permission <%= @map && @map.user == user ? " yourMap" : "" %><%= @map && @map.authorize_to_edit(user) ? " canEdit" : "" %>">
<% if @map %> <% 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="mapInfoStat">
<div class="infoStatIcon mapContributors hoverForTip"> <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 = '' <% contributorList = ''
@map.contributors.each_with_index do |c, index| @map.contributors.each_with_index do |c, index|
comma = (index+1) == @map.contributors.count ? '' : ', ' comma = (index+1) == @map.contributors.count ? '' : ', '
@ -34,22 +43,24 @@
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>
<div class="mapInfoDesc"> <div class="mapInfoDesc" id="mapInfoDesc">
<% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated? && @map.desc != "" && @map.desc != nil )%> <% 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 %> <% end %>
</div> </div>
<div class="mapInfoMeta"> <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="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> <p class="mapEditedAt"><span>Last edited:</span> <%= @map.updated_at.strftime("%m/%d/%Y") %></p>
</div> <div class="mapInfoButtonsWrapper">
<div class="mapInfoDelete">
<div class="mapInfoDelete"> <span>Delete</span>
<% if @map.user == user %> </div>
<%= link_to 'Delete', map_path(@map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete, <div class="mapInfoShare">
:data => { :bypass => 'true'} %> <div class="mapInfoShareIcon"></div>
<% end %> <span>Share</span>
</div>
</div>
</div> </div>
<% end %> <% end %>
</div> </div>