From: Art Cancro <ajc@citadel.org>
Date: Sun, 24 Sep 2023 21:00:37 +0000 (-0400)
Subject: view_mail.js: convert ugly syntax to heredocs
X-Git-Tag: v995~11
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;h=6e3ec0c24447d56ce20240ef1a2dd0a0dfff6e0b;p=citadel.git

view_mail.js: convert ugly syntax to heredocs
---

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 57a611ef5..1ffb787b1 100644
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -648,6 +648,10 @@ blockquote pre {
 	align-content: start
 }
 
+.ctdl_dfhtu {					/* "Drop Files Here To Upload" text */
+	text-align: center;
+}
+
 .ctdl-login-screen-grid-container {
 	display: grid;
 	grid-template-columns: auto auto;
diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 8fac46efa..28e870872 100644
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -507,17 +507,16 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
 		compose_screen += "<br><br><blockquote><div id=\"" + quoted_div_name + "\"></div></blockquote>";
 	}
 
-	compose_screen +=
-		  "</div>"
-
-		// The button bar is a Grid element, and is also a Flexbox container.
-		+ "<div class=\"ctdl-compose-toolbar\">"
-		+ "<span class=\"ctdl-msg-button\" onclick=\"mail_send_message()\"><i class=\"fa fa-paper-plane\" style=\"color:green\"></i> " + _("Send message") + "</span>"
-		+ "<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>"
-		+ "</div>"
+	// The button bar is a Grid element, and is also a Flexbox container.
+	compose_screen += `
+		</div>
+		<div class="ctdl-compose-toolbar">
+		<span class="ctdl-msg-button" onclick="mail_send_message()"><i class="fa fa-paper-plane" style="color:green"></i>` + _("Send message") + `</span>
+		<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>
+		</div>`
 	;
 
 	document.getElementById("ctdl-main").innerHTML = compose_screen;
@@ -526,20 +525,6 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
 		document.getElementById("ctdl-compose-cc-label").style.display = "block";
 		document.getElementById("ctdl-compose-cc-field").style.display = "block";
 	}
-
-	// Now the compose screen is set up properly; set up the attachments modal in case the user wants it
-
-	document.getElementById("ctdl_big_modal").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:") + "</h1></div>"
-		+ "<div><h1><i class=\"fas fa-window-close\" style=\"color:red\" onClick=\"show_or_hide_attachments()\"></i></h1></div>"
-		+ "</div>"
-		+ "<br>"
-		+ "this is the attachments modal.  there are many like it, but this one is mine."
-		+ "</div>"
-	;
-
 }
 
 
@@ -551,12 +536,27 @@ function show_or_hide_attachments() {
 	}
 	else {
 		document.getElementById("ctdl_big_modal").style.display = "block";
+		document.getElementById("ctdl_big_modal").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>
+			<span class="ctdl_dfhtu">` + _("Drop files here to upload") + `</span>
+			<br>
+			<ul>
+				<li>uploaded file</li>
+				<li>another uploaded file</li>
+				<li>philez and warez</li>
+			</ul>
+			</div>`
+		;
 		document.getElementById("ctdl_attachments_outer").style.width =
 			Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.90).toString() + "px";
 		document.getElementById("ctdl_attachments_outer").style.height =
 			Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.90).toString() + "px";
 	}
-
 }