Rework the edit tab and it's associated drop down menu
authorTom MacWright <tom@macwright.org>
Wed, 11 Apr 2012 17:18:39 +0000 (13:18 -0400)
committerTom Hughes <tom@compton.nu>
Mon, 23 Apr 2012 19:59:26 +0000 (20:59 +0100)
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.

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 e829f2a..5e2d9d9 100644 (file)
@@ -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);
+      }
+  });
 }
index 206704d..825d871 100644 (file)
@@ -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;
 }
 
index bbfebdb..7e30d18 100644 (file)
@@ -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 {
index 4398776..9b3ebe2 100644 (file)
@@ -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 {
index fda602b..88619c8 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(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' %>
         });
       <% 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;
index d25360f..67994bc 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')) + '&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">