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

Show icons when sidebar is collapsed.

Browse Source
This commit is contained in:
KOUNOIKE Yuusuke
2017-04-24 21:44:24 +09:00
committed by Naoki Takezoe
parent 150531a1e2
commit 6c5777801f
7 changed files with 91 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/main/scala/gitbucket/core/view/helpers.scala
View File

@@ -412,4 +412,30 @@ object helpers extends AvatarImageProvider with LinkConverter with RequestCache
*/
def readableSize(size: Option[Long]): String = FileUtil.readableSize(size.getOrElse(0))
/**
*
* @param icon icon name: fa-* or octicon-*, for compatibility, it accepts name of octicon without octicon- prefix.
* @return icon tag String
*/
def menuicon(icon:String): Html = {
icon match {
case i if i.startsWith("fa-") =>
Html(s"""<i class="menu-icon fa ${i}"></i>""")
case i if i.startsWith("octicon-") =>
Html(s"""<i class="menu-icon octicon ${i}"></i>""")
case i =>
Html(s"""<i class="menu-icon octicon octicon-${i}"></i>""")
}
}
/**
* make menu icon with octicon/font-awesome with Option[String]
* @param icon icon name: fa-* or octicon-*, for compatibility, it accepts name of octicon without octicon- prefix.
* @param defaultIcon default name for icon == None
* @return icon tag String
*/
def menuicon(icon: Option[String], defaultIcon: String): Html = {
menuicon(icon.getOrElse(defaultIcon))
}
}

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

@@ -1,22 +1,35 @@
@(active: String, ssh: Boolean)(body: Html)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu">
<li@if(active=="profile"){ class="active"}>
<a href="@context.path/@context.loginAccount.get.userName/_edit">Profile</a>
<a href="@context.path/@context.loginAccount.get.userName/_edit">
@helpers.menuicon("octicon-person")
<span>Profile</span>
</a>
</li>
@if(ssh){
<li@if(active=="ssh"){ class="active"}>
<a href="@context.path/@context.loginAccount.get.userName/_ssh">SSH Keys</a>
<a href="@context.path/@context.loginAccount.get.userName/_ssh">
@helpers.menuicon("key")
<span>SSH Keys</span>
</a>
</li>
}
<li@if(active=="application"){ class="active"}>
<a href="@context.path/@context.loginAccount.get.userName/_application">Applications</a>
<a href="@context.path/@context.loginAccount.get.userName/_application">
@helpers.menuicon("rocket")
<span>Applications</span>
</a>
</li>
@gitbucket.core.plugin.PluginRegistry().getAccountSettingMenus.map { menu =>
@menu(context).map { link =>
<li@if(active==link.id){ class="active"}>
<a href="@context.path/@link.path">@link.label</a>
<a href="@context.path/@link.path">
@helpers.menuicon(link.icon, "octicon-plug")
<span>@link.label</span>
</a>
</li>
}
}

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

@@ -1,26 +1,38 @@
@(active: String)(body: Html)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu" id="system-admin-menu-container">
<li@if(active=="users"){ class="active"}>
<a href="@context.path/admin/users">User management</a>
<a href="@context.path/admin/users">
@helpers.menuicon("octicon-person")<span>User management</span>
</a>
</li>
<li@if(active=="system"){ class="active"}>
<a href="@context.path/admin/system">System settings</a>
<a href="@context.path/admin/system">
@helpers.menuicon("octicon-gear")<span>System settings</span></a>
</li>
<li@if(active=="plugins"){ class="active"}>
<a href="@context.path/admin/plugins">Plugins</a>
<a href="@context.path/admin/plugins">
@helpers.menuicon("octicon-plug")<span>Plugins</span>
</a>
</li>
<li@if(active=="data"){ class="active"}>
<a href="@context.path/admin/data">Data export / import</a>
<a href="@context.path/admin/data">
@helpers.menuicon("octicon-database")<span>Data export / import</span>
</a>
</li>
<li>
<a href="@context.path/console/login.jsp" target="_blank">H2 console</a>
<a href="@context.path/console/login.jsp" target="_blank">
@helpers.menuicon("octicon-database")<span>H2 console</span>
</a>
</li>
@gitbucket.core.plugin.PluginRegistry().getSystemSettingMenus.map { menu =>
@menu(context).map { link =>
<li@if(active==link.id){ class="active"}>
<a href="@context.path/@link.path">@link.label</a>
<a href="@context.path/@link.path">
@helpers.menuicon(link.icon, "octicon-plug")<span>@link.label</span>
</a>
</li>
}
}

8
src/main/twirl/gitbucket/core/dashboard/sidebar.scala.html
View File

@@ -14,11 +14,11 @@
} else {
<li><form class="sidebar-form"><input type="text" id="filter-box" class="form-control input-sm" placeholder="Find repository"/></form></li>
@userRepositories.zipWithIndex.map { case (repository, i) =>
<li class="repo-link">
<li class="repo-link treeview">
@if(repository.owner == context.loginAccount.get.userName){
<a href="@helpers.url(repository)">@gitbucket.core.helper.html.repositoryicon(repository, false) <span class="strong">@repository.name</span></a>
} else {
<a href="@helpers.url(repository)">@gitbucket.core.helper.html.repositoryicon(repository, false) @repository.owner/<span class="strong">@repository.name</span></a>
<a href="@helpers.url(repository)">@gitbucket.core.helper.html.repositoryicon(repository, false) <span>@repository.owner/<span class="strong">@repository.name</span></span></a>
}
</li>
}
@@ -30,8 +30,8 @@
} else {
<li><form class="sidebar-form"><input type="text" id="filter-box" class="form-control input-sm" placeholder="Find repository"/></form></li>
@recentRepositories.zipWithIndex.map { case (repository, i) =>
<li class="repo-link">
<a href="@helpers.url(repository)">@gitbucket.core.helper.html.repositoryicon(repository, false) @repository.owner/<span class="strong">@repository.name</span></a>
<li class="repo-link treeview">
<a href="@helpers.url(repository)">@gitbucket.core.helper.html.repositoryicon(repository, false) <span>@repository.owner/<span class="strong">@repository.name</span></span></a>
</li>
}
}

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

@@ -38,7 +38,7 @@
}
<script src="@helpers.assets("/vendors/AdminLTE-2.3.8/js/app.js")" type="text/javascript"></script>
</head>
<body class="skin-blue page-load @if(context.sidebarCollapse){sidebar-collapse}">
<body class="skin-blue page-load sidebar-mini @if(context.sidebarCollapse){sidebar-collapse}">
<div class="wrapper">
<header class="main-header">
<a href="@context.path/" class="logo">

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

@@ -6,14 +6,16 @@
@import gitbucket.core.view.helpers
@menuitem(path: String, name: String, label: String, icon: String, count: Int = 0) = {
<li @if(active == name){class="active"}>
<li class = "treeview @if(active == name){active}">
@if(path.startsWith("http")){
<a href="@path" target="_blank">
<i class="menu-icon octicon octicon-@icon"></i> @label @if(count > 0) { <span class="label label-primary pull-right-container">@count</span> }
@helpers.menuicon(icon)
<span>@label</span> @if(count > 0){ <span class="label label-primary pull-right-container">@count</span> }
</a>
} else {
<a href="@helpers.url(repository)@path">
<i class="menu-icon octicon octicon-@icon"></i> @label @if(count > 0) { <span class="label label-primary pull-right-container">@count</span> }
@helpers.menuicon(icon)
<span>@label</span> @if(count > 0) { <span class="label label-primary pull-right-container">@count</span> }
</a>
}
</li>

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

@@ -268,9 +268,11 @@ li.repo-link, li.page-link {
padding-top: 4px;
padding-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.sidebar-collapse) li.repo-link, li.page-link{
overflow: hidden;
}
div.box-content-bottom {
background-color: white;
@@ -1842,3 +1844,20 @@ body.page-load * {
-o-transition: none !important;
transition: none !important;
}
body.sidebar-collapse .main-sidebar li.treeview:not(:hover) span.label.pull-right-container {
display: inline !important;
position: absolute;
top: 9px;
right: 7px;
text-align: center;
font-size: 9px;
padding: 2px 3px;
line-height: .9;
}
body.sidebar-collapse .main-sidebar li.treeview:hover span.label.pull-right-container {
left: 180px !important;
margin-left: 0px;
padding: 12px 20px 12px 20px;
}