Don't show a focus border on contenteditable items

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 004de4c9f2d2694e708000ce7afdc62eda61ba2a..e473081b4eae27608deb4e18e9146fdb021977ee 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -8,6 +8,10 @@
        box-sizing: border-box;
        padding: 0;
        margin: 0;
+}
+
+[contenteditable]:focus {
+       outline: 0px solid transparent;
 } 
 
 .ctdl-main-grid-container {                    /* This grid implements the "holy grail layout" of the screen */
@@ -472,12 +476,13 @@ blockquote pre {
        padding: 0;
        background-color: GhostWhite;
        display: grid;
-       grid-template-rows: auto auto 1fr;
+       grid-template-rows: auto auto 1fr auto;
        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';
+               'ctdl-compose-message-box ctdl-compose-message-box'
+               'ctdl-compose-toolbar ctdl-compose-toolbar';
        gap: 3px;
 }
 
@@ -512,6 +517,12 @@ blockquote pre {
        padding: 0.5vw;
 }
 
+.ctdl-compose-toolbar {
+       grid-area: ctdl-compose-toolbar;
+       overflow: none;
+       padding: 0.5vw;
+}
+
 .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 bf500e5a03ea1d90f4e6bf47769736d88e8c91a9..5fa88e0f76b0eb62272ba2c48ba7b0009367e24a 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -230,6 +230,9 @@ function mail_compose(is_quoted, references, msgid) {
 
                + "<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."
+               + "</div>"
        ;
 
 }