refactor overlay

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -150,10 +150,15 @@ export default class CodeMirrorEditor extends AbstractEditor {
    * @inheritDoc
    */
   setGfmMode(bool) {
+    // update state
+    const additionalClassSet = this.state.additionalClassSet;
     this.setState({
       isGfmMode: bool,
       isEnabledEmojiAutoComplete: bool,
+      additionalClassSet,
     });
+
+    // update CodeMirror option
     const mode = bool ? 'gfm' : undefined;
     this.getCodeMirror().setOption('mode', mode);
   }
@@ -425,23 +430,17 @@ export default class CodeMirrorEditor extends AbstractEditor {
     }
   }
 
-  getOverlayStyle() {
-    return {
-      position: 'absolute',
-      zIndex: 4,  // forward than .CodeMirror-gutters
+  renderLoadingKeymapOverlay() {
+    const style = {
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
     };
-  }
-
-  renderLoadingKeymapOverlay() {
-    const overlayStyle = this.getOverlayStyle();
 
     return this.state.isLoadingKeymap
-      ? <div style={overlayStyle} className="loading-keymap overlay">
-          <span className="overlay-content">
+      ? <div className="overlay overlay-loading-keymap">
+          <span style={style} className="overlay-content">
             <div className="speeding-wheel d-inline-block"></div> Loading Keymap ...
           </span>
         </div>

resource/js/components/PageEditor/Editor.js

@@ -187,7 +187,7 @@ export default class Editor extends AbstractEditor {
 
   renderDropzoneOverlay() {
     return (
-      <div className="overlay">
+      <div className="overlay overlay-dropzone-active">
         {this.state.isUploading &&
           <span className="overlay-content">
             <div className="speeding-wheel d-inline-block"></div>

resource/styles/scss/_editor-attachment.scss

@@ -1,45 +1,6 @@
-.editor-container {
-  .overlay {
-    // layout
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: absolute;
-    z-index: 7;  // forward than .CodeMirror-vscrollbar
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .overlay-content {
-    padding: 0.5em;
-  }
+@import 'editor-overlay';
 
-  .page-editor-editor-container {
-    .overlay-content {
-      font-size: 2.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';
-    }
-  }
+.editor-container {
 
   // for Dropzone
   .dropzone {
@@ -53,27 +14,32 @@
 
     position: relative;   // against .overlay position: absolute
 
+    @include overlay-processing-style(overlay-dropzone-active, 2.5em);
+
     // unuploadable or rejected
     &.dropzone-unuploadable, &.dropzone-rejected {
-      .overlay {
+      .overlay.overlay-dropzone-active {
         background: rgba(200,200,200,0.8);
-      }
-      .overlay-content {
-        color: #444;
+
+        .overlay-content {
+          color: #444;
+        }
       }
     }
     // uploading
     &.dropzone-uploading {
-      @include overlay-processing-style();
+      @include overlay-processing-style(overlay-dropzone-active, 2.5em);
     }
 
     // unuploadable
     &.dropzone-unuploadable {
-      .overlay-content {
-        // insert content
-        @include insertSimpleLineIcons("\e617");  // icon-exclamation
-        &:after {
-          content: "File uploading is disabled";
+      .overlay.overlay-dropzone-active {
+        .overlay-content {
+          // insert content
+          @include insertSimpleLineIcons("\e617");  // icon-exclamation
+          &:after {
+            content: "File uploading is disabled";
+          }
         }
       }
     }
@@ -81,48 +47,48 @@
     &.dropzone-uploadable {
       // accepted
       &.dropzone-accepted:not(.dropzone-rejected) {
-        .overlay {
+        .overlay.overlay-dropzone-active {
           border: 4px dashed #ccc;
-        }
-        .overlay-content {
-          // insert content
-          @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
-          &:after {
-            content: "Drop here to upload";
+
+          .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);
           }
-          // 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";
+      &.dropzone-rejected:not(.dropzone-uploadablefile) {
+        .overlay.overlay-dropzone-active {
+          .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";
+      &.dropzone-accepted.dropzone-rejected {
+        .overlay.overlay-dropzone-active {
+          .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;

resource/styles/scss/_editor-overlay.scss

@@ -0,0 +1,37 @@
+@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
+  .overlay.#{$additionalSelector} {
+    background: rgba(255,255,255,0.5);
+
+    .overlay-content {
+      background: rgba(200,200,200,0.5);
+      color: #444;
+      font-size: $contentFontSize;
+      padding: $contentPadding;
+    }
+  }
+}
+
+// overlay in .editor-container
+.editor-container {
+  .overlay {
+    // layout
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    z-index: 7;  // forward than .CodeMirror-vscrollbar
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .overlay-content {
+      padding: 0.5em;
+    }
+  }
+
+  // loading keymap
+  @include overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);
+
+}

resource/styles/scss/_on-edit.scss

@@ -1,3 +1,5 @@
+@import 'editor-overlay';
+
 body:not(.on-edit) {
   // hide #page-form
   #page-form {
@@ -179,29 +181,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 {
@@ -210,86 +189,11 @@ body.on-edit {
         }
       }
 
-      // 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();
-      }
-
     }
     .page-editor-preview-container {
     }
@@ -396,3 +300,8 @@ body.on-edit {
   }
 
 }
+
+// overwrite .CodeMirror-placeholder
+.CodeMirror pre.CodeMirror-placeholder {
+  color: $text-muted;
+}