view_mail.js: show/hide attachments screen, added title bar style and close button

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 66147d118c5db2cb4c1015e5e3dfababa3d40a61..57a611ef554b9226a590a6862c095d0f76ed7462 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -637,6 +637,17 @@ 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-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 2847109b33976e733c0a26a050d537ac13616503..4bcb2886c216cfd01393d3e277a9a3777047d537 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -13,6 +13,7 @@ var newmail_notify = {
         NO  : 0,                                                               // do not perform new mail notifications
         YES : 1                                                                        // yes, perform new mail notifications
 };
+var num_attachments = 0;                                                       // number of attachments in current composed msg
 
 
 // This is the async back end for mail_delete_selected()
@@ -513,7 +514,7 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                + "<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\">" + _("Attachments:") + " 0" + "</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=\"gotoroom(current_room)\"><i class=\"fa fa-trash\" style=\"color:red\"></i> " + _("Cancel") + "</span>"
                + "</div>"
@@ -525,6 +526,37 @@ 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>"
+       ;
+
+}
+
+
+// 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";
+       }
+       else {
+               document.getElementById("ctdl_big_modal").style.display = "block";
+               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";
+       }
+
 }