Simplify the upload dialog.

Reduce the number of divs and make it more generic.  Allow the upload dialog to
be attached to any parent div.  Make the dialog appear automatically when a file
is dragged into the parent div.

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index ca1e5422ce1e9e6b6126b599fe42b90a533d78a6..359b79013178701a8bee0b2c8c1e6c60561b4605 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -637,44 +637,32 @@ blockquote pre {
        overflow: hidden;
 }
 
-.ctdl-compose-attachments-title {
-       padding: 1em;
-       background: Gainsboro;
-       display: flex;
-       flex-wrap: nowrap;
-       flex-direction: row;
-       justify-content: space-between;
-       align-items: auto;
-       align-content: start
-}
-
 .ctdl-upload {
-       display: none;                          /* set to "block" to make the modal appear */
-       z-index: 8;
-       position: fixed;
-       top: 50%;
-       left: 50%;
-       transform: translate(-50%, -50%);
-       border-style: outset;
-       border-width: 3px;
+       display: none;                          /* set to 'block' to make it appear when needed */
+       width: 95%;
+       height: 95%;
+       border: 2px dashed #ccc;
+       border-radius: 20px;
        border-color: Black;
        justify-content: center;
        align-items: center;
-       padding: 10px;
+       padding: 1em;
        background-color: GhostWhite;
 }
 
-.ctdl-upload-drop-area {                       /* shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ */
-       border: 2px dashed #ccc;
-       border-radius: 20px;
-       width: 480px;
-       font-family: sans-serif;
-       margin: 100px auto;
-       padding: 20px;
+.ctdl-upload.highlight {
+       border-color: purple;
 }
 
-.ctdl-upload-drop-area.highlight {
-       border-color: purple;
+.ctdl-compose-attachments-title {
+       padding: 1em;
+       background: Gainsboro;
+       display: flex;
+       flex-wrap: nowrap;
+       flex-direction: row;
+       justify-content: space-between;
+       align-items: auto;
+       align-content: start
 }
 
 .my-form {

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index 8b7e0502bbc7eea0b3735febcbeb30a149568d50..b6f270668da74656acb169997bacac0526cf4def 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -20,9 +20,6 @@
 <!-- When we need a custom ghost image for drag-and-drop, we can attach it to this element -->
 <div id="ctdl_draggo" style="position:absolute; left:0px; top:0px; z-index:-9"> </div>
 
-<!-- When we need a place to do drag-and-drop uploads, we can attach it to this element -->
-<div class="ctdl-upload" id="ctdl-upload"></div>
-
 <div class="ctdl-main-grid-container">
 
        <div class="ctdl-grid-banner-item" id="banner">

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index db84eaec0ffc8748dda2aaa788e18a3550c26c02..91180d9e62fd07818684c3475c00de0ad4fd5cd2 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -526,13 +526,14 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                document.getElementById("ctdl-compose-cc-field").style.display = "block";
        }
 
-       activate_uploads();
+       activate_uploads("ctdl-editor-body");
 }
 
 
-function activate_uploads() {
-               document.getElementById("ctdl-upload").innerHTML = `
-                       <div id="ctdl_attachments_outer">
+// Turn the specified div into a place where we can upload.  (Note: permanently changes the drag-and-drop behavior of that div.)
+function activate_uploads(parent_div) {
+               document.getElementById(parent_div).innerHTML += `
+                       <div class="ctdl-upload" id="ctdl-upload">
                                <div id="ctdl_attachments_title" class="ctdl-compose-attachments-title">
                                        <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + " " + num_attachments + `</h1></div>
                                        <div><h1><i class="fas fa-window-close" style="color:red" onClick="show_or_hide_attachments()"></i></h1></div>
@@ -547,15 +548,15 @@ function activate_uploads() {
                                <div id="drop-area" class="ctdl-upload-drop-area">
                                        <form class="my-form">
                                                <p>${_("Drop files here to upload")}</p>
-                                               <input type="file" id="fileElem" multiple acce=t="*/*" onChange="handleFiles(this.files)">
-                                               <label class="button" for="fileElem">Select some files</label>
+                                               <input type="file" id="fileElem" multiple accept="*/*" onChange="handleFiles(this.files)">
                                        </form>
                                </div>
                        </div>
                `;
 
                // activate drag and drop (shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ )
-               let dropArea = document.getElementById("drop-area");
+               //let dropArea = document.getElementById("ctdl-upload");
+               let dropArea = document.getElementById(parent_div);
                ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                        dropArea.addEventListener(eventName, preventDefaults, false)
                })
@@ -568,10 +569,10 @@ function activate_uploads() {
                dropArea.addEventListener('drop', handleDrop, false);
 
                // make the modal smaller than the containing window but pretty big
-               document.getElementById("ctdl_attachments_outer").style.width =
-                       Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.60).toString() + "px";
-               document.getElementById("ctdl_attachments_outer").style.height =
-                       Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.60).toString() + "px";
+               //document.getElementById("ctdl-upload").style.width =
+                       //Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.90).toString() + "px";
+               //document.getElementById("ctdl-upload").style.height =
+                       //Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.90).toString() + "px";
 }
 
 
@@ -617,12 +618,14 @@ function uploadFile(file) {
 
 
 function highlight(e) {
-       let dropArea = document.getElementById("drop-area");
+       let dropArea = document.getElementById("ctdl-upload");
        dropArea.classList.add('highlight')
+
+       document.getElementById("ctdl-upload").style.display = "block";         /* also make it appear */
 }
       
 function unhighlight(e) {
-       let dropArea = document.getElementById("drop-area");
+       let dropArea = document.getElementById("ctdl-upload");
        dropArea.classList.remove('highlight')
 }
 
@@ -632,10 +635,10 @@ function unhighlight(e) {
 function show_or_hide_attachments() {
 
        if (document.getElementById("ctdl-upload").style.display == "block") {
-               document.getElementById("ctdl-upload").style.display = "none";
+               document.getElementById("ctdl-upload").style.display = "none";          /* turn it off */
        }
        else {
-               document.getElementById("ctdl-upload").style.display = "block";
+               document.getElementById("ctdl-upload").style.display = "block";         /* turn it on */
        }
 }