removed upper menu to save space and did little rip off menu similar to G+

rhodecode/public/css/style.css

@@ -258,22 +258,19 b' div.options a {'
 }
 
 #header #header-inner {
-	min-height: 40px;
+	min-height: 44px;
 	clear: both;
 	position: relative;
     background-color: #eedc94;
     background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1),
-        to(#eedc94) );
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1),to(#eedc94) );
     background-image: -moz-linear-gradient(top, #003b76, #00376e);
     background-image: -ms-linear-gradient(top, #003b76, #00376e);
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003b76),
-        color-stop(100%, #00376e) );
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003b76),color-stop(100%, #00376e) );
     background-image: -webkit-linear-gradient(top, #003b76, #00376e) );
     background-image: -o-linear-gradient(top, #003b76, #00376e) );
     background-image: linear-gradient(top, #003b76, #00376e);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003b76',
-        endColorstr='#00376e', GradientType=0 );
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003b76',endColorstr='#00376e', GradientType=0 );
 	margin: 0;
 	padding: 0;
 	display: block;
@@ -330,7 +327,7 b' div.options a {'
 	float: right;
 	list-style-type: none;
 	list-style-position: outside;
-	margin: 6px 5px 0 0;
+	margin: 8px 5px 0 0;
 	padding: 0;
 }
 
@@ -341,7 +338,7 b' div.options a {'
 	padding: 0;
 }
 
-#header #header-inner #quick li a {
+#header #header-inner #quick li a.menu_link {
 	top: 0;
 	left: 0;
 	height: 1%;
@@ -424,7 +421,7 b' div.options a {'
 	border: 1px solid #666;
 	border-top: 1px solid #003367;
 	z-index: 100;
-	margin: 0;
+	margin: 2px 0px 0px 0px;
 	padding: 0;
 }
 
@@ -1886,39 +1883,102 b' div.form div.fields div.field div.button'
 	padding: 0 0 2px;
 }
 
-#quick_login {
-	top: 31px;
-	background-color: rgb(0, 51, 103);
+.user-menu{
+    margin: 0px !important;
+    float: left;
+}
+
+.user-menu .container{
+    padding:0px 4px 0px 4px;
+    margin: 0px 0px 0px 0px;
+}
+
+.user-menu .gravatar{
+    margin: 0px 0px 0px 0px;
+    cursor: pointer;
+}
+
+#quick_login{
+    min-height: 80px;
+    margin: 31px 0 0 -251px;
+    padding: 4px;
+    position: absolute;
+    width: 278px;
+    
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1),
+        to(#eedc94) );
+    background-image: -moz-linear-gradient(top, #003b76, #00376e);
+    background-image: -ms-linear-gradient(top, #003b76, #00376e);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003b76),
+        color-stop(100%, #00376e) );
+    background-image: -webkit-linear-gradient(top, #003b76, #00376e) );
+    background-image: -o-linear-gradient(top, #003b76, #00376e) );
+    background-image: linear-gradient(top, #003b76, #00376e);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003b76',
+        endColorstr='#00376e', GradientType=0 );
+
 	z-index: 999;
-	height: 150px;
-	position: absolute;
-	margin-left: -16px;
-	width: 281px;
 	-webkit-border-radius: 0px 0px 4px 4px;
 	-khtml-border-radius: 0px 0px 4px 4px;
 	-moz-border-radius: 0px 0px 4px 4px;
 	border-radius: 0px 0px 4px 4px;
 	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
 }
+#quick_login h4{
+    color: #fff;
+    padding: 5px 0px 5px 14px;
+}
 
 #quick_login .password_forgoten {
 	padding-right: 10px;
 	padding-top: 0px;
-	float: left;
+	text-align: left;
 }
 
 #quick_login .password_forgoten a {
-	font-size: 10px
+	font-size: 10px;
+	color: #fff;
 }
 
 #quick_login .register {
 	padding-right: 10px;
 	padding-top: 5px;
-	float: left;
+	text-align: left;
 }
 
 #quick_login .register a {
-	font-size: 10px
+	font-size: 10px;
+	color: #fff;
+}
+
+#quick_login .submit {
+    margin: -20px 0 0 194px;
+    position: absolute;
+}
+
+#quick_login .links_left{
+	float: left;
+}
+#quick_login .links_right{
+    float: right;
+}
+#quick_login .full_name{
+    color: #FFFFFF;
+    font-weight: bold;
+    padding: 3px;
+}
+#quick_login .big_gravatar{
+	padding:4px 0px 0px 6px;
+}
+
+#quick_login .email,#quick_login .email a{
+    color: #FFFFFF;
+    padding: 3px;
+    
+}
+#quick_login .links .logout{
+
 }
 
 #quick_login div.form div.fields {
@@ -1953,7 +2013,7 b' div.form div.fields div.field div.button'
 	overflow: hidden;
 	text-align: right;
 	margin: 0;
-	padding: 10px 14px 0px 5px;
+	padding: 5px 14px 0px 5px;
 }
 
 #quick_login div.form div.links {
@@ -1963,6 +2023,30 b' div.form div.fields div.field div.button'
 	padding: 0 0 2px;
 }
 
+#quick_login ol.links{
+    display: block;
+    font-weight: bold;
+    list-style: none outside none;
+    text-align: right;
+}
+#quick_login ol.links li{
+    line-height: 27px;
+    margin: 0;
+    padding: 0;
+    color: #fff;
+    display: block;
+    float:none !important;
+}
+
+#quick_login ol.links li a{
+    color: #fff;
+    display: block;
+    padding: 2px;
+}
+#quick_login ol.links li a:HOVER{
+    background-color: inherit !important;
+}
+
 #register div.title {
 	clear: both;
 	overflow: hidden;
@@ -3955,20 +4039,24 b' form.comment-inline-form {'
 	margin:10px 5px !important;
 }
 .notifications{
-	width:22px;
-    padding:2px;
-	float:right;
+    border-radius: 4px 4px 4px 4px;
     -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
+    -moz-border-radius: 4px;    
+    float: right;
+    margin: 24px 0px 0px;
+    position: absolute;
     text-align: center;
-    margin: 0px -10px 0px 5px;
-    background-color: #DEDEDE;
+    width: 22px;
+    z-index: 1000;
 }
 .notifications a{
 	color:#888 !important;
 	display: block;
-	font-size: 10px
+	font-size: 10px;
+	background-color: #DEDEDE !important;
+    border-radius: 2px !important;
+    -webkit-border-radius: 2px !important;
+    -moz-border-radius: 2px !important;  	
 }
 .notifications a:hover{
 	text-decoration: none !important;

rhodecode/templates/base/base.html

@@ -3,76 +3,6 b''
 
 <!-- HEADER -->
 <div id="header">
-    <!-- user -->
-    <ul id="logged-user">
-         <li class="first">
-			<div id="quick_login" style="display:none">
-			${h.form(h.url('login_home',came_from=h.url.current()))}
-			<div class="form">
-			    <div class="fields">
-			        <div class="field">
-			            <div class="label">
-			                <label for="username">${_('Username')}:</label>
-			            </div>
-			            <div class="input">
-			                ${h.text('username',class_='focus',size=40)}
-			            </div>
-
-			        </div>
-			        <div class="field">
-			            <div class="label">
-			                <label for="password">${_('Password')}:</label>
-			            </div>
-			            <div class="input">
-			                ${h.password('password',class_='focus',size=40)}
-			            </div>
-
-			        </div>
-			        <div class="buttons">
-			            <div class="password_forgoten">${h.link_to(_('Forgot password ?'),h.url('reset_password'))}</div>
-                        <div class="register">
-                        %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
-                         ${h.link_to(_("Don't have an account ?"),h.url('register'))}
-                        %endif
-                        </div>
-                            ${h.submit('sign_in',_('Sign In'),class_="ui-button")}
-			        </div>
-			    </div>
-			</div>
-			${h.end_form()}
-			</div>
-
-             <div class="gravatar">
-                 <img alt="gravatar" src="${h.gravatar_url(c.rhodecode_user.email,20)}" />
-             </div>
-          <div class="account">
-          %if c.rhodecode_user.username == 'default':
-              <a href="${h.url('public_journal')}">${_('Public journal')}</a>
-          %else:
-          	<div style="float: left">
-            ${h.link_to(c.rhodecode_user.username,h.url('admin_settings_my_account'),title='%s %s'%(c.rhodecode_user.name,c.rhodecode_user.lastname))}
-            </div>
-            <div class="notifications">
-            <a id="notification_counter" href="${h.url('notifications')}">${c.unread_notifications}</a>
-            </div>
-          %endif
-          </div>
-         </li>
-         <li>
-            <a href="${h.url('home')}">${_('Home')}</a>
-         </li>
-         %if c.rhodecode_user.username != 'default':
-            <li>
-               <a href="${h.url('journal')}">${_('Journal')}</a>
-            </li>
-            %endif
-            %if c.rhodecode_user.username == 'default':
-                <li class="last highlight">${h.link_to(_(u'Login'),h.url('login_home'),id='quick_login_link')}</li>
-            %else:
-                <li class="last highlight">${h.link_to(_(u'Log Out'),h.url('logout_home'))}</li>
-            %endif
-    </ul>
-    <!-- end user -->
     <div id="header-inner" class="title">
         <div id="logo">
             <h1><a href="${h.url('home')}">${c.rhodecode_name}</a></h1>
@@ -130,6 +60,73 b''
     </div>
 </%def>
 
+<%def name="usermenu()">
+  <div class="user-menu">
+      <div class="container">
+       <div class="gravatar" id="quick_login_link">
+           <img alt="gravatar" src="${h.gravatar_url(c.rhodecode_user.email,20)}" />
+       </div>
+       %if c.rhodecode_user.username != 'default':
+        <div class="notifications">
+          <a id="notification_counter" href="${h.url('notifications')}">${c.unread_notifications}</a>
+        </div>
+       %endif
+      </div>
+      <div id="quick_login" style="display:none">
+        %if c.rhodecode_user.username == 'default':
+            <h4>${_('Login to your account')}</h4>
+            ${h.form(h.url('login_home',came_from=h.url.current()))}
+            <div class="form">
+                <div class="fields">
+                    <div class="field">
+                        <div class="label">
+                            <label for="username">${_('Username')}:</label>
+                        </div>
+                        <div class="input">
+                            ${h.text('username',class_='focus',size=40)}
+                        </div>
+    
+                    </div>
+                    <div class="field">
+                        <div class="label">
+                            <label for="password">${_('Password')}:</label>
+                        </div>
+                        <div class="input">
+                            ${h.password('password',class_='focus',size=40)}
+                        </div>
+    
+                    </div>
+                    <div class="buttons">
+                        <div class="password_forgoten">${h.link_to(_('Forgot password ?'),h.url('reset_password'))}</div>
+                        <div class="register">
+                        %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
+                         ${h.link_to(_("Don't have an account ?"),h.url('register'))}
+                        %endif
+                        </div>
+                        <div class="submit">
+                            ${h.submit('sign_in',_('Sign In'),class_="ui-btn xsmall")}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            ${h.end_form()}
+        %else:
+            <div class="links_left">
+                <div class="full_name">${c.rhodecode_user.full_name}</div>
+                <div class="email">${c.rhodecode_user.email}</div>
+                <div class="big_gravatar"><img alt="gravatar" src="${h.gravatar_url(c.rhodecode_user.email,48)}" /></div>
+            </div>
+            <div class="links_right">
+            <ol class="links">
+              <li>${h.link_to(_(u'Home'),h.url('home'))}</li>
+              <li>${h.link_to(_(u'My account'),h.url('admin_settings_my_account'))}</li>
+              <li class="logout">${h.link_to(_(u'Log Out'),h.url('logout_home'))}</li>
+            </ol>
+            </div>
+        %endif
+      </div>                     
+ </div>
+</%def>
 
 <%def name="menu(current=None)">
 		<%
@@ -142,7 +139,7 b''
 	        <ul id="quick">
 				<!-- repo switcher -->
 				<li>
-					<a id="repo_switcher" title="${_('Switch repository')}" href="#">
+					<a class="menu_link" id="repo_switcher" title="${_('Switch repository')}" href="#">
                     <span class="icon">
                         <img src="${h.url('/images/icons/database.png')}" alt="${_('Products')}" />
                     </span>
@@ -156,23 +153,15 b''
 				</li>
 
 	            <li ${is_current('summary')}>
-	               <a title="${_('Summary')}" href="${h.url('summary_home',repo_name=c.repo_name)}">
+	               <a class="menu_link" title="${_('Summary')}" href="${h.url('summary_home',repo_name=c.repo_name)}">
 	               <span class="icon">
 	                   <img src="${h.url('/images/icons/clipboard_16.png')}" alt="${_('Summary')}" />
 	               </span>
 	               <span>${_('Summary')}</span>
 	               </a>
 	            </li>
-                ##<li ${is_current('shortlog')}>
-                ##   <a title="${_('Shortlog')}" href="${h.url('shortlog_home',repo_name=c.repo_name)}">
-                ##   <span class="icon">
-                ##       <img src="${h.url('/images/icons/application_view_list.png')}" alt="${_('Shortlog')}" />
-                ##   </span>
-                ##   <span>${_('Shortlog')}</span>
-                ##   </a>
-                ##</li>
                 <li ${is_current('changelog')}>
-                   <a title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=c.repo_name)}">
+                   <a class="menu_link" title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=c.repo_name)}">
                    <span class="icon">
                        <img src="${h.url('/images/icons/time.png')}" alt="${_('Changelog')}" />
                    </span>
@@ -181,7 +170,7 b''
                 </li>
 
                 <li ${is_current('switch_to')}>
-                   <a id="branch_tag_switcher" title="${_('Switch to')}" href="#">
+                   <a class="menu_link" id="branch_tag_switcher" title="${_('Switch to')}" href="#">
                    <span class="icon">
                        <img src="${h.url('/images/icons/arrow_switch.png')}" alt="${_('Switch to')}" />
                    </span>
@@ -192,7 +181,7 b''
                     </ul>
                 </li>
                 <li ${is_current('files')}>
-                   <a title="${_('Files')}" href="${h.url('files_home',repo_name=c.repo_name)}">
+                   <a class="menu_link" title="${_('Files')}" href="${h.url('files_home',repo_name=c.repo_name)}">
                    <span class="icon">
                        <img src="${h.url('/images/icons/file.png')}" alt="${_('Files')}" />
                    </span>
@@ -201,7 +190,7 b''
                 </li>
 
                 <li ${is_current('options')}>
-                   <a title="${_('Options')}" href="#">
+                   <a class="menu_link" title="${_('Options')}" href="#">
                    <span class="icon">
                        <img src="${h.url('/images/icons/table_gear.png')}" alt="${_('Admin')}" />
                    </span>
@@ -241,7 +230,7 b''
                 </li>
 
                 <li>
-                    <a title="${_('Followers')}" href="${h.url('repo_followers_home',repo_name=c.repo_name)}">
+                    <a class="menu_link" title="${_('Followers')}" href="${h.url('repo_followers_home',repo_name=c.repo_name)}">
                     <span class="icon_short">
                         <img src="${h.url('/images/icons/heart.png')}" alt="${_('Followers')}" />
                     </span>
@@ -249,13 +238,14 b''
                     </a>
                 </li>
                 <li>
-                    <a title="${_('Forks')}" href="${h.url('repo_forks_home',repo_name=c.repo_name)}">
+                    <a class="menu_link" title="${_('Forks')}" href="${h.url('repo_forks_home',repo_name=c.repo_name)}">
                     <span class="icon_short">
                         <img src="${h.url('/images/icons/arrow_divide.png')}" alt="${_('Forks')}" />
                     </span>
                     <span class="short">${c.repository_forks}</span>
                     </a>
                 </li>
+                ${usermenu()}
 	        </ul>
             <script type="text/javascript">
                YUE.on('repo_switcher','mouseover',function(){
@@ -294,25 +284,34 b''
 		    ##ROOT MENU
             <ul id="quick">
                 <li>
-                    <a title="${_('Home')}"  href="${h.url('home')}">
+                    <a class="menu_link" title="${_('Home')}"  href="${h.url('home')}">
                     <span class="icon">
                         <img src="${h.url('/images/icons/home_16.png')}" alt="${_('Home')}" />
                     </span>
                     <span>${_('Home')}</span>
                     </a>
                 </li>
-                % if c.rhodecode_user.username != 'default':
+                %if c.rhodecode_user.username != 'default':
                  <li>
-                    <a title="${_('Journal')}"  href="${h.url('journal')}">
+                    <a class="menu_link" title="${_('Journal')}"  href="${h.url('journal')}">
                     <span class="icon">
                         <img src="${h.url('/images/icons/book.png')}" alt="${_('Journal')}" />
                     </span>
                     <span>${_('Journal')}</span>
                     </a>
                  </li>
-                % endif
+                %else:
+                 <li>
+                    <a class="menu_link" title="${_('Public journal')}"  href="${h.url('public_journal')}">
+                    <span class="icon">
+                        <img src="${h.url('/images/icons/book.png')}" alt="${_('Public journal')}" />
+                    </span>
+                    <span>${_('Public journal')}</span>
+                    </a>
+                 </li>
+                %endif
                 <li>
-                    <a title="${_('Search')}"  href="${h.url('search')}">
+                    <a class="menu_link" title="${_('Search')}"  href="${h.url('search')}">
                     <span class="icon">
                         <img src="${h.url('/images/icons/search_16.png')}" alt="${_('Search')}" />
                     </span>
@@ -322,7 +321,7 b''
 
 				%if h.HasPermissionAll('hg.admin')('access admin main page'):
                 <li ${is_current('admin')}>
-                   <a title="${_('Admin')}" href="${h.url('admin_home')}">
+                   <a class="menu_link" title="${_('Admin')}" href="${h.url('admin_home')}">
                    <span class="icon">
                        <img src="${h.url('/images/icons/cog_edit.png')}" alt="${_('Admin')}" />
                    </span>
@@ -331,6 +330,7 b''
                     ${admin_menu()}
                 </li>
 				%endif
+                ${usermenu()}
 			</ul>
 		%endif
 </%def>

rhodecode/templates/base/root.html

@@ -117,7 +117,10 b''
                  else{
                      YUD.setStyle('quick_login','display','');
                      YUD.addClass('quick_login_link','enabled');
-                     YUD.get('username').focus();
+                     var usr = YUD.get('username');
+                     if(usr){
+                    	 usr.focus();
+                     }
                  }
              });