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');
$('.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;

View file

@ -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 {

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 {
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;

View file

@ -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>

View file

@ -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>