Initial layout of mail compose screen.

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index b0af8d64eac7b429de5b8525ed335b70bfb96a5a..004de4c9f2d2694e708000ce7afdc62eda61ba2a 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -467,9 +467,49 @@ blockquote pre {
 .ctdl-compose-mail {                           /* mail composition window */
        width: 100%;
        height: 100%;
-       overflow: auto;
-       border: 2px dashed red;                 /* FIXME this goes away after testing */
+       overflow: none;
+       border: none;
+       padding: 0;
        background-color: GhostWhite;
+       display: grid;
+       grid-template-rows: auto auto 1fr;
+       grid-template-columns: auto 1fr;
+       grid-template-areas:
+               'ctdl-compose-to-label ctdl-compose-to-field'
+               'ctdl-compose-subject-label ctdl-compose-subject-field'
+               'ctdl-compose-message-box ctdl-compose-message-box';
+       gap: 3px;
+}
+
+.ctdl-compose-to-label {
+       grid-area: ctdl-compose-to-label;
+       padding: 0.5vw;
+}
+
+.ctdl-compose-to-field {
+       grid-area: ctdl-compose-to-field;
+       padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+}
+
+.ctdl-compose-subject-label {
+       grid-area: ctdl-compose-subject-label;
+       padding: 0.5vw;
+}
+
+.ctdl-compose-subject-field {
+       grid-area: ctdl-compose-subject-field;
+       padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+}
+
+.ctdl-compose-message-box {
+       grid-area: ctdl-compose-message-box;
+       overflow-x: wrap;
+       overflow-y: auto;
+       padding: 0.5vw;
 }
 
 .ctdl-login-screen-grid-container {

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 37773c294ff35e4ee147cd2630d3354b2118190a..27a5a0b9bba3c70811a2d502e858dc5ab3dc0435 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -204,19 +204,27 @@ function render_mailbox_display() {
 // Compose a new mail message (called by the Reply button here, or by the dispatcher in views.js)
 function mail_compose(is_quoted, references, msgid) {
 
+       // is_quoted    true or false depending on whether the user selected "reply quoted" (is this appropriate for mail?)
+       // references   list of references, be sure to use this in a reply
+       // msgid        if a reply, the msgid of the most recent message in the chain, the one to which we are replying
+
        document.getElementById("ctdl-main").innerHTML
-               = "<div id=\"ctdl-compose-mail\" class=\"ctdl-compose-mail\">"
-
-               // These should be hidden but we're in the process of building
-               + "is_quoted: <input id=\"ctdl_mc_is_quoted\" style=\"display:block\" value=\"" + is_quoted + "\"></input>"
-               + "references: <input id=\"ctdl_mc_references\" style=\"display:block\" value=\"" + references + "\"></input>"
-               + "reply-to msgid: <input id=\"ctdl_mc_reply_msgid\" style=\"display:block\" value=\"" + msgid + "\"></input>"
-
-               + "<table border=\"1\" width=\"100%\">"
-               + "<tr><td>from</td><td>" + current_user + "</td></tr>"
-               + "<tr><td>to</td><td></td></tr>"
-               + "<tr><td>subject</td><td></td></tr></table>"
-               + "<div class=\"ctdl-msg-body\" id=\"ctdl-editor-body\" style=\"padding:5px;\" contenteditable=\"true\">"
+
+               // Hidden values that we are storing right here in the document tree for later
+               = "<input id=\"ctdl_mc_is_quoted\" style=\"display:none\" value=\"" + is_quoted + "\"></input>"
+               + "<input id=\"ctdl_mc_references\" style=\"display:none\" value=\"" + references + "\"></input>"
+               + "<input id=\"ctdl_mc_reply_msgid\" style=\"display:none\" value=\"" + msgid + "\"></input>"
+
+               // Grid!
+               + "<div id=\"ctdl-compose-mail\" class=\"ctdl-compose-mail\">"
+
+               // Now display some things
+               + "<div class=\"ctdl-compose-to-label\">Tooo:</div>"
+               + "<div class=\"ctdl-compose-to-field\" contenteditable=\"true\">hahahahaha</div>"
+               + "<div class=\"ctdl-compose-subject-label\">Soobjeckt:</div>"
+               + "<div class=\"ctdl-compose-subject-field\" contenteditable=\"true\">h0h0h0h</div>"
+
+               + "<div class=\"ctdl-compose-message-box\" id=\"ctdl-editor-body\" contenteditable=\"true\">"
                + "</div>"
        ;