Merge pull request #65 from weseek/imprv/update-comment-form

コメント表示変更、日付フォーマットをmomentで修正

lib/routes/comment.js

@@ -54,7 +54,8 @@ module.exports = function(crowi, app) {
     var form = req.form.commentForm;
 
     if (!req.form.isValid) {
-      return res.json(ApiResponse.error('Invalid comment.'));
+      // return res.json(ApiResponse.error('Invalid comment.'));
+      return res.json(ApiResponse.error('コメントを入力してください。'));
     }
 
     var pageId = form.page_id;

lib/views/crowi-plus/widget/comments.html

@@ -18,16 +18,21 @@
 
     <form class="form page-comment-form" id="page-comment-form" onsubmit="return false;">
       <div class="comment-form">
+        <div class="comment-form-user">
+            <img src="{{ user|picture }}" class="picture picture-rounded" width="25" alt="{{ user.name }}" title="{{ user.name }}" />
+        </div>
         <div class="comment-form-main">
           <div class="comment-write" id="comment-write">
-            <textarea class="comment-form-comment form-control" id="comment-form-comment" name="commentForm[comment]"></textarea>
+            <textarea class="comment-form-comment form-control" id="comment-form-comment" name="commentForm[comment]" rows="10" placeholder="コメントを入力してください。"></textarea>
           </div>
           <div class="comment-submit">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
             <input type="hidden" name="commentForm[page_id]" value="{{ page._id.toString() }}">
             <input type="hidden" name="commentForm[revision_id]" value="{{ revision._id.toString() }}">
-            <span class="text-danger" id="comment-form-message"></span>
-            <input type="submit" id="comment-form-button" value="Comment" class="btn btn-primary btn-sm form-inline">
+            <p class="text-danger" id="comment-form-message"></p>
+            <button type="submit" id="comment-form-button" class="btn btn-primary form-inline">
+              <i class="fa fa-comment comment-ico" aria-hidden="true"></i>Comment
+            </button>
           </div>
         </div>
       </div>

resource/css/_comment_crowi-plus.scss

@@ -6,24 +6,96 @@
   }
 
   .page-comments {
+    border-top: 3px solid #f0f0f0;
+    h4 {
+      margin-bottom: 1em;
+    }
   }
 
   .page-comment {
     position: relative;
+    
     // ユーザーアイコン
     .picture.picture-rounded{
       position: absolute;
       top: 1em;
+      width: 3em;
+      height: 3em;
     }
 
     // コメントセクション
     .page-comment-main{
-      margin-left: 2.5em;
+      background: #f5f5f5;
+      padding: 1em;
+      position: relative;
+      margin-left: 4.5em;
       margin-bottom: 1em;
+      border-radius: 3px;
+      &:before{
+        border: 2em solid transparent;
+        border-right-color:#f5f5f5;
+        border-left-width: 0;
+        left: -1em;
+        content: "";
+        display: block;
+        top: 0.5em;
+        position: absolute;
+        width: 0;
+      }
+    }
+
+    // コメント本文
+    .page-comment-body{
+      margin-bottom: 0.5em;
+    }
+    
+    // ユーザー名
+    .page-comment-creator{
+      margin-bottom: 0.5em;
     }
   }
-  // コメント入力フォーム
-  .comment-write{
-    margin-bottom: 1em;
+
+  .comment-form{
+    position: relative;
+    // ユーザーアイコン
+    .picture.picture-rounded{
+      position: absolute;
+      top: 1em;
+      width: 3em;
+      height: 3em;
+    }
+
+    // コメントフォームセクション
+    .comment-form-main{
+      margin-left: 4.5em;
+      margin-bottom: 1em;
+      background: #f5f5f5;
+      padding: 1em;
+      position: relative;
+      border-radius: 3px;
+      &:before{
+        border: 2em solid transparent;
+        border-right-color:#f5f5f5;
+        border-left-width: 0;
+        left: -1em;
+        content: "";
+        display: block;
+        top: 0.5em;
+        position: absolute;
+        width: 0;
+      }
+    }
+    
+    // コメントの吹き出しアイコン 
+    .comment-ico{
+      font-size: 1.2em;
+      margin-right: 0.3em; 
+      opacity: 0.6;
+    }
+
+    // コメント入力フォーム
+    .comment-write{
+      margin-bottom: 0.5em;
+    }
   }
 }

resource/js/legacy/crowi.js

@@ -3,7 +3,7 @@
 */
 
 var io = require('socket.io-client');
-
+var moment = require("moment");
 require('bootstrap-sass');
 require('jquery.cookie');
 
@@ -500,7 +500,8 @@ $(function() {
       }
 
       var $commentMeta = $('<div class="page-comment-meta">')
-        .text(commentedAt + ' ')
+        //日付変換
+        .text(moment(commentedAt).format('YYYY/MM/DD HH:mm:ss') + ' ')
         .append($commentRevision);
 
       var $commentBody = $('<div class="page-comment-body">')