Mercurial > kallithea

changeset 1926:049bc911b04f beta

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
removed upper menu to save space and did little rip off menu similar to G+
author Marcin Kuzminski <marcin@python-works.com>
date Fri, 20 Jan 2012 07:51:17 +0200
parents 9d400b585c24
children 7314e8384b1b
files rhodecode/public/css/style.css rhodecode/templates/base/base.html rhodecode/templates/base/root.html
diffstat 3 files changed, 214 insertions(+), 123 deletions(-) [+]
line wrap: on
line diff
--- a/rhodecode/public/css/style.css	Fri Jan 20 01:47:16 2012 +0200
+++ b/rhodecode/public/css/style.css	Fri Jan 20 07:51:17 2012 +0200
@@ -258,22 +258,19 @@
 }
 
 #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 @@
 	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 @@
 	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 @@
 	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 @@
 	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 @@
 	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 @@
 	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 @@
 	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;
--- a/rhodecode/templates/base/base.html	Fri Jan 20 01:47:16 2012 +0200
+++ b/rhodecode/templates/base/base.html	Fri Jan 20 07:51:17 2012 +0200
@@ -3,76 +3,6 @@
 
 <!-- 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 @@
     </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 @@
 	        <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 @@
 				</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 @@
                 </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 @@
                     </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 @@
                 </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 @@
                 </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 @@
                     </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 @@
 		    ##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 @@
 
 				%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 @@
                     ${admin_menu()}
                 </li>
 				%endif
+                ${usermenu()}
 			</ul>
 		%endif
 </%def>
--- a/rhodecode/templates/base/root.html	Fri Jan 20 01:47:16 2012 +0200
+++ b/rhodecode/templates/base/root.html	Fri Jan 20 07:51:17 2012 +0200
@@ -117,7 +117,10 @@
                  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();
+                     }
                  }
              });