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

Feat/custom layout

lib/form/admin/customlayout.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var form = require('express-form')
+  , field = form.field
+  ;
+
+module.exports = form(
+  field('settingForm[customize:layout]')
+);

lib/form/index.js

@@ -19,6 +19,7 @@ module.exports = {
     plugin: require('./admin/plugin'),
     markdown: require('./admin/markdown'),
     customcss: require('./admin/customcss'),
+    customlayout: require('./admin/customlayout'),
     userInvite: require('./admin/userInvite'),
     slackSetting: require('./admin/slackSetting'),
   },

lib/models/config.js

@@ -46,6 +46,7 @@ module.exports = function(crowi) {
       'plugin:isEnabledPlugins' : true,
 
       'customize:css' : '',
+      'customize:layout' : 'crowi',
     };
   }
 

lib/routes/index.js

@@ -52,8 +52,9 @@ module.exports = function(crowi, app) {
   app.post('/admin/markdown/lineBreaksSetting', loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.markdown, admin.markdown.lineBreaksSetting);
 
   // markdown admin
-  app.get('/admin/customize'            , loginRequired(crowi, app) , middleware.adminRequired() , admin.customize.index);
-  app.post('/_api/admin/customize/css'  , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customcss, admin.api.customizeSetting);
+  app.get('/admin/customize'              , loginRequired(crowi, app) , middleware.adminRequired() , admin.customize.index);
+  app.post('/_api/admin/customize/css'    , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customcss, admin.api.customizeSetting);
+  app.post('/_api/admin/customize/layout' , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customlayout, admin.api.customizeSetting);
 
   // search admin
   app.get('/admin/search'              , loginRequired(crowi, app) , middleware.adminRequired() , admin.search.index);

lib/routes/page.js

@@ -243,7 +243,7 @@ module.exports = function(crowi, app) {
     }).then(function() {
       return interceptorManager.process('beforeRenderPage', req, res, renderVars);
     }).then(function() {
-      var defaultPageTeamplate = 'page';
+      var defaultPageTeamplate = 'customlayout-selector/page';
       if (userData) {
         defaultPageTeamplate = 'user_page';
       }

lib/util/swigFunctions.js

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

lib/views/admin/customize.html

@@ -45,6 +45,40 @@
     </div>
     <div class="col-md-9">
 
+      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="cutomlayoutSettingForm" role="form">
+      <fieldset>
+        <legend>レイアウト</legend>
+
+        <div class="form-group">
+          <div class="col-xs-6">
+            <h4>
+              <input type="radio" name="settingForm[customize:layout]" value="crowi"
+                  {% if !settingForm['customize:layout'] || 'crowi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
+              Traditional Crowi Layout
+            </h4>
+            <a href="http://placehold.it"><img src="http://placehold.it/350x150"></a>
+          </div>
+          <div class="col-xs-6">
+            <h4>
+              <input type="radio" name="settingForm[customize:layout]" value="crowi-plus"
+                  {% if 'crowi-plus' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
+              crowi-plus Original Layout
+            </h4>
+            <a href="http://placehold.it"><img src="http://placehold.it/350x150"></a>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <div class="col-xs-offset-5 col-xs-6">
+            <input type="hidden" name="_csrf" value="{{ csrf() }}">
+            <button type="submit" class="btn btn-primary">更新</button>
+          </div>
+        </div>
+
+      </fieldset>
+      </form>
+
+
       <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="cutomcssSettingForm" role="form">
       <fieldset>
         <legend>カスタムCSS</legend>
@@ -80,7 +114,7 @@
   </div>
 
   <script>
-    $('#cutomcssSettingForm').each(function() {
+    $('#cutomcssSettingForm, #cutomlayoutSettingForm').each(function() {
       $(this).submit(function()
       {
         function showMessage(formId, msg, status) {

lib/views/crowi-plus/layout/page_nosidebar.html

@@ -0,0 +1,42 @@
+{% extends '../../page.html' %}
+
+
+{% block layout_sidebar %}
+{% endblock %}
+
+
+{% block layout_main %}
+<div id="main" class="main col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+  {% if page && page.grant != 1 %}
+  <p class="page-grant">
+    <i class="fa fa-lock"></i> {{ consts.pageGrants[page.grant] }} ({{ t('Browsing of this page is restricted') }})
+  </p>
+  {% endif %}
+  {% if page && page.grant == 2 %}
+  <p class="alert alert-info">
+    {{ t('Shareable Link') }}
+    <input type="text" class="copy-link form-control" value="{{ baseUrl }}/{{ page._id.toString() }}" readonly>
+  </p>
+  {% endif %}
+  <article>
+    {% block content_head %}
+      {% parent %}
+    {% endblock %}
+
+    {% block content_main_before %}
+    {% endblock %}
+
+    {% block content_main %}
+      {% parent %}
+    {% endblock content_main %}
+
+    {% block content_main_after %}
+    {% endblock %}
+
+    {% block content_footer %}
+      {% parent %}
+    {% endblock %}
+  </article>
+</div>
+
+{% endblock %} {# layout_main #}

lib/views/crowi-plus/page.html

@@ -0,0 +1,71 @@
+{% extends 'layout/page_nosidebar.html' %}
+
+
+{% block content_head %}
+
+  {% block content_head_before %}
+  {% endblock %}
+
+  <div class="header-wrap">
+    {% if not page.isDeleted() %}
+    <header id="page-header">
+      <p class="stopper"><a href="#" data-affix-disable="#page-header"><i class="fa fa-chevron-up"></i></a></p>
+
+      <div class="flex-title-line">
+        <div>
+          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <div id="revision-url" class="url-line"></div>
+        </div>
+        {% if page %}
+        <div class="flex-item-action">
+          <span id="bookmark-button">
+            <p class="bookmark-link">
+              <i class="fa fa-star-o"></i>
+            </p>
+          </span>
+        </div>
+        <div class="flex-item-action visible-xs visible-sm">
+          <button
+              data-csrftoken="{{ csrf() }}"
+              data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
+              class="like-button btn btn-default btn-sm {% if page.isLiked(user) %}active{% endif %}"
+          ><i class="fa fa-thumbs-o-up"></i></button>
+        </div>
+        {% endif %}
+
+        {% if page %}
+          {% include 'widget/authors.html' %}
+        {% endif %}
+
+      </div>
+
+    </header>
+    {% else %}
+    {# trash/* #}
+    <header id="page-header">
+      <div class="flex-title-line">
+        <h1 class="title flex-item-title"></h1>
+        <div class="flex-item-action">
+          <span id="bookmark-button">
+            <p class="bookmark-link">
+              <i class="fa fa-star-o"></i>
+            </a>
+          </span>
+        </div>
+      </div>
+    </header>
+    {% endif %}
+  </div>
+
+  {% block content_head_after %}
+  {% endblock %}
+
+{% endblock %} {# /content_head #}
+
+
+
+{% block content_main_after %}
+  {% if not page.isDeleted() %}
+    {% include 'widget/comments.html' %}
+  {% endif %}
+{% endblock %}

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

@@ -0,0 +1,24 @@
+<ul class="authors visible-md visible-lg">
+  <li>
+    <div class="creator-picture">
+      <a href="{{ userPageRoot(page.creator) }}">
+        <img src="{{ page.creator|default(author)|picture }}" class="picture picture-rounded"><br>
+      </a>
+    </div>
+    <div class="">
+      <div>Created by <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a></div>
+      <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
+    </div>
+  </li>
+  <li>
+    <div class="creator-picture">
+      <a href="{{ userPageRoot(page.lastUpdateUser) }}">
+        <img src="{{ page.lastUpdateUser|default(author)|picture }}" class="picture picture-rounded"><br>
+      </a>
+    </div>
+    <div class="">
+      <div>Updated by <a href="{{ userPageRoot(page.lastUpdateUser) }}">{{ page.lastUpdateUser.name|default(author.name) }}</a></div>
+      <div class="text-muted">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
+    </div>
+  </li>
+</ul>

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

@@ -0,0 +1,38 @@
+<div class="page-comments-row row">
+
+  <div class="page-comments col-md-12">
+
+    <h4><i class="fa fa-comments"></i> Comments</h4>
+
+    <div class="page-comments-list" id="page-comments-list">
+      <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
+
+      <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="fa fa-angle-double-up"></i> Comments for Newer Revision <i class="fa fa-angle-double-up"></i></a>
+
+      <div class="page-comments-list-current" id="page-comments-list-current"></div>
+
+      <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="fa fa-angle-double-down"></i> Comments for Older Revision <i class="fa fa-angle-double-down"></i></a>
+
+      <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
+    </div>
+
+    <form class="form page-comment-form" id="page-comment-form" onsubmit="return false;">
+      <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="_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>
+        </div>
+      </div>
+    </form>
+
+  </div>
+
+</div>

lib/views/customlayout-selector/page.html

@@ -0,0 +1,5 @@
+{% if 'crowi-plus' === layoutType() %}
+  {% include '../crowi-plus/page.html' %}
+{% else %}
+  {% include '../page.html' %}
+{% endif %}

lib/views/layout/2column.html

@@ -19,8 +19,9 @@
   <div id="footer-container" class="footer">
     <footer class="">
       <p>
-      <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-question-circle"></i> {{ t('Help') }}</a>
-      &copy; {{ now|date('Y') }} crowi-plus {{ crowiVersion() }} <img src="/logo/100x11_g.png" alt="powered by Crowi"> </p>
+        <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-question-circle"></i> {{ t('Help') }}</a>
+        <a href="https://github.com/weseek/crowi-plus">crowi-plus</a> {{ crowiVersion() }}
+      </p>
     </footer>
   </div>
 </aside>

lib/views/layout/layout.html

@@ -55,7 +55,7 @@
 
 {% block html_body %}
 <body
-  class="crowi main-container {% block html_base_css %}{% endblock %}"
+  class="crowi main-container {% block html_base_css %}{% endblock %} {% if 'crowi-plus' === layoutType() %}crowi-plus{% endif %}"
   data-me="{{ user._id.toString() }}"
   data-plugin-enabled="{{ isEnabledPlugins() }}"
  {% block html_base_attr %}{% endblock %}

lib/views/layout/single.html

@@ -20,8 +20,9 @@
 <div id="footer-container" class="footer">
   <footer class="">
     <p>
-    <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-question-circle"></i> {{ t('Help') }}</a>
-    &copy; {{ now|date('Y') }} crowi-plus {{ crowiVersion() }} <img src="/logo/100x11_g.png" alt="powered by Crowi"> </p>
+      <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-question-circle"></i> {{ t('Help') }}</a>
+      <a href="https://github.com/weseek/crowi-plus">crowi-plus</a> {{ crowiVersion() }}
+    </p>
   </footer>
 </div>
 {% endblock %}

resource/css/_comment_crowi-plus.scss

@@ -0,0 +1,29 @@
+.crowi-plus.main-container  {
+
+  .page-comments-row {
+    margin: 30px 16px;
+  }
+
+  .page-comments {
+    border-top: 3px solid #f0f0f0;
+  }
+
+  .page-comment {
+    position: relative;
+    // ユーザーアイコン
+    .picture.picture-rounded{
+      position: absolute;
+      top: 1em;
+    }
+
+    // コメントセクション
+    .page-comment-main{
+      margin-left: 2.5em;
+      margin-bottom: 1em;
+    }
+  }
+  // コメント入力フォーム
+  .comment-write{
+    margin-bottom: 1em;
+  }
+}

resource/css/_page_crowi-plus.scss

@@ -0,0 +1,36 @@
+.crowi-plus.main-container {
+  .flex-title-line {
+
+    // the container of h1
+    div:first-child {
+      margin-right: auto;
+    }
+
+    ul.authors {
+      margin: 0;
+
+      li {
+        display: flex;
+        list-style: none;
+        font-size: 12px;
+
+        .creator-picture {
+          width: 24px;
+          height: 24px;
+          margin-right: 10px;
+        }
+      }
+
+      li:first-child {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  // hide authors from affix
+  .main #page-header.affix {
+    .authors {
+      display: none !important;
+    }
+  }
+}

resource/css/crowi.scss

@@ -18,11 +18,13 @@ $bootstrap-sass-asset-helper: true;
 @import 'admin';
 @import 'attachments';
 @import 'comment';
+@import 'comment_crowi-plus';
 @import 'delete';
 @import 'form';
 @import 'layout';
 @import 'page_list';
 @import 'page';
+@import 'page_crowi-plus';
 @import 'portal';
 @import 'search';
 @import 'user';