Merge pull request #880 from garygreen/issues-gui

Improved design of issue

src/main/twirl/gitbucket/core/issues/commentform.scala.html

@@ -17,7 +17,7 @@
           enableRefsLink     = true,
           enableTaskList     = true,
           hasWritePermission = hasWritePermission,
-          style              = "width: 635px; height: 100px; max-height: 150px;",
+          style              = "",
           elastic            = true
         )
         <div style="text-align: right;">

src/main/twirl/gitbucket/core/issues/commentlist.scala.html

@@ -13,7 +13,7 @@
       @user(issue.get.openedUserName, styleClass="username strong") <span class="muted">commented @helper.html.datetimeago(issue.get.registeredDate)</span>
       <span class="pull-right">
         @if(hasWritePermission || loginAccount.map(_.userName == issue.get.openedUserName).getOrElse(false)){
-          <a href="#" data-issue-id="@issue.get.issueId"><i class="icon-pencil" aria-label="Edit"></i></a>
+          <a href="#" data-issue-id="@issue.get.issueId"><i class="octicon octicon-pencil" aria-label="Edit"></i></a>
         }
       </span>
     </div>
@@ -41,8 +41,8 @@
           <span class="pull-right">
             @if(comment.action != "commit" && comment.action != "merge" && comment.action != "refer"
                   && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
-              <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil" aria-label="Edit"></i></a>&nbsp;
+              <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil" aria-label="Edit"></i></a>&nbsp;
-              <a href="#" data-comment-id="@comment.commentId"><i class="icon-remove-circle" aria-label="Remove"></i></a>
+              <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x" aria-label="Remove"></i></a>
             }
           </span>
         </div>
@@ -78,8 +78,8 @@
       </div>
     }
     @if(comment.action == "close" || comment.action == "close_comment"){
-      <div class="small issue-comment-action">
+      <div class="issue-comment-action">
-        <span class="label label-important">Closed</span>
+        <i class="octicon octicon-circle-slash danger"></i>
         @avatar(comment.commentedUserName, 20)
         @if(issue.isDefined && issue.get.isPullRequest){
           @user(comment.commentedUserName, styleClass="username strong") closed the pull request @helper.html.datetimeago(comment.registeredDate)
@@ -89,14 +89,14 @@
       </div>
     }
     @if(comment.action == "reopen" || comment.action == "reopen_comment"){
-      <div class="small issue-comment-action">
+      <div class="issue-comment-action issue-reopened">
-        <span class="label label-success">Reopened</span>
+        <i class="octicon octicon-primitive-dot"></i>
         @avatar(comment.commentedUserName, 20)
         @user(comment.commentedUserName, styleClass="username strong") reopened the issue @helper.html.datetimeago(comment.registeredDate)
       </div>
     }
     @if(comment.action == "delete_branch"){
-      <div class="small issue-comment-action">
+      <div class="issue-comment-action">
         <span class="label">Deleted</span>
         @avatar(comment.commentedUserName, 20)
         @user(comment.commentedUserName, styleClass="username strong") deleted the <span class="label label-info monospace">@pullreq.map(_.requestBranch)</span> branch @helper.html.datetimeago(comment.registeredDate)
@@ -110,7 +110,7 @@
 <script>
 $(function(){
 @if(issue.isDefined){
-  $('.issue-comment-box i.icon-pencil').click(function(){
+  $('.issue-comment-box i.octicon-pencil').click(function(){
     var id  = $(this).closest('a').data('comment-id');
     var url = '@url(repository)/issue_comments/_data/' + id;
     var $content = $('#commentContent-' + id);
@@ -130,7 +130,7 @@ $(function(){
     });
     return false;
   });
-  $('.issue-comment-box i.icon-remove-circle').click(function(){
+  $('.issue-comment-box i.octicon-x').click(function(){
     if(confirm('Are you sure you want to delete this?')) {
       var id = $(this).closest('a').data('comment-id');
       $.post('@url(repository)/issue_comments/delete/' + id,
@@ -144,7 +144,7 @@ $(function(){
     return false;
   });
 }
-  $(document).on('click', '.commit-comment-box i.icon-pencil', function(){
+  $(document).on('click', '.commit-comment-box i.octicon-pencil', function(){
     var id  = $(this).closest('a').data('comment-id');
     var url = '@url(repository)/commit_comments/_data/' + id;
     var $content = $('.commit-commentContent-' + id, $(this).closest('.box'));
@@ -158,7 +158,7 @@ $(function(){
     });
     return false;
   });
-  $(document).on('click', '.commit-comment-box i.icon-remove-circle', function(){
+  $(document).on('click', '.commit-comment-box i.octicon-x', function(){
     if(confirm('Are you sure you want to delete this?')) {
       var id = $(this).closest('a').data('comment-id');
       $.post('@url(repository)/commit_comments/delete/' + id,

src/main/twirl/gitbucket/core/issues/editcomment.scala.html

@@ -2,7 +2,7 @@
 @import context._
 <span id="error-edit-content-@commentId" class="error"></span>
 @helper.html.attached(owner, repository){
-  <textarea style="width: 635px; height: 100px;" id="edit-content-@commentId">@content</textarea>
+  <textarea id="edit-content-@commentId">@content</textarea>
 }
 <div>
   <input type="button" id="cancel-comment-@commentId" class="btn btn-small btn-danger" value="Cancel"/>

src/main/twirl/gitbucket/core/issues/editissue.scala.html

@@ -1,7 +1,7 @@
 @(content: Option[String], issueId: Int, owner: String, repository: String)(implicit context: gitbucket.core.controller.Context)
 @import context._
 @helper.html.attached(owner, repository){
-  <textarea style="width: 635px; height: 100px; max-height: 300px;" id="edit-content">@content.getOrElse("")</textarea>
+  <textarea id="edit-content">@content.getOrElse("")</textarea>
 }
 <div>
   <input type="button" id="cancel-issue" class="btn btn-small btn-danger" value="Cancel"/>

src/main/twirl/gitbucket/core/issues/issue.scala.html

@@ -45,6 +45,7 @@
     </span>
     <br/><br/>
     <hr>
+    <br/>
     <div class="row-fluid">
       <div class="span10">
         @commentlist(Some(issue), comments, hasWritePermission, repository)

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

@@ -863,6 +863,10 @@ a.issue-title {
   font-size: 120%;
 }
 
+.label-success {
+  background-color: #6cc644;
+}
+
 ul.label-list {
   list-style-type: none;
   padding-left: 0px;
@@ -966,8 +970,16 @@ div.issue-info {
 }
 
 div.issue-content {
-  padding: 8px;
+  padding: 13px;
-  background-color: #fbfbfb;
+  background-color: #fff;
+}
+
+div.issue-content p:first-child {
+  margin-top: 0;
+}
+
+div.issue-content p:last-child {
+  margin-bottom: 0;
 }
 
 h4#issueTitle {
@@ -994,17 +1006,47 @@ div.issue-participants {
 
 div.issue-comment-box, div.commit-comment-box {
   margin-bottom: 15px;
-  margin-left: 50px;
+  margin-left: 70px;
   max-width: 820px;
 }
 
+div.issue-comment-box textarea {
+  width: 670px;
+  height: 100px;
+  max-height: 300px;
+}
+
 div.issue-comment-action {
   padding-bottom: 10px;
   padding-top: 0px;
+  margin-left: 70px;
   margin-bottom: 10px;
   border-bottom: 4px solid #ddd;
 }
 
+div.issue-comment-action .octicon {
+  border-radius: 50%;
+  background-color: #f3f3f3;
+  color: #767676;
+  font-size: 18px;
+  margin-right: 7px;
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  border: 2px solid #fff;
+}
+
+div.issue-reopened .octicon {
+  background-color: #6cc644;
+  color: #fff;
+}
+
+div.issue-comment-action .octicon.danger {
+  background-color: #bd2c00;
+  color: #fff;
+}
+
 .nav-pills > li > span.issue-label {
   display: block;
   padding: 0px 8px 2px 8px;