Merge branch 'master' into feat/edit-table-with-handsontable

# Conflicts:
#	src/client/styles/scss/_on-edit.scss

CHANGES.md

@@ -1,8 +1,14 @@
 CHANGES
 ========
 
-## 3.2.3-RC
+## 3.2.4-RC
 
+* 
+
+## 3.2.3
+
+* Feature: Kibela like layout
+* Improvement: Custom newpage separator for presentation view
 * Support: Shrink image size for themes which recently added
 
 ## 3.2.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.2.3-RC",
+  "version": "3.2.4-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",

resource/locales/en-US/translation.json

@@ -428,9 +428,10 @@
     "presentation_setting_desc": "You can change presentation settings.",
     "Page break setting": "Page break Setting",
     "Preset one separator": "Preset 1",
-    "Preset one separator desc": "Blank line 3 lines",
+    "Preset one separator desc": "3 Blank lines",
     "Preset two separator": "Preset 2",
-    "Preset two separator desc": "Markdown horizontal rule",
+    "Preset two separator desc": "5 Hyphens",
+    "Preset two separator value": "-----",
     "Custom separator": "Custom",
     "Custom separator desc": "Any character",
     "XSS_setting": "Prevent XSS(Cross Site Scripting) Setting",

resource/locales/ja/translation.json

@@ -445,9 +445,10 @@
     "presentation_setting_desc": "プレゼンテーションの設定を変更できます。",
     "Page break setting": "改頁を設定する",
     "Preset one separator": "プリセット 1",
-    "Preset one separator desc": "空行を3行で改頁します",
+    "Preset one separator desc": "連続した空行3行で改頁します",
     "Preset two separator": "プリセット 2",
-    "Preset two separator desc": "Markdown の区切り線で改頁します",
+    "Preset two separator desc": "連続したハイフン5つで改頁します",
+    "Preset two separator value": "-----",
     "Custom separator": "カスタム",
     "Custom separator desc": "任意の文字で改頁します",
     "XSS_setting": "XSS(Cross Site Scripting)対策設定",

src/client/styles/scss/_layout_kibela.scss

@@ -1,4 +1,4 @@
-.kibela {
+body.kibela {
   .icon-link,
   .CodeMirror-hint-active,
   .nav-main-left-tab,
@@ -144,19 +144,47 @@
     border-top: solid 0.3em #5584E1 !important;
     border: solid 1.2px #D8D8D8;
   }
-  .tab-content {
-    padding: 1em;
-  }
-  .tab-pane {
-    .page-editor-editor-container {
-      margin: 0px;
-      border: none !important;
+  &.on-edit {
+    $header-plus-footer: 42px                     // .nav height
+                        + 5.5px                   // .kibela-block border-top
+                        + 15px                    // .tab-content padding-top
+                        + 1px                     // .page-editor-footer border-top
+                        + 60px;                   // .page-editor-footer min-height
+
+    @include expand-editor($header-plus-footer);
+
+    .main {
+      > .row.page-content {
+        > .col-xs-12 {
+          width: 100%;
+          padding: 0;
+        }
+      }
+    }
+
+    .tab-content {
+      padding-top: 15px;
+      #edit {
+        margin-left: 1em;
+        margin-right: 1em;
+      }
+    }
+    .tab-pane {
+      .page-editor-editor-container {
+        margin: 0px;
+        border: none !important;
+      }
+    }
+    .page-editor-preview-container {
+      background: white !important;
+      padding-right: 0px !important;
+      padding-left: 2em;
+    }
+    .page-editor-footer {
+      margin: 0;
+      padding: 13px;
+      min-height: 60px;
     }
-  }
-  .page-editor-preview-container {
-    background: white !important;
-    padding-right: 0px !important;
-    padding-left: 2em;
   }
 }
 .on-edit {

src/client/styles/scss/_mixins.scss

@@ -1,15 +1,76 @@
-@mixin variable-font-size($basesize) {
-  font-size: $basesize;
-  @media(max-width: $screen-lg) {
-    font-size: #{$basesize * 0.9};
-  }
-  @media(max-width: $screen-md) {
-    font-size: #{$basesize * 0.8};
-  }
-  @media(max-width: $screen-sm) {
-    font-size: #{$basesize * 0.7};
-  }
-  @media(max-width: $screen-xs) {
-    font-size: #{$basesize * 0.6};
-  }
-}
+@mixin variable-font-size($basesize) {
+  font-size: $basesize;
+  @media(max-width: $screen-lg) {
+    font-size: #{$basesize * 0.9};
+  }
+  @media(max-width: $screen-md) {
+    font-size: #{$basesize * 0.8};
+  }
+  @media(max-width: $screen-sm) {
+    font-size: #{$basesize * 0.7};
+  }
+  @media(max-width: $screen-xs) {
+    font-size: #{$basesize * 0.6};
+  }
+}
+
+@mixin expand-editor($header-plus-footer) {
+  $header-plus-footer: $header-plus-footer + 2px;   // add .main padding-top
+  $editor-margin: $header-plus-footer + 26px;       // add .btn-open-dropzone height
+
+  .main {
+    width: 100%;
+    height: 100vh;
+    margin-top: 0px !important;
+    padding-top: 2px;
+    padding-left: 0;
+    padding-right: 0;
+
+    &,
+    .content-main,
+    .tab-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      .tab-pane#edit, .tab-pane#hackmd {
+        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+        height: calc(100vh - #{$header-plus-footer});
+      }
+
+      #page-editor {
+        // right(preview)
+        &,
+        &>.row,
+        .page-editor-preview-container,
+        .page-editor-preview-body {
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+        }
+        // left(editor)
+        .page-editor-editor-container {
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+
+          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
+          .textarea-editor {
+            height: calc(100vh - #{$editor-margin});
+          }
+
+          @media (min-width: $screen-md) {
+            padding-right: 0;
+          }
+        }
+      }
+
+      #page-editor-with-hackmd {
+        &,
+        .hackmd-preinit, #iframe-hackmd-container > iframe {
+          width: 100vw;
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+        }
+      }
+    }
+  }
+}

src/client/styles/scss/_on-edit.scss

@@ -11,13 +11,22 @@ body:not(.on-edit) {
 body.on-edit {
 
   // calculate margin
-  $header-plus-footer: 2px                      // .main padding-top
-                      + 42px                    // .nav height
+  $header-plus-footer: 42px                     // .nav height
                       + 1px                     // .page-editor-footer border-top
-                      + 40px;                   // .page-editor-footer min-height
-  $editor-margin: $header-plus-footer
-                  + 26px                        // .btn-open-dropzone height
-                  + 30px;                       // .navbar-editor height
+                      + 40px !default;          // .page-editor-footer min-height
+
+  @include expand-editor($header-plus-footer);
+
+  // for growi layout
+  .main {
+    > .row {
+      margin: 0;
+      > .col-lg-10, > .col-md-9 {
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
 
   // hide unnecessary elements
   .navbar.navbar-static-top,
@@ -69,71 +78,6 @@ body.on-edit {
   .container-fluid {
     padding-bottom: 0;
   }
-  .main {
-    width: 100%;
-    height: 100vh;
-    margin-top: 0px !important;
-    padding-top: 2px;
-    padding-left: 0;
-    padding-right: 0;
-
-    // for growi layout
-    > .row {
-      margin: 0;
-      > .col-lg-10, > .col-md-9 {
-        width: 100%;
-        padding: 0;
-      }
-    }
-
-    &,
-    .content-main,
-    .tab-content {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-
-      .tab-pane#edit, .tab-pane#hackmd {
-        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-        height: calc(100vh - #{$header-plus-footer});
-      }
-
-      #page-editor {
-        // right(preview)
-        &,
-        &>.row,
-        .page-editor-preview-container,
-        .page-editor-preview-body {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-        }
-        // left(editor)
-        .page-editor-editor-container {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-
-          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
-          .textarea-editor {
-            height: calc(100vh - #{$editor-margin});
-          }
-
-          @media (min-width: $screen-md) {
-            padding-right: 0;
-          }
-        }
-      }
-
-      #page-editor-with-hackmd {
-        &,
-        .hackmd-preinit, #iframe-hackmd-container > iframe {
-          width: 100vw;
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-        }
-      }
-
-    }
-  }
 
   .row.bg-title {
     $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin

src/server/views/admin/customize.html

@@ -72,7 +72,7 @@
           </div>
         {% endif %}
         <div class="form-group">
-          <div class="col-xs-6">
+          <div class="col-sm-4">
             <h4>
               <div class="radio radio-primary">
                 <input type="radio" id="radioLayoutGrowi" name="settingForm[customize:layout]" value="growi" onclick="selectableTheme(event)"
@@ -85,56 +85,51 @@
             <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
               <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
             </a>
+            <h4>Simple and Clear</h4>
             <ul>
-              <li>Simple and Clear</li>
-              <ul>
-                <li>Show and post comments at the bottom of the page</li>
-                <li>Affix Table-of-contents</li>
-              </ul>
+              <li>Full screen layout and thin margins/paddings</li>
+              <li>Show and post comments at the bottom of the page</li>
+              <li>Affix Table-of-contents</li>
             </ul>
           </div>
-          <div class="col-xs-6">
+          <div class="col-sm-4">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi" onclick="selectableTheme(event)"
-                    {% if 'crowi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
-                <label for="radioLayoutCrowi">
-                  Crowi Classic Layout
+                <input type="radio" id="radioLayoutKibela" name="settingForm[customize:layout]" value="kibela" onclick="selectableTheme(event)"
+                    {% if 'kibela' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
+                <label   for="radioLayoutKibela">
+                  Kibela Like Layout
                 </label>
               </div>
             </h4>
-            <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
-              <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
+            <a href="/images/admin/customize/layout-kibela.gif" class="ss-container">
+              <img src="/images/admin/customize/layout-kibela-thumb.gif" width="240px">
             </a>
+            <h4>Easy Viewing Structure</h4>
             <ul>
-              <li>Functional</li>
-              <ul>
-                <li>Collapsible Sidebar</li>
-                <li>Show and post comments in Sidebar</li>
-                <li>Collapsible Table-of-contents</li>
-              </ul>
+              <li>Center aligned contents</li>
+              <li>Show and post comments at the bottom of the page</li>
+              <li>Affix Table-of-contents</li>
             </ul>
           </div>
-          <div class="col-xs-6">
+          <div class="col-sm-4">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioLayoutKibela" name="settingForm[customize:layout]" value="kibela" onclick="selectableTheme(event)"
-                    {% if 'kibela' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
-                <label   for="radioLayoutKibela">
-                  Kibela Like Layout
+                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi" onclick="selectableTheme(event)"
+                    {% if 'crowi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
+                <label for="radioLayoutCrowi">
+                  Crowi Classic Layout
                 </label>
               </div>
             </h4>
-            <a href="/images/admin/customize/layout-kibela.gif" class="ss-container">
-              <img src="/images/admin/customize/layout-kibela-thumb.gif" width="240px">
+            <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
+              <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
             </a>
+            <h4>Separated Functions</h4>
             <ul>
-              <li>Easy Viewing Structure</li>
-              <ul>
-                <li>Center aligned contents</li>
-                <li>Show and post comments at the bottom of the page</li>
-                <li>Affix Table-of-contents</li>
-              </ul>
+              <li>Collapsible Sidebar</li>
+              <li>Show and post comments in Sidebar</li>
+              <li>Collapsible Table-of-contents</li>
             </ul>
           </div>
         </div>

src/server/views/admin/markdown.html

@@ -117,6 +117,7 @@
                 <p class="font-weight-bold">{{ t('markdown_setting.Preset two separator') }}</p>
                 <div class="m-t-15">
                     {{ t('markdown_setting.Preset two separator desc') }}
+                    <input class="form-control" type="text" name="presetTwoSeparator" value="{{ t('markdown_setting.Preset two separator value') }}" readonly>
                 </div>
               </label>
           </div>

src/server/views/layout-kibela/base/layout.html

@@ -1,4 +1,6 @@
-{% extends '../../layout/layout.html' %} {% block layout_main %}
+{% extends '../../layout/layout.html' %}
+
+{% block layout_main %}
 <div class="container-fluid">
 
   <div class="row body m-0 p-0">
@@ -10,7 +12,14 @@
         </div>
       </div>
       <!-- /.bg-title -->
-      {% block content_main_before %} {% endblock %} {% block content_main %} {% endblock content_main %} {% block content_main_after%}
+
+      {% block content_main_before %}
+      {% endblock %}
+
+      {% block content_main %}
+      {% endblock content_main %}
+
+      {% block content_main_after%}
       {% endblock %}
     </div>
 

src/server/views/layout-kibela/page_list.html

@@ -36,7 +36,7 @@
 
 
   <div class="row page-list bg-white round-corner p-t-10 m-20 m-b-30 {% if isPortal %}m-t-30{% endif %}">
-    <div class="col-md-10 col-xs-12">
+    <div class="col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>
   </div>

src/server/views/layout-kibela/user_page.html

@@ -53,7 +53,7 @@
 
   {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
   <div class="row page-list m-t-30">
-    <div class="col-md-10">
+    <div class="col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>
   </div>

src/server/views/page_presentation.html

@@ -58,15 +58,25 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   <body>
     <div class="reveal">
       <div class="slides">
-        <section data-markdown data-separator="^\n\n\n">
-          <script type="text/template">
-{{ revision.body|presentation|safe }}
-
+        {% set pageBreakSeparator = pageBreakSeparator()|default(1) %}
+        {% set pageBreakCustomSeparator = pageBreakCustomSeparator()|default('') %}
 
+        {% if 1 === pageBreakSeparator %}
+          {% set dataSeparator = "^\n\n\n" %}
+        {% elseif 2 === pageBreakSeparator %}
+          {% set dataSeparator = "^-----$" %}
+        {% elseif 3 === pageBreakSeparator %}
+          {% set dataSeparator = "^" + pageBreakCustomSeparator + "$" %}
+        {% else %}
+          {% set dataSeparator = "^\n\n\n" %}
+        {% endif %}
 
-# おしまい
+        <section data-markdown data-separator={{dataSeparator}}>
+          <script type="text/template">
+{{ revision.body|presentation|safe }}
           </script>
         </section>
+        <section  data-markdown># おしまい</section>
       </div>
     </div>