(js) Add upload by DnD in message editor

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -5,7 +5,11 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
 
-  <md-dialog class="sg-mail-editor" flex="80" flex-sm="100">
+  <md-dialog class="sg-mail-editor" flex="80" flex-sm="90" flex-xs="100"
+             nv-file-drop="nv-file-drop"
+             nv-file-over="nv-file-over"
+             over-class="sg-over-dropzone"
+             uploader="editor.uploader">
     <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="sg-icon-toolbar-bg">edit</md-icon>
@@ -34,6 +38,12 @@
       </div>
     </md-toolbar>
 
+    <div class="sg-dropzone">
+      <div layout="column" layout-align="center center" layout-fill="layout-fill">
+        <md-icon>file_upload</md-icon>
+      </div>
+    </div>
+
     <md-dialog-content class="md-padding">
       <header>
         <div class="msg-header-content">

UI/WebServerResources/scss/views/MailerUI.scss

@@ -108,6 +108,32 @@ md-sidenav {
   }
 }
 
+// The drop zone zone is only visibile when the user is dragging a file to the browser window
+.sg-dropzone {
+  display: none;
+}
+.sg-over-dropzone {
+  .sg-dropzone {
+    background-color: white;
+    border: 4px dashed black;
+    bottom: 0px;
+    display: block;
+    flex: 1 1 auto;
+    left: 0px;
+    opacity: 0.6;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: $z-index-toolbar + 1;
+    &:hover {
+      opacity: 0.6;
+    }
+    md-icon {
+      color: black;
+      font-size: $sg-font-size-9;
+    }
+  }
+}
 
 // sgZoomableImage directive
 .msg-attachment-image {