Show icons when sidebar is collapsed.

src/main/scala/gitbucket/core/view/helpers.scala

@@ -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))
+  }
 }

src/main/twirl/gitbucket/core/account/menu.scala.html

@@ -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>
         }
       }

src/main/twirl/gitbucket/core/admin/menu.scala.html

@@ -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>
         }
       }

src/main/twirl/gitbucket/core/dashboard/sidebar.scala.html

@@ -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">
+        <li class="repo-link treeview">
-          <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>
       }
     }

src/main/twirl/gitbucket/core/main.scala.html

@@ -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">

src/main/twirl/gitbucket/core/menu.scala.html

@@ -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>

src/main/webapp/assets/common/css/gitbucket.css

@@ -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;
+}