[#692] login slidedown implemented with tabindex and focus fix
This commit is contained in:
Romano Licker
Eric Davis
parent
fecfbaf908
commit
734da91b4b
|
|
@ -0,0 +1,33 @@
|
|||
<div id="nav-login-content">
|
||||
<% form_tag({:controller => "account", :action=> "login"}) do %>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="username-pulldown"><%= l(:field_login) %></label></td>
|
||||
<td><label for="password-pulldown"><%= l(:field_password) %></label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><%= text_field_tag 'username', nil, :tabindex => '1', :id => 'username-pulldown' %></td>
|
||||
<td><%= password_field_tag 'password', nil, :tabindex => '1', :id => 'password-pulldown' %></td>
|
||||
<td><input type="submit" name="login" value="<%=l(:button_login)%>" tabindex="1"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id = "optional_login_fields" style = "top = 10px; white-space:nowrap">
|
||||
<% if Setting.openid? %>
|
||||
<%= text_field_tag "openid_url", nil, :placeholder => l(:field_identity_url), :tabindex => '1' %>
|
||||
<% end %>
|
||||
|
||||
<% if Setting.autologin? %>
|
||||
<label for="autologin"><%= check_box_tag 'autologin', 1, false, :tabindex => 1 %> <%= l(:label_stay_logged_in) %></label>
|
||||
<% end %>
|
||||
|
||||
<% if Setting.lost_password? %>
|
||||
<%= link_to l(:label_password_lost), {:controller => 'account', :action => 'lost_password'}, :tabindex => 1 %>
|
||||
<% end %>
|
||||
|
||||
<% if !User.current.logged? && Setting.self_registration? %>
|
||||
<%= "|" if Setting.lost_password? %>
|
||||
<%= link_to l(:label_register), { :controller => 'account', :action => 'register' }, :tabindex => 1 %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<table>
|
||||
<tr>
|
||||
<td align="right"><label for="username"><%=l(:field_login)%>:</label></td>
|
||||
<td align="left"><%= text_field_tag 'username', nil, :tabindex => '1' %></td>
|
||||
<td align="left"><%= text_field_tag 'username', nil, :tabindex => '2' %></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right"><label for="password"><%=l(:field_password)%>:</label></td>
|
||||
|
|
|
|||
|
|
@ -83,10 +83,27 @@
|
|||
<%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search) %>
|
||||
<% end %>
|
||||
</li>
|
||||
<% unless User.current.logged? %>
|
||||
<li>
|
||||
<%= link_to l(:label_login), {:controller => 'account', :action => 'login'}, :class => 'login' %>
|
||||
<!-- IE7 Fix - extra div needed for slideToggle animation -->
|
||||
<div id="nav-login">
|
||||
<%= render :partial => 'account/login' %>
|
||||
</div>
|
||||
</li>
|
||||
<% else %>
|
||||
<li class="drop-down">
|
||||
<%= link_to_user(User.current) %>
|
||||
<ul style="display:none;">
|
||||
<% menu_items_for(:account_menu) do |item| %>
|
||||
<%= render_menu_node(item) %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<% main_menu = render_main_menu(@project) %>
|
||||
|
|
|
|||
|
|
@ -546,6 +546,7 @@ de:
|
|||
label_news_view_all: Alle News anzeigen
|
||||
label_news_added: News hinzugefügt
|
||||
label_settings: Konfiguration
|
||||
label_user_settings: Einstellungen
|
||||
label_overview: Übersicht
|
||||
label_version: Version
|
||||
label_version_new: Neue Version
|
||||
|
|
|
|||
|
|
@ -543,6 +543,7 @@ en:
|
|||
label_news_added: News added
|
||||
label_news_comment_added: Comment added to a news
|
||||
label_settings: Settings
|
||||
label_user_settings: Settings
|
||||
label_overview: Overview
|
||||
label_version: Version
|
||||
label_version_new: New version
|
||||
|
|
|
|||
|
|
@ -170,9 +170,7 @@ Redmine::MenuManager.map :top_menu do |menu|
|
|||
end
|
||||
|
||||
Redmine::MenuManager.map :account_menu do |menu|
|
||||
menu.push :login, :signin_path, :if => Proc.new { !User.current.logged? }
|
||||
menu.push :register, { :controller => 'account', :action => 'register' }, :if => Proc.new { !User.current.logged? && Setting.self_registration? }
|
||||
menu.push :my_account, { :controller => 'my', :action => 'account' }, :if => Proc.new { User.current.logged? }
|
||||
menu.push :my_account, { :controller => 'my', :action => 'account' }, :if => Proc.new { User.current.logged? }, :caption => :label_user_settings
|
||||
menu.push :logout, :signout_path, :if => Proc.new { User.current.logged? }
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -481,6 +481,20 @@ jQuery(document).ready(function($) {
|
|||
return false;
|
||||
});
|
||||
|
||||
// show/hide login box
|
||||
$("#account a.login").click(function() {
|
||||
$(this).parent().toggleClass("open");
|
||||
// Focus the username field if the login field has opened
|
||||
$("#nav-login").slideToggle(animRate, function () {
|
||||
if ($(this).parent().hasClass("open")) {
|
||||
$("input#username").focus()
|
||||
}
|
||||
});
|
||||
$("#account .drop-down.open").toggleClass("open").find("ul").mySlide();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// file table thumbnails
|
||||
$("table a.has-thumb").hover(function() {
|
||||
$(this).removeAttr("title").toggleClass("active");
|
||||
|
|
@ -546,44 +560,34 @@ jQuery(document).ready(function($) {
|
|||
return false;
|
||||
});
|
||||
|
||||
// remove .drop-down class from empty dropdowns
|
||||
$("#account .drop-down").each(function(index) {
|
||||
if ($(this).find("li").size() < 1) {
|
||||
$(this).removeClass("drop-down");
|
||||
jQuery("#account-nav > li").hover(function() {
|
||||
if ($("#account-nav").hasClass("hover") && ($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
|
||||
//Close all other open menus
|
||||
//Used to work around the rendering bug TODO: fix
|
||||
jQuery("input#username-pulldown").blur();
|
||||
$("#account-nav > li.drop-down.open").toggleClass("open").find("> ul").mySlide();
|
||||
$(this).slideAndFocus();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
function(){
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#account .drop-down").hover(function() {
|
||||
$(this).addClass("open").find("ul").show();
|
||||
$("#top-menu").addClass("open");
|
||||
|
||||
// wraps long dropdown menu in an overflow:auto div to keep long project lists on the page
|
||||
var $projectDrop = $("#account .drop-down:has(.projects) ul");
|
||||
|
||||
// only do the wrapping if it's the project dropdown, and more than 15 items
|
||||
if ( $projectDrop.children().size() > 15 && $(this).find("> a").hasClass("projects") ) {
|
||||
|
||||
var overflowHeight = 15 * $projectDrop.find("li:eq(1)").outerHeight() - 2;
|
||||
|
||||
$projectDrop
|
||||
.wrapInner("<div class='overflow'></div>").end()
|
||||
.find(".overflow").css({overflow: 'auto', height: overflowHeight, position: 'relative'})
|
||||
.find("li a").css('paddingRight', '25px');
|
||||
|
||||
// do hack-y stuff for IE6 & 7. don't ask why, I don't know.
|
||||
if (parseInt($.browser.version, 10) < 8 && $.browser.msie) {
|
||||
|
||||
$projectDrop.find(".overflow").css({width: 325, zoom: '1'});
|
||||
$projectDrop.find("li a").css('marginLeft', '-15px');
|
||||
$("#top-menu").css('z-index', '10000');
|
||||
jQuery("#account-nav > li.drop-down").click(function() {
|
||||
if (($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
|
||||
$("#account-nav > li.drop-down.open").toggleClass("open").find("> ul").mySlide();
|
||||
}
|
||||
$(this).slideAndFocus();
|
||||
$("#account-nav").toggleClass("hover");
|
||||
|
||||
}
|
||||
|
||||
|
||||
}, function() {
|
||||
$(this).removeClass("open").find("ul").hide();
|
||||
$("#top-menu").removeClass("open");
|
||||
$("#account .drop-down:has(ul) > a").click(function() {
|
||||
//Close all other open menus
|
||||
$("#account .drop-down.open:has(ul)").not($(this).parent()).toggleClass("open").find("ul").mySlide();
|
||||
//Close login pull down when open
|
||||
$("li.open div#nav-login").parent().toggleClass("open").find("div#nav-login").slideToggle(animRate);
|
||||
//Toggle clicked menu item
|
||||
$(this).parent().toggleClass("open").find("ul").mySlide();
|
||||
return false;
|
||||
});
|
||||
|
||||
// deal with potentially problematic super-long titles
|
||||
|
|
@ -608,4 +612,13 @@ jQuery(document).ready(function($) {
|
|||
}
|
||||
});
|
||||
|
||||
$('html').click(function() {
|
||||
//Close all open menus
|
||||
$("#account .drop-down.open").toggleClass("open").find("ul").mySlide();
|
||||
$("li.open div#nav-login").parent().toggleClass("open").find("div#nav-login").slideToggle(animRate);
|
||||
});
|
||||
// Do not close the login window when using it
|
||||
$('#nav-login-content').click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1187,7 +1187,44 @@ a:hover {
|
|||
margin:5px 5px;
|
||||
width:94%;
|
||||
}
|
||||
#nav-login {
|
||||
display:none;
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
right:-1px;
|
||||
top:23px;
|
||||
background: transparent;
|
||||
border:0px;
|
||||
border-top:0;
|
||||
|
||||
}
|
||||
#nav-login-content {
|
||||
position: relative;
|
||||
float: right;
|
||||
background: white;
|
||||
border:1px solid #194E60;
|
||||
border-top:0;
|
||||
padding-left:5px;
|
||||
padding-top:5px;
|
||||
padding-right:10px;
|
||||
padding-bottom:8px;;
|
||||
}
|
||||
#nav-login input[type=text], #nav-login input[type=password] {
|
||||
height: 20px;
|
||||
width: 150px;
|
||||
}
|
||||
#nav-login div a {
|
||||
display: inline;
|
||||
padding-left: 2px;
|
||||
}
|
||||
#nav-login div a:hover {
|
||||
background-color: transparent;
|
||||
text-decoration:underline;
|
||||
}
|
||||
div#optional_login_fields {
|
||||
top:10px;
|
||||
white-space:nowrap;
|
||||
}
|
||||
/*-------------------------------------------------------------------------------
|
||||
* =02 - Main Menu
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue