Rework the edit tab and it's associated drop down menu

This changes the behavior of the editing tabs in three places. Instead
of the current hovering behavior, you can click on the arrow and get the
drop-down menu. Any click outside that on the page will deactivate the
menu, following the UI paradigm of most desktop environments.

This also simplifies the javascript code significantly.

diff --git a/app/assets/javascripts/menu.js b/app/assets/javascripts/menu.js
index e829f2aa6664fda4f6f4ce636612c373a7c94784..5e2d9d97a59f10703917097ccbbaa43adabd6984 100644 (file)
--- a/app/assets/javascripts/menu.js
+++ b/app/assets/javascripts/menu.js
@@ -19,65 +19,29 @@ function openMenu(anchor, menu, align) {
   });
 }
 
-/*
- * Close a menu.
- */
-function closeMenu(menu) {
-  clearTimeout(menu.timer);
-  menu.hide();
-}
-
-/*
- * Callback called when the mouse enters a menu anchor.
- */
-function enterMenuAnchor(event, anchor, menu, delay, align) {
-  if (!anchor.hasClass("disabled")) {
-    clearTimeout(menu.timer);
-
-    if (delay > 0) {
-      menu.timer = setTimeout(function () { openMenu(anchor, menu, align); }, delay);
-    } else {
-      openMenu(event, menu, align);
-    }
-  }
-}
-
-/*
- * Callback called when the mouse leaves a menu anchor.
- */
-function leaveMenuAnchor(event, anchor, menu) {
-  var to = event.relatedTarget;
-
-  if (!menu.is(to) && menu.has(to).length === 0) {
-    menu.hide();
-  }
-
-  clearTimeout(menu.timer);
-}
-
-/*
- * Callback called when the mouse leaves a menu.
- */
-function leaveMenu(event, anchor, menu) {
-  var to = event.relatedTarget;
-
-  if (!anchor.is(to) && menu.has(to).length === 0) {
-    menu.hide();
-  }
-
-  clearTimeout(menu.timer);
-}
-
 /*
  * Setup a menu, triggered by hovering over an anchor for a given time.
  */
-function createMenu(anchorid, menuid, delay, align) {
-  var anchor = $("#" + anchorid);
-  var menu = $("#" + menuid);
+function createMenu(anchorid, menuid, align) {
+  var $anchor = $("#" + anchorid),
+      $arrow = $("#" + anchorid + ' .arrow'),
+      $menu = $("#" + menuid),
+      $page = $(':not(#' + menuid + ', #' + anchorid + ')');
+
+  function hide() {
+    $menu.hide();
+    $page.unbind('click', hide);
+  }
 
-  anchor.mouseup(function (event) { closeMenu(menu); });
-  anchor.mouseover(function (event) { enterMenuAnchor(anchor, anchor, menu, delay, align); });
-  anchor.mouseout(function (event) { leaveMenuAnchor(event, anchor, menu); });
-  menu.mouseup(function (event) { closeMenu(menu); });
-  menu.mouseout(function (event) { leaveMenu(event, anchor, menu); });
+  $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);
+      }
+  });
 }

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 206704de982b1e00756c4f9885acf99ff9dade90..825d8719ed2741304bb9622c18b384b63a9e0fa6 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -366,23 +366,34 @@ h2 {
 
 /* Rules for edit menu */
 
+.arrow {
+  padding: 5px;
+
+  &:hover {
+    background: #eee;
+    text-decoration: none !important;
+  }
+}
+
 .menu {
   display: none;
   z-index: 10000;
   position: absolute;
   background-color: #ffffff;
-  border: 1px solid black;
+  border: 1px solid #cccccc;
+  border-top: 0;
 }
 
 .menu ul {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
+  margin: 0;
+  padding: 0;
 }
 
 .menu li {
+  padding: 2px 5px;
+  margin: 0;
   list-style-type: none;
+  border-top: 1px solid #eee;
   white-space: nowrap;
 }
 

diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss
index bbfebdbc1fc22aa8e4cc5ece6812be3e9789738a..7e30d18ecfde91bff5bd9705df866218b6bad38e 100644 (file)
--- a/app/assets/stylesheets/ltr.css.scss
+++ b/app/assets/stylesheets/ltr.css.scss
@@ -78,6 +78,13 @@ html body {
   border-left: 1px solid #ccc;
 }
 
+/* Rules for edit menu */
+
+.arrow {
+  margin-left: 10px;
+  border-left: 1px solid #eee;
+}
+
 /* Rules for attribution text under the main map shown on printouts */
 
 .attribution_license {

diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
index 439877669e5868de596cfb39be1f6841ac0e9926..9b3ebe288eb989bf1e05020af08fa4bc7375af3d 100644 (file)
--- a/app/assets/stylesheets/rtl.css.scss
+++ b/app/assets/stylesheets/rtl.css.scss
@@ -78,6 +78,13 @@ html body {
   border-right: 1px solid #ccc;
 }
 
+/* Rules for edit menu */
+
+.arrow {
+  margin-right: 10px;
+  border-right: 1px solid #eee;
+}
+
 /* Rules for attribution text under the main map shown on printouts */
 
 .attribution_license {

diff --git a/app/views/browse/_map.html.erb b/app/views/browse/_map.html.erb
index fda602bf0ac57e462359d69daa88aa6b4de24886..88619c8e56b5b50d54237658b9733e6c8c51812f 100644 (file)
--- a/app/views/browse/_map.html.erb
+++ b/app/views/browse/_map.html.erb
@@ -11,12 +11,12 @@
   <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(t("browse.map.edit.area"), { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
+  <%= 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" }) %>
   <% unless map.instance_of? Changeset %>
     <br />
     <%= link_to("", { :controller => :site, :action => :index }, { :id => "object_larger_map", :class => "geolink object" }) %>
     <br />
-    <%= link_to("", { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
+    <%= link_to(h("")  + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
   <% end %>
   <% else %>
     <%= t 'browse.map.deleted' %>
@@ -151,8 +151,8 @@
         });
       <% end -%>
 
-      createMenu("area_edit", "area_edit_menu", 1000, "right");
-      createMenu("object_edit", "object_edit_menu", 1000, "right");
+      createMenu("area_edit", "area_edit_menu", "right");
+      createMenu("object_edit", "object_edit_menu", "right");
     }
 
     window.onload = init;

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index d25360f1b8735676ef811c2f099a19f1074856ba..67994bc06c7e9f39232b8775180f88b34b42779d 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -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')) + '&nbsp;&#x25be;'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></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 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>
@@ -53,7 +53,7 @@
     </div>
 
     <script type="text/javascript">
-      createMenu("editanchor", "editmenu", 1000, "left");
+      createMenu("editanchor", "editmenu", "left");
     </script>
 
     <div id="left">