From c45dbdae360cfbcbdc998b45e172cc30915add84 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 11 Apr 2012 13:18:39 -0400 Subject: [PATCH 1/1] 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. --- app/assets/javascripts/menu.js | 78 +++++++------------------- app/assets/stylesheets/common.css.scss | 21 +++++-- app/assets/stylesheets/ltr.css.scss | 7 +++ app/assets/stylesheets/rtl.css.scss | 7 +++ app/views/browse/_map.html.erb | 8 +-- app/views/layouts/site.html.erb | 4 +- 6 files changed, 57 insertions(+), 68 deletions(-) diff --git a/app/assets/javascripts/menu.js b/app/assets/javascripts/menu.js index e829f2aa6..5e2d9d97a 100644 --- 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 206704de9..825d8719e 100644 --- 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 bbfebdbc1..7e30d18ec 100644 --- 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 439877669..9b3ebe288 100644 --- 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 fda602bf0..88619c8e5 100644 --- a/app/views/browse/_map.html.erb +++ b/app/views/browse/_map.html.erb @@ -11,12 +11,12 @@ <%= t 'browse.map.loading' %> <%= link_to(t("browse.map.larger.area"), { :controller => :site, :action => :index, :box => "yes" }, { :id => "area_larger_map", :class => "geolink bbox" }) %>
- <%= 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")) + '▾'.html_safe, { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %> <% unless map.instance_of? Changeset %>
<%= link_to("", { :controller => :site, :action => :index }, { :id => "object_larger_map", :class => "geolink object" }) %>
- <%= link_to("", { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %> + <%= link_to(h("") + '▾'.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 d25360f1b..67994bc06 100644 --- 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' %>
  • <%= link_to t('layouts.view'), {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => t('layouts.view_tooltip'), :class => viewclass} %>
    • -
  • <%= link_to h(t('layouts.edit')) + ' ▾'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %>
    • +
  • <%= link_to h(t('layouts.edit')) + '▾'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %>
  • <%= link_to t('layouts.history'), {:controller => 'changeset', :action => 'list' }, {:id => 'historyanchor', :title => t('javascripts.site.history_tooltip'), :class => historyclass} %>
  • <%= link_to t('layouts.export'), {:controller => 'site', :action => 'export'}, {:id => 'exportanchor', :title => t('layouts.export_tooltip'), :class => exportclass} %>
    • @@ -53,7 +53,7 @@
    -- 2.43.2