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 57a611ef554b9226a590a6862c095d0f76ed7462..1ffb787b1426e6f1896fee526c8ab1f3665d28f5 100644 (file)
--- 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 8fac46efaaa8c72ae54ddfdae88925cbf9f98dce..28e8708721fdd6fe9f00801851c7c9374853fb72 100644 (file)
--- 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";
        }
-
 }