(refs #488)Start to apply new issue UI to the issue list.

src/main/twirl/issues/list.scala.html

@@ -19,6 +19,7 @@
   @html.menu("issues", repository){
     @tab("issues", false, repository)
     <div class="row-fluid">
+      @*
       <div class="span3">
         <ul class="nav nav-pills nav-stacked">
           <li@if(filter == "all"){ class="active"}>
@@ -131,6 +132,7 @@
           @_root_.issues.labels.html.edit(None, repository)
         }
       </div>
+      *@
       @***** show issue list *****@
       @listparts(issues, page, openCount, closedCount, condition, collaborators, milestones, labels, Some(repository), hasWritePermission)
     </div>

src/main/twirl/issues/listparts.scala.html

@@ -11,7 +11,8 @@
 @import context._
 @import view.helpers._
 
-    <div class="span9">
+    <div class="span12">
+      @*
       @if(condition.labels.nonEmpty || condition.milestoneId.isDefined){
         <a href="@condition.copy(labels = Set.empty, milestoneId = None).toURL" id="clear-filter">
           <i class="icon-remove-circle"></i> Clear milestone and label filters
@@ -72,7 +73,15 @@
           </a>
         </li>
       }
+      *@
       <table class="table table-bordered table-hover table-issues">
+        <tr>
+          <th style="padding-top: 10px; padding-bottom: 10px; background-color: #eee;">
+            <input type="checkbox"/>
+            <a class="button-link@if(condition.state == "open"  ){ selected}" href="@condition.copy(state = "open"  ).toURL">@openCount Open</a>
+            <a class="button-link@if(condition.state == "closed"){ selected}" href="@condition.copy(state = "closed").toURL">@closedCount Closed</a>
+          </th>
+        </tr>
         @if(issues.isEmpty){
           <tr>
             <td style="padding: 20px; background-color: #eee; text-align: center;">
@@ -87,6 +96,7 @@
             </td>
           </tr>
         } else {
+          @*
           @if(hasWritePermission){
             <tr>
               <td style="background-color: #eee;">
@@ -134,18 +144,19 @@
               </td>
             </tr>
           }
+          *@
         }
         @issues.map { case (issue, labels, commentCount) =>
           <tr>
-          <td>
+            <td style="padding-top: 15px; padding-bottom: 15px;">
               @if(hasWritePermission){
                 <label class="checkbox" style="cursor: default;">
                 <input type="checkbox" value="@issue.issueId"/>
               }
               @if(issue.isPullRequest){
-              <img src="@assets/common/images/pullreq-@(if(issue.closed) "closed" else "open").png"/>
+                <img src="@assets/common/images/pullreq-@(if(issue.closed) "closed" else "open").png" style="margin-right: 20px;"/>
               } else {
-              <img src="@assets/common/images/issue-@(if(issue.closed) "closed" else "open").png"/>
+                <img src="@assets/common/images/issue-@(if(issue.closed) "closed" else "open").png" style="margin-right: 20px;"/>
               }
               @if(repository.isEmpty){
                 <a href="@path/@issue.userName/@issue.repositoryName">@issue.repositoryName</a>&nbsp;&#xFF65;
@@ -162,13 +173,10 @@
                 @issue.assignedUserName.map { userName =>
                   @avatar(userName, 20, tooltip = true)
                 }
-                #@issue.issueId
+                <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count"><i class="icon-comment"></i>@commentCount</a>
               </span>
-              <div class="small muted" style="margin-left: 20px;">
+              <div class="small muted" style="margin-left: 40px; margin-top: 5px;">
-                Opened by @user(issue.openedUserName, styleClass="username") @datetime(issue.registeredDate)&nbsp;
+                #@issue.issueId opened by @user(issue.openedUserName, styleClass="username") @datetime(issue.registeredDate)
-                @if(commentCount > 0){
-                  <i class="icon-comment"></i><a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count">@commentCount @plural(commentCount, "comment")</a>
-                }
               </div>
               @if(hasWritePermission){
                 </label>

src/main/twirl/issues/tab.scala.html

@@ -1,9 +1,11 @@
 @(active: String, create: Boolean, repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
 @import context._
 @import view.helpers._
-<ul class="nav nav-tabs pull-left fill-width">
+<ul class="nav nav-pills pull-left fill-width" style="margin-bottom: 0px;">
-  <li@if(active == "issues"){ class="active"}><a href="@url(repository)/issues">Browse Issues</a></li>
+  <li@if(active == "issues"    ){ class="active"}><a href="@url(repository)/issues">Issues</a></li>
-  <li@if(active == "milestones"){ class="active"}><a href="@url(repository)/issues/milestones">Milestones</a></li>
+  <li@if(active == "pulls"     ){ class="active"}><a href="@url(repository)/pulls">Pull requests</a></li>
+  <li@if(active == "labels"    ){ class="active"}><a href="@url(repository)/labels">Labels</a></li>
+  <li@if(active == "milestones"){ class="active"}><a href="@url(repository)/milestones">Milestones</a></li>
   @if(loginAccount.isDefined){
   <li class="pull-right">
     <div class="btn-group">

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

@@ -620,6 +620,16 @@ span.simplified-path {
 /****************************************************************************/
 /* Issues */
 /****************************************************************************/
+a.button-link {
+    font-weight: normal;
+    color: gray;
+}
+
+a.selected {
+    font-weight: bold;
+    color: black;
+}
+
 span.issue-status {
   display: block;
   font-size: large;
@@ -634,7 +644,7 @@ table.table-issues {
 a.issue-title {
   color: #333;
   font-weight: bold;
-  size: 110%;
+  font-size: 120%;
 }
 
 ul.label-list {