From: Tom MacWright Date: Wed, 11 Apr 2012 17:18:39 +0000 (-0400) Subject: Rework the edit tab and it's associated drop down menu X-Git-Tag: live~5589 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/c45dbdae360cfbcbdc998b45e172cc30915add84?hp=dd3b577bd5bbe4f9d9d1cac8e0f328a16b75f7f5 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 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 @@