From 7ad605afbaca53ca988a06a99f91bb7d6266bcc6 Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Sun, 13 Dec 2015 23:59:42 +0900
Subject: [PATCH] Fix style of issue comment form and more

---
 .../gitbucket/core/helper/preview.scala.html  |  2 +-
 .../twirl/gitbucket/core/index.scala.html     |  4 +-
 .../core/issues/commentform.scala.html        |  4 +-
 .../core/issues/commentlist.scala.html        | 24 +++++-----
 .../core/issues/editcomment.scala.html        |  4 +-
 .../core/issues/issueinfo.scala.html          |  8 ++--
 src/main/twirl/gitbucket/core/menu.scala.html | 48 ++++++++++---------
 .../core/pulls/mergeguide.scala.html          |  2 +-
 .../webapp/assets/common/css/gitbucket.css    | 13 ++++-
 9 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/src/main/twirl/gitbucket/core/helper/preview.scala.html b/src/main/twirl/gitbucket/core/helper/preview.scala.html
index aacd048ce..1bdb011a8 100644
--- a/src/main/twirl/gitbucket/core/helper/preview.scala.html
+++ b/src/main/twirl/gitbucket/core/helper/preview.scala.html
@@ -14,7 +14,7 @@
 @import gitbucket.core._
 @import gitbucket.core.view.helpers._
 <div class="tabbable">
-  <ul class="nav nav-tabs fill-width pull-left" style="margin-top: 12px; margin-bottom: 10px;">
+  <ul class="nav nav-tabs fill-width pull-left" style="@*margin-top: 12px; *@margin-bottom: 10px;">
     <li class="active"><a href="#tab@uid" data-toggle="tab">Write</a></li>
     <li><a href="#tab@(uid+1)" data-toggle="tab" id="preview@uid">Preview</a></li>
   </ul>
diff --git a/src/main/twirl/gitbucket/core/index.scala.html b/src/main/twirl/gitbucket/core/index.scala.html
index c29566b58..f209fb519 100644
--- a/src/main/twirl/gitbucket/core/index.scala.html
+++ b/src/main/twirl/gitbucket/core/index.scala.html
@@ -78,8 +78,8 @@
 <script>
 $(function(){
   $('#show-more-repos').click(function(e){
-    $(e.target).parents('div.box-content-bottom').find('div.repo-link').show();
-    $(e.target).parents('div.show-more').remove();
+    $(e.target).parents('ul.list-group').find('li.repo-link').show();
+    $(e.target).parents('li.show-more').remove();
   });
 });
 </script>
diff --git a/src/main/twirl/gitbucket/core/issues/commentform.scala.html b/src/main/twirl/gitbucket/core/issues/commentform.scala.html
index 7d1aae1a8..c4d1affb2 100644
--- a/src/main/twirl/gitbucket/core/issues/commentform.scala.html
+++ b/src/main/twirl/gitbucket/core/issues/commentform.scala.html
@@ -8,8 +8,8 @@
   <hr/><br/>
   <form method="POST" validate="true">
     <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
-      <div class="issue-comment-box">
-      <div class="box-content">
+    <div class="panel panel-default issue-comment-box">
+      <div class="panel-body">
         @helper.html.preview(
           repository         = repository,
           content            = "",
diff --git a/src/main/twirl/gitbucket/core/issues/commentlist.scala.html b/src/main/twirl/gitbucket/core/issues/commentlist.scala.html
index dcfa16cff..61c2637f5 100644
--- a/src/main/twirl/gitbucket/core/issues/commentlist.scala.html
+++ b/src/main/twirl/gitbucket/core/issues/commentlist.scala.html
@@ -27,8 +27,8 @@
   case comment: gitbucket.core.model.IssueComment => {
     @if(comment.action != "close" && comment.action != "reopen" && comment.action != "delete_branch"){
       <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
-      <div class="box issue-comment-box" id="comment-@comment.commentId">
-        <div class="box-header">
+      <div class="panel panel-default issue-comment-box" id="comment-@comment.commentId">
+        <div class="panel-heading">
           @user(comment.commentedUserName, styleClass="username strong")
           <span class="muted">
             @if(comment.action == "comment"){
@@ -38,20 +38,22 @@
             }
             @helper.html.datetimeago(comment.registeredDate)
           </span>
-          <span class="pull-right">
-            @if(comment.action != "commit" && comment.action != "merge" && comment.action != "refer"
-                  && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
+          @if(comment.action != "commit" && comment.action != "merge" && comment.action != "refer"
+                && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
+            <span class="pull-right">
               <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="octicon octicon-x" aria-label="Remove"></i></a>
-            }
-          </span>
-        </div>
-        <div class="box-content-bottom issue-content markdown-body" id="commentContent-@comment.commentId">
+            </span>
+          }
           @if(comment.action == "commit" && comment.content.split(" ").last.matches("[a-f0-9]{40}")){
             @defining(comment.content.substring(comment.content.length - 40)){ id =>
-              <div class="pull-right"><a href="@path/@repository.owner/@repository.name/commit/@id" class="monospace">@id.substring(0, 7)</a></div>
-              @markdown(comment.content.substring(0, comment.content.length - 41), repository, false, true, true, hasWritePermission)
+              <span class="pull-right"><a href="@path/@repository.owner/@repository.name/commit/@id" class="monospace">@id.substring(0, 7)</a></span>
             }
+          }
+          </div>
+        <div class="panel-body issue-content markdown-body" id="commentContent-@comment.commentId">
+          @if(comment.action == "commit" && comment.content.split(" ").last.matches("[a-f0-9]{40}")){
+            @markdown(comment.content.substring(0, comment.content.length - 41), repository, false, true, true, hasWritePermission)
           } else {
             @if(comment.action == "refer"){
               @defining(comment.content.split(":")){ case Array(issueId, rest @ _*) =>
diff --git a/src/main/twirl/gitbucket/core/issues/editcomment.scala.html b/src/main/twirl/gitbucket/core/issues/editcomment.scala.html
index 9c6aa73d5..e9bda8ceb 100644
--- a/src/main/twirl/gitbucket/core/issues/editcomment.scala.html
+++ b/src/main/twirl/gitbucket/core/issues/editcomment.scala.html
@@ -5,8 +5,8 @@
   <textarea id="edit-content-@commentId">@content</textarea>
 }
 <div>
-  <input type="button" id="cancel-comment-@commentId" class="btn btn-small btn-danger" value="Cancel"/>
-  <input type="button" id="update-comment-@commentId" class="btn btn-small pull-right" value="Update comment"/>
+  <input type="button" id="cancel-comment-@commentId" class="btn btn-danger" value="Cancel"/>
+  <input type="button" id="update-comment-@commentId" class="btn btn-default pull-right" value="Update comment"/>
 </div>
 <script>
 $(function(){
diff --git a/src/main/twirl/gitbucket/core/issues/issueinfo.scala.html b/src/main/twirl/gitbucket/core/issues/issueinfo.scala.html
index 9f790c37c..d2c90ef8b 100644
--- a/src/main/twirl/gitbucket/core/issues/issueinfo.scala.html
+++ b/src/main/twirl/gitbucket/core/issues/issueinfo.scala.html
@@ -116,11 +116,13 @@
   <div style="margin-bottom: 8px;">
     @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
       <div class="muted small strong">@participants.size @plural(participants.size, "participant")</div>
-      @participants.map { participant =>
-        @avatarLink(participant, 20, tooltip = true)
-      }
     }
   </div>
+  @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
+    @participants.map { participant =>
+      @avatarLink(participant, 20, tooltip = true)
+    }
+  }
 }
 <script>
 $(function(){
diff --git a/src/main/twirl/gitbucket/core/menu.scala.html b/src/main/twirl/gitbucket/core/menu.scala.html
index 388f239a3..9d3cbe73f 100644
--- a/src/main/twirl/gitbucket/core/menu.scala.html
+++ b/src/main/twirl/gitbucket/core/menu.scala.html
@@ -110,29 +110,31 @@
       @repository.repository.description.map { description =>
         <p class="description">@detectAndRenderLinks(description)</p>
       }
-      <div style="margin-bottom: 10px;" class="box-content">
-        <table class="fill-width">
-          <tr>
-            <td style="width: 33%; text-align: center;">
-              <a href="@url(repository)/commits/@encodeRefName(id.getOrElse(""))" class="header-link">
-                <i class="octicon octicon-history"></i>
-                <strong>@repository.commitCount</strong> commits
-              </a>
-            </td>
-            <td style="width: 33%; text-align: center;">
-              <a href="@url(repository)/branches" class="header-link" class="header-link">
-                <i class="octicon octicon-git-branch"></i>
-                <strong>@repository.branchList.length</strong> branches
-              </a>
-            </td>
-            <td style="width: 33%; text-align: center;">
-              <a href="@url(repository)/tags" class="header-link" class="header-link">
-                <i class="octicon octicon-tag"></i>
-                <strong>@repository.tags.length</strong> releases
-              </a>
-            </td>
-          </tr>
-        </table>
+      <div style="margin-bottom: 10px;" class="panel panel-default">
+        <div class="panel-body">
+          <table class="fill-width">
+            <tr>
+              <td style="width: 33%; text-align: center;">
+                <a href="@url(repository)/commits/@encodeRefName(id.getOrElse(""))" class="header-link">
+                  <i class="octicon octicon-history"></i>
+                  <strong>@repository.commitCount</strong> commits
+                </a>
+              </td>
+              <td style="width: 33%; text-align: center;">
+                <a href="@url(repository)/branches" class="header-link" class="header-link">
+                  <i class="octicon octicon-git-branch"></i>
+                  <strong>@repository.branchList.length</strong> branches
+                </a>
+              </td>
+              <td style="width: 33%; text-align: center;">
+                <a href="@url(repository)/tags" class="header-link" class="header-link">
+                  <i class="octicon octicon-tag"></i>
+                  <strong>@repository.tags.length</strong> releases
+                </a>
+              </td>
+            </tr>
+          </table>
+        </div>
       </div>
     }
     @body
diff --git a/src/main/twirl/gitbucket/core/pulls/mergeguide.scala.html b/src/main/twirl/gitbucket/core/pulls/mergeguide.scala.html
index b23a8bbb5..6b9d41f02 100644
--- a/src/main/twirl/gitbucket/core/pulls/mergeguide.scala.html
+++ b/src/main/twirl/gitbucket/core/pulls/mergeguide.scala.html
@@ -10,7 +10,7 @@
 @import gitbucket.core.view.helpers._
 @import model.CommitState
 <div class="box issue-comment-box" style="background-color: @if(hasProblem){ #fbeed5 }else{ #d8f5cd };">
-  <div class="box-content"class="issue-content" style="border: 1px solid @if(hasProblem){ #c09853 }else{ #95c97e }; padding: 10px;">
+  <div class="box-content issue-content" style="border: 1px solid @if(hasProblem){ #c09853 }else{ #95c97e }; padding: 10px;">
     <div id="merge-pull-request">
       @if(!statuses.isEmpty){
         <div class="build-statuses">
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index 908ac4d2f..9621ed00e 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -1170,6 +1170,7 @@ div.issue-info {
   margin-right: 0px;
 }
 
+/*
 div.issue-content {
   padding: 13px;
   background-color: #fff;
@@ -1182,6 +1183,7 @@ div.issue-content p:first-child {
 div.issue-content p:last-child {
   margin-bottom: 0;
 }
+*/
 
 h4#issueTitle {
   font-size: large;
@@ -1209,10 +1211,17 @@ div.issue-comment-box, div.commit-comment-box {
   margin-bottom: 15px;
   margin-left: 70px;
   max-width: 820px;
+  /*padding: 8px;*/
 }
 
+div.issue-comment-box > div.panel-body,
+div.commit-comment-box > div.panel-body {
+  padding: 8px;
+}
+
+
 div.issue-comment-box textarea {
-  width: 670px;
+  width: 650px;
   height: 100px;
   max-height: 300px;
 }
@@ -1328,7 +1337,7 @@ div.author-info div.committer {
   color: #bd2c00;
 }
 
-.box-content .build-statuses{
+.build-statuses{
   margin: -10px -10px 10px -10px;
 }
 .build-statuses .build-status-item{