Nemcio/GitBucket
1
0
Fork 0
mirror of https://github.com/gitbucket/gitbucket.git synced 2025-11-12 08:25:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Side-menu is completed!

Browse Source
This commit is contained in:
takezoe
2014-05-10 14:44:19 +09:00
parent 6042f0e1e0
commit debc798aec
2 changed files with 106 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/main/twirl/menu.scala.html
View File

@@ -5,6 +5,21 @@
@import context._ @import context._
@import view.helpers._ @import view.helpers._
@sidemenu(path: String, name: String, label: String) = {
<li @if(active == name){class="active"}>
<div class="@if(active == name){margin} else {gradient} pull-left"></div>
<a href="@url(repository)@path"@* @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="Code"}*@>
@if(active == name){
<img src="@assets/common/images/menu-@{name}-active.png">
} else {
<img src="@assets/common/images/menu-@{name}-active.png" class="menu-icon-active" style="display:none;">
<img src="@assets/common/images/menu-@{name}.png" class="menu-icon">
}
@if(expand){ @label}
</a>
</li>
}
<div class="container"> <div class="container">
@if(repository.commitCount > 0){ @if(repository.commitCount > 0){
<div class="pull-right"> <div class="pull-right">
@@ -28,87 +43,16 @@
</div> </div>
</div> </div>
<hr style="margin-bottom: 20px;"/> <hr style="margin-bottom: 20px;"/>
<style type="text/css">
ul.sidemenu {
margin-left: 0px;
}
ul.sidemenu li.active {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
border-right: 2px solid #bb4444;
border-left: 1px solid white;
}
ul.sidemenu div.gradient {
width: 5px;
height: 35px;
background: linear-gradient(to right, #eee, #fff);
margin-right: 4px;
border-left: 1px solid #eee;
}
ul.sidemenu div.margin {
width: 5px;
height: 35px;
margin-right: 4px;
border-left: 1px solid white;
}
ul.sidemenu li {
line-height: 35px;
height: 35px;
border-left: 1px solid #eee;
margin-left:0px;
border-right: 2px solid white;
list-style-type: none;
}
ul.sidemenu span.badge {
padding-right: 4px;
}
</style>
<script>
$(function(){
$('ul.sidemenu a').mouseover(function(e){
$(e.target).prev('div.gradient').css('border-left', '1px solid silver');
});
$('ul.sidemenu a').mouseout(function(e){
$(e.target).prev('div.gradient').css('border-left', '1px solid #eee');
});
});
</script>
<div class="container body"> <div class="container body">
<div style="width: @if(expand){170px} else {40px};" class="pull-right"> <div style="width: @if(expand){170px} else {40px};" class="pull-right">
<ul class="sidemenu"> <ul class="sidemenu">
<li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li> <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
<li @if(active=="code"){class="active"}> @sidemenu("" , "code" , "Code")
<div class="@if(active=="code"){margin} else {gradient} pull-left"></div> @sidemenu("/issues", "issues", "Issues")
<a href="@url(repository)"@* @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="Code"}*@><img src="@assets/common/images/menu-code.png">@if(expand){ Code}</a> @sidemenu("/pulls" , "pulls" , "Pull Requests")
</li> @sidemenu("/wiki" , "wiki" , "Wiki")
<li @if(active=="issues"){class="active"}>
<div class="@if(active=="issues"){margin} else {gradient} pull-left"></div>
<a href="@url(repository)/issues"@* @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="Issues"}*@><img src="@assets/common/images/menu-issues.png">@if(expand){ Issues}</a>
@if(expand && repository.issueCount > 0){
<div class="pull-right"><span class="label">@repository.issueCount</span></div>
}
</li>
<li @if(active=="pulls"){class="active"}>
<div class="@if(active=="pulls"){margin} else {gradient} pull-left"></div>
<a href="@url(repository)/pulls"@* @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="Pull Requests"}*@><img src="@assets/common/images/menu-pulls.png">@if(expand){ Pull Requests}</a>
@if(expand && repository.pullCount > 0){
<div class="pull-right"><span class="label">@repository.pullCount</span></div>
}
</li>
<li @if(active=="wiki"){class="active"}>
<div class="@if(active=="wiki"){margin} else {gradient} pull-left"></div>
<a href="@url(repository)/wiki"@* @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="Wiki"}*@><img src="@assets/common/images/menu-wiki.png">@if(expand){ Wiki}</a>
</li>
@if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){ @if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){
<li @if(active=="settings"){class="active"}> @sidemenu("/settings", "settings", "Settings")
<div class="@if(active=="settings"){margin} else {gradient} pull-left"></div>
<a href="@url(repository)/settings"@* @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="Settings"}*@><img src="@assets/common/images/menu-settings.png">@if(expand){ Settings}</a>
</li>
} }
<li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li> <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
</ul> </ul>
@@ -132,18 +76,6 @@ $(function(){
} }
</div> </div>
<div style="margin-right: @if(expand){180px} else {50px};"> <div style="margin-right: @if(expand){180px} else {50px};">
<style type="text/css">
a.header-link {
color: #888;
}
a.header-link strong {
color: black;
}
a.header-link:hover {
color: #0088cc;
text-decoration: none;
}
</style>
@if(expand){ @if(expand){
@repository.repository.description.map { description => @repository.repository.description.map { description =>
<p class="muted">@description</p> <p class="muted">@description</p>
@@ -173,17 +105,38 @@ $(function(){
@body @body
</div> </div>
</div> </div>
@if(settings.ssh && loginAccount.isDefined){
<script> <script>
$(function(){ $(function(){
$('#repository-url-http').click(function(){ $('ul.sidemenu a').mouseover(function(e){
$('#repository-url').val('@repository.httpUrl'); var target = e.target;
$('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val()); if(e.target.tagName == "IMG"){
target = e.target.parentElement;
}
$(target).prev ('div.gradient' ).css('border-left', '1px solid silver');
$(target).children('img.menu-icon-active').css('display', 'inline');
$(target).children('img.menu-icon' ).css('display', 'none');
}); });
$('#repository-url-ssh').click(function(){
$('#repository-url').val('@repository.sshUrl(settings.sshPort.getOrElse(service.SystemSettingsService.DefaultSshPort), loginAccount.get.userName)'); $('ul.sidemenu a').mouseout(function(e){
$('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val()); var target = e.target;
if(e.target.tagName == "IMG"){
target = e.target.parentElement;
}
$(target).prev ('div.gradient' ).css('border-left', '1px solid #eee');
$(target).children('img.menu-icon-active').css('display', 'none');
$(target).children('img.menu-icon' ).css('display', 'inline');
}); });
@if(settings.ssh && loginAccount.isDefined){
$('#repository-url-http').click(function(){
$('#repository-url').val('@repository.httpUrl');
$('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val());
});
$('#repository-url-ssh').click(function(){
$('#repository-url').val('@repository.sshUrl(settings.sshPort.getOrElse(service.SystemSettingsService.DefaultSshPort), loginAccount.get.userName)');
$('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val());
});
}
}); });
</script> </script>
}

57
src/main/webapp/assets/common/css/gitbucket.css
View File

@@ -282,6 +282,52 @@ span.highlight {
width: 100%; width: 100%;
} }
/****************************************************************************/
/* Side Menu */
/****************************************************************************/
ul.sidemenu {
margin-left: 0px;
}
ul.sidemenu a:hover{
text-decoration: none;
}
ul.sidemenu li.active {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
border-right: 2px solid #bb4444;
border-left: 1px solid white;
}
ul.sidemenu div.gradient {
width: 5px;
height: 35px;
background: linear-gradient(to right, #eee, #fff);
margin-right: 4px;
border-left: 1px solid #eee;
}
ul.sidemenu div.margin {
width: 5px;
height: 35px;
margin-right: 4px;
border-left: 1px solid white;
}
ul.sidemenu li {
line-height: 35px;
height: 35px;
border-left: 1px solid #eee;
margin-left:0px;
border-right: 2px solid white;
list-style-type: none;
}
ul.sidemenu span.badge {
padding-right: 4px;
}
/****************************************************************************/ /****************************************************************************/
/* Create Repository */ /* Create Repository */
/****************************************************************************/ /****************************************************************************/
@@ -393,6 +439,17 @@ div.activity-content {
/****************************************************************************/ /****************************************************************************/
/* Repository Viewer */ /* Repository Viewer */
/****************************************************************************/ /****************************************************************************/
a.header-link {
color: #888;
}
a.header-link strong {
color: black;
}
a.header-link:hover {
color: #0088cc;
text-decoration: none;
}
table.table-file-list { table.table-file-list {
margin-bottom: 0px; margin-bottom: 0px;
} }