(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,110 +73,117 @@
           </a>
         </li>
       }
+      *@
       <table class="table table-bordered table-hover table-issues">
-      @if(issues.isEmpty){
         <tr>
-          <td style="padding: 20px; background-color: #eee; text-align: center;">
+          <th style="padding-top: 10px; padding-bottom: 10px; background-color: #eee;">
-            No issues to show.
+            <input type="checkbox"/>
-            @if(condition.labels.nonEmpty || condition.milestoneId.isDefined){
+            <a class="button-link@if(condition.state == "open"  ){ selected}" href="@condition.copy(state = "open"  ).toURL">@openCount Open</a>
-              <a href="@condition.copy(labels = Set.empty, milestoneId = None).toURL">Clear active filters.</a>
+            <a class="button-link@if(condition.state == "closed"){ selected}" href="@condition.copy(state = "closed").toURL">@closedCount Closed</a>
-            } else {
+          </th>
-              @if(repository.isDefined){
-              <a href="@url(repository.get)/issues/new">Create a new issue.</a>
-              }
-            }
-          </td>
         </tr>
-      } else {
+        @if(issues.isEmpty){
-        @if(hasWritePermission){
+          <tr>
-        <tr>
+            <td style="padding: 20px; background-color: #eee; text-align: center;">
-          <td style="background-color: #eee;">
+              No issues to show.
-            <div class="btn-group">
+              @if(condition.labels.nonEmpty || condition.milestoneId.isDefined){
-              <button class="btn btn-mini strong" id="state">@{if(condition.state == "open") "Close" else "Reopen"}</button>
+                <a href="@condition.copy(labels = Set.empty, milestoneId = None).toURL">Clear active filters.</a>
-            </div>
-            @helper.html.dropdown("Label") {
-              @labels.map { label =>
-                <li>
-                  <a href="javascript:void(0);" class="toggle-label" data-id="@label.labelId">
-                    <i class="icon-white"></i>
-                    <span class="label" style="background-color: #@label.color;">&nbsp;</span>
-                    @label.labelName
-                  </a>
-                </li>
-              }
-            }
-            @helper.html.dropdown("Assignee") {
-              <li><a href="javascript:void(0);" class="toggle-assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
-              @collaborators.map { collaborator =>
-                <li><a href="javascript:void(0);" class="toggle-assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
-              }
-            }
-            @helper.html.dropdown("Milestone") {
-              <li><a href="javascript:void(0);" class="toggle-milestone" data-id=""><i class="icon-remove-circle"></i> Clear this milestone</a></li>
-              @milestones.map { milestone =>
-                <li>
-                  <a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId">
-                    <i class="icon-white"></i> @milestone.title
-                    <div class="small" style="padding-left: 20px;">
-                      @milestone.dueDate.map { dueDate =>
-                        @if(isPast(dueDate)){
-                          <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
-                        } else {
-                          <span class="muted">Due in @date(dueDate)</span>
-                        }
-                      }.getOrElse {
-                        <span class="muted">No due date</span>
-                      }
-                    </div>
-                  </a>
-                </li>
-              }
-            }
-          </td>
-        </tr>
-        }
-      }
-      @issues.map { case (issue, labels, commentCount) =>
-        <tr>
-          <td>
-            @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"/>
               } else {
-              <img src="@assets/common/images/issue-@(if(issue.closed) "closed" else "open").png"/>
+                @if(repository.isDefined){
+                <a href="@url(repository.get)/issues/new">Create a new issue.</a>
+                }
+              }
+            </td>
+          </tr>
+        } else {
+          @*
+          @if(hasWritePermission){
+            <tr>
+              <td style="background-color: #eee;">
+                <div class="btn-group">
+                  <button class="btn btn-mini strong" id="state">@{if(condition.state == "open") "Close" else "Reopen"}</button>
+                </div>
+                @helper.html.dropdown("Label") {
+                  @labels.map { label =>
+                    <li>
+                      <a href="javascript:void(0);" class="toggle-label" data-id="@label.labelId">
+                        <i class="icon-white"></i>
+                        <span class="label" style="background-color: #@label.color;">&nbsp;</span>
+                        @label.labelName
+                      </a>
+                    </li>
+                  }
+                }
+                @helper.html.dropdown("Assignee") {
+                  <li><a href="javascript:void(0);" class="toggle-assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
+                  @collaborators.map { collaborator =>
+                    <li><a href="javascript:void(0);" class="toggle-assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
+                  }
+                }
+                @helper.html.dropdown("Milestone") {
+                  <li><a href="javascript:void(0);" class="toggle-milestone" data-id=""><i class="icon-remove-circle"></i> Clear this milestone</a></li>
+                  @milestones.map { milestone =>
+                    <li>
+                      <a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId">
+                        <i class="icon-white"></i> @milestone.title
+                        <div class="small" style="padding-left: 20px;">
+                          @milestone.dueDate.map { dueDate =>
+                            @if(isPast(dueDate)){
+                              <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                            } else {
+                              <span class="muted">Due in @date(dueDate)</span>
+                            }
+                          }.getOrElse {
+                            <span class="muted">No due date</span>
+                          }
+                        </div>
+                      </a>
+                    </li>
+                  }
+                }
+              </td>
+            </tr>
+          }
+          *@
+        }
+        @issues.map { case (issue, labels, commentCount) =>
+          <tr>
+            <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" style="margin-right: 20px;"/>
+              } else {
+                <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;
+                <a href="@path/@issue.userName/@issue.repositoryName">@issue.repositoryName</a>&nbsp;&#xFF65;
               }
               @if(issue.isPullRequest){
-              <a href="@path/@issue.userName/@issue.repositoryName/pull/@issue.issueId" class="issue-title">@issue.title</a>
+                <a href="@path/@issue.userName/@issue.repositoryName/pull/@issue.issueId" class="issue-title">@issue.title</a>
               } else {
-              <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-title">@issue.title</a>
+                <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-title">@issue.title</a>
               }
               @labels.map { label =>
-              <span class="label-color small" style="background-color: #@label.color; color: #@label.fontColor; padding-left: 4px; padding-right: 4px">@label.labelName</span>
+                <span class="label-color small" style="background-color: #@label.color; color: #@label.fontColor; padding-left: 4px; padding-right: 4px">@label.labelName</span>
               }
               <span class="pull-right muted">
                 @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){
+              @if(hasWritePermission){
-            </label>
+                </label>
-            }
+              }
-          </td>
+            </td>
-        </tr>
+          </tr>
-      }
+        }
       </table>
       <div class="pull-right">
         @helper.html.paginator(page, (if(condition.state == "open") openCount else closedCount), service.IssuesService.IssueLimit, 10, condition.toURL)

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 {