Fix some issues with the new edit menu code
authorTom Hughes <tom@compton.nu>
Wed, 11 Apr 2012 18:19:21 +0000 (19:19 +0100)
committerTom Hughes <tom@compton.nu>
Mon, 23 Apr 2012 19:59:27 +0000 (20:59 +0100)
Make sure that the arrow icons are always displayed, and that menus
are aligned in the requested way.

app/assets/javascripts/menu.js
app/assets/stylesheets/common.css.scss
app/assets/stylesheets/ltr.css.scss
app/assets/stylesheets/rtl.css.scss
app/views/browse/_map.html.erb
app/views/layouts/site.html.erb

index 5e2d9d9..595b153 100644 (file)
@@ -23,25 +23,25 @@ function openMenu(anchor, menu, align) {
  * Setup a menu, triggered by hovering over an anchor for a given time.
  */
 function createMenu(anchorid, menuid, align) {
-  var $anchor = $("#" + anchorid),
-      $arrow = $("#" + anchorid + ' .arrow'),
-      $menu = $("#" + menuid),
-      $page = $(':not(#' + menuid + ', #' + anchorid + ')');
+  var $anchor = $("#" + anchorid);
+  var $arrow = $("#" + anchorid + " .menuicon");
+  var $menu = $("#" + menuid);
+  var $page = $(":not(#" + menuid + ", #" + anchorid + ")");
 
   function hide() {
     $menu.hide();
-    $page.unbind('click', hide);
+    $page.off("click", hide);
   }
 
   $arrow.click(function(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if ($menu.is(':visible')) {
-          $menu.hide();
-          $page.unbind('click', hide);
-      } else {
-          openMenu($anchor, $menu.show(), 'left');
-          $page.bind('click', hide);
-      }
+    e.stopPropagation();
+    e.preventDefault();
+    if ($menu.is(":visible")) {
+      $menu.hide();
+      $page.off("click", hide);
+    } else {
+      openMenu($anchor, $menu.show(), align);
+      $page.on("click", hide);
+    }
   });
 }
index 825d871..294d648 100644 (file)
@@ -366,7 +366,7 @@ h2 {
 
 /* Rules for edit menu */
 
-.arrow {
+.menuicon {
   padding: 5px;
 
   &:hover {
@@ -381,17 +381,17 @@ h2 {
   position: absolute;
   background-color: #ffffff;
   border: 1px solid #cccccc;
-  border-top: 0;
+  border-top: 0px;
 }
 
 .menu ul {
-  margin: 0;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
 }
 
 .menu li {
   padding: 2px 5px;
-  margin: 0;
+  margin: 0px;
   list-style-type: none;
   border-top: 1px solid #eee;
   white-space: nowrap;
index 7e30d18..84adc8e 100644 (file)
@@ -80,7 +80,7 @@ html body {
 
 /* Rules for edit menu */
 
-.arrow {
+.menuicon {
   margin-left: 10px;
   border-left: 1px solid #eee;
 }
index 9b3ebe2..ae142f9 100644 (file)
@@ -80,7 +80,7 @@ html body {
 
 /* Rules for edit menu */
 
-.arrow {
+.menuicon {
   margin-right: 10px;
   border-right: 1px solid #eee;
 }
index 88619c8..2c29a0d 100644 (file)
   <span id="loading"><%= t 'browse.map.loading' %></span>
   <%= link_to(t("browse.map.larger.area"), { :controller => :site, :action => :index, :box => "yes" }, { :id => "area_larger_map", :class => "geolink bbox" }) %>
   <br />
-  <%= link_to(h(t("browse.map.edit.area")) + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
+  <%= link_to(h(t("browse.map.edit.area")) + content_tag(:span, "▾", :class => "menuicon"), { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
   <% unless map.instance_of? Changeset %>
     <br />
-    <%= link_to("", { :controller => :site, :action => :index }, { :id => "object_larger_map", :class => "geolink object" }) %>
+    <%= link_to(t("browse.map.larger." + map.class.to_s.downcase), { :controller => :site, :action => :index }, { :id => "object_larger_map", :class => "geolink object" }) %>
     <br />
-    <%= link_to(h("")  + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
+    <%= link_to(h(t("browse.map.edit." + map.class.to_s.downcase)) + content_tag(:span, "▾", :class => "menuicon"), { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
   <% end %>
   <% else %>
     <%= t 'browse.map.deleted' %>
           url += "/" + previous_version;
         }
 
+        $("#object_larger_map").hide();
+        $("#object_edit").hide();
+
         addObjectToMap(url, true, function(extent) {
           $("#loading").hide();
           $("#browse_map .geolink").show();
             });
             <% end -%>
 
-            <% unless map.instance_of? Changeset -%>
             $("#remote_object_edit").click(function (event) {
               return remoteEditHandler(event, extent, "<%= map.class.to_s.downcase + map.id.to_s %>");
             });
             });
             <% end -%>
 
-            $("#object_larger_map").html("<%=j t('browse.map.larger.' + map.class.to_s.downcase) %>");
-            $("#object_edit").html("<%=j t('browse.map.edit.' + map.class.to_s.downcase) %>");
-            <% end -%>
+            $("#object_larger_map").show();
+            $("#object_edit").show();
 
             updatelinks(centre.lon, centre.lat, 16, null, extent.left, extent.bottom, extent.right, extent.top, "<%= map.class.to_s.downcase %>", <%= map.id %>);
           } else {
index 67994bc..41af1d2 100644 (file)
@@ -37,7 +37,7 @@
         exportclass += ' active' if params['controller'] == 'site' and params['action'] == 'export'
         %>
         <li><%= link_to t('layouts.view'), {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => t('layouts.view_tooltip'), :class => viewclass} %></li>
-        <li><%= link_to h(t('layouts.edit')) + '<span class="arrow">&#x25be;</span>'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
+        <li><%= link_to h(t('layouts.edit')) + content_tag(:span, "▾", :class => "menuicon"), {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
         <li><%= link_to t('layouts.history'), {:controller => 'changeset', :action => 'list' }, {:id => 'historyanchor', :title => t('javascripts.site.history_tooltip'), :class => historyclass} %></li>
         <li><%= link_to t('layouts.export'), {:controller => 'site', :action => 'export'}, {:id => 'exportanchor', :title => t('layouts.export_tooltip'), :class => exportclass} %></li>
       </ul>