Merge branch 'imprv/change-modal-layout' into implement-layout-in-modal

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

@@ -180,40 +180,29 @@ export default class GridEditModal extends React.PureComponent {
 }
 
 function GridDivisionMenu() {
+  const gridDivisions = geu.mappingAllGridDivisionPatterns;
   return (
     <div className="container">
       <div className="row">
-        {/* TODO: add other grid patterns by GW-3189 */}
-        <div className="col-md-4 text-center">
-          <h6 className="dropdown-header">2分割</h6>
-          <a className="dropdown-item" href="#">
-            <div className="row">
-              <span className="bg-info col-6 border">6</span>
-              <span className="bg-info col-6 border">6</span>
-            </div>
-          </a>
-        </div>
-        <div className="col-md-4 text-center">
-          <h6 className="dropdown-header">3分割</h6>
-          <a className="dropdown-item" href="#">
-            <div className="row">
-              <span className="bg-info col-4 border">4</span>
-              <span className="bg-info col-4 border">4</span>
-              <span className="bg-info col-4 border">4</span>
-            </div>
-          </a>
-        </div>
-        <div className="col-md-4 text-center">
-          <h6 className="dropdown-header">4分割</h6>
-          <a className="dropdown-item" href="#">
-            <div className="row">
-              <span className="bg-info col-3 border">3</span>
-              <span className="bg-info col-3 border">3</span>
-              <span className="bg-info col-3 border">3</span>
-              <span className="bg-info col-3 border">3</span>
+        {gridDivisions.map((gridDivion, i) => {
+          return (
+            <div className="col-md-4 text-center">
+              <h6 className="dropdown-header">{i + 2}分割</h6>
+              {gridDivion.map((gridOneDivision) => {
+                return (
+                  <a className="dropdown-item" href="#">
+                    <div className="row">
+                      {gridOneDivision.map((gtd) => {
+                        const className = `bg-info col-${gtd} border`;
+                        return <span className={className}>{gtd}</span>;
+                      })}
+                    </div>
+                  </a>
+                );
+              })}
             </div>
-          </a>
-        </div>
+          );
+        })}
       </div>
     </div>
   );

src/client/js/components/PageEditor/GridEditorUtil.js

@@ -7,6 +7,17 @@ class GridEditorUtil {
     // https://regex101.com/r/7BN2fR/11
     this.lineBeginPartOfGridRE = /^:::(\s.*)editable-row$/;
     this.lineEndPartOfGridRE = /^:::$/;
+    this.mappingAllGridDivisionPatterns = [
+      [
+        [2, 10], [4, 8], [6, 6], [8, 4], [10, 2],
+      ],
+      [
+        [2, 5, 5], [5, 2, 5], [5, 5, 2], [4, 4, 4], [3, 3, 6], [3, 6, 3], [6, 3, 3],
+      ],
+      [
+        [2, 2, 4, 4], [4, 4, 2, 2], [2, 4, 2, 4], [4, 2, 4, 2], [3, 3, 3, 3], [2, 2, 2, 6], [6, 2, 2, 2],
+      ],
+    ];
     this.isInGridBlock = this.isInGridBlock.bind(this);
     this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);
   }

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

@@ -327,6 +327,7 @@ body.on-edit {
   }
 
   .grid-division-menu {
-    width: 600px;
+    //[TODO: responsive by gw-3244]
+    width: 1000px;
   }
 }