add dropzone file and move dropzone code from original files

resource/styles/scss/_comment_growi.scss

@@ -105,117 +105,4 @@
       }
     }
   }
-
-  // for Dropzone
-
-  .CodeMirror {
-    .cm-matchhighlight {
-      background-color: cyan;
-    }
-    .CodeMirror-selection-highlight-scrollbar {
-      background-color: darkcyan;
-    }
-  }
-  .overlay {
-    // layout
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    // style
-    margin: 0 15px;
-    margin-top: 55px;
-    margin-bottom: 55px;
-  }
-  .overlay-content {
-    font-size: 1.8em;
-    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';
-    }
-  }
-
-  .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
 }

resource/styles/scss/_on-edit.scss

@@ -183,118 +183,7 @@ 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 {
+     .btn-open-dropzone {
       z-index: 2;
       font-size: small;
       text-align: right;

resource/styles/scss/dropzone.scss

@@ -0,0 +1,129 @@
+.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