From: Art Cancro <ajc@citadel.org>
Date: Wed, 12 Oct 2022 03:14:08 +0000 (-0400)
Subject: Initial layout of mail compose screen.
X-Git-Tag: v959~29
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;h=e9c01ed778e2e39f5c824a001049305fb0841811;p=citadel.git

Initial layout of mail compose screen.
---

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index b0af8d64e..004de4c9f 100644
--- 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 37773c294..27a5a0b9b 100644
--- 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>"
 	;