More style work on the mail composition window

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index e473081b4eae27608deb4e18e9146fdb021977ee..36c8838184b4002f7b39384204e3651c790b5a67 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -219,10 +219,7 @@ html,body,h1,h2,h3,h4,h5 {
        border-style: solid;
        border-width: thin;
        border-color: Black;
-}
-
-.ctdl-msg-button a {
-       color: Black;
+       cursor: default;
 }
 
 .ctdl-msg-button:hover {
@@ -230,17 +227,21 @@ html,body,h1,h2,h3,h4,h5 {
        color: GhostWhite;
        transition: .3s;
        border-color: #123456;
+       cursor: default;
+}
+
+.ctdl-msg-button a {
+       color: Black;
+       text-decoration: none;
+       cursor: default;
 }
 
 .ctdl-msg-button a:hover {
        color: White;
+       cursor: default;
 }
 
 
-.ctdl-msg-button a {
-       text-decoration: none;
-}
-
 .ctdl-avatar {
        width: 32px;
 }
@@ -515,12 +516,24 @@ blockquote pre {
        overflow-x: wrap;
        overflow-y: auto;
        padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-left: 0.5vw;
+       margin-right: 0.5vw;
 }
 
 .ctdl-compose-toolbar {
        grid-area: ctdl-compose-toolbar;
        overflow: none;
        padding: 0.5vw;
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       justify-content: space-between;
+       align-items: center;
+       margin: 0:
+       width: 100%;
+       height: 100%;
+       overflow: hidden;
 }
 
 .ctdl-login-screen-grid-container {

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 5fa88e0f76b0eb62272ba2c48ba7b0009367e24a..5daed3667ff074c5ef9dad6fc86cadafd34a6388 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -31,7 +31,7 @@ function mail_render_one(msg, target_div) {
                + "<a href=\"javascript:mail_compose(true,'"+msg.wefw+"','"+msg.msgn+"');\">"
                + "<i class=\"fa fa-reply\"></i> " 
                + _("Reply")
-               + "</a></span>"
+               + "</a></span>";
        
                if (can_delete_messages) {
                        outmsg +=
@@ -219,19 +219,26 @@ function mail_compose(is_quoted, references, msgid) {
                + "<input id=\"ctdl_mc_references\" style=\"display:none\" value=\"" + references + "\"></input>"
                + "<input id=\"ctdl_mc_reply_msgid\" style=\"display:none\" value=\"" + msgid + "\"></input>"
 
-               // Grid!
+               // Header fields, the composition window, and the button bar are arranged using a Grid layout.
                + "<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>"
+               // Visible header fields
+               + "<div class=\"ctdl-compose-to-label\">" + _("To:") + "</div>"
+               + "<div class=\"ctdl-compose-to-field\" id=\"ctdl-compose-to-field\" contenteditable=\"true\"></div>"
+               + "<div class=\"ctdl-compose-subject-label\">" + _("Subject:") + "</div>"
+               + "<div class=\"ctdl-compose-subject-field\" id=\"ctdl-compose-subject-field\" contenteditable=\"true\"></div>"
 
+               // Message composition box
                + "<div class=\"ctdl-compose-message-box\" id=\"ctdl-editor-body\" contenteditable=\"true\">"
                + "</div>"
 
-               + "<div class=\"ctdl-compose-toolbar\">save, boldface, mass explosions, etc. etc. etc."
+               // The button bar is a Grid element, and is also a Flexbox container.
+               + "<div class=\"ctdl-compose-toolbar\">"
+               + "<span class=\"ctdl-msg-button\"><i class=\"fa fa-check\" style=\"color:green\"> </i>" + _("Send message") + "</span>"
+               + "<span class=\"ctdl-msg-button\">" + _("Save to Drafts") + "</span>"
+               + "<span class=\"ctdl-msg-button\">" + _("Attachments:") + "</span>"
+               + "<span class=\"ctdl-msg-button\">" + _("Contacts") + "</span>"
+               + "<span class=\"ctdl-msg-button\"><i class=\"fa fa-trash\" style=\"color:red\"></i> " + _("Cancel") + "</span>"
                + "</div>"
        ;