Change comment design and history

lib/views/page.html

@@ -48,6 +48,7 @@
 
     <li {% if req.body.pageForm %}class="active"{% endif %}><a href="#edit-form" data-toggle="tab"><i class="fa fa-pencil-square-o"></i> 編集</a></li>
 
+
     <li class="dropdown pull-right">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         <i class="fa fa-wrench"></i> <span class="caret"></span>
@@ -57,7 +58,9 @@
        <li><a href="?presentation=1" class="toggle-presentation"><i class="fa fa-arrows-alt"></i> プレゼンモード (beta)</a></li>
       </ul>
     </li>
-
+    {% if page %}
+    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="fa fa-history"></i> History</a></li>
+    {% endif %}
   </ul>
 
   {% include 'modal/widget_rename.html' %}
@@ -102,6 +105,35 @@
     <div class="edit-form tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit-form">
       {% include '_form.html' %}
     </div>
+
+    {# raw revision history #}
+    <div class="tab-pane revision-history" id="revision-history">
+      <h1><i class="fa fa-history"></i> History</h1>
+      {% if not page %}
+      {% else %}
+      <div class="revision-history-list">
+        {% for t in tree %}
+        <div class="revision-hisory-outer">
+          <img src="{{ t.author|picture }}" class="picture picture-rounded">
+          <div class="revision-history-main">
+            <div class="revision-history-author">
+              <strong>{% if t.author %}{{ t.author.username }}{% else %}-{% endif %}</strong>
+            </div>
+            <div class="revision-history-comment">
+            </div>
+            <div class="revision-history-meta">
+              {{ t.createdAt|datetz('Y-m-d H:i:s') }}
+              <br>
+              <a href="?revision={{ t._id.toString() }}"><i class="fa fa-history"></i> このバージョンを見る</a>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+
+    </div>
+
   </div>
   <script type="text/javascript">
     $(function(){
@@ -153,40 +185,6 @@
   Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.creator|default(author)|picture }}" class="picture picture-rounded"> {{ page.creator.name|default(author.name) }}
 </p>
 
-<div class="page-comments">
-  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#page-comment-form" aria-expanded="false" aria-controls=""><i class="fa fa-comment"></i> Comment</button>
-
-  <form class="form page-comment-form collapse" id="page-comment-form">
-    <img src="{{ user|picture }}" class="picture picture-rounded">
-    <div class="comment-form">
-      <ul class="nav nav-tabs">
-        <li class="active"><a id="comment-write-tab" href="#comment-write" role="tab" data-toggle="tab">Write</a></li>
-        <li><a id="comment-preview-tab" href="#comment-preview" role="tab" data-toggle="tab">Preview</a></li>
-
-      </ul>
-      <div class="comment-form-main">
-        <div class="tab-content">
-          <div role="tabpanel" class="comment-write tab-pane active" id="comment-write">
-            <textarea class="comment-form-comment form-control" id="comment-form-comment" name="commentForm[comment]"></textarea>
-          </div>
-          <div role="tabpanel" class="comment-preview tab-pane wiki" id="comment-preview">
-          </div>
-
-        </div>
-        <div class="comment-submit">
-          <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" value="Comment" class="btn btn-primary form-inline">
-        </div>
-      </div>
-    </div>
-  </form>
-
-  <div class="page-comments-list" id="page-comments-list">
-  </div>
-</div>
-
 <div class="page-attachments">
   <p>Attachments</p>
   <ul>
@@ -230,6 +228,11 @@
       <dd>
         <p class="liker-count">
         {{ page.liker.length }}
+          {% if page.isLiked(user) %}
+            <button data-liked="1" class="btn btn-default btn-sm active" id="pageLikeButton"><i class="fa fa-thumbs-up"></i> いいね！</button>
+          {% else %}
+            <button data-liked="0" class="btn btn-default btn-sm" id="pageLikeButton"><i class="fa fa-thumbs-o-up"></i> いいね！</button>
+          {% endif %}
         </p>
         <p class="liker-list">
           {% for liker in page.liker %}
@@ -239,11 +242,6 @@
             (...)
           {% endif %}
         </p>
-        {% if page.isLiked(user) %}
-          <button data-liked="1" class="btn btn-default btn-sm active" id="pageLikeButton"><i class="fa fa-thumbs-up"></i> いいね！！！</button>
-        {% else %}
-          <button data-liked="0" class="btn btn-default btn-sm" id="pageLikeButton"><i class="fa fa-thumbs-o-up"></i> いいね！！！</button>
-        {% endif %}
       </dd>
 
       <dt><i class="fa fa-eye"></i> 見た人</dt>
@@ -293,36 +291,41 @@ $(function() {
 
 {% block side_content %}
 
-  <h3><i class="fa fa-link"></i> 共有</h3>
+  <h3><i class="fa fa-link"></i> Share</h3>
   <ul class="fitted-list">
     <li data-toggle="tooltip" data-placement="bottom" title="共有用リンク" class="input-group">
       <span class="input-group-addon">共有用</span>
       <input class="copy-link form-control" type="text" value="{{ config.crowi['app:title'] }} {{ path }}  {{ baseUrl }}/_r/{{ page._id.toString() }}">
     </li>
-    <li data-toggle="tooltip" data-placement="bottom" title="Wiki記法" class="input-group">
-      <span class="input-group-addon">Wikiタグ</span>
-      <input class="copy-link form-control" type="text" value="&lt;{{ path }}&gt;">
-    </li>
     <li data-toggle="tooltip" data-placement="bottom" title="Markdown形式のリンク" class="input-group">
       <span class="input-group-addon">Markdown</span>
       <input class="copy-link form-control" type="text" value="[{{ path }}]({{ baseUrl }}/_r/{{ revision._id.toString() }})">
     </li>
   </ul>
 
-  <h3><i class="fa fa-history"></i> History</h3>
-  {% if not page %}
-  {% else %}
-  <ul class="revision-history">
-    {% for t in tree %}
-    <li>
-      <a href="?revision={{ t._id.toString() }}">
-        <img src="{{ t.author|picture }}" class="picture picture-rounded">
-        {% if t.author %}{{ t.author.username }}{% else %}-{% endif %}<br>{{ t.createdAt|datetz('Y-m-d H:i:s') }}
-      </a>
-    </li>
-    {% endfor %}
-  </ul>
-  {% endif %}
+  <h3><i class="fa fa-comment"></i> Comments</h3>
+  <div class="page-comments">
+    <form class="form page-comment-form" id="page-comment-form">
+      <div class="comment-form">
+        <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>
+          </div>
+          <div class="comment-submit">
+            <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" value="Comment" class="btn btn-primary btn-sm form-inline">
+          </div>
+        </div>
+      </div>
+    </form>
+
+    <div class="page-comments-list" id="page-comments-list">
+    </div>
+  </div>
+
+
 {% endblock %}
 
 {% block footer %}

resource/css/_comment.scss

@@ -1,35 +1,16 @@
 .page-comments {
   margin: 8px 0 0 0;
-  padding: 20px 0px 8px 0px;
 
   .page-comment-form {
     margin-top: 16px;
 
-    .picture {
-      float: left;
-      width: 32px;
-      height: 32px;
-    }
-
-    .nav {
-      background: #f0f0f0;
-      border-top: solid 1px #ccc;
-      border-right: solid 1px #ccc;
-      padding: 2px 0 0 7px;
-      border-left: solid 1px #ccc;
-    }
-
     .comment-form {
-      margin-left: 40px;
     }
 
     .comment-form-main {
-      padding: 8px;
-      border: solid 1px #ccc;
-      border-top: none;
 
       .comment-form-comment {
-        height: 120px;
+        height: 60px;
       }
 
       .comment-submit {
@@ -42,56 +23,44 @@
   .page-comments-list {
     .page-comment {
       margin-top: 8px;
+      padding-top: 8px;
+      border-top: solid 1px #ccc;
 
       .picture {
         float: left;
-        width: 32px;
-        height: 32px;
+        width: 24px;
+        height: 24px;
       }
 
+
       .page-comment-main {
-        border: solid 1px #ccc;
         margin-left: 40px;
 
+        .page-comment-creator {
+          font-weight: bold;
+        }
         .page-comment-meta {
-          float: right;
-          background: #f0f0f0;
-          padding: 4px 8px;
+          color: #aaa;
           font-size: .9em;
-          border-bottom-left-radius: 5px;
-
-          .page-comment-creator {
-            font-weight: bold;
-          }
         }
-
         .page-comment-body {
-          padding: 8px;
-          font-size: 14px;
-
-          h1, h2, h3, h4, h5 {
-            &:first-child {
-              padding-top: 16px;
-            }
-          }
-          p:last-child {
-            margin-bottom: 0;
-          }
+          padding: 8px 0;
         }
       }
     }
 
     .page-comment.page-comment-me {
-      .picture {
-        float: right;
-      }
+      //color: lighten($crowiHeaderBackground, 65%);
+      color: $crowiHeaderBackground;
       .page-comment-main {
-        border: solid 1px lighten($crowiHeaderBackground, 50%);
-        margin-right: 40px;
-        margin-left: 0px;
+
+        .page-comment-body,
+        .page-comment-creator,
+        .page-comment-meta {
+        }
 
         .page-comment-meta {
-          background: lighten($crowiHeaderBackground, 65%);
+          //background: lighten($crowiHeaderBackground, 65%);
         }
       }
     }

resource/css/_layout.scss

@@ -168,6 +168,7 @@
 
       .side-content {
         margin-bottom: $crowiFooterHeight + $crowiHeaderHeight;
+        color: #666;
         padding: 15px;
 
         h3 {
@@ -179,33 +180,6 @@
           &:hover { color: #aaa;}
         }
 
-        ul.revision-history {
-          padding: 0;
-          li {
-            position: relative;
-            list-style: none;
-
-            a {
-              color: #666;
-              padding: 3px 5px 3px 40px;
-              display: block;
-
-              &:hover {
-                background: darken($crowiAsideBackground, 10%);
-                text-decoration: none;
-                color: darken($link-color, 35%);
-              }
-            }
-
-          }
-
-          .picture {
-            position: absolute;
-            left: 5px;
-            top: 12px;
-          }
-        }
-
         ul.fitted-list {
           padding-left: 0;
           li {
@@ -383,24 +357,76 @@
   .content-main {
     .tab-content {
       margin-top: 30px;
+
+      .revision-history {
+        h1 {
+          padding-bottom: 0.3em;
+          font-size: 2.3em;
+          font-weight: bold;
+          border-bottom: solid 1px #ccc;
+        }
+
+
+        .revision-history-list {
+          .revision-hisory-outer {
+            margin-top: 8px;
+
+            .picture {
+              float: left;
+              width: 32px;
+              height: 32px;
+            }
+
+            .revision-history-main {
+              margin-left: 40px;
+
+              .revision-history-author {
+              }
+              .revision-history-comment {
+              }
+              .revision-history-meta {
+              }
+            }
+          }
+
+          li {
+            position: relative;
+            list-style: none;
+
+            a {
+              color: #666;
+              padding: 3px 5px 3px 40px;
+              display: block;
+
+              &:hover {
+                background: darken($crowiAsideBackground, 10%);
+                text-decoration: none;
+                color: darken($link-color, 35%);
+              }
+            }
+
+          }
+        }
+
+      }
     }
   }
 
   .content-main .timeline-body { // {{{ timeline
-     .revision-path {
-       margin-top: 1.6em;
-       margin-bottom: 0;
-       border: solid 2px #ddd;
-       border-bottom: none;
-       padding: 16px;
-       background: #ddd;
-     }
-     .revision-body {
-       font-size: 14px;
-       border: solid 2px #ddd;
-       padding: 16px;
-       background: #fdfdfd;
-     }
+    .revision-path {
+      margin-top: 1.6em;
+      margin-bottom: 0;
+      border: solid 2px #ddd;
+      border-bottom: none;
+      padding: 16px;
+      background: #ddd;
+    }
+    .revision-body {
+      font-size: 14px;
+      border: solid 2px #ddd;
+      padding: 16px;
+      background: #fdfdfd;
+    }
   } // }}}
 
   // on-edit

resource/js/crowi.js

@@ -276,7 +276,7 @@ $(function() {
       var $comment = $('<div>');
       var $commentImage = $('<img class="picture picture-rounded">')
         .attr('src', Crowi.userPicture(creator));
-      var $commentCreator = $('<span class="page-comment-creator">')
+      var $commentCreator = $('<div class="page-comment-creator">')
         .text(creator.username);
 
       var $commentRevision = $('<a class="page-comment-revision label">')
@@ -289,16 +289,15 @@ $(function() {
       }
 
       var $commentMeta = $('<div class="page-comment-meta">')
-        .text(' commented at ' + commentedAt + ' ')
-        .prepend($commentCreator)
-        .append($commentRevision);
-      var $commentBody = $('<div class="page-comment-body wiki">');
-      var renderer = new Crowi.renderer(comment, $commentBody);
-        renderer.render();
+        .text(commentedAt);
+        //.append($commentRevision);
+      var $commentBody = $('<div class="page-comment-body">')
+        .html(comment.replace(/\n/, '<br>'));
 
       var $commentMain = $('<div class="page-comment-main">')
+        .append($commentCreator)
+        .append($commentBody)
         .append($commentMeta)
-        .append($commentBody);
 
       $comment.addClass('page-comment');
       if (creator._id === currentUser) {
@@ -309,7 +308,7 @@ $(function() {
       }
       $comment
         .append($commentImage)
-        .append($commentMain)
+        .append($commentMain);
 
       return $comment;
     }
@@ -336,7 +335,6 @@ $(function() {
           $pageCommentList.prepend(createCommentHTML(comment.revision, comment.creator, comment.comment, comment.createdAt));
           $('#comment-form-comment').val('');
           $('#comment-form-message').text('');
-          $('#comment-write-tab').tab('show');
         } else {
           $('#comment-form-message').text(data.error);
         }
@@ -349,11 +347,6 @@ $(function() {
       return false;
     });
 
-    $('#comment-preview-tab').on('shown.bs.tab', function(e) {
-      var commentPreviewRenderer = new Crowi.renderer($('#comment-form-comment').val(), $('#comment-preview'));
-      commentPreviewRenderer.render();
-    });
-
     // attachment
     var $pageAttachmentList = $('.page-attachments ul');
     $.get('/_api/attachment/page/' + pageId, function(res) {