From 51221ee3f7674a0871b0b65636a4f718777c08c6 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Mon, 13 Oct 2014 19:27:30 -0400 Subject: [PATCH] improvements to map info card, as well as small changes to the permission changers in the topic and synapse cards --- app/assets/javascripts/lib/bip.js | 23 +++- app/assets/javascripts/src/Metamaps.js | 150 ++++++++++++--------- app/assets/stylesheets/application.css | 42 +++++- app/assets/stylesheets/base.css | 3 +- app/assets/stylesheets/uservoice.css | 6 + app/models/map.rb | 10 +- app/views/layouts/_templates.html.erb | 4 +- app/views/maps/_mapinfobox.html (copy).erb | 52 ------- app/views/maps/_mapinfobox.html.erb | 10 +- public/famous/main.js | 3 + 10 files changed, 171 insertions(+), 132 deletions(-) delete mode 100644 app/views/maps/_mapinfobox.html (copy).erb diff --git a/app/assets/javascripts/lib/bip.js b/app/assets/javascripts/lib/bip.js index ee804884..1d575fef 100644 --- a/app/assets/javascripts/lib/bip.js +++ b/app/assets/javascripts/lib/bip.js @@ -332,12 +332,18 @@ BestInPlaceEditor.forms = { this.element.html(output); this.setHtmlAttributes(); - this.element.find("input[type='text']")[0].select(); + // START METAMAPS CODE + //this.element.find("input[type='text']")[0].select(); + this.element.find("input[type='text']")[0].focus(); + // END METAMAPS CODE this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler); if (this.cancelButton) { this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler); } this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler); + // START METAMAPS CODE + this.element.find("input[type='text']").bind('keydown', {editor: this}, BestInPlaceEditor.forms.input.keydownHandler); + // END METAMAPS CODE this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler); this.blurTimer = null; this.userClicked = false; @@ -385,6 +391,11 @@ BestInPlaceEditor.forms = { if (event.keyCode == 27) { event.data.editor.abort(); } + // START METAMAPS CODE + else if (event.keyCode == 13 && !event.shiftKey) { + event.data.editor.update(); + } + // END METAMAPS CODE } }, @@ -427,6 +438,16 @@ BestInPlaceEditor.forms = { event.data.editor.update(); }, + // START METAMAPS CODE + keydownHandler : function(event) { + if (event.keyCode == 13 && !event.shiftKey) { + event.preventDefault(); + event.stopPropagation(); + return false; + } + }, + // END METAMAPS CODE + keyupHandler : function(event) { if (event.keyCode == 27) { event.data.editor.abort(); diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index 185355c0..2f3cf2f9 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/app/assets/javascripts/src/Metamaps.js @@ -808,7 +808,7 @@ Metamaps.TopicCard = { if (authorized) { $('.showcard .metacodeTitle').click(openMetacodeSelect); $('.showcard').click(hideMetacodeSelect); - $('.metacodeSelect > ul li').click(function (event){ + $('.metacodeSelect > ul > li').click(function (event){ event.stopPropagation(); }); $('.metacodeSelect li li').click(metacodeLiClick); @@ -845,36 +845,44 @@ Metamaps.TopicCard = { }); } + + var permissionLiClick = function (event) { + selectingPermission = false; + var permission = $(this).attr('class'); + topic.save({ + permission: permission + }); + $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); + $('.showcard .permissionSelect').remove(); + event.stopPropagation(); + }; + + var openPermissionSelect = function (event) { + if (!selectingPermission) { + selectingPermission = true; + $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow + if ($(this).hasClass('co')) { + $(this).append(''); + } else if ($(this).hasClass('pu')) { + $(this).append(''); + } else if ($(this).hasClass('pr')) { + $(this).append(''); + } + $('.showcard .permissionSelect li').click(permissionLiClick); + event.stopPropagation(); + } + }; + + var hidePermissionSelect = function () { + selectingPermission = false; + $('.showcard .yourTopic .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow + $('.showcard .permissionSelect').remove(); + }; // ability to change permission var selectingPermission = false; if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { - $('.showcard .yourTopic .mapPerm').click(function () { - if (!selectingPermission) { - selectingPermission = true; - $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow - if ($(this).hasClass('co')) { - $(this).append(''); - } else if ($(this).hasClass('pu')) { - $(this).append(''); - } else if ($(this).hasClass('pr')) { - $(this).append(''); - } - $('.permissionSelect li').click(function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - topic.save({ - permission: permission - }); - $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); - $('.permissionSelect').remove(); - event.stopPropagation(); - }); - } else { - selectingPermission = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.permissionSelect').remove(); - } - }); + $('.showcard .yourTopic .mapPerm').click(openPermissionSelect); + $('.showcard').click(hidePermissionSelect); } }, populateShowCard: function (topic) { @@ -1129,34 +1137,42 @@ Metamaps.SynapseCard = { // ability to change permission var selectingPermission = false; - if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { - $('#edit_synapse.yourEdge .mapPerm').click(function () { - if (!selectingPermission) { - selectingPermission = true; - $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow - if ($(this).hasClass('co')) { - $(this).append(''); - } else if ($(this).hasClass('pu')) { - $(this).append(''); - } else if ($(this).hasClass('pr')) { - $(this).append(''); - } - $('#edit_synapse .permissionSelect li').click(function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - synapse.save({ - permission: permission, - }); - $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); - $('#edit_synapse .permissionSelect').remove(); - event.stopPropagation(); - }); - } else { - selectingPermission = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('#edit_synapse .permissionSelect').remove(); - } + var permissionLiClick = function (event) { + selectingPermission = false; + var permission = $(this).attr('class'); + synapse.save({ + permission: permission }); + $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); + $('#edit_synapse .permissionSelect').remove(); + event.stopPropagation(); + }; + + var openPermissionSelect = function (event) { + if (!selectingPermission) { + selectingPermission = true; + $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow + if ($(this).hasClass('co')) { + $(this).append(''); + } else if ($(this).hasClass('pu')) { + $(this).append(''); + } else if ($(this).hasClass('pr')) { + $(this).append(''); + } + $('#edit_synapse .permissionSelect li').click(permissionLiClick); + event.stopPropagation(); + } + }; + + var hidePermissionSelect = function () { + selectingPermission = false; + $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow + $('#edit_synapse .permissionSelect').remove(); + }; + + if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { + $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect); + $('#edit_synapse').click(hidePermissionSelect); } }, //add_perms_form @@ -2887,7 +2903,7 @@ Metamaps.Listeners = { $(window).resize(function () { if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()); - if (Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.hide(); + if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition(); }); } }; // end Metamaps.Listeners @@ -3643,7 +3659,7 @@ Metamaps.Map.InfoBox = { obj["map_creator_tip"] = isCreator ? self.changePermissionText : ""; obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : ""; obj["contributor_list"] = self.createContributorList(); - obj["user_name"] = isCreator ? "you" : map.get("user_name"); + obj["user_name"] = isCreator ? "You" : map.get("user_name"); var classes = isCreator ? "yourMap" : ""; classes += canEdit ? " canEdit" : ""; @@ -3656,7 +3672,7 @@ Metamaps.Map.InfoBox = { attachEventListeners: function () { var self = Metamaps.Map.InfoBox; - $('.mapInfoBox .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 $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () { @@ -3666,7 +3682,7 @@ Metamaps.Map.InfoBox = { }); $('.yourMap .mapPermission').unbind().click(self.onPermissionClick); - + $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect); }, createContributorList: function () { var self = Metamaps.Map.InfoBox; @@ -3689,7 +3705,7 @@ Metamaps.Map.InfoBox = { $('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted()); }, - onPermissionClick: function () { + onPermissionClick: function (event) { var self = Metamaps.Map.InfoBox; if (!self.selectingPermission) { @@ -3703,13 +3719,17 @@ Metamaps.Map.InfoBox = { $(this).append(''); } $('.mapPermission .permissionSelect li').click(self.selectPermission); - } else { - self.selectingPermission = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.mapPermission .permissionSelect').remove(); + event.stopPropagation(); } }, - selectPermission: function () { + hidePermissionSelect: function () { + var self = Metamaps.Map.InfoBox; + + self.selectingPermission = false; + $('.mapPermission').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow + $('.mapPermission .permissionSelect').remove(); + }, + selectPermission: function (event) { var self = Metamaps.Map.InfoBox; self.selectingPermission = false; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index d278968a..97a4867e 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -1415,7 +1415,19 @@ float: left; font-size: 18px; line-height: 20px; height: 20px; - padding: 26px 0; + padding: 26px 16px; +} +.mapInfoName input { + 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; } .mapInfoStat { background-color: #E0E0E0; @@ -1539,15 +1551,33 @@ float: left; font-family: helvetica, sans-serif; color: #E0E0E0; margin: 8px; + padding-right: 16px; height: 106px; font-size: 14px; line-height: 16px; overflow-y: auto; + overflow-x: hidden; + font-style: italic; + text-align: left; +} +.mapInfoBox .mapInfoDesc textarea { + font-family: helvetica, sans-serif; + text-align: left; + color: #E0E0E0; + font-size: 14px; + line-height: 16px; + font-style: italic; + border: 0; + outline: 0; + background: none; + resize: none; + width: 340px; } .mapInfoBox .mapInfoMeta { height: 35px; border-top: 1px solid #F5F5F5; - padding: 6px 0 7px; + padding: 6px 0 7px 16px; + text-align: left; } .mapInfoBox .mapInfoMeta p { margin: 4px 0; @@ -1555,6 +1585,14 @@ float: left; color: #F5F5F5; } +.mapCreatedAt span { + color: #4fc059; +} + +.mapEditedAt span { + color: #dab539; +} + /* lightboxes */ #lightbox_overlay { diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 28244194..e2fe0ed3 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -70,7 +70,7 @@ cursor: text; } -.best_in_place_name textarea, .best_in_place_name input { +.showcard .best_in_place_name textarea, .showcard .best_in_place_name input { font-family: 'din-regular', sans-serif; color: #424242; font-size: 18px; @@ -120,6 +120,7 @@ outline: none; font-size: 12px; line-height: 15px; background: none; +resize: none; } .CardOnGraph .desc h3 { diff --git a/app/assets/stylesheets/uservoice.css b/app/assets/stylesheets/uservoice.css index 953a5e5b..7b2bca26 100644 --- a/app/assets/stylesheets/uservoice.css +++ b/app/assets/stylesheets/uservoice.css @@ -13,4 +13,10 @@ div.uv-icon.uv-bottom-left { top:25%; width:25px; z-index:100000; + opacity: 1; + +} + +div.uv-icon.uv-bottom-left:hover { + background-position: 0 -110px; } \ No newline at end of file diff --git a/app/models/map.rb b/app/models/map.rb index 3d6591e5..9cc39fe3 100644 --- a/app/models/map.rb +++ b/app/models/map.rb @@ -87,8 +87,8 @@ class Map < ActiveRecord::Base ##### PERMISSIONS ###### # returns false if user not allowed to 'show' Topic, Synapse, or Map - def authorize_to_show(user) - if (self.permission == "private" && self.user != user) + def authorize_to_show(user) + if (self.permission == "private" && self.user != user) return false end return self @@ -96,7 +96,9 @@ class Map < ActiveRecord::Base # returns false if user not allowed to 'edit' Topic, Synapse, or Map def authorize_to_edit(user) - if (self.permission == "private" && self.user != user) + if !user + return false + elsif (self.permission == "private" && self.user != user) return false elsif (self.permission == "public" && self.user != user) return false @@ -132,7 +134,7 @@ class Map < ActiveRecord::Base end data.content_type = "image/png" - data.original_filename = File.basename(self.id.to_s + '-' + 'screenshot.png') + data.original_filename = File.basename('map-' + self.id.to_s + '-screenshot.png') self.screenshot = data self.save diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index a25999cb..08130955 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -29,8 +29,8 @@
-

Created by {{user_name}} on {{created_at}}

-

Last edited {{updated_at}}

+

Created by: {{user_name}} on {{created_at}}

+

Last edited: {{updated_at}}

diff --git a/app/views/maps/_mapinfobox.html (copy).erb b/app/views/maps/_mapinfobox.html (copy).erb deleted file mode 100644 index 1c808a4e..00000000 --- a/app/views/maps/_mapinfobox.html (copy).erb +++ /dev/null @@ -1,52 +0,0 @@ -<%# - # Partial rendering form for a new topic on a map - # This code is called when viewing a metamap in show.html.erb in the views/maps folder - #%> -
<%= @map.authorize_to_edit(user) ? " canEdit" : "" %>"> - -
<%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %>
- -
-
- <%= @map.contributors.count %> - <% 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 %> -
<%= contributorList %>
-
-
- <%= @map.topics.count %> -
-
- <%= @map.synapses.count %> -
-
- <% if @map.user == user %> -
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.
- <% end %> -
-
-
- - <% 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' %> -
- <% 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 %> - <% end %> -
-
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb index da339a02..ffbae4c0 100644 --- a/app/views/maps/_mapinfobox.html.erb +++ b/app/views/maps/_mapinfobox.html.erb @@ -34,15 +34,15 @@
- <% 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' %> + <% 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' %> + <% end %>
- <% 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") %>

+

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") %>

diff --git a/public/famous/main.js b/public/famous/main.js index 67265c9f..7e5b32c4 100644 --- a/public/famous/main.js +++ b/public/famous/main.js @@ -165,6 +165,9 @@ define(function(require, exports, module) { } ); }; + f.maps.reposition = function () { + f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0)); + }; var mapsScroll = new Scrollview(); mapsScroll._scroller.on('edgeHit', function(data){ if (data.position > 0 &&