Convert edit menus to bootstrap dropdown
This commit is contained in:
John Firebaugh
parent
1727cd7c2b
commit
cea0cccc6d
9 changed files with 112 additions and 194 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled a {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-top-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-index #tabnav a#viewanchor,
|
||||
.site-edit #tabnav a#editanchor,
|
||||
.changeset-list #tabnav a#historyanchor {
|
||||
border-bottom: 1px solid #aaa;
|
||||
.site-index #view_tab,
|
||||
.site-edit #edit_tab,
|
||||
.changeset-list #history_tab {
|
||||
background: #9ed485;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#tabnav a:link:hover, #tabnav a:visited:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
#tabnav,
|
||||
#sidebar,
|
||||
#permalink,
|
||||
#editmenu,
|
||||
.leaflet-control {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,28 +35,26 @@
|
|||
<%= content_tag "div", "", :id => "small_map", :data => data %>
|
||||
<span id="loading"><%= t 'browse.map.loading' %></span>
|
||||
|
||||
<ul class='secondary-actions clearfix'>
|
||||
<li>
|
||||
<% if map.instance_of? Note -%>
|
||||
<%= link_to t("browse.map.larger.area"),
|
||||
root_path(:notes => "yes"),
|
||||
:id => "area_larger_map",
|
||||
:class => "geolink bbox" %>
|
||||
<% else -%>
|
||||
<%= link_to t("browse.map.larger.area"),
|
||||
root_path(:box => "yes"),
|
||||
:id => "area_larger_map",
|
||||
:class => "geolink bbox" %>
|
||||
<% end -%>
|
||||
</li>
|
||||
<li>
|
||||
<%= link_to h(t("browse.map.edit.area")) + content_tag(:span, "▼", :class => "menuicon"),
|
||||
edit_path,
|
||||
:id => "area_edit",
|
||||
:data => { :editor => preferred_editor },
|
||||
:class => "geolink bbox" %>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class='secondary-actions clearfix'>
|
||||
<li>
|
||||
<% if map.instance_of? Note -%>
|
||||
<%= link_to t("browse.map.larger.area"),
|
||||
root_path(:notes => "yes"),
|
||||
:id => "area_larger_map",
|
||||
:class => "geolink bbox" %>
|
||||
<% else -%>
|
||||
<%= link_to t("browse.map.larger.area"),
|
||||
root_path(:box => "yes"),
|
||||
:id => "area_larger_map",
|
||||
:class => "geolink bbox" %>
|
||||
<% end -%>
|
||||
</li>
|
||||
<li>
|
||||
<%= render :partial => 'layouts/edit_menu',
|
||||
:locals => { :link_text => t("browse.map.edit.area"),
|
||||
:link_class => 'bbox' } %>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<% unless map.instance_of? Changeset %>
|
||||
<ul class='secondary-actions clearfix'>
|
||||
|
|
@ -67,11 +65,9 @@
|
|||
:class => "geolink object" %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link_to h(t("browse.map.edit." + map.class.to_s.downcase)) + content_tag(:span, "▼", :class => "menuicon"),
|
||||
edit_path,
|
||||
:id => "object_edit",
|
||||
:data => { :editor => preferred_editor },
|
||||
:class => "geolink object" %>
|
||||
<%= render :partial => 'layouts/edit_menu',
|
||||
:locals => { :link_text => t("browse.map.edit." + map.class.to_s.downcase),
|
||||
:link_class => 'object' } %>
|
||||
</li>
|
||||
</ul>
|
||||
<% end %>
|
||||
|
|
@ -80,25 +76,3 @@
|
|||
<%= t 'browse.map.deleted' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div id="area_edit_menu" class="menu">
|
||||
<ul>
|
||||
<% Editors::RECOMMENDED_EDITORS.each do |editor| %>
|
||||
<li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
|
||||
edit_path(:editor => editor),
|
||||
:data => {:editor => editor},
|
||||
:class => "geolink bbox" %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="object_edit_menu" class="menu">
|
||||
<ul>
|
||||
<% Editors::RECOMMENDED_EDITORS.each do |editor| %>
|
||||
<li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
|
||||
edit_path(:editor => editor),
|
||||
:data => {:editor => editor},
|
||||
:class => "geolink object" %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
18
app/views/layouts/_edit_menu.html.erb
Normal file
18
app/views/layouts/_edit_menu.html.erb
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<div class="dropdown edit_menu">
|
||||
<%= link_to link_text, edit_path,
|
||||
:id => 'editanchor',
|
||||
:class => "geolink tab #{link_class}" %>
|
||||
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
|
||||
<% Editors::RECOMMENDED_EDITORS.each do |editor| %>
|
||||
<li>
|
||||
<%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
|
||||
edit_path(:editor => editor),
|
||||
:data => { :editor => editor },
|
||||
:class => "geolink #{link_class}" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -108,41 +108,16 @@
|
|||
</ul>
|
||||
<% end %>
|
||||
<ul id="tabnav">
|
||||
<li><%= link_to t('layouts.view'), root_path, {
|
||||
:id => 'viewanchor',
|
||||
:title => t('layouts.view_tooltip'),
|
||||
:class => 'geolink llz layers'
|
||||
} %></li>
|
||||
<li><%= link_to h(t('layouts.edit')) + content_tag(:span, "▼", :class => "menuicon"), edit_path, {
|
||||
:id => 'editanchor',
|
||||
:title => t('javascripts.site.edit_tooltip'),
|
||||
:data => { :minzoom => 13, :editor => preferred_editor },
|
||||
:class => 'geolink llz object disabled'
|
||||
} %></li>
|
||||
<li><%= link_to t('layouts.history'), browse_changesets_path, {
|
||||
:id => 'historyanchor',
|
||||
:data => { :minzoom => 11 },
|
||||
:title => t('javascripts.site.history_tooltip'),
|
||||
:class => 'geolink bbox'
|
||||
} %></li>
|
||||
<li id="view_tab">
|
||||
<%= link_to t('layouts.view'), root_path, :class => 'tab geolink llz layers' %>
|
||||
</li><li id="edit_tab">
|
||||
<%= render :partial => 'layouts/edit_menu',
|
||||
:locals => { :link_text => t('layouts.edit'), :link_class => 'llz object' }%>
|
||||
</li><li id="history_tab">
|
||||
<%= link_to t('layouts.history'), browse_changesets_path, :class => 'tab geolink bbox' %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="editmenu" class="menu">
|
||||
<ul>
|
||||
<% Editors::RECOMMENDED_EDITORS.each do |editor| %>
|
||||
<li><%= link_to t('layouts.edit_with',
|
||||
:editor => t("editor.#{editor}.description")),
|
||||
edit_path(:editor => editor), {
|
||||
:data => { :editor => editor },
|
||||
:class => "geolink llz object"
|
||||
} %></li>
|
||||
<% end %>
|
||||
<%= yield :editmenu %>
|
||||
</ul>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
createMenu("editanchor", "editmenu", "left");
|
||||
</script>
|
||||
<div class="wrapper">
|
||||
<%= render :partial => "layouts/flash", :locals => { :flash => flash } %>
|
||||
<% if content_for? :heading %>
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue