From 6ca98547a198fc77403e2d926fbf15cff393db97 Mon Sep 17 00:00:00 2001
From: Art Cancro <ajc@citadel.org>
Date: Mon, 25 Sep 2023 23:35:17 -0400
Subject: [PATCH] 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.
---
 webcit-ng/static/css/webcit.css  | 46 ++++++++++++--------------------
 webcit-ng/static/index.html      |  3 ---
 webcit-ng/static/js/view_mail.js | 33 ++++++++++++-----------
 3 files changed, 35 insertions(+), 47 deletions(-)

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index ca1e5422c..359b79013 100644
--- 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 8b7e0502b..b6f270668 100644
--- 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 db84eaec0..91180d9e6 100644
--- 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 */
 	}
 }
 
-- 
2.39.2