Merge branch 'feat/custom-layout' into imprv/update-comment-form

lib/routes/page.js

@@ -113,7 +113,7 @@ module.exports = function(crowi, app) {
       };
       renderVars.pager = generatePager(pagerOptions);
       renderVars.pages = pageList;
-      res.render('page_list', renderVars);
+      res.render('customlayout-selector/page_list', renderVars);
     }).catch(function(err) {
       debug('Error on rendering pageListShow', err);
     });
@@ -152,7 +152,7 @@ module.exports = function(crowi, app) {
 
       renderVars.pager = generatePager(pagerOptions);
       renderVars.pages = pageList;
-      res.render('page_list', renderVars);
+      res.render('customlayout-selector/page_list', renderVars);
     }).catch(function(err) {
       debug('Error on rendering deletedPageListShow', err);
     });
@@ -178,7 +178,7 @@ module.exports = function(crowi, app) {
       return Page.findListByPageIds(ids);
     }).then(function(pages) {
 
-      res.render('page_list', {
+      res.render('customlayout-selector/page_list', {
         path: '/',
         pages: pages,
         pager: generatePager({offset: 0, limit: 50})

lib/views/crowi-plus/base/page_list_nosidebar.html

@@ -0,0 +1,42 @@
+{% extends '../../page_list.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

@@ -1,4 +1,4 @@
-{% extends 'layout/page_nosidebar.html' %}
+{% extends 'base/page_nosidebar.html' %}
 
 
 {% block content_head %}
@@ -6,63 +6,35 @@
   {% 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>
+  {% include 'widget/header.html' %}
 
-      <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 %}
+  {% block content_head_after %}
+  {% endblock %}
 
-        {% if page %}
-          {% include 'widget/authors.html' %}
-        {% endif %}
+{% endblock %} {# /content_head #}
 
-      </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_main %}
+  <div class="row">
 
-  {% block content_head_after %}
-  {% endblock %}
+    <div class="col-md-10">
 
-{% endblock %} {# /content_head #}
+      {% 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

@@ -0,0 +1,43 @@
+{% extends 'base/page_list_nosidebar.html' %}
+
+
+{% block content_head %}
+
+  {% block content_head_before %}
+  {% endblock %}
+
+  {% include 'widget/header.html' %}
+
+  {% block content_head_after %}
+  {% endblock %}
+
+{% 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() %}
+    {% include 'widget/comments.html' %}
+  {% endif %}
+{% endblock %}

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

@@ -1,24 +0,0 @@
-<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

@@ -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>
 

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

@@ -0,0 +1,71 @@
+<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>
+
+      <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>
+      {% 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>

lib/views/customlayout-selector/page_list.html

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

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,6 +1,7 @@
 .crowi-plus.main-container  {
 
   .page-comments-row {
+    border-top: 3px solid #f0f0f0;
     margin: 30px 16px;
   }
 

resource/css/_wiki_crowi-plus.scss

@@ -0,0 +1,17 @@
+.crowi-plus .revision-toc {
+
+  /*
+   * TODO スタイル調整
+   */
+
+  // reset official styles
+  float: none;
+  border: none;
+  border-radius: 0;
+  max-width: none;
+  overflow: auto;
+
+  .revision-toc-content {
+    background: #ffcccc;  // TODO スタイル調整
+  }
+}

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

@@ -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) {