CC/BCC button in To: line makes the CC: and BCC: lines appear.

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 36c8838184b4002f7b39384204e3651c790b5a67..34e565569f0b65da162efcc41357cade77699bc5 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -477,10 +477,12 @@ blockquote pre {
        padding: 0;
        background-color: GhostWhite;
        display: grid;
-       grid-template-rows: auto auto 1fr auto;
+       grid-template-rows: auto auto auto auto 1fr auto;
        grid-template-columns: auto 1fr;
        grid-template-areas:
-               'ctdl-compose-to-label ctdl-compose-to-field'
+               'ctdl-compose-to-label ctdl-compose-to-line'
+               'ctdl-compose-cc-label ctdl-compose-cc-field'
+               'ctdl-compose-bcc-label ctdl-compose-bcc-field'
                'ctdl-compose-subject-label ctdl-compose-subject-field'
                'ctdl-compose-message-box ctdl-compose-message-box'
                'ctdl-compose-toolbar ctdl-compose-toolbar';
@@ -492,11 +494,51 @@ blockquote pre {
        padding: 0.5vw;
 }
 
+.ctdl-compose-to-line {
+       grid-area: ctdl-compose-to-line;
+       padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       margin: 0;
+       width: 100%;
+       height: 100%;
+       overflow: hidden;
+}
+
 .ctdl-compose-to-field {
-       grid-area: ctdl-compose-to-field;
+       flex-grow: 1;
+
+}
+
+.ctdl-compose-cc-label {
+       grid-area: ctdl-compose-cc-label;
+       padding: 0.5vw;
+       display: none;
+}
+
+.ctdl-compose-cc-field {
+       grid-area: ctdl-compose-cc-field;
+       padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+       display: none;
+}
+
+.ctdl-compose-bcc-label {
+       grid-area: ctdl-compose-bcc-label;
+       padding: 0.5vw;
+       display: none;
+}
+
+.ctdl-compose-bcc-field {
+       grid-area: ctdl-compose-bcc-field;
        padding: 0.5vw;
        border-bottom: 1px solid Grey;
        margin-right: 0.5vw;
+       display: none;
 }
 
 .ctdl-compose-subject-label {

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 5daed3667ff074c5ef9dad6fc86cadafd34a6388..eaf44b5f53babb3fcb8f7332f1ae06dcc1412190 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -222,9 +222,22 @@ function mail_compose(is_quoted, references, msgid) {
                // Header fields, the composition window, and the button bar are arranged using a Grid layout.
                + "<div id=\"ctdl-compose-mail\" class=\"ctdl-compose-mail\">"
 
-               // Visible header fields
+               // Visible To: field, plus a box to make the CC/BCC lines appear
                + "<div class=\"ctdl-compose-to-label\">" + _("To:") + "</div>"
+               + "<div class=\"ctdl-compose-to-line\">"
                + "<div class=\"ctdl-compose-to-field\" id=\"ctdl-compose-to-field\" contenteditable=\"true\"></div>"
+               + "<div class=\"ctdl-cc-bcc-buttons ctdl-msg-button\" id=\"ctdl-cc-bcc-buttons\" "
+               + "onClick=\"make_cc_bcc_visible()\">"
+               + _("CC:") + "/" + _("BCC:") + "</div>"
+               + "</div>"
+
+               // CC/BCC
+               + "<div class=\"ctdl-compose-cc-label\" id=\"ctdl-compose-cc-label\">" + _("CC:") + "</div>"
+               + "<div class=\"ctdl-compose-cc-field\" id=\"ctdl-compose-cc-field\" contenteditable=\"true\"></div>"
+               + "<div class=\"ctdl-compose-bcc-label\" id=\"ctdl-compose-bcc-label\">" + _("BCC:") + "</div>"
+               + "<div class=\"ctdl-compose-bcc-field\" id=\"ctdl-compose-bcc-field\" contenteditable=\"true\"></div>"
+
+               // Visible subject field
                + "<div class=\"ctdl-compose-subject-label\">" + _("Subject:") + "</div>"
                + "<div class=\"ctdl-compose-subject-field\" id=\"ctdl-compose-subject-field\" contenteditable=\"true\"></div>"
 
@@ -243,3 +256,12 @@ function mail_compose(is_quoted, references, msgid) {
        ;
 
 }
+
+function make_cc_bcc_visible() {
+       document.getElementById("ctdl-cc-bcc-buttons").style.display = "none";
+       document.getElementById("ctdl-compose-cc-label").style.display = "block";
+       document.getElementById("ctdl-compose-cc-field").style.display = "block";
+       document.getElementById("ctdl-compose-bcc-label").style.display = "block";
+       document.getElementById("ctdl-compose-bcc-field").style.display = "block";
+}
+