From e7a47fe3a42c52765ae24d52da91dea6d8a8c7ca Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Tue, 22 Mar 2016 00:33:07 +0900
Subject: [PATCH] Update file browser and commit list UI

---
 .../gitbucket/core/pulls/commits.scala.html   | 25 +++++++-------
 .../gitbucket/core/repo/commits.scala.html    | 27 +++++++--------
 .../gitbucket/core/repo/files.scala.html      | 33 ++++++++++---------
 .../webapp/assets/common/css/gitbucket.css    |  2 +-
 4 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/main/twirl/gitbucket/core/pulls/commits.scala.html b/src/main/twirl/gitbucket/core/pulls/commits.scala.html
index 9b9b83145..cfe67edbf 100644
--- a/src/main/twirl/gitbucket/core/pulls/commits.scala.html
+++ b/src/main/twirl/gitbucket/core/pulls/commits.scala.html
@@ -4,21 +4,21 @@
 @import context._
 @import gitbucket.core.view.helpers._
 @import gitbucket.core.model._
+<table class="table table-bordered">
 @commits.map { day =>
-  <div class="muted">
-    <i class="octicon octicon-git-commit"></i> Commits on @date(day.head.commitTime)
-  </div>
-  <div class="list-group">
-    @day.map { commit =>
-      <div class="list-group-item">
-        <div class="btn-group pull-right">
-          <a href="@url(repository)/commit/@commit.id" class="btn btn-default monospace">@commit.id.substring(0, 7)</a>
-          <a href="@url(repository)/tree/@commit.id" class="btn btn-default"><i class="octicon octicon-code link"></i></a>
+  <tr>
+    <th rowspan="@day.size" width="100">@date(day.head.commitTime)</th>
+    @day.zipWithIndex.map { case (commit, i) =>
+      @if(i != 0){ <tr> }
+      <td>
+        <div class="pull-right text-right">
+          <a href="@url(repository)/commit/@commit.id" class="monospace commit-message strong"><i class="octicon octicon-diff" style="color: black;"></i>@commit.id.substring(0, 7)</a><br>
+          <a href="@url(repository)/tree/@commit.id" class="button-link">Browse files »</a>
         </div>
         <div>
           <div class="commit-avatar-image">@avatarLink(commit, 40)</div>
           <div>
-            <a href="@url(repository)/commit/@commit.id" class="commit-message" style="font-weight: bold;">@link(commit.summary, repository)</a>
+            <a href="@url(repository)/commit/@commit.id" class="commit-message strong">@link(commit.summary, repository)</a>
             @if(commit.description.isDefined){
               <a href="javascript:void(0)" onclick="$('#description-@commit.id').toggle();" class="omit">...</a>
             }
@@ -37,7 +37,8 @@
             </div>
           </div>
         </div>
-      </div>
+      </td>
+      </tr>
     }
-  </div>
 }
+</table>
diff --git a/src/main/twirl/gitbucket/core/repo/commits.scala.html b/src/main/twirl/gitbucket/core/repo/commits.scala.html
index 88a601dd9..a6664367f 100644
--- a/src/main/twirl/gitbucket/core/repo/commits.scala.html
+++ b/src/main/twirl/gitbucket/core/repo/commits.scala.html
@@ -34,21 +34,21 @@
       }
     </div>
 
+    <table class="table table-bordered">
     @commits.map { day =>
-      <div class="muted">
-        <i class="octicon octicon-git-commit"></i> Commits on @date(day.head.commitTime)
-      </div>
-      <div class="list-group">
-        @day.map { commit =>
-          <div class="list-group-item">
-            <div class="btn-group pull-right">
-              <a href="@url(repository)/commit/@commit.id" class="btn btn-default monospace">@commit.id.substring(0, 7)</a>
-              <a href="@url(repository)/tree/@commit.id" class="btn btn-default"><i class="octicon octicon-code link"></i></a>
+      <tr>
+        <th rowspan="@day.size" width="100">@date(day.head.commitTime)</th>
+        @day.zipWithIndex.map { case (commit, i) =>
+          @if(i != 0){ <tr> }
+          <td>
+            <div class="pull-right text-right">
+              <a href="@url(repository)/commit/@commit.id" class="monospace commit-message strong"><i class="octicon octicon-diff" style="color: black;"></i>@commit.id.substring(0, 7)</a><br>
+              <a href="@url(repository)/tree/@commit.id" class="button-link">Browse files »</a>
             </div>
             <div>
               <div class="commit-avatar-image">@avatarLink(commit, 40)</div>
               <div>
-                <a href="@url(repository)/commit/@commit.id" class="commit-message" style="font-weight: bold;">@link(commit.summary, repository)</a>
+                <a href="@url(repository)/commit/@commit.id" class="commit-message strong">@link(commit.summary, repository)</a>
                 @if(commit.description.isDefined){
                   <a href="javascript:void(0)" onclick="$('#description-@commit.id').toggle();" class="omit">...</a>
                 }
@@ -67,12 +67,13 @@
                 </div>
               </div>
             </div>
-          </div>
+          </td>
+          </tr>
         }
-      </div>
     }
+    </table>
 
-    <nav style="text-align: center; margin-top: 30px">
+    <nav style="text-align: center; margin-top: 20px">
       <ul class="pagination">
         @if(page <= 1){
           <li class="disabled"><span>Newer</span></li>
diff --git a/src/main/twirl/gitbucket/core/repo/files.scala.html b/src/main/twirl/gitbucket/core/repo/files.scala.html
index 065d10bee..0186b727f 100644
--- a/src/main/twirl/gitbucket/core/repo/files.scala.html
+++ b/src/main/twirl/gitbucket/core/repo/files.scala.html
@@ -23,13 +23,21 @@
   }, Some(repository)) {
   @html.menu("code", repository, Some(branch), info, error){
     <div class="head">
-      @if(pathList.isEmpty){
-        <div class="pull-right pc">
-          @if(platform != "linux" && platform != null){
-            <a href="@openRepoUrl(repository.httpUrl)" id="repository-clone-url" class="btn btn-sm btn-default"><i class="octicon octicon-desktop-download"></i></a>
-          }
-          <a href="@{url(repository)}/archive/@{encodeRefName(branch)}.zip" class="btn btn-sm btn-default">Download ZIP</a>
+      <div class="pull-right pc">
+        <div class="btn-group">
+          <a href="@url(repository)/find/@encodeRefName(branch)" class="btn btn-sm btn-default pc" data-hotkey="t"><i class="octicon octicon-search"></i></a>
+          <a href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")" class="btn btn-sm btn-default"><i class="octicon octicon-history"></i></a>
         </div>
+      </div>
+      @if(pathList.isEmpty){
+        @if(platform != "linux" && platform != null){
+          <div class="pull-right pc" style="margin-right: 5px;">
+            <div class="btn-group">
+              <a href="@openRepoUrl(repository.httpUrl)" id="repository-clone-url" class="btn btn-sm btn-default"><i class="octicon octicon-desktop-download"></i></a>
+              <a href="@{url(repository)}/archive/@{encodeRefName(branch)}.zip" class="btn btn-sm btn-default"><i class="octicon octicon-cloud-download"></i> Download ZIP</a>
+            </div>
+          </div>
+        }
         <div class="pull-right pc">
           <div style="width: 240px; margin-right: 5px; margin-left: 5px;">
             @helper.html.copy("repository-url-copy", repository.httpUrl){
@@ -59,33 +67,26 @@
           </div>
         </div>
       }
-      <div class="pull-right">
-        <div class="btn-group">
-          <a href="@url(repository)/new/@encodeRefName(branch)/@pathList.mkString("/")" class="btn btn-sm btn-default pc" title="Create a new file here" @if(!hasWritePermission){disabled}>New file</i></a>
-          <a href="@url(repository)/find/@encodeRefName(branch)" class="btn btn-sm btn-default pc" data-hotkey="t">Find file</a>
-          @if(pathList.nonEmpty){
-            <a href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")" class="btn btn-sm btn-default" data-toggle="tooltip" data-placement="bottom" title="Browse commits for this branch">History</a>
-          }
-        </div>
-      </div>
-
       @helper.html.branchcontrol(branch, repository, hasWritePermission){
         @repository.branchList.map { x =>
           <li><a href="@url(repository)/tree/@encodeRefName(x)">@helper.html.checkicon(x == branch) @x</a></li>
         }
       }
       @if(pathList.isEmpty){
+        @*
         @branchPullRequest.map{ case (pullRequest, issue) =>
           <a href="@url(repository)/pull/@pullRequest.issueId" class="btn btn-sm btn-pullrequest-branch" title="@issue.title" data-toggle="tooltip">View #@pullRequest.issueId</a>
         }.getOrElse {
           <a href="@url(repository)/compare?head=@urlEncode(encodeRefName(branch))" class="btn btn-sm btn-success" @if(loginAccount.isEmpty){disabled}>New pull request</a>
         }
+        *@
       } else {
         <a href="@url(repository)/tree/@encodeRefName(branch)">@repository.name</a> /
         @pathList.zipWithIndex.map { case (section, i) =>
           <a href="@url(repository)/tree/@encodeRefName(branch)/@pathList.take(i + 1).mkString("/")">@section</a> /
         }
       }
+      <a href="@url(repository)/new/@encodeRefName(branch)/@pathList.mkString("/")" class="btn btn-sm btn-default pc" title="Create a new file here" @if(!hasWritePermission){disabled}><i class="octicon octicon-plus"></i></a>
     </div>
     <table class="table table-hover">
       @*
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index b0c63b99b..471ba7d39 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -487,7 +487,7 @@ div.repository-content {
   display: inline-block;
   float: right;
   position: relative;
-  top: -3px;
+  top: -6px;
   height: 20px;
 }
 .branches .branch-a-b-count{