Disable send functionality if no emails are entered

- Add disabled appearence to btn classes
- Add tab to complete email keycode list

web/css/controls.css

@@ -75,6 +75,10 @@
     display: block;
 }
 
+.btn.disabled {
+    background-color: var(--inactive-color);
+}
+
 .fadeOut {
     background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, var(--bg-color) 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0,0)), color-stop(100%,var(--bg-color))); /* Chrome,Safari4+ */

web/css/styles.css

@@ -7,6 +7,7 @@
     --primary-dark-color: #3ab849;
     --secondary-color: #ebffee;
     --secondary-dark-color: #b8d4bc;
+    --inactive-color: #cfcfcf;
     --bg-color: #ffffff;
     --bg-dark-color: #ebffee;
     --primary-text-color: #000000;

web/js/index.js

@@ -86,6 +86,7 @@ $(document).ready(function(){
                     }
             break
             case 13:
+            case 9:
                 addToEmail(actualText.slice(0, selectionPosition))
                 $("#toEmailField").val(actualText.slice(selectionPosition + 1, actualText.length))
                 break
@@ -117,17 +118,27 @@ function addToEmail(toEmail) {
     $("<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)
+    checkSendDisabled()
 }
 
 function removeToEmail(id, email) {
     const index = toEmailList.indexOf(email)
     if (index >= 0) {
         toEmailList.splice(index, 1)
+        checkSendDisabled()
     }
 
     $("#" + id).remove()
 }
 
+function checkSendDisabled() {
+    if (toEmailList.length > 0) {
+        $("#sendButton").removeClass("disabled")
+    } else {
+        $("#sendButton").addClass("disabled")
+    }
+}
+
 function mailNew(e) {
     window.location.hash = currentFolder + currentPage + "/mailNew"
 }
@@ -438,7 +449,16 @@ function toggleDropDown(dd) {
     $("#"+dd).toggle()
 }
 
-function sendNewMail() {
+function sendNewMail(force) {
+    if (toEmailList.length <= 0) {
+        return
+    }
+
+    if (!force) {
+        //TODO: Check if subject or body empty and display popup here
+        // return
+    }
+
     var composedEmailString = toEmailList[0]
     for(var i = 1; i < toEmailList.length; i++) {
         composedEmailString += "," + toEmailList[i]

web/templates/mailnew.html

@@ -1,7 +1,7 @@
 <form id="mailNewForm" style="height: 100%; width: 100%; display:flex; flex-direction: column;">
     <div class="horizontalPaddingBox" style="flex-grow: 0!important;">
         <div style="width: 100%; display: flex; flex-direction: row;">
-            <div class="btn materialLevel1" style="margin-right: 10px; min-width: 60px; max-height: 60px; max-width: 60px; min-height: 60px;" onclick="sendNewMail();">
+            <div id="sendButton" class="btn materialLevel1 disabled" style="margin-right: 10px; min-width: 60px; max-height: 60px; max-width: 60px; min-height: 60px;" onclick="sendNewMail();">
                 <img src="/assets/send.svg" style="width: 40px"/>
                 Send
             </div>