Merge pull request #1334 from weseek/support/apply-bst4-HandsontableModal-remaster

HandsontableModal のUI調整:Support/apply bst4 handsontable modal remaster

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

@@ -401,12 +401,20 @@ export default class HandsontableModal extends React.PureComponent {
   renderExpandOrContractButton() {
     const iconClassName = this.state.isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen';
     return (
-      <button type="button" className="close mr-3" onClick={this.state.isWindowExpanded ? this.contractWindow : this.expandWindow}>
+      <button type="button" className="close" onClick={this.state.isWindowExpanded ? this.contractWindow : this.expandWindow}>
         <i className={iconClassName} style={{ fontSize: '0.8em' }} aria-hidden="true"></i>
       </button>
     );
   }
 
+  renderCloseButton() {
+    return (
+      <button type="button" className="close" onClick={this.cancel} aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    );
+  }
+
   render() {
     const dialogClassNames = ['handsontable-modal'];
     if (this.state.isWindowExpanded) {
@@ -415,16 +423,21 @@ export default class HandsontableModal extends React.PureComponent {
 
     const dialogClassName = dialogClassNames.join(' ');
 
+    const buttons = (
+      <span>
+        {/* change order because of `float: right` by '.close' class */}
+        {this.renderCloseButton()}
+        {this.renderExpandOrContractButton()}
+      </span>
+    );
+
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
-        <ModalHeader toggle={this.cancel}>
-          { this.renderExpandOrContractButton() }
-          Edit Table
-        </ModalHeader>
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="lg" className={dialogClassName}>
+        <ModalHeader toggle={this.cancel} close={buttons}>Edit Table</ModalHeader>
         <ModalBody className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar bg-light">
-            <Button className="m-r-20 data-import-button" onClick={this.toggleDataImportArea}>
-              Data Import<i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
+            <Button className="mr-4 data-import-button" onClick={this.toggleDataImportArea}>
+              <span className="mr-3">Data Import</span><i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
             </Button>
             <ButtonGroup>
               <Button onClick={() => { this.alignButtonHandler('l') }}><i className="ti-align-left"></i></Button>
@@ -432,7 +445,7 @@ export default class HandsontableModal extends React.PureComponent {
               <Button onClick={() => { this.alignButtonHandler('r') }}><i className="ti-align-right"></i></Button>
             </ButtonGroup>
             <Collapse isOpen={this.state.isDataImportAreaExpanded}>
-              <div> {/* This div is necessary for smoothing animations. (https://react-bootstrap.github.io/utilities/transitions/#transitions-collapse) */}
+              <div className="mt-4">
                 <MarkdownTableDataImportForm onCancel={this.toggleDataImportArea} onImport={this.importData} />
               </div>
             </Collapse>
@@ -452,13 +465,11 @@ export default class HandsontableModal extends React.PureComponent {
             />
           </div>
         </ModalBody>
-        <ModalFooter>
-          <div className="d-flex justify-content-between">
-            <Button color="danger" onClick={this.reset}>Reset</Button>
-            <div className="d-flex">
-              <Button color="secondary" onClick={this.cancel}>Cancel</Button>
-              <Button color="primary" onClick={this.save}>Done</Button>
-            </div>
+        <ModalFooter className="grw-modal-footer">
+          <Button color="danger" onClick={this.reset}>Reset</Button>
+          <div className="ml-auto">
+            <Button className="mr-2" color="secondary" onClick={this.cancel}>Cancel</Button>
+            <Button color="primary" onClick={this.save}>Done</Button>
           </div>
         </ModalFooter>
       </Modal>

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

@@ -50,13 +50,12 @@ export default class MarkdownTableDataImportForm extends React.Component {
 
   render() {
     return (
-      <form action="" className="data-import-form pt-5">
+      <form className="data-import-form">
         <div className="form-group">
           <label htmlFor="data-import-form-type-select">Select Data Format</label>
           <select
             id="data-import-form-type-select"
             className="form-control"
-            componentClass="select"
             placeholder="select"
             value={this.state.dataFormat}
             onChange={(e) => { return this.setState({ dataFormat: e.target.value }) }}
@@ -70,9 +69,9 @@ export default class MarkdownTableDataImportForm extends React.Component {
           <label htmlFor="data-import-form-type-textarea">Import Data</label>
           <textarea
             id="data-import-form-type-textarea"
-            componentClass="textarea"
+            className="form-control"
             placeholder="Paste table data"
-            style={{ height: 200 }}
+            rows="8"
             onChange={(e) => { return this.setState({ data: e.target.value }) }}
           />
         </div>
@@ -81,15 +80,15 @@ export default class MarkdownTableDataImportForm extends React.Component {
             <label htmlFor="data-import-form-type-textarea-alert">Parse Error</label>
             <textarea
               id="data-import-form-type-textarea-alert"
-              componentClass="textarea"
-              style={{ height: 100 }}
+              className="form-control"
+              rows="4"
               value={this.state.parserErrorMessage || ''}
               readOnly
             />
           </div>
         </Collapse>
         <div className="d-flex justify-content-end">
-          <Button color="secondary" onClick={this.props.onCancel}>Cancel</Button>
+          <Button color="secondary mr-2" onClick={this.props.onCancel}>Cancel</Button>
           <Button color="primary" onClick={this.importButtonHandler}>Import</Button>
         </div>
       </form>

src/client/styles/scss/_handsontable.scss

@@ -12,6 +12,7 @@
 .handsontable-modal.handsontable-modal-expanded {
   // full-screen modal
   width: 97%;
+  max-width: unset;
   height: 95%;
   .modal-content {
     height: 95%;