From: John Firebaugh Date: Wed, 14 Aug 2013 17:58:57 +0000 (-0700) Subject: Convert edit menus to bootstrap dropdown X-Git-Tag: live~4746^2~5 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/cea0cccc6d73d7543d80d659b0f221f0d3196c0e Convert edit menus to bootstrap dropdown --- diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 564089f3a..2b8bc5d26 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -17,7 +17,6 @@ //= require oauth //= require piwik //= require map -//= require menu //= require sidebar //= require richtext //= require geocoder @@ -96,26 +95,25 @@ function updatelinks(loc, zoom, layers, bounds, object) { } link.href = href; - - var minzoom = $(link).data("minzoom"); - if (minzoom) { - var name = link.id.replace(/anchor$/, ""); - $(link).off("click.minzoom"); - if (zoom >= minzoom) { - $(link) - .attr("title", I18n.t("javascripts.site." + name + "_tooltip")) - .removeClass("disabled"); - } else { - $(link) - .attr("title", I18n.t("javascripts.site." + name + "_disabled_tooltip")) - .addClass("disabled") - .on("click.minzoom", function () { - alert(I18n.t("javascripts.site." + name + "_zoom_alert")); - return false; - }); - } - } }); + + var editDisabled = zoom < 13; + $('#edit_tab') + .tooltip({placement: 'bottom'}) + .off('click.minzoom') + .on('click.minzoom', function() { return !editDisabled; }) + .toggleClass('disabled', editDisabled) + .attr('data-original-title', editDisabled ? + I18n.t('javascripts.site.edit_disabled_tooltip') : ''); + + var historyDisabled = zoom < 11; + $('#history_tab') + .tooltip({placement: 'bottom'}) + .off('click.minzoom') + .on('click.minzoom', function() { return !historyDisabled; }) + .toggleClass('disabled', historyDisabled) + .attr('data-original-title', historyDisabled ? + I18n.t('javascripts.site.history_disabled_tooltip') : ''); } // generate a cookie-safe string of map state diff --git a/app/assets/javascripts/browse.js b/app/assets/javascripts/browse.js index 5d2412183..11818a171 100644 --- a/app/assets/javascripts/browse.js +++ b/app/assets/javascripts/browse.js @@ -23,7 +23,7 @@ $(document).ready(function () { }).addTo(map); $("#loading").hide(); - $("#browse_map .geolink").show(); + $("#browse_map .secondary-actions").show(); $("a[data-editor=remote]").click(function () { return remoteEditHandler(bbox); @@ -41,7 +41,7 @@ $(document).ready(function () { bbox = map.getBounds(); $("#loading").hide(); - $("#browse_map .geolink").show(); + $("#browse_map .secondary-actions").show(); $("a[data-editor=remote]").click(function () { return remoteEditHandler(bbox); @@ -61,7 +61,7 @@ $(document).ready(function () { zoom: true, callback: function(extent) { $("#loading").hide(); - $("#browse_map .geolink").show(); + $("#browse_map .secondary-actions").show(); if (extent) { $("a.bbox[data-editor=remote]").click(function () { @@ -82,7 +82,4 @@ $(document).ready(function () { } }); } - - createMenu("area_edit", "area_edit_menu", "right"); - createMenu("object_edit", "object_edit_menu", "right"); }); diff --git a/app/assets/javascripts/menu.js b/app/assets/javascripts/menu.js deleted file mode 100644 index a01fc39cc..000000000 --- a/app/assets/javascripts/menu.js +++ /dev/null @@ -1,49 +0,0 @@ -/* - * Open a menu. - */ -function openMenu(anchor, menu, align) { - var anchorPosition = anchor.offset(); - var offset; - - if (align == "left") { - offset = 0; - } else if (align == "right") { - offset = menu.outerWidth() - anchor.outerWidth(); - } - - menu.show(); - - menu.offset({ - top: anchorPosition.top + anchor.outerHeight(), - left: anchorPosition.left - offset - }); -} - -/* - * Setup a menu, triggered by hovering over an anchor for a given time. - */ -function createMenu(anchorid, menuid, align) { - var $anchor = $("#" + anchorid); - var $arrow = $("#" + anchorid + " .menuicon"); - var $menu = $("#" + menuid); - var $page = $(":not(#" + menuid + ", #" + anchorid + ")"); - - function hide() { - $menu.hide(); - $page.off("click", hide); - } - - $arrow.click(function(e) { - if ($anchor.is(":not(.disabled)")) { - e.stopPropagation(); - e.preventDefault(); - if ($menu.is(":visible")) { - $menu.hide(); - $page.off("click", hide); - } else { - openMenu($anchor, $menu.show(), align); - $page.on("click", hide); - } - } - }); -} diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 0c2d8ed01..6320a7d89 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -491,49 +491,57 @@ a.donate { #tabnav { height: 29px; - margin-bottom:0; - overflow: hidden; - li { - display: inline; - } - a, a:link, a:visited { + margin-bottom: 0; + + > li { float: left; + + > * { + padding: 3px $lineheight/2; + } + } + + a.tab { + display: inline-block; font-weight: bold; - padding: 3px $lineheight/2; text-decoration: none; color: #333; - float: left; - margin-right: 1px; + -webkit-transition: color 200ms ease-in; -moz-transition: color 200ms ease-in; -o-transition: color 200ms ease-in; transition: color 200ms ease-in; + + &:hover { + text-decoration: underline; + } } -} -.site-index #tabnav a#viewanchor, -.site-edit #tabnav a#editanchor, -.changeset-list #tabnav a#historyanchor { - border-bottom: 1px solid #aaa; - background: #9ed485; - color: #000; -} + .disabled a { + color: #ccc; + cursor: default; -#tabnav a:link:hover, #tabnav a:visited:hover { - text-decoration: underline; -} + &:hover { + text-decoration: none; + } -#tabnav a:link.disabled, -#tabnav a:visited.disabled, -#tabnav a:link:hover.disabled, -#tabnav a:visited:hover.disabled { - color: #ccc; - cursor: default; - &:hover { - text-decoration: none; + .caret { + border-top-color: #ccc; + } + } + + .dropdown { + height: 29px; } } +.site-index #view_tab, +.site-edit #edit_tab, +.changeset-list #history_tab { + background: #9ed485; + color: #000; +} + /* Utility for styling notification numbers */ .count-number { @@ -1337,11 +1345,8 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } } -#browse_map .geolink { - display: none; -} - #browse_map .secondary-actions { + display: none; margin-bottom: $lineheight/2; } @@ -1936,7 +1941,7 @@ ul.secondary-actions { display: inline-block; margin-right: 60px; } - li { + > li { display: block; float: left; list-style: none; @@ -1951,6 +1956,10 @@ ul.secondary-actions { margin-right: 0px; } } + .dropdown-menu { + left: auto; + right: 0; + } } /* Utility for managing inner content areas */ diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/print.css index a74bc27fd..84efa0e2e 100644 --- a/app/assets/stylesheets/print.css +++ b/app/assets/stylesheets/print.css @@ -4,7 +4,6 @@ #tabnav, #sidebar, #permalink, -#editmenu, .leaflet-control { display: none; } diff --git a/app/views/browse/_map.html.erb b/app/views/browse/_map.html.erb index 9b82753fb..ed703665d 100644 --- a/app/views/browse/_map.html.erb +++ b/app/views/browse/_map.html.erb @@ -35,28 +35,26 @@ <%= content_tag "div", "", :id => "small_map", :data => data %> <%= t 'browse.map.loading' %> - + <% unless map.instance_of? Changeset %> <% end %> @@ -80,25 +76,3 @@ <%= t 'browse.map.deleted' %> <% end %> - - - - diff --git a/app/views/layouts/_edit_menu.html.erb b/app/views/layouts/_edit_menu.html.erb new file mode 100644 index 000000000..23763736b --- /dev/null +++ b/app/views/layouts/_edit_menu.html.erb @@ -0,0 +1,18 @@ +
+ <%= link_to link_text, edit_path, + :id => 'editanchor', + :class => "geolink tab #{link_class}" %> + + + + +
diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index 512b95905..a89db5078 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -108,41 +108,16 @@ <% end %> - - -
<%= render :partial => "layouts/flash", :locals => { :flash => flash } %> <% if content_for? :heading %> diff --git a/config/locales/en.yml b/config/locales/en.yml index d5c59a8fe..cd83a3a85 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2133,13 +2133,10 @@ en: site: edit_tooltip: Edit the map edit_disabled_tooltip: Zoom in to edit the map - edit_zoom_alert: You must zoom in to edit the map history_tooltip: View edits for this area history_disabled_tooltip: Zoom in to view edits for this area - history_zoom_alert: You must zoom in to view edits for this area createnote_tooltip: Add a note to the map createnote_disabled_tooltip: Zoom in to add a note to the map - createnote_zoom_alert: You must zoom in to add a note to the map notes: new: intro: "In order to improve the map the information you enter is shown to other mappers, so please be as descriptive and precise as possible when moving the marker to the correct position and entering your note below."