cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert edit menus to bootstrap dropdown

Browse source
This commit is contained in:
John Firebaugh 2013-08-14 10:58:57 -07:00
parent 1727cd7c2b
commit cea0cccc6d
9 changed files with 112 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/assets/javascripts/application.js
View file

@ -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

9
app/assets/javascripts/browse.js
View file

@ -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");
});

49
app/assets/javascripts/menu.js
View file

@ -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);
}
}
});
}

75
app/assets/stylesheets/common.css.scss
View file

@ -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 */

1
app/assets/stylesheets/print.css
View file

@ -4,7 +4,6 @@
#tabnav,
#sidebar,
#permalink,
#editmenu,
.leaflet-control {
display: none;
}

72
app/views/browse/_map.html.erb
View file

@ -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
View 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>

41
app/views/layouts/site.html.erb
View file

@ -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 %>