Changeset - 93d4e3eb7d84
[Not reviewed]
beta
0 5 0
Marcin Kuzminski - 14 years ago 2012-02-19 18:36:42
marcin@python-works.com
made upper menu always hover, looks nicer and produces less troubles
- added notification inbox into quick menu
- commented yet innactive compose message button
5 files changed with 26 insertions and 25 deletions:
0 comments (0 inline, 0 general)
rhodecode/public/css/style.css
Show inline comments
 
@@ -239,139 +239,142 @@ div.options a {
 
}
 
 
#header ul#logged-user li a {
 
	color: #fff;
 
	font-weight: 700;
 
	text-decoration: none;
 
}
 
 
#header ul#logged-user li a:hover {
 
	text-decoration: underline;
 
}
 
 
#header ul#logged-user li.highlight a {
 
	color: #fff;
 
}
 
 
#header ul#logged-user li.highlight a:hover {
 
	color: #FFF;
 
}
 
 
#header #header-inner {
 
	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: -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 );
 
	margin: 0;
 
	padding: 0;
 
	display: block;
 
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
 
	-webkit-border-radius: 4px 4px 4px 4px;
 
	-khtml-border-radius: 4px 4px 4px 4px;
 
	-moz-border-radius: 4px 4px 4px 4px;
 
	border-radius: 4px 4px 4px 4px;
 
}
 
#header #header-inner.hover{
 
	position: fixed !important;
 
	width: 100% !important;
 
	margin-left: -10px !important;
 
	z-index: 10000;
 
	border-radius: 0px 0px 4px 4px;
 
    -webkit-border-radius: 0px 0px 0px 0px;
 
    -khtml-border-radius: 0px 0px 0px 0px;
 
    -moz-border-radius: 0px 0px 0px 0px;
 
    border-radius: 0px 0px 0px 0px;	
 
}
 
#header #header-inner #home a {
 
	height: 40px;
 
	width: 46px;
 
	display: block;
 
	background: url("../images/button_home.png");
 
	background-position: 0 0;
 
	margin: 0;
 
	padding: 0;
 
}
 
 
#header #header-inner #home a:hover {
 
	background-position: 0 -40px;
 
}
 
 
#header #header-inner #logo {
 
	float: left;
 
	position: absolute;
 
}
 
 
#header #header-inner #logo h1 {
 
	color: #FFF;
 
	font-size: 20px;
 
	margin: 12px 0 0 13px;
 
	padding: 0;
 
}
 
 
#header #header-inner #logo a {
 
	color: #fff;
 
	text-decoration: none;
 
}
 
 
#header #header-inner #logo a:hover {
 
	color: #bfe3ff;
 
}
 
 
#header #header-inner #quick,#header #header-inner #quick ul {
 
	position: relative;
 
	float: right;
 
	list-style-type: none;
 
	list-style-position: outside;
 
	margin: 8px 5px 0 0;
 
	margin: 8px 8px 0 0;
 
	padding: 0;
 
}
 
 
#header #header-inner #quick li {
 
	position: relative;
 
	float: left;
 
	margin: 0 5px 0 0;
 
	padding: 0;
 
}
 
 
#header #header-inner #quick li a.menu_link {
 
	top: 0;
 
	left: 0;
 
	height: 1%;
 
	display: block;
 
	clear: both;
 
	overflow: hidden;
 
	color: #FFF;
 
	font-weight: 700;
 
	text-decoration: none;
 
	background: #369;
 
	padding: 0;
 
	-webkit-border-radius: 4px 4px 4px 4px;
 
	-khtml-border-radius: 4px 4px 4px 4px;
 
	-moz-border-radius: 4px 4px 4px 4px;
 
	border-radius: 4px 4px 4px 4px;
 
}
 
 
#header #header-inner #quick li span.short {
 
	padding: 9px 6px 8px 6px;
 
}
 
 
#header #header-inner #quick li span {
 
	top: 0;
 
	right: 0;
 
	height: 1%;
 
	display: block;
 
	float: left;
 
	border-left: 1px solid #3f6f9f;
 
	margin: 0;
 
	padding: 10px 12px 8px 10px;
 
}
 
 
#header #header-inner #quick li span.normal {
 
	border: none;
 
	padding: 10px 12px 8px;
 
}
 
 
@@ -1925,97 +1928,104 @@ div.form div.fields div.field div.button
 
}
 
#quick_login h4{
 
    color: #fff;
 
    padding: 5px 0px 5px 14px;
 
}
 
 
#quick_login .password_forgoten {
 
	padding-right: 10px;
 
	padding-top: 0px;
 
	text-align: left;
 
}
 
 
#quick_login .password_forgoten a {
 
	font-size: 10px;
 
	color: #fff;
 
}
 
 
#quick_login .register {
 
	padding-right: 10px;
 
	padding-top: 5px;
 
	text-align: left;
 
}
 
 
#quick_login .register a {
 
	font-size: 10px;
 
	color: #fff;
 
}
 
 
#quick_login .submit {
 
    margin: -20px 0 0 0px;
 
    position: absolute;
 
    right: 15px;
 
}
 
 
#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 .inbox{
 
    padding:4px 0px 0px 6px;
 
    color: #FFFFFF;
 
    font-weight: bold;    
 
}
 
#quick_login .inbox a{
 
	color: #FFFFFF;
 
}
 
#quick_login .email,#quick_login .email a{
 
    color: #FFFFFF;
 
    padding: 3px;
 
    
 
}
 
#quick_login .links .logout{
 
 
}
 
 
#quick_login div.form div.fields {
 
	padding-top: 2px;
 
	padding-left: 10px;
 
}
 
 
#quick_login div.form div.fields div.field {
 
	padding: 5px;
 
}
 
 
#quick_login div.form div.fields div.field div.label label {
 
	color: #fff;
 
	padding-bottom: 3px;
 
}
 
 
#quick_login div.form div.fields div.field div.input input {
 
	width: 236px;
 
	background: #FFF;
 
	border-top: 1px solid #b3b3b3;
 
	border-left: 1px solid #b3b3b3;
 
	border-right: 1px solid #eaeaea;
 
	border-bottom: 1px solid #eaeaea;
 
	color: #000;
 
	font-size: 11px;
 
	margin: 0;
 
	padding: 5px 7px 4px;
 
}
 
 
#quick_login div.form div.fields div.buttons {
 
	clear: both;
 
	overflow: hidden;
 
	text-align: right;
 
	margin: 0;
 
	padding: 5px 14px 0px 5px;
 
}
 
 
#quick_login div.form div.links {
 
	clear: both;
 
	overflow: hidden;
 
	margin: 10px 0 0;
 
@@ -3098,97 +3108,97 @@ table.code-browser .browser-dir {
 
 
div#legend_container table,div#legend_choices table {
 
	width: auto !important;
 
}
 
 
table#permissions_manage {
 
	width: 0 !important;
 
}
 
 
table#permissions_manage span.private_repo_msg {
 
	font-size: 0.8em;
 
	opacity: 0.6px;
 
}
 
 
table#permissions_manage td.private_repo_msg {
 
	font-size: 0.8em;
 
}
 
 
table#permissions_manage tr#add_perm_input td {
 
	vertical-align: middle;
 
}
 
 
div.gravatar {
 
	background-color: #FFF;
 
	float: left;
 
	margin-right: 0.7em;
 
	padding: 1px 1px 1px 1px;
 
    line-height:0;
 
	-webkit-border-radius: 3px;
 
	-khtml-border-radius: 3px;
 
	-moz-border-radius: 3px;
 
	border-radius: 3px;
 
}
 
 
div.gravatar img {
 
	-webkit-border-radius: 2px;
 
	-khtml-border-radius: 2px;
 
	-moz-border-radius: 2px;
 
	border-radius: 2px;
 
}
 
 
#header,#content,#footer {
 
	min-width: 978px;
 
}
 
 
#content {
 
	clear: both;
 
	overflow: hidden;
 
	padding: 14px 10px;
 
	padding: 54px 10px 14px 10px;
 
}
 
 
#content div.box div.title div.search {
 
	
 
	border-left: 1px solid #316293;
 
}
 
 
#content div.box div.title div.search div.input input {
 
	border: 1px solid #316293;
 
}
 
 
.ui-btn{
 
    color: #515151;
 
    background-color: #DADADA;
 
    background-repeat: repeat-x;
 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#F4F4F4),to(#DADADA) );
 
    background-image: -moz-linear-gradient(top, #F4F4F4, #DADADA);
 
    background-image: -ms-linear-gradient(top, #F4F4F4, #DADADA);
 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F4F4F4),color-stop(100%, #DADADA) );
 
    background-image: -webkit-linear-gradient(top, #F4F4F4, #DADADA) );
 
    background-image: -o-linear-gradient(top, #F4F4F4, #DADADA) );
 
    background-image: linear-gradient(top, #F4F4F4, #DADADA);
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F4F4', endColorstr='#DADADA', GradientType=0);
 
    
 
    border-top: 1px solid #DDD;
 
    border-left: 1px solid #c6c6c6;
 
    border-right: 1px solid #DDD;
 
    border-bottom: 1px solid #c6c6c6;
 
    color: #515151;
 
    outline: none;
 
    margin: 0px 3px 3px 0px;
 
    -webkit-border-radius: 4px 4px 4px 4px !important;
 
    -khtml-border-radius: 4px 4px 4px 4px !important;
 
    -moz-border-radius: 4px 4px 4px 4px !important;
 
    border-radius: 4px 4px 4px 4px !important;
 
    cursor: pointer !important;
 
	padding: 3px 3px 3px 3px;	
 
	background-position: 0 -15px;
 
 
}
 
.ui-btn.xsmall{
 
    padding: 1px 2px 1px 1px;
 
}
 
.ui-btn.clone{
 
	padding: 5px 2px 6px 1px;
 
	margin: 0px -4px 3px 0px;
 
    -webkit-border-radius: 4px 0px 0px 4px !important;
 
    -khtml-border-radius: 4px 0px 0px 4px !important;
rhodecode/templates/admin/notifications/notifications.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="/base/base.html"/>
 

	
 
<%def name="title()">
 
    ${_('My Notifications')} ${c.rhodecode_user.username} - ${c.rhodecode_name}
 
</%def>
 

	
 
<%def name="breadcrumbs_links()">
 
    ${_('My Notifications')}
 
</%def>
 

	
 
<%def name="page_nav()">
 
	${self.menu('admin')}
 
</%def>
 

	
 
<%def name="main()">
 
<div class="box">
 
    <!-- box / title -->
 
    <div class="title">
 
        ${self.breadcrumbs()}
 
        <ul class="links">
 
            <li>
 
              <span style="text-transform: uppercase;"><a href="#">${_('Compose message')}</a></span>
 
            </li>
 
        </ul>
 
        ##<ul class="links">
 
        ##    <li>
 
        ##      <span style="text-transform: uppercase;"><a href="#">${_('Compose message')}</a></span>
 
        ##    </li>
 
        ##</ul>
 
    </div>
 
    %if c.notifications:
 
      <div style="padding:10px 15px;text-align: right">
 
      <span id='mark_all_read' class="ui-btn">${_('Mark all read')}</span>
 
      </div>
 
    %endif
 
  <div id='notification_data'>
 
    <%include file='notifications_data.html'/>
 
  </div>
 
</div>
 
<script type="text/javascript">
 
var url_del = "${url('notification', notification_id='__NOTIFICATION_ID__')}";
 
YUE.on(YUQ('.delete-notification'),'click',function(e){
 
 var notification_id = e.currentTarget.id;
 
 deleteNotification(url_del,notification_id)
 
})
 
 YUE.on('mark_all_read','click',function(e){
 
	    var url = "${h.url('notifications_mark_all_read')}";
 
	    ypjax(url,'notification_data',function(){
 
	    	YUD.get('notification_counter').innerHTML=0;
 
	    	YUE.on(YUQ('.delete-notification'),'click',function(e){
 
	    		 var notification_id = e.currentTarget.id;
 
	    		 deleteNotification(url_del,notification_id)
 
	    	})
 
	    });
 
 })
 
</script>
 
</%def>
rhodecode/templates/admin/notifications/show_notification.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="/base/base.html"/>
 

	
 
<%def name="title()">
 
    ${_('Show notification')} ${c.rhodecode_user.username} - ${c.rhodecode_name}
 
</%def>
 

	
 
<%def name="breadcrumbs_links()">
 
    ${h.link_to(_('Notifications'),h.url('notifications'))}
 
    &raquo;
 
    ${_('Show notification')}
 
</%def>
 

	
 
<%def name="page_nav()">
 
    ${self.menu('admin')}
 
</%def>
 

	
 
<%def name="main()">
 
<div class="box">
 
    <!-- box / title -->
 
    <div class="title">
 
        ${self.breadcrumbs()}
 
        <ul class="links">
 
            <li>
 
              <span style="text-transform: uppercase;"><a href="#">${_('Compose message')}</a></span>
 
            </li>
 
        </ul>
 
        ##<ul class="links">
 
        ##    <li>
 
        ##      <span style="text-transform: uppercase;"><a href="#">${_('Compose message')}</a></span>
 
        ##    </li>
 
        ##</ul>
 
    </div>
 
    <div class="table">
 
      <div id="notification_${c.notification.notification_id}">
 
        <div class="notification-header">
 
          <div class="gravatar">
 
              <img alt="gravatar" src="${h.gravatar_url(h.email(c.notification.created_by_user.email),24)}"/>
 
          </div>
 
          <div class="desc">
 
              ${c.notification.description}
 
          </div>
 
          <div class="delete-notifications">
 
            <span id="${c.notification.notification_id}" class="delete-notification delete_icon action"></span>
 
          </div>
 
        </div>
 
        <div>${h.rst_w_mentions(c.notification.body)}</div>
 
      </div>
 
    </div>
 
</div>
 
<script type="text/javascript">
 
var url = "${url('notification', notification_id='__NOTIFICATION_ID__')}";
 
var main = "${url('notifications')}";
 
   YUE.on(YUQ('.delete-notification'),'click',function(e){
 
       var notification_id = e.currentTarget.id;
 
       deleteNotification(url,notification_id,[function(){window.location=main}])
 
   })
 
</script>
 
</%def>
rhodecode/templates/base/base.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="root.html"/>
 

	
 
<!-- HEADER -->
 
<div id="header">
 
    <div id="header-inner" class="title">
 
    <div id="header-inner" class="title hover">
 
        <div id="logo">
 
            <h1><a href="${h.url('home')}">${c.rhodecode_name}</a></h1>
 
        </div>
 
        <!-- MENU -->
 
        ${self.page_nav()}
 
        <!-- END MENU -->
 
        ${self.body()}
 
    </div>
 
</div>
 
<!-- END HEADER -->
 

	
 
<!-- CONTENT -->
 
<div id="content">
 
    <div class="flash_msg">
 
        <% messages = h.flash.pop_messages() %>
 
        % if messages:
 
        <ul id="flash-messages">
 
            % for message in messages:
 
            <li class="${message.category}_msg">${message}</li>
 
            % endfor
 
        </ul>
 
        % endif
 
    </div>
 
    <div id="main">
 
        ${next.main()}
 
    </div>
 
</div>
 
<!-- END CONTENT -->
 

	
 
<!-- FOOTER -->
 
<div id="footer">
 
   <div id="footer-inner" class="title">
 
       <div>
 
           <p class="footer-link">
 
                <a href="${h.url('bugtracker')}">${_('Submit a bug')}</a>
 
           </p>
 
	       <p class="footer-link-right">
 
	           <a href="${h.url('rhodecode_official')}">RhodeCode</a>
 
	           ${c.rhodecode_version} &copy; 2010-${h.datetime.today().year} by Marcin Kuzminski
 
	       </p>
 
       </div>
 
   </div>
 
</div>
 
<!-- END FOOTER -->
 

	
 
### MAKO DEFS ###
 
<%def name="page_nav()">
 
    ${self.menu()}
 
@@ -70,96 +70,97 @@
 
        <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',_('Log 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_or_username}</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 class="inbox"><a href="${h.url('notifications')}">${_('Inbox')}: ${c.unread_notifications}</a></div>
 
            </div>
 
            <div class="links_right">
 
            <ol class="links">
 
              <li>${h.link_to(_(u'Home'),h.url('home'))}</li>
 
              <li>${h.link_to(_(u'Journal'),h.url('journal'))}</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)">
 
		<%
 
		def is_current(selected):
 
			if selected == current:
 
				return h.literal('class="current"')
 
		%>
 
		%if current not in ['home','admin']:
 
		   ##REGULAR MENU
 
	        <ul id="quick">
 
				<!-- repo switcher -->
 
				<li>
 
					<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>
 
                    <span>&darr;</span>
 
					</a>
 
					<ul id="repo_switcher_list" class="repo_switcher">
 
                        <li>
 
                            <a href="#">${_('loading...')}</a>
 
                        </li>
 
					</ul>
 
				</li>
 

	
 
	            <li ${is_current('summary')}>
 
	               <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('changelog')}>
 
                   <a class="menu_link" title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=c.repo_name)}">
rhodecode/templates/base/root.html
Show inline comments
 
@@ -78,68 +78,58 @@
 
                args = 'follows_user_id='+fallows_user_id;
 
                args+= '&amp;auth_token='+token;
 
                if(user_id != undefined){
 
                    args+="&amp;user_id="+user_id;
 
                }
 
                YUC.asyncRequest('POST',follow_base_url,{
 
                    success:function(o){
 
                    	onSuccessFollow(target);
 
                    }
 
                },args);
 
                return false;
 
            }
 

	
 
            var toggleFollowingRepo = function(target,fallows_repo_id,token,user_id){
 

	
 
                args = 'follows_repo_id='+fallows_repo_id;
 
                args+= '&amp;auth_token='+token;
 
                if(user_id != undefined){
 
                    args+="&amp;user_id="+user_id;
 
                }
 
                YUC.asyncRequest('POST',follow_base_url,{
 
                    success:function(o){
 
                    	onSuccessFollow(target);
 
                    }
 
                },args);
 
                return false;
 
            }
 
           YUE.onDOMReady(function(){
 
             tooltip_activate();
 
             show_more_event();
 

	
 
             YUE.on('quick_login_link','click',function(e){
 
                 // make sure we don't redirect
 
                 YUE.preventDefault(e);
 

	
 
                 if(YUD.hasClass('quick_login_link','enabled')){
 
                     YUD.setStyle('quick_login','display','none');
 
                     YUD.removeClass('quick_login_link','enabled');
 
                 }
 
                 else{
 
                     YUD.setStyle('quick_login','display','');
 
                     YUD.addClass('quick_login_link','enabled');
 
                     var usr = YUD.get('username');
 
                     if(usr){
 
                    	 usr.focus();
 
                     }
 
                 }
 
             });
 

	
 
            // hover menu
 
            YUE.on(window,'scroll',function(){
 
                if(YUD.getDocumentScrollTop() > 45){
 
                      YUD.addClass('header-inner','hover');
 
                }
 
                else{
 
                    YUD.removeClass('header-inner','hover');
 
                }
 
            })
 
           })
 
            </script>
 
        </%def>
 
        <%def name="js_extra()"></%def>
 
        ${self.js()}
 
    </head>
 
    <body id="body">
 
        ${next.body()}
 
    </body>
 
</html>
0 comments (0 inline, 0 general)