From f9f147304f74d3f1b113042b6c1da23dbd99847d Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Tue, 14 Oct 2014 16:34:09 -0400 Subject: [PATCH] styling for map info box mostly complete --- app/assets/images/delete_mapinfo.png | Bin 0 -> 348 bytes app/assets/images/share_sprite_mapinfo.png | Bin 0 -> 1060 bytes app/assets/javascripts/src/Metamaps.js | 64 +++++++++++--- app/assets/stylesheets/application.css | 97 ++++++++++++++++++--- app/assets/stylesheets/base.css | 29 ++++-- app/views/layouts/_templates.html.erb | 21 +++-- app/views/maps/_mapinfobox.html.erb | 33 ++++--- 7 files changed, 195 insertions(+), 49 deletions(-) create mode 100644 app/assets/images/delete_mapinfo.png create mode 100644 app/assets/images/share_sprite_mapinfo.png diff --git a/app/assets/images/delete_mapinfo.png b/app/assets/images/delete_mapinfo.png new file mode 100644 index 0000000000000000000000000000000000000000..e6316c2e749ed450b5ce08e72e0d8d27ad5af9d4 GIT binary patch literal 348 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP*AeO zHKHUqKdq!Zu_%?nF(p4KRlzeiF+DXXH8G{K@MNkDP|-_I7srr_TT6lu@-`drm~@EG zUw47`1lwDV90xaVvlkqx%^MuUUoh``$!e*w!;^KDs&?RqxwQ|2D&K4Nrbe1fn_zzH zc!x>u?O9(obg?kRZM2yn`?rttX7h`!f(&am)GO(i=-fMD?Gba9{Ta)Q9c5F4Hb3+0 z$uL$peLty$G5T}s(uW4K#8jr8pR?lXRh#p6*L4{#B+44!*V#b7wv?P7^~+ea7FQ;05MrM3!lnGcq4;UXLbT!*rBz?z)c$@u so@3s#kIR(jI=_8q`1kW1dnO(R=C;!5Q>vWWfSzXXboFyt=akR{01#D(>Hq)$ literal 0 HcmV?d00001 diff --git a/app/assets/images/share_sprite_mapinfo.png b/app/assets/images/share_sprite_mapinfo.png new file mode 100644 index 0000000000000000000000000000000000000000..ebe96f417b08df6dcf1aa037c31cec9995f08c0b GIT binary patch literal 1060 zcmV+<1l#+GP)qJd#$hs<+>(+K#O40kpWE$5v$M1Av$Hc1_9Q9;I-PC`6xAsd z3Kpp_oZQ^ppqZJOUrwjiQ%y~c6^h0P1w&98fG`+vXslN2>g434 zEZjTS*VlWCi;F%;s;a)eUK#8s+_=;R*lac*66T7e97}(H|94z1!4p9l_Na&?Uaz+Y zs^MoW9sZ($v9Ymlv7Xip6lV$X0Ags1QC}Vz-KPf3us*|*zrv<{!P7Z(WWw%0kkt^Q z96%2o{Ii+-Zs0%RqUPr2_;FEpcefGFt6n(L?E?b?;koGW@GvGW0wzMGrKOea?d?13 z>+A91BB4--YHMr7IXOAcxd=S)2MLW97r~V4OH52GCN-PqIDBp$giPF>4 z>2nc4*NR4?5#u=1k%@_kTOdDrT+{}FD}+>zV{Eh80$k*BxdL1SBvC+m22=1dIXPJm z9@FC@NTvy>E}$4gEhr{7H#Z-+2=@WWMWdsm=f}s#>fzyGdR)}n+NzOABs^duyz8~C zt*x+Jgp&$Q<^eBF4Gj%eC>kRa3_&@QF&7C00=)B8v)L>Or~K;bYR_V^_&gqu3i?3! zh>NH_fJE_uiChFhMC78*&dvuef}KalMerx0hr{8-kBguq-xwD`4Bs#p!R}v;i=YSI exrn~}7GMDLfm9V$0Xq5s0000'); + $('.showcard .title').append('
'); 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: "
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.
", - nameHTML: '{{name}}', - descHTML: '{{desc}}', - deleteHTML: "Delete", + nameHTML: '{{name}}', + descHTML: '{{desc}}', 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('
'); + + 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('
' + self.createContributorList() + '
'); + $('.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('Last edited: ' + Metamaps.Util.nowDateFormatted()); }, onPermissionClick: function (event) { var self = Metamaps.Map.InfoBox; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 97a4867e..61b08cc1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -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 { diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index e2fe0ed3..64068181 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -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; diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index 08130955..e826516c 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -6,11 +6,13 @@
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb index ffbae4c0..a9536774 100644 --- a/app/views/maps/_mapinfobox.html.erb +++ b/app/views/maps/_mapinfobox.html.erb @@ -5,11 +5,20 @@
<%= @map && @map.authorize_to_edit(user) ? " canEdit" : "" %>"> <% if @map %> -
<%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %>
+
<%= best_in_place @map, :name, :type => :textarea, :activator => "#mapInfoName", :classes => 'best_in_place_name' %>
- <%= @map.contributors.count %> + <% if @map.contributors.count == 0 %> + + <% elsif @map.contributors.count == 1 %> + + <% elsif @map.contributors.count == 2 %> + + <% elsif @map.contributors.count > 2 %> + + <% end %> + <%= @map.contributors.count %> <% contributorList = '' @map.contributors.each_with_index do |c, index| comma = (index+1) == @map.contributors.count ? '' : ', ' @@ -34,22 +43,24 @@
-
+
<% 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 %>

Created by: <%= @map.user == user ? "You" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %>

Last edited: <%= @map.updated_at.strftime("%m/%d/%Y") %>

-
- -
- <% 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 %> +
+
+ Delete +
+
+
+ Share +
+
<% end %>
\ No newline at end of file