[#692] login slidedown implemented with tabindex and focus fix

app/views/account/_login.rhtml

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

app/views/account/login.rhtml

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

app/views/layouts/base.rhtml

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

config/locales/de.yml

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

config/locales/en.yml

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

lib/redmine.rb

@@ -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 :my_account, { :controller => 'my', :action => 'account' }, :if => Proc.new { User.current.logged? }, :caption => :label_user_settings
-  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 :logout, :signout_path, :if => Proc.new { User.current.logged? }
 end
 

public/javascripts/application.js

@@ -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,45 +560,35 @@ jQuery(document).ready(function($) {
 		return false;
 	});
 
-	// remove .drop-down class from empty dropdowns
+        jQuery("#account-nav > li").hover(function() {
-	$("#account .drop-down").each(function(index) {
+          if ($("#account-nav").hasClass("hover") && ($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
-		if ($(this).find("li").size() < 1) {
+                //Close all other open menus
-			$(this).removeClass("drop-down");
+                //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;
+          });
+	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");
 
-	$("#account .drop-down").hover(function() {
+	$("#account .drop-down:has(ul) > a").click(function() {
-		$(this).addClass("open").find("ul").show();
+                //Close all other open menus
-		$("#top-menu").addClass("open");
+                $("#account .drop-down.open:has(ul)").not($(this).parent()).toggleClass("open").find("ul").mySlide();
-
+                //Close login pull down when open
-		// wraps long dropdown menu in an overflow:auto div to keep long project lists on the page
+                $("li.open div#nav-login").parent().toggleClass("open").find("div#nav-login").slideToggle(animRate);
-		var $projectDrop = $("#account .drop-down:has(.projects) ul");
+                //Toggle clicked menu item
-
+                $(this).parent().toggleClass("open").find("ul").mySlide();
-		// only do the wrapping if it's the project dropdown, and more than 15 items
+                return false;
-		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');
-				}
-
-		}
-
-
-	}, function() {
-		$(this).removeClass("open").find("ul").hide();
-		$("#top-menu").removeClass("open");
-	});
 
 	// deal with potentially problematic super-long titles
 	$(".title-bar h2").css({paddingRight: $(".title-bar-actions").outerWidth() + 15 });
@@ -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();
+         });
 });

public/stylesheets/application.css

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