Merge remote-tracking branch 'origin/kounoike-pr-sidebar-mini'

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

@@ -2,7 +2,6 @@
   personalTokens: List[gitbucket.core.model.AccessToken],
   gneratedToken: Option[(gitbucket.core.model.AccessToken, String)])(implicit context: gitbucket.core.controller.Context)
 @gitbucket.core.html.main("Applications"){
-<div class="container body">
   @gitbucket.core.account.html.menu("application", context.settings.ssh){
     <div class="panel panel-default">
       <div class="panel-heading strong">Personal access tokens</div>
@@ -49,5 +48,4 @@
       </div>
     </form>
   }
-</div>
 }

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

@@ -2,7 +2,6 @@
 @import gitbucket.core.util.LDAPUtil
 @import gitbucket.core.view.helpers
 @gitbucket.core.html.main("Edit your profile"){
-<div class="container body">
   @gitbucket.core.account.html.menu("profile", context.settings.ssh){
     @gitbucket.core.helper.html.information(info)
     @gitbucket.core.helper.html.error(error)
@@ -61,7 +60,6 @@
       </div>
     </form>
   }
-</div>
 }
 <script>
 $(function(){

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

@@ -2,21 +2,33 @@
 <div class="main-sidebar">
   <div class="sidebar">
     <ul class="sidebar-menu">
-      <li@if(active=="profile"){ class="active"}>
+      <li class="menu-item-hover @if(active=="profile"){active}">
-        <a href="@context.path/@context.loginAccount.get.userName/_edit">Profile</a>
+        <a href="@context.path/@context.loginAccount.get.userName/_edit">
+          <i class="menu-icon octicon octicon-person"></i>
+          <span>Profile</span>
+        </a>
       </li>
       @if(ssh){
-      <li@if(active=="ssh"){ class="active"}>
+      <li class="menu-item-hover @if(active=="ssh"){active}">
-        <a href="@context.path/@context.loginAccount.get.userName/_ssh">SSH Keys</a>
+        <a href="@context.path/@context.loginAccount.get.userName/_ssh">
+          <i class="menu-icon octicon octicon-key"></i>
+          <span>SSH Keys</span>
+        </a>
       </li>
       }
-      <li@if(active=="application"){ class="active"}>
+      <li class="menu-item-hover @if(active=="application"){active}">
-        <a href="@context.path/@context.loginAccount.get.userName/_application">Applications</a>
+        <a href="@context.path/@context.loginAccount.get.userName/_application">
+          <i class="menu-icon octicon octicon-rocket"></i>
+          <span>Applications</span>
+        </a>
       </li>
       @gitbucket.core.plugin.PluginRegistry().getAccountSettingMenus.map { menu =>
         @menu(context).map { link =>
-          <li@if(active==link.id){ class="active"}>
+          <li class="menu-item-hover @if(active==link.id){active}">
-            <a href="@context.path/@link.path">@link.label</a>
+            <a href="@context.path/@link.path">
+              <i class="menu-icon octicon octicon-plug"></i>
+              <span>@link.label</span>
+            </a>
           </li>
         }
       }

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

@@ -1,7 +1,6 @@
 @(account: gitbucket.core.model.Account, sshKeys: List[gitbucket.core.model.SshKey])(implicit context: gitbucket.core.controller.Context)
 @import gitbucket.core.ssh.SshUtil
 @gitbucket.core.html.main("SSH Keys"){
-<div class="container body">
   @gitbucket.core.account.html.menu("ssh", context.settings.ssh){
     <div class="panel panel-default">
       <div class="panel-heading strong">SSH Keys</div>
@@ -37,5 +36,4 @@
       </div>
     </form>
   }
-</div>
 }

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

@@ -2,25 +2,42 @@
 <div class="main-sidebar">
   <div class="sidebar">
     <ul class="sidebar-menu" id="system-admin-menu-container">
-      <li@if(active=="users"){ class="active"}>
+      <li class="menu-item-hover @if(active=="users"){active}">
-        <a href="@context.path/admin/users">User management</a>
+        <a href="@context.path/admin/users">
+          <i class="menu-icon octicon octicon-person"></i>
+          <span>User management</span>
+        </a>
       </li>
-      <li@if(active=="system"){ class="active"}>
+      <li class="menu-item-hover @if(active=="system"){active}">
-        <a href="@context.path/admin/system">System settings</a>
+        <a href="@context.path/admin/system">
+          <i class="menu-icon octicon octicon-gear"></i>
+          <span>System settings</span></a>
       </li>
-      <li@if(active=="plugins"){ class="active"}>
+      <li class="menu-item-hover @if(active=="plugins"){active}">
-        <a href="@context.path/admin/plugins">Plugins</a>
+        <a href="@context.path/admin/plugins">
+          <i class="menu-icon octicon octicon-plug"></i>
+          <span>Plugins</span>
+        </a>
       </li>
-      <li@if(active=="data"){ class="active"}>
+      <li class="menu-item-hover @if(active=="data"){active}">
-        <a href="@context.path/admin/data">Data export / import</a>
+        <a href="@context.path/admin/data">
+          <i class="menu-icon octicon octicon-database"></i>
+          <span>Data export / import</span>
+        </a>
       </li>
-      <li>
+      <li class="menu-item-hover">
-        <a href="@context.path/console/login.jsp" target="_blank">H2 console</a>
+        <a href="@context.path/console/login.jsp" target="_blank">
+          <i class="menu-icon octicon octicon-database"></i>
+          <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">
+              <i class="menu-icon octicon octicon-plug"></i>
+              <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="menu-item-hover">
           @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="menu-item-hover">
-          <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 @if(body.toString.contains("menu-item-hover")){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,20 +6,28 @@
 @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 = "menu-item-hover @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> }
+        <i class="menu-icon octicon octicon-@icon"></i>
+        <span>@label</span>
+        @if(count > 0){
+          <span class="pull-right-container"><span class="label label-primary pull-right-container">@count</span></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> }
+        <i class="menu-icon octicon octicon-@icon"></i>
+        <span>@label</span>
+        @if(count > 0) {
+          <span class="pull-right-container"><span class="label label-primary pull-right">@count</span></span>
+        }
       </a>
     }
   </li>
 }
 
-  <div class="main-sidebar">
+<div class="main-sidebar">
   <div class="sidebar">
     <ul class="sidebar-menu">
       @menuitem("", "files", "Files", "code")
@@ -57,8 +65,8 @@
       }
     </ul>
   </div>
-  </div>
+</div>
-  <div class="content-wrapper">
+<div class="content-wrapper">
   <div class="content body clearfix">
     <div class="headbar">
       <div class="container">
@@ -83,6 +91,5 @@
     </div>
     @body
   </div>
-  </div>
 </div>
 

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

@@ -264,14 +264,6 @@ div.box-content {
   border-radius: 3px;
 }
 
-li.repo-link, li.page-link {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 div.box-content-bottom {
   background-color: white;
   border: 1px solid #d8d8d8;
@@ -1842,3 +1834,15 @@ body.page-load * {
   -o-transition: none !important;
   transition: none !important;
 }
+
+body.sidebar-collapse .main-sidebar li.menu-item-hover:not(:hover) span.pull-right-container {
+  display: inline !important;
+  position: absolute;
+  top: 8px;
+  right: 0px;
+  font-size: 9px;
+}
+
+body.sidebar-collapse .main-sidebar li.treeview:not(:hover) span.pull-right-container span.label {
+  padding: 2px 4px;
+}