Prettify new email form

web/css/controls.css

@@ -294,7 +294,14 @@
 .toEmail {
     border-radius: var(--default-radius);
     font-size: var(--small-text-size);
-    margin-right: 10px;
-    padding: var(--base-text-padding);
+    margin: 5px 10px 5px 0;
+    padding: var(--small-text-padding);
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 

web/css/styles.css

@@ -18,6 +18,7 @@
 
     --base-text-padding: 10px;
     --base-border-padding: 8px;
+    --small-text-padding: 6px;
 
     --small-text-size: 14px;
     --normal-text-size: 16px;
@@ -122,3 +123,9 @@ body {
     background-color: var(--invalid-color);
     color: var(--primary-text-color);
 }
+
+.hiddenInput {
+    border: none;
+    margin: 8px 0;
+    font-size: var(--normal-text-size);
+}

web/js/index.js

@@ -75,9 +75,20 @@ $(document).ready(function(){
     connectNotifier()
 
     $("#toEmailField").on("input", toEmailFieldChanged)
-    $("#toEmailField").keyup(function(e){
-        if (e.keyCode == 8 && toEmailPreviousSelectionPosition == 0 && e.target.selectionStart == 0 && toEmailList.length > 0 && $("#toEmailList").children().length > 0) {
-            removeToEmail($("#toEmailList").children().last().attr("id"), toEmailList[toEmailList.length - 1])
+    $("#toEmailField").keydown(function(e){
+        var actualText = $("#toEmailField").val()
+        const selectionPosition = e.target.selectionStart
+        switch(e.keyCode) {
+            case 8:
+                if (toEmailPreviousSelectionPosition == 0 && e.target.selectionStart == 0
+                    && toEmailList.length > 0 && $("#toEmailList").children().length > 1) {
+                        removeToEmail($("#toEmailList").children()[$("#toEmailList").children().length - 2].id, toEmailList[toEmailList.length - 1])
+                    }
+            break
+            case 13:
+                addToEmail(actualText.slice(0, selectionPosition))
+                $("#toEmailField").val(actualText.slice(selectionPosition + 1, actualText.length))
+                break
         }
         toEmailPreviousSelectionPosition = e.target.selectionStart
     })
@@ -87,24 +98,27 @@ function toEmailFieldChanged(e) {
     const selectionPosition = e.target.selectionStart - 1
     var actualText = $("#toEmailField").val()
 
-    if (actualText.length <= 0 || selectionPosition <= 0) {
+    if (actualText.length <= 0 || selectionPosition < 0) {
         return
     }
 
     var lastChar = actualText[selectionPosition]
     if (lastChar.match(emailEndRegex)) {
-        var toEmail = actualText.slice(0, selectionPosition)
+        addToEmail(actualText.slice(0, selectionPosition))
         $("#toEmailField").val(actualText.slice(selectionPosition + 1, actualText.length))
-        if (toEmail.length <= 0) {
-            return
-        }
-        var style = toEmail.match(emailRegex) ? "valid" : "invalid"
-        $("#toEmailList").append("<div class=\""+ style + " toEmail\" id=\"toEmail" + toEmailIndex + "\">" + toEmail + "<img class=\"iconBtn\" style=\"height: 12px; margin-left:10px; margin: auto;\" onclick=\"removeToEmail('toEmail" + toEmailIndex + "', '" + toEmail + "');\" src=\"/assets/cross.svg\"/></div>")
-        toEmailIndex++
-        toEmailList.push(toEmail)
     }
 }
 
+function addToEmail(toEmail) {
+    if (toEmail.length <= 0) {
+        return
+    }
+    var style = toEmail.match(emailRegex) ? "valid" : "invalid"
+    $("<div class=\""+ style + " toEmail\" id=\"toEmail" + toEmailIndex + "\">" + toEmail + "<img class=\"iconBtn\" style=\"height: 12px; margin-left:10px; margin: auto;\" onclick=\"removeToEmail('toEmail" + toEmailIndex + "', '" + toEmail + "');\" src=\"/assets/cross.svg\"/></div>").insertBefore("#toEmailField")
+    toEmailIndex++
+    toEmailList.push(toEmail)
+}
+
 function removeToEmail(id, email) {
     const index = toEmailList.indexOf(email)
     if (index >= 0) {
@@ -112,8 +126,6 @@ function removeToEmail(id, email) {
     }
 
     $("#" + id).remove()
-    console.log("Remove email: " + email + " index:" + index)
-    console.log("toEmailList: " + toEmailList)
 }
 
 function mailNew(e) {
@@ -433,7 +445,6 @@ function sendNewMail() {
     }
     $("#newMailTo").val(composedEmailString)
     var formValue = $("#mailNewForm").serialize()
-    console.log("formValue: " + formValue)
     $.ajax({
         url: mailbox + "/sendNewMail",
         data: formValue,

web/templates/mailnew.html

@@ -6,10 +6,15 @@
                 Send
             </div>
             <div class="elidedText" style="display: block; flex: 1 1 auto;">
-                <div style="display: flex; flex-direction: row; max-width: 100%; flex-wrap: wrap;"><span style="flex: 0 1 auto; margin: auto;" class="primaryText">To:</span><div id="toEmailList" style="flex: 0 1 auto; display: flex; flex-wrap: wrap;"></div><input id="toEmailField" type="text" style="flex: 1 1 auto;"/></div>
-                <div style="display: flex; flex-direction: row;"><span style="flex: 0 1 auto" class="primaryText">Subject:</span><input id="newMailSubject" type="text" name="subject" style="flex: 1 1 auto"/></div></br>
+                <div style="flex: 0 1 auto; display: flex; flex-direction: row;">
+                    <span style="flex: 0 1 auto; margin: auto 10px;" class="primaryText">To:</span>
+                    <div id="toEmailList" class=".noselect" style="flex: 1 1 auto; display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--primary-color);">
+                        <input id="toEmailField" class="hiddenInput" type="text" style="flex: 1 1 auto; min-width: 500px;"/>
+                    </div>
+                </div>
+                <div class=".noselect" style="display: flex; flex-direction: row; margin-top: 10px;"><span style="flex: 0 1 auto; margin: auto 10px;" class="primaryText">Subject:</span><div style="display: flex; flex-direction: row; flex: 1 1 auto; border-bottom: 1px solid var(--primary-color);"><input id="newMailSubject" type="text" name="subject" style="flex: 1 1 auto" class="hiddenInput" /></div></div>
             </div>
-            <img class="iconBtn" style="width: 20px; margin-left:10px; margin-right: 10px;" onclick="closeDetails();" src="/assets/back.svg"/>
+            <img class="iconBtn" style="width: 20px; height: 20px; margin-left:10px;" onclick="closeDetails();" src="/assets/back.svg"/>
         </div>
     </div>
     <div class="horizontalPaddingBox">