Merge pull request #882 from garygreen/shorten-commit-message

File listing and sidebar display improvements

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

@@ -8,7 +8,7 @@
 @helper.html.dropdown(
   value  = if(branch.length == 40) branch.substring(0, 10) else branch,
   prefix = if(branch.length == 40) "tree" else if(repository.branchList.contains(branch)) "branch" else "tree",
-  mini   = true
+  mini   = false
 ) {
   <li><div id="branch-control-title">Switch branches<button id="branch-control-close" class="pull-right">&times</button></div></li>
   <li><input id="branch-control-input" type="text" placeholder="Find or create branch ..."/></li>

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

@@ -11,7 +11,6 @@
 
 @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"}>
-    <div class="@if(active == name){margin} else {gradient} pull-left"></div>
     <a href="@url(repository)@path">
       <i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i>
       @if(expand){ @label}
@@ -40,7 +39,7 @@
         <span class="add-on count"><a href="@url(repository)/network/members">@repository.forkedCount</a></span>
       </div>
       @if(loginAccount.isDefined && isNoGroup){
-        <form id="fork-form" method="post" action="@path/@repository.owner/@repository.name/fork">
+        <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>
       }

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

@@ -15,15 +15,15 @@
   @html.menu("code", repository, Some(branch), pathList.isEmpty, groupNames.isEmpty, info, error){
     <div class="head">
       <div class="pull-right"><div class="btn-group">
-        <a href="@url(repository)/find/@encodeRefName(branch)" class="btn btn-mini" data-toggle="tooltip" data-placement="bottom" data-hotkey="t" title="Quickly jump between files"><i class="icon icon-th-list"></i></a>
+        <a href="@url(repository)/find/@encodeRefName(branch)" class="btn btn-small" data-toggle="tooltip" data-placement="bottom" data-hotkey="t" title="Quickly jump between files"><i class="octicon octicon-list-unordered"></i></a>
         @if(pathList.nonEmpty){
-          <a href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")" class="btn btn-mini" data-toggle="tooltip" data-placement="bottom" title="Browse commits for this branch"><i class="icon icon-time"></i></a>
+          <a href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")" class="btn btn-small" data-toggle="tooltip" data-placement="bottom" title="Browse commits for this branch"><i class="icon icon-time"></i></a>
         }
       </div></div>
       @branchPullRequest.map{ case (pullRequest, issue) =>
-        <a href="@url(repository)/pull/@pullRequest.issueId" class="btn btn-pullrequest-branch btn-mini" title="@issue.title" data-toggle="tooltip">#@pullRequest.issueId</a>
+        <a href="@url(repository)/pull/@pullRequest.issueId" class="btn btn-small btn-pullrequest-branch" title="@issue.title" data-toggle="tooltip">#@pullRequest.issueId</a>
       }.getOrElse{
-        <a href="@url(repository)/compare?head=@urlEncode(encodeRefName(branch))" class="btn btn-success btn-mini"><i class="icon-white icon-retweet" data-toggle="tooltip" title="Compare, review, create a pull request"></i></a>
+        <a href="@url(repository)/compare?head=@urlEncode(encodeRefName(branch))" class="btn btn-small btn-success"><i class="icon-white icon-retweet" data-toggle="tooltip" title="Compare, review, create a pull request"></i></a>
       }
       @helper.html.branchcontrol(
         branch,
@@ -77,7 +77,7 @@
       </tr>
       @if(pathList.size > 0){
       <tr>
-        <td width="16"></td>
+        <td width="16" class="file-icon"></td>
         <td><a href="@url(repository)@if(pathList.size > 1){/tree/@encodeRefName(branch)/@pathList.init.mkString("/")}">..</a></td>
         <td></td>
         <td></td>
@@ -85,7 +85,7 @@
       }
       @files.map { file =>
       <tr>
-        <td width="16">
+        <td width="16" class="file-icon">
         @if(file.isDirectory){
           @if(file.linkUrl.isDefined){
             <i class="octicon octicon-file-symlink-directory"></i>
@@ -96,7 +96,7 @@
           <i class="octicon octicon-file-text"></i>
         }
         </td>
-        <td>
+        <td class="content-name">
         @if(file.isDirectory){
           @if(file.linkUrl.isDefined){
             <a href="@file.linkUrl">
@@ -118,8 +118,8 @@
         }
         </td>
         <td class="mute">
-          <a href="@url(repository)/commit/@file.commitId" class="commit-message">@link(file.message, repository)</a>
-          [@user(file.author, file.mailAddress)]
+          <a href="@url(repository)/commit/@file.commitId" class="commit-message shorten-text" title="@file.message">@link(file.message, repository)</a>
+          <span class="commit-author">[@user(file.author, file.mailAddress)]</span>
         </td>
         <td style="text-align: right;">@helper.html.datetimeago(file.time, false)</td>
       </tr>

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

@@ -175,6 +175,12 @@ span.error {
   font-weight: bold;
 }
 
+.shorten-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 a.commit-message, a.commit-id, a.username, a.issue-comment-count {
   color: #333333;
 }
@@ -373,25 +379,28 @@ ul.sidemenu {
 
 ul.sidemenu a {
   display: block;
+  padding: 8px 10px;
 }
 
-ul.sidemenu a:hover{
+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-right: 3px solid #bb4444;
   border-left: 1px solid white;
 }
 
-ul.sidemenu div.gradient {
-  width: 5px;
-  height: 30px;
-  background: linear-gradient(to right, #eee, #fff);
-  margin-right: 4px;
-  border-left: 1px solid #eee;
+ul.sidemenu li.active a {
+  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 {
@@ -402,8 +411,6 @@ ul.sidemenu div.margin {
 }
 
 ul.sidemenu li {
-  line-height: 30px;
-  height: 30px;
   border-left: 1px solid #eee;
   margin-left:0px;
   border-right: 2px solid white;
@@ -589,13 +596,8 @@ a.header-link {
   display: block;
 }
 
-a.header-link i.octicon {
-  opacity: 0.5;
-}
-
 a.header-link strong {
   color: black;
-  font-size: 90%;
 }
 
 a.header-link:hover {
@@ -651,6 +653,25 @@ table.table-file-list td {
   font-size: small;
 }
 
+table.table-file-list .file-icon {
+  padding-right: 1px;
+}
+
+table.table-file-list .content-name {
+  max-width: 180px;
+}
+
+table.table-file-list .commit-message {
+  max-width: 415px;
+  display: inline-block;
+}
+
+table.table-file-list .commit-author {
+  color: #999;
+  font-size: 12px;
+  float: right;
+}
+
 th, td, .table th, .table td {
   padding-top: 4px;
   padding-bottom: 4px;