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

Merge remote-tracking branch 'osmlab/user-display'

Browse source
This commit is contained in:
Tom Hughes 2013-08-23 17:40:57 +01:00
commit fa339033e1
15 changed files with 523 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@
//= require jquery.cookie
//= require jquery.throttle-debounce
//= require bootstrap.tooltip
//= require bootstrap.dropdown
//= require augment
//= require osm
//= require leaflet
@ -16,7 +17,6 @@
//= require oauth
//= require piwik
//= require map
//= require menu
//= require sidebar
//= require richtext
//= require geocoder
@ -95,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);
}
}
});
}

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

@ -202,6 +202,7 @@ h6:first-child {
.icon.close { background-position: -200px 0; }
.icon.check { background-position: -220px 0; }
.icon.note { background-position: -240px 0; }
.icon.gear { background-position: -260px 0; }
/* Rules for links */
@ -472,7 +473,11 @@ a.donate {
height: 30px;
border-bottom: 1px solid #ccc;
background: white;
z-index: 100;
z-index: 1001;
.caret {
margin-top: 10px;
}
}
.site-edit #top-bar,
@ -486,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 {
@ -544,12 +557,52 @@ a.donate {
#greeting {
float: right;
padding-top: 3px;
margin-right: $lineheight/4;
}
height: 100%;
.greeting-bar-unread {
font-weight: bold;
&.secondary-actions {
padding: 3px $lineheight/2;
}
&.dropdown {
background-color: #EEE;
&:hover {
background-color: #CCC;
}
}
img {
vertical-align: top;
border-radius: 2px 0 0 2px;
margin-right: 5px;
}
#inboxanchor {
display: inline-block;
position: relative;
height: 20px;
top: -2px;
margin: 0 2px 0 0;
padding: 0 5px 0 0;
border-radius: 2px;
}
.dropdown-toggle {
display: block;
padding: 3px 7px;
color: #000;
text-decoration: none;
}
.dropdown-menu {
left: auto;
right: 0;
.count-number {
float: right;
padding: 0 5px;
margin: 0;
}
}
}
/* Rules for the message shown in place of the map when javascript is disabled */
@ -1292,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;
}
@ -1891,7 +1941,7 @@ ul.secondary-actions {
display: inline-block;
margin-right: 60px;
}
li {
> li {
display: block;
float: left;
list-style: none;
@ -1906,6 +1956,10 @@ ul.secondary-actions {
margin-right: 0px;
}
}
.dropdown-menu {
left: auto;
right: 0;
}
}
/* Utility for managing inner content areas */
@ -2292,6 +2346,134 @@ a.button {
background: #fff;
}
/* Rules for dropdown menus */
.dropdown {
position: relative;
}
.dropdown-toggle {
*margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: default;
background-color: transparent;
background-image: none;
}
.open {
*z-index: 1000;
}
.open > .dropdown-menu {
display: block;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
/* Rules for the "Welcome" page */
.site-welcome {
.center {

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

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

9
app/assets/stylesheets/small.css.scss
View file

@ -84,13 +84,6 @@ h2, h3, h4 {
/* Rules for greeting bar in the top right corner */
#greeting {
position: absolute;
right: 0;
top: 0;
background: none;
}
#browse_map ul.secondary-actions {
float: right;
font-size: 10px;
@ -267,4 +260,4 @@ p.search_results_entry {
.aside {
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'>
<% 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>

16
app/views/layouts/_inbox.html.erb
View file

@ -1,13 +1,3 @@
<%=
link_to(
t("layouts.inbox_html",
:count => @user.new_messages.size > 0 ?
content_tag(
:span, @user.new_messages.size, :class => "count-number"
) :
""
),
inbox_path(:display_name => @user.display_name),
:id => "inboxanchor"
)
%>
<span id="inboxanchor" class="count-number">
<%= user_thumbnail_tiny(@user, :size => 20, :width => 20, :height => 20) %><span><%= @user.new_messages.size %></span>
</span>

28
app/views/layouts/_user_menu.html.erb Normal file
View file

@ -0,0 +1,28 @@
<div class='dropdown' id='greeting'>
<a class='dropdown-toggle' data-toggle='dropdown' href="#">
<%= render :partial => 'layouts/inbox' %>
<%= @user.display_name %>
<b class="caret"></b>
</a>
<ul class='dropdown-menu'>
<li>
<%= link_to inbox_path(:display_name => @user.display_name) do %>
<span class='count-number'><%= number_with_delimiter(@user.new_messages.size) %></span>
<%= t('message.inbox.my_inbox') %>
<% end %>
</li>
<li>
<%= link_to t('user.view.my profile'), user_path(:display_name => @user.display_name) %>
</li>
<li>
<%= link_to t('user.view.my settings'), :controller => 'user', :action => 'account', :display_name => @user.display_name %>
</li>
<li class="divider"></li>
<li>
<%= yield :greeting %>
</li>
<li>
<%= link_to t('layouts.logout'), logout_path(:session => request.session_options[:id], :referer => request.fullpath) %>
</li>
</ul>
</div>

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

@ -96,53 +96,25 @@
</div>
</div>
<div id='top-bar'>
<ul class='secondary-actions' id="greeting">
<% if @user and @user.id %>
<li id="full-greeting"><%=link_to h(@user.display_name), user_path(:display_name => @user.display_name), :title => t('layouts.welcome_user_link_tooltip') %></li>
<li><%= yield :greeting %></li>
<li><%= render :partial => "layouts/inbox" %></li>
<li><%= link_to t('layouts.logout'), logout_path(:session => request.session_options[:id], :referer => request.fullpath), {:id => 'logoutanchor', :title => t('layouts.logout_tooltip')}%></li>
<% else %>
<li><%= link_to t('layouts.log_in'), login_path(:referer => request.fullpath), {:id => 'loginanchor', :title => t('layouts.log_in_tooltip')} %></li>
<li><%= link_to t('layouts.sign_up'), user_new_path, {:id => 'registeranchor', :title => t('layouts.sign_up_tooltip')} %></li>
<% end %>
</ul>
<% if @user and @user.id %>
<%= render :partial => "layouts/user_menu" %>
<% else %>
<ul class='secondary-actions' id='greeting'>
<li><%= link_to t('layouts.log_in'), login_path(:referer => request.fullpath), {:id => 'loginanchor', :title => t('layouts.log_in_tooltip')} %></li>
<li><%= link_to t('layouts.sign_up'), user_new_path, {:id => 'registeranchor', :title => t('layouts.sign_up_tooltip')} %></li>
</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 %>

3
app/views/site/_home_link.html.erb
View file

@ -6,7 +6,6 @@
:class => "set_position",
:data => { :lat => @user.home_lat,
:lon => @user.home_lon,
:zoom => 15 },
:title => t("layouts.home_tooltip") %>
:zoom => 15 } %>
<% end %>
<% end %>