Revert "image crop modalization"

This reverts commit e56aae754f05ae42742af49a3967b19256c9ae4b.

src/client/js/components/ProfileImageUploader.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap/es/Modal';
 import { withTranslation } from 'react-i18next';
 
 import ReactCrop from 'react-image-crop';
@@ -20,7 +19,6 @@ class ProfileImageUploader extends React.Component {
         unit: '%',
         width: 30,
         aspect: 1,
-        show: true,
       },
     };
 
@@ -31,7 +29,6 @@ class ProfileImageUploader extends React.Component {
     this.makeClientCrop = this.makeClientCrop.bind(this);
     this.getCroppedImg = this.getCroppedImg.bind(this);
     this.hanndleSubmit = this.handleSubmit.bind(this);
-    this.cancel = this.cancel.bind(this);
   }
 
   onSelectFile(e) {
@@ -40,7 +37,6 @@ class ProfileImageUploader extends React.Component {
       reader.addEventListener('load', () => this.setState({ src: reader.result }));
       reader.readAsDataURL(e.target.files[0]);
     }
-    this.show();
   }
 
   // If you setState the crop in here you should return false.
@@ -98,57 +94,29 @@ class ProfileImageUploader extends React.Component {
     // の処理を node で記述
   }
 
-  show() {
-    this.setState({ show: true });
-  }
-
-  hide() {
-    this.setState({ show: false });
-  }
-
-
-  cancel() {
-    this.hide();
-  }
-
   render() {
-    const { t } = this.props;
     const { crop, src } = this.state;
 
     return (
-      <div className="ProfileImageUploader">
-        <div className="form-group">
-          <label htmlFfor="" className="col-sm-4 control-label">
-            {t('Upload new image')}
-          </label>
-        </div>
+      <div className="App">
         <input type="file" onChange={this.onSelectFile} name="profileImage" accept="image/*" />
         {src
         && (
-          <Modal show={this.state.show} onHide={this.cancel}>
-            <Modal.Header closeButton>
-              <Modal.Title>Modal heading</Modal.Title>
-            </Modal.Header>
-            <Modal.Body className="my-5">
-              <ReactCrop
-                src={src}
-                crop={crop}
-                circularCrop
-                onImageLoaded={this.onImageLoaded}
-                onComplete={this.onCropComplete}
-                onChange={this.onCropChange}
-              />
-              <button
-                type="button"
-                onClick={this.handleSubmit}
-                className="my-3"
-              >
-              完了
-              </button>
-            </Modal.Body>
-            <Modal.Footer>
-            </Modal.Footer>
-          </Modal>
+        <div>
+          <ReactCrop
+            src={src}
+            crop={crop}
+            onImageLoaded={this.onImageLoaded}
+            onComplete={this.onCropComplete}
+            onChange={this.onCropChange}
+          />
+          <button
+            type="button"
+            onClick={this.handleSubmit}
+          >
+          完了
+          </button>
+        </div>
         )}
       </div>
     );
@@ -164,7 +132,6 @@ const ProfileImageFormWrapper = (props) => {
 };
 
 ProfileImageUploader.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 

src/server/views/me/index.html

@@ -137,8 +137,6 @@
         <img src="{{ user|gravatar }}" width="64">
       </div><!-- /.col-sm* -->
 
-    <!-- 削除ここから -->
-
       <div class="form-group col-md-4 col-sm-7">
         <h4>
           <div class="radio radio-primary">
@@ -165,24 +163,24 @@
             </form>
             </p>
           </div>
-        </div> <!-- /.form-group -->
+        </div><!-- /.form-group -->
 
         <div class="form-group">
-          <div id="profile-image-uploader"></div>
-          <!-- <label for="" class="col-sm-4 control-label">
+          <label for="" class="col-sm-4 control-label">
             {{ t('Upload new image') }}
           </label>
           <div class="col-sm-8">
             {% if fileUploadService.getIsUploadable() %}
             <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
               <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <div id="profile-image-uploader"></div>
               <div id="pictureUploadFormProgress" class="d-flex align-items-center">
               </div>
             </form>
             {% else %}
             * {{ t('page_me.form_help.profile_image1') }}<br>
             * {{ t('page_me.form_help.profile_image2') }}<br>
-            {% endif %} -->
+            {% endif %}
           </div>
         </div><!-- /.form-group -->
 
@@ -194,8 +192,6 @@
         </div>
       </div>
 
-      <!-- 削除ここまで -->
-
     </fieldset>
   </div><!-- /.form-box -->