view_mail.js: move upload dialog from ctdl_big_modal to ctdl-upload

Uploads now have their own div in their own separate modal.
This is, of course, because I am trying to loosely couple the uploader so
that it can be attached to other parts of the system when needed.

Also I realized that my div names are ctdl-not ctdl_consistent with each other.
Trying to fix that.

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 90b6b674c273dd755fee542de8be7725d9264f1b..ca1e5422ce1e9e6b6126b599fe42b90a533d78a6 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -648,6 +648,22 @@ blockquote pre {
        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;
+       border-color: Black;
+       justify-content: center;
+       align-items: center;
+       padding: 10px;
+       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;

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index b6f270668da74656acb169997bacac0526cf4def..8b7e0502bbc7eea0b3735febcbeb30a149568d50 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -20,6 +20,9 @@
 <!-- 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 819a9e3971e0ed52a999d60679af1c15160edb4c..db84eaec0ffc8748dda2aaa788e18a3550c26c02 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -515,7 +515,7 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                <span class="ctdl-msg-button"> ${_("Save to Drafts")} </span>
                <span class="ctdl-msg-button" onClick="show_or_hide_attachments()"><i class="fa fa-paperclip" style="color:grey"></i> ${_("Attachments:")} <span id="ctdl_num_attachments"> ${num_attachments} </span></span>
                <span class="ctdl-msg-button">  ${_("Contacts")} </span>
-               <span class="ctdl-msg-button" onClick="document.getElementById('ctdl_big_modal').style.display='none';gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </span>
+               <span class="ctdl-msg-button" onClick="document.getElementById('ctdl-upload').style.display='none';gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </span>
                </div>`
        ;
 
@@ -531,14 +531,14 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
 
 
 function activate_uploads() {
-               document.getElementById("ctdl_big_modal").innerHTML = `
+               document.getElementById("ctdl-upload").innerHTML = `
                        <div id="ctdl_attachments_outer">
                                <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>
                                </div>
                                <br>
-                               <ul id="ctdl_upload_list">
+                               <ul id="ctdl-upload_list">
                                        <li>uploaded file</li>
                                        <li>another uploaded file</li>
                                        <li>philez and warez</li>
@@ -602,11 +602,11 @@ function uploadFile(file) {
       
        xhr.addEventListener('readystatechange', function(e) {
                if (xhr.readyState == 4 && xhr.status == 200) {
-                       document.getElementById("ctdl_upload_list").innerHTML += "<li>succeeeeed</li>";
+                       document.getElementById("ctdl-upload_list").innerHTML += "<li>succeeeeed</li>";
                        console.log("upload succeeded");
                }
                else if (xhr.readyState == 4 && xhr.status != 200) {
-                       document.getElementById("ctdl_upload_list").innerHTML += "<li>EPIC FAIL</li>";
+                       document.getElementById("ctdl-upload_list").innerHTML += "<li>EPIC FAIL</li>";
                        console.log("upload failed");
                }
        })
@@ -631,11 +631,11 @@ function unhighlight(e) {
 // Show or hide the attachments window in the composer
 function show_or_hide_attachments() {
 
-       if (document.getElementById("ctdl_big_modal").style.display == "block") {
-               document.getElementById("ctdl_big_modal").style.display = "none";
+       if (document.getElementById("ctdl-upload").style.display == "block") {
+               document.getElementById("ctdl-upload").style.display = "none";
        }
        else {
-               document.getElementById("ctdl_big_modal").style.display = "block";
+               document.getElementById("ctdl-upload").style.display = "block";
        }
 }