Merge branch 'feat/3176-grid-edit-modal-for-master-merge' into imprv/gw4733-html-adjustment-for-gridedit

# Conflicts:
#	src/client/js/components/PageEditor/GridEditModal.jsx

resource/locales/en_US/translation.json

@@ -792,10 +792,11 @@
   },
   "grid_edit":{
     "create_bootstrap_4_grid":"Create Bootstrap 4 Grid",
-    "grid_pattern":"Grid Pattern:",
+    "grid_settings": "Grid Settings",
+    "grid_pattern":"Grid Pattern",
     "division":"Divisions",
     "smart_no":"Smartphone / No Break",
-    "break_point":"Break point by display size:"
+    "break_point":"Break point by display size"
   },
   "validation":{
     "aws_region": "For the region, enter the AWS region name. ex):us-east-1",

resource/locales/ja_JP/translation.json

@@ -785,10 +785,11 @@
   },
   "grid_edit":{
     "create_bootstrap_4_grid":"Bootstrap 4 グリッドを作成",
-    "grid_pattern":"グリッド　パターン：",
+    "grid_settings": "グリッド設定",
+    "grid_pattern":"グリッド　パターン",
     "division":"分割",
     "smart_no":"スマホ / 分割なし",
-    "break_point":"画面サイズより分割："
+    "break_point":"画面サイズより分割"
   },
   "validation":{
     "aws_region": "リージョンには、AWSリージョン名を入力してください。例: ap-northeast-1",

resource/locales/zh_CN/translation.json

@@ -797,10 +797,11 @@
 	},
   "grid_edit":{
     "create_bootstrap_4_grid":"创建Bootstrap 4网格",
-    "grid_pattern":"网格样式：",
+    "grid_settings": "网格设置",
+    "grid_pattern": "网格样式",
     "division":"分割",
     "smart_no":"手机/不分割",
-    "break_point":"按画面大小分割："
+    "break_point":"按画面大小分割"
   },
   "validation":{
     "aws_region": "关于地区，请输入AWS地区名，例如：ap-east-1",

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -22,18 +22,20 @@ class GridEditModal extends React.Component {
       colsRatios: [6, 6],
       responsiveSize: BootstrapGrid.ResponsiveSize.XS_SIZE,
       show: false,
-      gridHtml: '',
+      // use when re-edit grid
+      // gridHtml: '',
     };
 
     this.checkResposiveSize = this.checkResposiveSize.bind(this);
     this.checkColsRatios = this.checkColsRatios.bind(this);
-    this.init = this.init.bind(this);
+    // use when re-edit grid
+    // this.init = this.init.bind(this);
     this.show = this.show.bind(this);
     this.hide = this.hide.bind(this);
     this.cancel = this.cancel.bind(this);
     this.pasteCodedGrid = this.pasteCodedGrid.bind(this);
     this.renderSelectedGridPattern = this.renderSelectedGridPattern.bind(this);
-    this.renderSelectedBreakPoint = this.renderSelectedBreakPoint.bind(this);
+    this.renderBreakPointSetting = this.renderBreakPointSetting.bind(this);
   }
 
   async checkResposiveSize(rs) {
@@ -44,16 +46,15 @@ class GridEditModal extends React.Component {
     await this.setState({ colsRatios: cr });
   }
 
-  init(gridHtml) {
-    const initGridHtml = gridHtml;
-    this.setState({ gridHtml: initGridHtml }, function() {
-      // display gridHtml for re-editing
-      console.log(this.state.gridHtml);
-    });
-  }
+  // use when re-edit grid
+  // init(gridHtml) {
+  //   const initGridHtml = gridHtml;
+  //   this.setState({ gridHtml: initGridHtml });
+  // }
 
   show(gridHtml) {
-    this.init(gridHtml);
+    // use when re-edit grid
+    // this.init(gridHtml);
     this.setState({ show: true });
   }
 
@@ -82,15 +83,24 @@ class GridEditModal extends React.Component {
     return colsRatios.join(' - ');
   }
 
-  renderSelectedBreakPoint() {
+  renderBreakPointSetting() {
     const { t } = this.props;
     const output = Object.entries(resSizeObj).map((responsiveSizeForMap) => {
-      return (this.state.responsiveSize === responsiveSizeForMap[0]
-        && (
-        <span>
-          <i className={`pr-1 ${responsiveSizeForMap[1].iconClass}`}> {t(responsiveSizeForMap[1].displayText)}</i>
-        </span>
-        )
+      return (
+        <div className="custom-control custom-radio custom-control-inline">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id={responsiveSizeForMap[1].displayText}
+            value={responsiveSizeForMap[1].displayText}
+            checked={this.state.responsiveSize === responsiveSizeForMap[0]}
+            onChange={e => this.checkResposiveSize(responsiveSizeForMap[0])}
+          />
+          <label className="custom-control-label" htmlFor={responsiveSizeForMap[1].displayText}>
+            <i className={`pr-1 ${responsiveSizeForMap[1].iconClass}`} />
+            {t(responsiveSizeForMap[1].displayText)}
+          </label>
+        </div>
       );
     });
     return output;
@@ -126,18 +136,6 @@ class GridEditModal extends React.Component {
     );
   }
 
-  renderBreakPointMenu() {
-    const { t } = this.props;
-    const output = Object.entries(resSizeObj).map((responsiveSizeForMap) => {
-      return (
-        <button className="dropdown-item" type="button" onClick={() => { this.checkResposiveSize(responsiveSizeForMap[0]) }}>
-          <i className={`${responsiveSizeForMap[1].iconClass}`}></i> {t(responsiveSizeForMap[1].displayText)}
-        </button>
-      );
-    });
-    return output;
-  }
-
   renderPreview() {
 
     // TODO GW-3721 make objects and simplify all loops
@@ -180,7 +178,7 @@ class GridEditModal extends React.Component {
     const { t } = this.props;
     if (this.state.responsiveSize === BootstrapGrid.ResponsiveSize.MD_SIZE) {
       return (
-        <>
+        <div className="row">
           <div className="col-lg-6">
             <label className="d-block mt-2"><i className="pr-2 icon-screen-desktop"></i>{t('desktop')}</label>
             <div className="desktop-preview d-block">
@@ -199,12 +197,12 @@ class GridEditModal extends React.Component {
               {this.renderBreakPreview()}
             </div>
           </div>
-        </>
+        </div>
       );
     }
     if (this.state.responsiveSize === BootstrapGrid.ResponsiveSize.SM_SIZE) {
       return (
-        <>
+        <div className="row">
           <div className="col-lg-6">
             <label className="d-block mt-2"><i className="pr-2 icon-screen-desktop"></i>{t('desktop')}</label>
             <div className="desktop-preview d-block">
@@ -223,12 +221,12 @@ class GridEditModal extends React.Component {
               {this.renderBreakPreview()}
             </div>
           </div>
-        </>
+        </div>
       );
     }
     if (this.state.responsiveSize === BootstrapGrid.ResponsiveSize.XS_SIZE) {
       return (
-        <>
+        <div className="row">
           <div className="col-lg-6">
             <label className="d-block mt-2"><i className="pr-2 icon-screen-desktop"></i>{t('desktop')}</label>
             <div className="desktop-preview d-block">
@@ -247,7 +245,7 @@ class GridEditModal extends React.Component {
               {this.renderNoBreakPreview()}
             </div>
           </div>
-        </>
+        </div>
       );
     }
   }
@@ -285,49 +283,44 @@ class GridEditModal extends React.Component {
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           {t('grid_edit.create_bootstrap_4_grid')}
         </ModalHeader>
-        <ModalBody>
-          <div className="container">
-            <div className="row">
-              <div className="col-lg-6 mb-3">
-                <label htmlFor="gridPattern">{t('grid_edit.grid_pattern')}</label>
-                <button
-                  className="btn btn-outline-secondary dropdown-toggle btn-block"
-                  type="button"
-                  id="dropdownMenuButton"
-                  data-toggle="dropdown"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  {this.renderSelectedGridPattern()}
-                </button>
-                <div className="dropdown-menu grid-division-menu" aria-labelledby="dropdownMenuButton">
-                  {this.renderGridDivisionMenu()}
-                </div>
-              </div>
-              <div className="col-lg-6">
-                <div className="mr-3 d-inline">
-                  <label htmlFor="breakPoint">{t('grid_edit.break_point')}</label>
-                </div>
-                <div
-                  className="btn btn-outline-secondary btn-block dropdown-toggle"
-                  type="button"
-                  id="dropdownMenuButton"
-                  data-toggle="dropdown"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  {this.renderSelectedBreakPoint()}
+        <ModalBody className="container">
+          <div className="row">
+            <div className="col-12">
+              <h3 className="grw-modal-head">{t('grid_edit.grid_settings')}</h3>
+              <form className="form-group mb-0">
+                <div className="form-group row my-3">
+                  <label className="col-sm-3" htmlFor="gridPattern">
+                    {t('grid_edit.grid_pattern')}
+                  </label>
+                  <div className="col-sm-9">
+                    <button
+                      className="btn btn-outline-secondary dropdown-toggle"
+                      type="button"
+                      id="dropdownMenuButton"
+                      data-toggle="dropdown"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    >
+                      {this.renderSelectedGridPattern()}
+                    </button>
+                    <div className="dropdown-menu grid-division-menu" aria-labelledby="dropdownMenuButton">
+                      {this.renderGridDivisionMenu()}
+                    </div>
+                  </div>
                 </div>
-                <div className="dropdown-menu break-point-menu" aria-labelledby="dropdownMenuButton">
-                  {this.renderBreakPointMenu()}
+                <div className="form-group row">
+                  <label className="col-sm-3" htmlFor="breakPoint">
+                    {t('grid_edit.break_point')}
+                  </label>
+                  <div className="col-sm-9">
+                    {this.renderBreakPointSetting()}
+                  </div>
                 </div>
-              </div>
-            </div>
-            <div className="row">
-              <h1 className="pl-3 w-100">{t('preview')}</h1>
-              {this.renderPreview()}
+              </form>
             </div>
           </div>
+          <h3 className="grw-modal-head">{t('preview')}</h3>
+          {this.renderPreview()}
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
           <div className="ml-auto">

src/client/js/util/GrowiRenderer.js

@@ -2,6 +2,7 @@ import MarkdownIt from 'markdown-it';
 
 import Linker from './PreProcessor/Linker';
 import CsvToTable from './PreProcessor/CsvToTable';
+import EasyGrid from './PreProcessor/EasyGrid';
 import XssFilter from './PreProcessor/XssFilter';
 
 import EmojiConfigurer from './markdown-it/emoji';
@@ -37,6 +38,7 @@ export default class GrowiRenderer {
     }
     else {
       this.preProcessors = [
+        new EasyGrid(appContainer),
         new Linker(appContainer),
         new CsvToTable(appContainer),
         new XssFilter(appContainer),

src/client/js/util/PreProcessor/EasyGrid.js

@@ -0,0 +1,10 @@
+export default class EasyGrid {
+
+  process(markdown) {
+    // see: https://regex101.com/r/7NWvUU/2
+    return markdown.replace(/:::\s*editable-row[\r\n]((.|[\r\n])*?)[\r\n]:::/gm, (all, group) => {
+      return group;
+    });
+  }
+
+}

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

@@ -337,23 +337,23 @@ body.on-edit {
   .tablet-preview,
   .mobile-preview {
     .row {
-      height: 100%;
-      padding: 5px;
+      height: 140px;
+      margin: 0px;
     }
   }
   .desktop-preview {
-    height: 400px;
     .row {
       div {
+        padding: 0px;
         background-color: $info;
       }
     }
   }
 
   .tablet-preview {
-    height: 380px;
     .row {
       div {
+        padding: 0px;
         background-color: $purple;
       }
     }
@@ -361,9 +361,9 @@ body.on-edit {
 
   .mobile-preview {
     width: 75%;
-    height: 280px;
     .row {
       div {
+        padding: 0px;
         background-color: $pink;
       }
     }