top menu: show user menu as a menu option like others, now also with login name

A minor regression: the message count is not clickable ... but it was hard to
hit, and somewhat confusing that different parts of the icon meant different
things.

The new html/css will probably need some review and cross platform testing.

rhodecode/public/css/style.css

@@ -453,6 +453,8 b' div:hover > a.permalink {'
 	border-left: none;
 	border-right: 1px solid #2e5c89;
 	padding: 8px 6px 4px;
+	min-width: 16px;
+	min-height: 16px;
 }
 
 #header #header-inner #quick li span.icon_short {
@@ -2090,7 +2092,7 b' a.metatag[tag="license"]:hover {'
 }
 #quick_login{
     min-height: 80px;
-    margin: 37px 0 0 -251px;
+    margin: 37px 0 0 -280px;
     padding: 4px;
     position: absolute;
     width: 278px;
@@ -4528,30 +4530,18 b' form.comment-inline-form {'
     float: left;    	
 }
 
-.notifications{
-    border-radius: 4px 4px 4px 4px;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;    
-    float: right;
-    margin: 20px 0px 0px 0px;
-    position: absolute;
-    text-align: center;
-    width: 26px;
-    z-index: 1000;
-}
-.notifications a{
+.notifications {
+	padding: 2px 7px !important;
+	margin: 7px -4px -7px 4px !important;
+	text-align: center;
 	color:#888 !important;
-	display: block;
 	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;
-	background-color: #EEEFFF !important;
-}
+	border-radius: 4px !important;
+	-webkit-border-radius: 4px !important;
+	-moz-border-radius: 4px !important;  	
+}
+
 .notification-header{
 	padding-top:6px;
 }

rhodecode/templates/base/base.html

@@ -61,17 +61,24 b''
 </%def>
 
 <%def name="usermenu()">
+    <li>
+        <a class="menu_link" id="quick_login_link">
+            <span class="icon" style="background-image:url(${h.gravatar_url(c.rhodecode_user.email,16)}); background-repeat:no-repeat; background-position:center; ">
+                %if c.rhodecode_user.username != 'default' and c.unread_notifications != -1:
+                <span class="notifications" href="${h.url('notifications')}">${c.unread_notifications}</span>
+                %endif
+            </span>
+            <span>
+                %if c.rhodecode_user.username != 'default':
+                ${c.rhodecode_user.username}
+                %else:
+                ${_('Not logged in')}
+                %endif
+            </span>
+        </a>
+    </li>
+
   <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,24)}" />
-       </div>
-       %if c.rhodecode_user.username != 'default' and c.unread_notifications != 0:
-        <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>