Merge pull request #526 from weseek/feat/editor-component-comment-write

Feat/editor component comment write

resource/js/components/PageEditor/Editor.js

@@ -222,7 +222,7 @@ export default class Editor extends AbstractEditor {
     const isMobile = this.props.isMobile;
 
     return <React.Fragment>
-      <div style={flexContainer}>
+      <div style={flexContainer} className="dropzone-container">
         <Dropzone
             ref="dropzone"
             disableClick

resource/styles/scss/_on-edit.scss

@@ -183,117 +183,6 @@ body.on-edit {
       }
     }
 
-    .overlay {
-      // layout
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      // style
-      margin: 0 15px;
-    }
-    .overlay-content {
-      font-size: 2.5em;
-      padding: 0.5em;
-    }
-
-    @mixin overlay-processing-style() {
-      .overlay {
-        background: rgba(255,255,255,0.5);
-      }
-      .overlay-content {
-        padding: 0.3em;
-        background: rgba(200,200,200,0.5);
-        color: #444;
-      }
-    }
-    // add icon on cursor
-    .autoformat-markdown-table-activated .CodeMirror-cursor {
-      &:after {
-        font-family: 'FontAwesome';
-        content: '\f0ce';
-      }
-    }
-
-    // for Dropzone
-    .dropzone {
-      @mixin insertSimpleLineIcons($code) {
-        &:before {
-          margin-right: 0.2em;
-          font-family: 'simple-line-icons';
-          content: $code;
-        }
-      }
-
-      // unuploadable or rejected
-      &.dropzone-unuploadable, &.dropzone-rejected {
-        .overlay {
-          background: rgba(200,200,200,0.8);
-        }
-        .overlay-content {
-          color: #444;
-        }
-      }
-      // uploading
-      &.dropzone-uploading {
-        @include overlay-processing-style();
-      }
-
-      // unuploadable
-      &.dropzone-unuploadable {
-        .overlay-content {
-          // insert content
-          @include insertSimpleLineIcons("\e617");  // icon-exclamation
-          &:after {
-            content: "File uploading is disabled";
-          }
-        }
-      }
-      // uploadable
-      &.dropzone-uploadable {
-        // accepted
-        &.dropzone-accepted:not(.dropzone-rejected) {
-          .overlay {
-            border: 4px dashed #ccc;
-          }
-          .overlay-content {
-            // insert content
-            @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
-            &:after {
-              content: "Drop here to upload";
-            }
-            // style
-            color: #666;
-            background: rgba(200,200,200,0.8);
-          }
-        }
-        // file type mismatch
-        &.dropzone-rejected:not(.dropzone-uploadablefile) .overlay-content {
-          // insert content
-          @include insertSimpleLineIcons("\e032");  // icon-picture
-          &:after {
-            content: "Only an image file is allowed";
-          }
-        }
-        // multiple files
-        &.dropzone-accepted.dropzone-rejected .overlay-content {
-          // insert content
-          @include insertSimpleLineIcons("\e617");  // icon-exclamation
-          &:after {
-            content: "Only 1 file is allowed";
-          }
-        }
-      }
-    } // end of.dropzone
-
-    .textarea-editor {
-      border: none;
-      font-family: monospace;
-    }
-
-    .loading-keymap {
-      @include overlay-processing-style();
-    }
-
     .btn-open-dropzone {
       z-index: 2;
       font-size: small;
@@ -303,16 +192,15 @@ body.on-edit {
       border: none;
       border-radius: 0;
       border-top: 1px dotted #ccc;
-
       &:active {
         box-shadow: none;
       }
-
       // hide if screen size is less than smartphone
       @media (max-width: $screen-xs) {
         display: none;
       }
     }
+
   }
   .page-editor-preview-container {
   }

resource/styles/scss/dropzone.scss

@@ -0,0 +1,130 @@
+.dropzone-container {
+  .overlay {
+    // layout
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 15px;
+  }
+
+  .overlay-content {
+    padding: 0.5em;
+  }
+
+  .page-editor-editor-container {
+    .overlay-content {
+      font-size: 2.5em;
+    }
+  }
+
+  .comment-form {
+    .overlay {
+      // style
+      margin-right: 15px;
+      margin-top: 55px;
+      margin-bottom: 55px;
+    }
+    .overlay-content {
+      font-size: 1.8em;
+    }
+  }
+
+
+  @mixin overlay-processing-style() {
+    .overlay {
+      background: rgba(255,255,255,0.5);
+    }
+    .overlay-content {
+      padding: 0.3em;
+      background: rgba(200,200,200,0.5);
+      color: #444;
+    }
+  }
+  // add icon on cursor
+  .autoformat-markdown-table-activated .CodeMirror-cursor {
+    &:after {
+      font-family: 'FontAwesome';
+      content: '\f0ce';
+    }
+  }
+
+  // for Dropzone
+  .dropzone {
+    @mixin insertSimpleLineIcons($code) {
+      &:before {
+        margin-right: 0.2em;
+        font-family: 'simple-line-icons';
+        content: $code;
+      }
+    }
+
+    // unuploadable or rejected
+    &.dropzone-unuploadable, &.dropzone-rejected {
+      .overlay {
+        background: rgba(200,200,200,0.8);
+      }
+      .overlay-content {
+        color: #444;
+      }
+    }
+    // uploading
+    &.dropzone-uploading {
+      @include overlay-processing-style();
+    }
+
+    // unuploadable
+    &.dropzone-unuploadable {
+      .overlay-content {
+        // insert content
+        @include insertSimpleLineIcons("\e617");  // icon-exclamation
+        &:after {
+          content: "File uploading is disabled";
+        }
+      }
+    }
+    // uploadable
+    &.dropzone-uploadable {
+      // accepted
+      &.dropzone-accepted:not(.dropzone-rejected) {
+        .overlay {
+          border: 4px dashed #ccc;
+        }
+        .overlay-content {
+          // insert content
+          @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
+          &:after {
+            content: "Drop here to upload";
+          }
+          // style
+          color: #666;
+          background: rgba(200,200,200,0.8);
+        }
+      }
+      // file type mismatch
+      &.dropzone-rejected:not(.dropzone-uploadablefile) .overlay-content {
+        // insert content
+        @include insertSimpleLineIcons("\e032");  // icon-picture
+        &:after {
+          content: "Only an image file is allowed";
+        }
+      }
+      // multiple files
+      &.dropzone-accepted.dropzone-rejected .overlay-content {
+        // insert content
+        @include insertSimpleLineIcons("\e617");  // icon-exclamation
+        &:after {
+          content: "Only 1 file is allowed";
+        }
+      }
+    }
+  } // end of.dropzone
+
+  .textarea-editor {
+    border: none;
+    font-family: monospace;
+  }
+
+  .loading-keymap {
+    @include overlay-processing-style();
+  }
+}

resource/styles/scss/style.scss

@@ -35,6 +35,7 @@
 @import 'user';
 @import 'user_growi';
 @import 'wiki';
+@import 'dropzone';
 
 /*
  * for Guest User Mode