Merge pull request #66 from weseek/feat/custom-layout

Feat/custom layout

lib/models/config.js

@@ -254,6 +254,11 @@ module.exports = function(crowi) {
     return this.uglifiedCustomCss;
   }
 
+  configSchema.statics.layoutType = function(config)
+  {
+    return config.crowi['customize:layout'] || 'crowi';
+  }
+
   configSchema.statics.fileUploadEnabled = function(config)
   {
     const Config = this;
@@ -304,6 +309,7 @@ module.exports = function(crowi) {
         image: Config.isUploadable(config),
         file: Config.fileUploadEnabled(config),
       },
+      layoutType: Config.layoutType(config),
     };
 
     return local_config;

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/util/swigFunctions.js

@@ -56,8 +56,8 @@ module.exports = function(crowi, app, req, locals) {
   }
 
   locals.layoutType = function() {
-    var config = crowi.getConfig();
-    return config.crowi['customize:layout'] || 'crowi';
+    var config = crowi.getConfig()
+    return Config.layoutType(config);
   }
 
   locals.slackConfigured = function() {

lib/views/crowi-plus/page.html

@@ -14,6 +14,27 @@
 {% endblock %} {# /content_head #}
 
 
+{% block content_main %}
+  <div class="row">
+
+    <div class="col-md-10">
+
+      {% parent %}
+
+      {# force remove #revision-toc from #content_main of parent #}
+      <script>
+        $('#revision-toc').remove();
+      </script>
+
+    </div> {# /.col-md-10 #}
+
+    {# relocate #revision-toc #}
+    <div class="col-md-2 visible-lg visible-md">
+      <div id="revision-toc" class="revision-toc"></div>
+    </div> {# /.col-md-2 #}
+
+  </div>
+{% endblock %}
 
 {% block content_main_after %}
   {% if not page.isDeleted() %}

lib/views/crowi-plus/page_list.html

@@ -14,6 +14,27 @@
 {% endblock %} {# /content_head #}
 
 
+{% block content_main %}
+  <div class="row">
+
+    <div class="col-md-10">
+
+      {% parent %}
+
+      {# force remove #revision-toc from #content_main of parent #}
+      <script>
+        $('#revision-toc').remove();
+      </script>
+
+    </div> {# /.col-md-10 #}
+
+    {# relocate #revision-toc #}
+    <div class="col-md-2 visible-lg visible-md">
+      <div id="revision-toc" class="revision-toc"></div>
+    </div> {# /.col-md-2 #}
+
+  </div>
+{% endblock %}
 
 {% block content_main_after %}
   {% if not page.isDeleted() %}

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

@@ -1,6 +1,6 @@
 <div class="page-comments-row row">
 
-  <div class="page-comments col-md-12">
+  <div class="page-comments col-md-7">
 
     <h4><i class="fa fa-comments"></i> Comments</h4>
 
@@ -18,16 +18,24 @@
 
     <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">
+            <div class="pull-right">
+              <span class="text-danger" id="comment-form-message"></span>
+              <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 class="clearfix"></div>
           </div>
         </div>
       </div>

lib/views/page.html

@@ -210,7 +210,7 @@
     {# formatted text #}
     <div class="tab-pane {% if not req.body.pageForm %}active{% endif %}" id="revision-body">
       <div class="revision-toc" id="revision-toc">
-        <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head collapsed">{{ t('Table of Contents') }}</a>
+        <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head">{{ t('Table of Contents') }}</a>
 
       </div>
       <div class="wiki" id="revision-body-content"></div>

resource/css/_comment_crowi-plus.scss

@@ -1,29 +1,102 @@
 .crowi-plus.main-container  {
 
   .page-comments-row {
+    border-top: 3px solid #f0f0f0;
     margin: 30px 16px;
   }
 
   .page-comments {
     border-top: 3px solid #f0f0f0;
+    h4 {
+      margin-bottom: 1em;
+    }
   }
 
   .page-comment {
     position: relative;
+
     // ユーザーアイコン
-    .picture.picture-rounded{
+    .picture.picture-rounded {
       position: absolute;
       top: 1em;
+      width: 3em;
+      height: 3em;
     }
 
     // コメントセクション
-    .page-comment-main{
-      margin-left: 2.5em;
+    .page-comment-main {
+      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;
+    margin-top: 2em;
+    // ユーザーアイコン
+    .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/css/_wiki_crowi-plus.scss

@@ -0,0 +1,19 @@
+.crowi-plus .revision-toc {
+
+  // reset official styles
+  float: none;
+  border: none;
+  border-radius: 0;
+  max-width: none;
+  overflow: auto;
+
+  .revision-toc-content {
+    margin-top: 50px;
+    background: none;
+  }
+
+  // affix
+  &.affix {
+    top: 30px;
+  }
+}

resource/css/crowi.scss

@@ -29,6 +29,7 @@ $bootstrap-sass-asset-helper: true;
 @import 'search';
 @import 'user';
 @import 'wiki';
+@import 'wiki_crowi-plus';
 
 
 ul {

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');
 
@@ -34,7 +34,7 @@ Crowi.revisionToc = function(contentId, tocId) {
   var $content = $(contentId || '#revision-body-content');
   var $tocId = $(tocId || '#revision-toc');
 
-  var $tocContent = $('<div id="revision-toc-content" class="revision-toc-content collapse"></div>');
+  var $tocContent = $('<div id="revision-toc-content" class="revision-toc-content collapse in"></div>');
   $tocId.append($tocContent);
 
   $('h1', $content).each(function(idx, elm) {
@@ -74,6 +74,14 @@ Crowi.revisionToc = function(contentId, tocId) {
       });
     });
   });
+
+  // set affix when crowi-plus
+  var config = crowi.getConfig();
+  if ('crowi-plus' === config.layoutType) {
+    $tocId.affix({
+      offset: 100
+    });
+  }
 };
 
 
@@ -500,7 +508,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">')