Merge pull request #2545 from weseek/imprv/change-modal-layout

Imprv/change modal layout

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -57,61 +56,121 @@ export default class GridEditModal extends React.PureComponent {
     this.cancel();
   }
 
-  showBgCols() {
-    const cols = [];
-    for (let i = 0; i < 12; i++) {
-      // [bg-light:TODO support dark mode by GW-3037]
-      cols.push(<div className="bg-light grid-bg-col col-1"></div>);
-    }
-    return cols;
-  }
-
-  showEditableCols() {
-    const cols = [];
-    for (let i = 0; i < 12; i++) {
-      // [bg-light:TODO support dark mode by GW-3037]
-      cols.push(<div className="bg-dark grid-bg-col col-1"></div>);
-    }
-    return cols;
-  }
 
   render() {
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl">
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className="grw-grid-edit-modal">
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
-          Edit Grid
+          Create Bootstrap 4 Grid
         </ModalHeader>
         <ModalBody>
           <div className="container">
             <div className="row">
-              <div className="col-3">
-                <h5>Phone</h5>
-                <div className="device-container"></div>
-                <h5>Tablet</h5>
-                <div className="device-container"></div>
-                <h5>Desktop</h5>
-                <div className="device-container"></div>
-                <h5>Large Desktop</h5>
-                <div className="device-container"></div>
-              </div>
-              <div className="col-9">
-                <div className="row h-100">
-                  {this.showBgCols()}
+              <div className="col-4">
+                <div className="mr-3 d-inline">
+                  <label htmlFor="gridPattern">Grid Pattern :</label>
+                </div>
+
+                <div className="dropdown d-inline">
+                  <button
+                    className="btn btn-secondary dropdown-toggle"
+                    type="button"
+                    id="dropdownMenuButton"
+                    data-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                  >
+                    Grid Pattern
+                  </button>
+                  <div className="dropdown-menu grid-division-menu" aria-labelledby="dropdownMenuButton">
+                    <GridDivisionMenu />
+                  </div>
                 </div>
-                <div className="row w-100 h-100 position-absolute grid-editable-row">
-                  {/* [Just an example to check if bg-cols and editable-cols fit] */}
-                  <div className="bg-dark grid-editable-col col-3"></div>
-                  <div className="bg-dark grid-editable-col col-5"></div>
-                  <div className="bg-dark grid-editable-col col-4"></div>
+              </div>
+              <div className="col-4 text-right pr-0">
+                <label className="pr-3">Break point by display size :</label>
+              </div>
+              <div className="col-4 text-left pl-0">
+                <div className="d-inline-block">
+                  <div className="custom-control custom-radio ">
+                    <div>
+                      <input
+                        type="radio"
+                        id="mobile"
+                        className="custom-control-input"
+                        name="disSize"
+                        value="mobile"
+                        checked
+                      />
+                      <label className="custom-control-label" htmlFor="mobile">
+                        <i className="pl-2 pr-1 icon-screen-smartphone "></i> Mobile
+                      </label>
+                    </div>
+                    <div>
+                      <input
+                        type="radio"
+                        id="tablet"
+                        className="custom-control-input"
+                        name="disSize"
+                        value="tablet"
+                      />
+                      <label className="custom-control-label" htmlFor="tablet">
+                        <i className="pl-2 pr-1 icon-screen-tablet"></i> Tablet
+                      </label>
+                    </div>
+                    <div>
+                      <input
+                        type="radio"
+                        id="desktop"
+                        className="custom-control-input"
+                        name="disSize"
+                        value="desktop"
+                      />
+                      <label className="custom-control-label" htmlFor="desktop">
+                        <i className="pl-2 pr-1 icon-screen-desktop"></i> Desktop
+                      </label>
+                    </div>
+                    <div>
+                      <input
+                        type="radio"
+                        id="none"
+                        className="custom-control-input"
+                        name="disSize"
+                        value="none"
+                      />
+                      <label className="custom-control-label pl-2" htmlFor="none">None</label>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
+            <div className="row">
+              <h1 className="pl-3 w-100">Preview</h1>
+              <div className="col-6">
+                <label className="d-block"><i className="pr-2 icon-screen-desktop"></i>Desktop</label>
+                <div className="desktop-preview border d-block"></div>
+              </div>
+              <div className="col-3">
+                <label className="d-block"><i className="pr-2 icon-screen-tablet"></i>Tablet</label>
+                <div className="tablet-preview border d-block"></div>
+              </div>
+              <div className="col-3">
+                <label className="d-block"><i className="pr-2 icon-screen-smartphone"></i>Mobile</label>
+                <div className="mobile-preview border d-block"></div>
+              </div>
+            </div>
           </div>
+
+
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
           <div className="ml-auto">
-            <button type="button" className="mr-2 btn btn-secondary" onClick={this.cancel}>Cancel</button>
-            <button type="button" className="btn btn-primary" onClick={this.pasteCodedGrid}>Done</button>
+            <button type="button" className="mr-2 btn btn-secondary" onClick={this.cancel}>
+              Cancel
+            </button>
+            <button type="button" className="btn btn-primary" onClick={this.pasteCodedGrid}>
+              Done
+            </button>
           </div>
         </ModalFooter>
       </Modal>
@@ -120,6 +179,35 @@ export default class GridEditModal extends React.PureComponent {
 
 }
 
+function GridDivisionMenu() {
+  const gridDivisions = geu.mappingAllGridDivisionPatterns;
+  return (
+    <div className="container">
+      <div className="row">
+        {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>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 GridEditModal.propTypes = {
   onSave: PropTypes.func,
 };

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

@@ -310,22 +310,22 @@ body.on-edit {
 /*
  Grid Edit Modal
 */
-.device-container {
-  height: 135px;
-}
 
-// [border-color:TODO support dark mode by GW-3037]
-.grid-bg-col {
-  border-right: 5px solid white;
-  border-left: 5px solid white;
-}
+.grw-grid-edit-modal {
+  .desktop-preview {
+    height: 200px;
+  }
 
-.grid-editable-row {
-  top: 0;
-}
+  .tablet-preview {
+    height: 200px;
+  }
+
+  .mobile-preview {
+    height: 200px;
+  }
 
-.grid-editable-col {
-  border-right: 5px solid white;
-  border-left: 5px solid white;
-  opacity: 0.5;
+  .grid-division-menu {
+    //[TODO: responsive by gw-3244]
+    width: 1000px;
+  }
 }