Nemcio/GitBucket
1
0
Fork 0
mirror of https://github.com/gitbucket/gitbucket.git synced 2025-11-07 14:05:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move sidemenu to header

Browse Source
This commit is contained in:
Naoki Takezoe
2016-02-14 23:41:07 +09:00
parent 0fae2dac35
commit dfaabeb41d
3 changed files with 142 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/twirl/gitbucket/core/index.scala.html
View File

@@ -22,7 +22,7 @@
</div> </div>
} }
@if(loginAccount.isEmpty){ @if(loginAccount.isEmpty){
@signinform(settings) <div id="dashboard-signin-form">@signinform(settings)</div>
} else { } else {
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading strong"> <div class="panel-heading strong">

102
src/main/twirl/gitbucket/core/menu.scala.html
View File

@@ -10,12 +10,11 @@
@import gitbucket.core.service.RepositoryService._ @import gitbucket.core.service.RepositoryService._
@sidemenu(path: String, name: String, icon: String, label: String, count: Int = 0) = { @sidemenu(path: String, name: String, icon: String, label: String, count: Int = 0) = {
<li @if(active == name){class="active"} @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="@label"}> <li @if(active == name){class="active"}>
<a href="@url(repository)@path"> <a href="@url(repository)@path">
<i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i> <i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i> @label
@if(expand){ @label} @if(count > 0){
@if(expand && count > 0){ <span class="badge">@count</span>
<div class="pull-right"><span class="badge">@count</span></div>
} }
</a> </a>
</li> </li>
@@ -24,58 +23,55 @@
<div class="container"> <div class="container">
@helper.html.information(info) @helper.html.information(info)
@helper.html.error(error) @helper.html.error(error)
<div class="row"> <div class="head">
<div class="head"> @if(repository.commitCount > 0){
@if(repository.commitCount > 0){ <div class="input-group pull-right">
<div class="input-group pull-right"> <span class="fork">
<span class="fork"> <span class="input-group-btn">
<span class="input-group-btn"> @if(loginAccount.isEmpty){
@if(loginAccount.isEmpty){ <a title="You must be signed in to fork a repository" href="@path/signin?redirect=@urlEncode(s"${path}/${repository.owner}/${repository.name}")" class="btn btn-default">Fork</a>
<a title="You must be signed in to fork a repository" href="@path/signin?redirect=@urlEncode(s"${path}/${repository.owner}/${repository.name}")" class="btn btn-default">Fork</a> } else {
@if(isNoGroup) {
<a id="fork-link" href="javascript:void(0);" class="btn btn-default">Fork</a>
} else { } else {
@if(isNoGroup) { <a href="@path/@repository.owner/@repository.name/fork" class="btn btn-default" rel="facebox">Fork</a>
<a id="fork-link" href="javascript:void(0);" class="btn btn-default">Fork</a>
} else {
<a href="@path/@repository.owner/@repository.name/fork" class="btn btn-default" rel="facebox">Fork</a>
}
} }
</span> }
<span class="count"><a href="@url(repository)/network/members">@repository.forkedCount</a></span>
</span> </span>
</div> <span class="count"><a href="@url(repository)/network/members">@repository.forkedCount</a></span>
@if(loginAccount.isDefined && isNoGroup){ </span>
<form id="fork-form" method="post" action="@path/@repository.owner/@repository.name/fork" style="display: none;"> </div>
<input type="hidden" name="account" value="@loginAccount.get.userName"/> @if(loginAccount.isDefined && isNoGroup){
</form> <form id="fork-form" method="post" action="@path/@repository.owner/@repository.name/fork" style="display: none;">
} <input type="hidden" name="account" value="@loginAccount.get.userName"/>
</form>
} }
@helper.html.repositoryicon(repository, true) }
<a href="@url(repository.owner)">@repository.owner</a> / <a href="@url(repository)" class="strong">@repository.name</a> @helper.html.repositoryicon(repository, true)
<a href="@url(repository.owner)">@repository.owner</a> / <a href="@url(repository)" class="strong">@repository.name</a>
@defining(repository.repository){ x => @defining(repository.repository){ x =>
@if(repository.repository.originRepositoryName.isDefined){ @if(repository.repository.originRepositoryName.isDefined){
<div class="forked"> <div class="forked">
forked from <a href="@path/@x.parentUserName/@x.parentRepositoryName">@x.parentUserName/@x.parentRepositoryName</a> forked from <a href="@path/@x.parentUserName/@x.parentRepositoryName">@x.parentUserName/@x.parentRepositoryName</a>
</div> </div>
}
} }
</div> }
</div> </div>
<ul class="headmenu">
@sidemenu("" , "code" , "code" , "Code")
@sidemenu("/issues", "issues" , "issue-opened" , "Issues", repository.issueCount)
@sidemenu("/pulls" , "pulls" , "git-pull-request" , "Pull Requests", repository.pullCount)
@sidemenu("/wiki" , "wiki" , "book" , "Wiki")
@if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){
@sidemenu("/settings" , "settings" , "tools", "Settings")
}
</ul>
</div> </div>
<hr style="margin-bottom: 20px;"/> <hr style="margin-bottom: 20px;"/>
<div class="container body"> <div class="container body">
<div style="width: @if(expand){170px} else {40px};" class="pull-right"> @*
<ul class="sidemenu">
<li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
@sidemenu("" , "code" , "code" , "Code")
@sidemenu("/issues", "issues" , "issue-opened" , "Issues", repository.issueCount)
@sidemenu("/pulls" , "pulls" , "git-pull-request" , "Pull Requests", repository.pullCount)
@sidemenu("/wiki" , "wiki" , "book" , "Wiki")
@if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){
@sidemenu("/settings" , "settings" , "tools", "Settings")
}
<li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
</ul>
@if(expand){ @if(expand){
<div class="small"> <div class="small">
<strong id="repository-url-proto">HTTP</strong> <span class="mute">clone URL</span> <strong id="repository-url-proto">HTTP</strong> <span class="mute">clone URL</span>
@@ -97,15 +93,13 @@
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<a href="@{url(repository)}/archive/@{encodeRefName(id)}.zip" class="btn btn-sm btn-default btn-block"><i class="octicon octicon-cloud-download"></i>Download ZIP</a> <a href="@{url(repository)}/archive/@{encodeRefName(id)}.zip" class="btn btn-sm btn-default btn-block"><i class="octicon octicon-cloud-download"></i>Download ZIP</a>
</div> </div>
@*
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<a href="@{url(repository)}/archive/@{encodeRefName(id)}.tar.gz" class="btn btn-sm btn-default btn-block "><i class="octicon octicon-cloud-download"></i>Download TAR.GZ</a> <a href="@{url(repository)}/archive/@{encodeRefName(id)}.tar.gz" class="btn btn-sm btn-default btn-block "><i class="octicon octicon-cloud-download"></i>Download TAR.GZ</a>
</div> </div>
*@
} }
} }
</div> *@
<div class="pull-left" style="width: @if(expand){770px} else {895px};"> @* <div class="pull-left" style="width: 895px;">*@
@if(expand){ @if(expand){
@repository.repository.description.map { description => @repository.repository.description.map { description =>
<p class="description">@detectAndRenderLinks(description)</p> <p class="description">@detectAndRenderLinks(description)</p>
@@ -141,7 +135,7 @@
} }
@body @body
</div> </div>
</div> @*</div>*@
<script> <script>
$(function(){ $(function(){
@@ -150,7 +144,7 @@ $(function(){
if(e.target.tagName == "I"){ if(e.target.tagName == "I"){
target = e.target.parentElement; target = e.target.parentElement;
} }
$(target).prev ('div.gradient' ).css('border-left', '1px solid silver'); $(target).prev('div.gradient').css('border-left', '1px solid silver');
}); });
$('ul.sidemenu a').mouseout(function(e){ $('ul.sidemenu a').mouseout(function(e){
@@ -158,7 +152,7 @@ $(function(){
if(e.target.tagName == "I"){ if(e.target.tagName == "I"){
target = e.target.parentElement; target = e.target.parentElement;
} }
$(target).prev ('div.gradient' ).css('border-left', '1px solid #eee'); $(target).prev('div.gradient').css('border-left', '1px solid #eee');
}); });
$('a[rel*=facebox]').facebox({ $('a[rel*=facebox]').facebox({

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

@@ -533,61 +533,48 @@ a.btn-danger:hover .octicon {
} }
/****************************************************************************/ /****************************************************************************/
/* Side Menu */ /* Head Menu */
/****************************************************************************/ /****************************************************************************/
ul.sidemenu { ul.headmenu {
margin-top: 20px;
margin-left: 0px; margin-left: 0px;
padding-left: 0px; padding-left: 0px;
margin-bottom: -5px;
} }
ul.sidemenu a { ul.headmenu a:hover {
display: block;
padding: 8px 10px;
}
ul.sidemenu a:hover {
text-decoration: none; text-decoration: none;
color: black;
} }
ul.sidemenu li.active { ul.headmenu li {
border-top: 1px solid #eee; display: inline-block;
border-bottom: 1px solid #eee; list-style-type: none;
border-right: 3px solid #bb4444; font-size: 13px;
border-left: 1px solid white;
} }
ul.sidemenu li.active a { ul.headmenu li a {
color: #666;
padding: 8px 10px;
display: block;
}
ul.headmenu li.active a {
color: black;
}
ul.headmenu li.active {
border-top: 3px solid #bb4444;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: none;
background-color: white;
}
ul.headmenu li.active a {
background-color: #fff; background-color: #fff;
} }
ul.sidemenu {
background-image: -webkit-linear-gradient(left, #f6f6f6 0%, #fff 8px);
background-image: linear-gradient(to right, #f6f6f6 0%, #fff 8px);
box-shadow: inset 1px 0 0 #eee;
}
ul.sidemenu div.margin {
width: 5px;
height: 30px;
margin-right: 4px;
border-left: 1px solid white;
}
ul.sidemenu li {
border-left: 1px solid #eee;
margin-left:0px;
border-right: 2px solid white;
list-style-type: none;
font-size: 90%;
}
ul.sidemenu span.badge {
}
ul.sidemenu a:hover i.menu-icon, ul.sidemenu i.menu-icon-active {
color: #333;
}
/****************************************************************************/ /****************************************************************************/
/* Create Repository */ /* Create Repository */
/****************************************************************************/ /****************************************************************************/
@@ -2220,89 +2207,75 @@ div.container.blame-container{
/* Mobile */ /* Mobile */
/****************************************************************************/ /****************************************************************************/
@media (max-width: 767px) { @media (max-width: 767px) {
body>form#search { /* Hide header search box */
margin: 0 -20px 20px -20px; input[name=query] {
} display: none;
}
#dashboard-signin-form {
display: none;
}
.container {
width: auto !important;
}
.body>div.pull-left {
width: auto !important;
}
body>div.dashboard-nav { /* Adjust issue search box size and position */
margin: 0 -20px 20px -20px; #search-filter-box {
padding: 0 10px; width: 98% !important;
} position: absolute;
left: 4px;
margin-top: 42px;
}
.container { form#search-filter-form {
width: auto !important; float: none !important;
} margin-bottom: 80px !important;
}
/* Adjust issue search box size and position */ .table-issues a.button-link {
#search-filter-box { width: 42px;
width: 90% !important; height: 16px;
position: absolute; overflow: hidden;
left: 14px; display: inline-block;
right: 20px; }
margin-top: 42px;
}
form#search-filter-form { .nav-tabs a.btn[href$="/_edit"] {
float: none !important; width: 24px;
margin-bottom: 80px !important; white-space: nowrap;
} overflow: hidden;
padding: 4px 6px;
margin: 3px 4px 0 0;
}
.table-issues a.button-link { body>div.container.body {
width: 42px; margin: 0 -12px 40px -12px;
height: 16px; }
overflow: hidden; /* Adjust sidemenu */
display: inline-block; .container.body>div[style="width: 170px;"]{
} width: 32px !important;
margin-right: -5px;
.nav-tabs a.btn[href$="/_edit"] { overflow: hidden;
width: 24px; white-space: nowrap;
white-space: nowrap; }
overflow: hidden; /* Hide badge of sidemenu */
padding: 4px 6px; .container.body>div[style="width: 170px;"] span.badge {
margin: 3px 4px 0 0; display: none;
} }
/* Hide download button */
body>div.container.body { .container.body>div[style="width: 170px;"] a.btn-sm {
margin: 0 -12px 40px -12px; display: none;
} }
/* Hide repository url box */
.container.body>div[style="width: 170px;"]{ .container.body>div[style="width: 170px;"] .small,
width: 32px !important; .container.body>div[style="width: 170px;"] .input-group {
margin-right: -5px; display: none;
overflow: hidden; }
white-space: nowrap; /* Hide fork button */
} div.input-group>span.fork {
display: none;
.container.body>div[style="margin-right: 180px;"]{ }
margin-right: 32px !important;
}
.container.body>div[style="width: 170px;"] .sidemenu i, .container.body>div[style="width: 170px;"] .sidemenu img {
padding-right: 5px;
}
/* Hide repository url box */
.container.body>div[style="width: 170px;"] .small,.container.body>div[style="width: 170px;"] .input-group {
display: none;
}
.container.body>div[style="width: 170px;"] div[style="margin-top: 10px;"] a.btn{
width: 26px !important;
padding: 2px;
}
.container.body>div[style="width: 170px;"] div[style="margin-top: 10px;"] a.btn i {
margin: 5px 10px 5px 6px;
}
/* Hide fork button */
div.col-md-1>div.input-group.pull-right {
display: none;
}
body>.container>#fork-form{
display: inline;
}
} }
/****************************************************************************/ /****************************************************************************/