From: Art Cancro <ajc@citadel.org>
Date: Tue, 26 Sep 2023 02:44:10 +0000 (-0400)
Subject: view_mail.js: move upload dialog from ctdl_big_modal to ctdl-upload
X-Git-Tag: v995~7
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;h=2bfe228aa51b9b85cf92b8951ee4079c5ac5118b;p=citadel.git

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 90b6b674c..ca1e5422c 100644
--- 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 b6f270668..8b7e0502b 100644
--- 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 819a9e397..db84eaec0 100644
--- 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";
 	}
 }