add attach inputs

mail.css

@@ -8,6 +8,7 @@ html, body
 	-webkit-text-size-adjust: none;
 	-moz-text-size-adjust: none;
 	text-size-adjust: none;
+	overflow: hidden;
 }
 
 .clear
@@ -1436,6 +1437,7 @@ div
 	right: 0;
 	top: 0;
 	bottom: 0;
+	overflow: hidden;
 }
 
 .compose .headers .attach .no-attach
@@ -1454,6 +1456,17 @@ div
 	opacity: 1;
 }
 
+.compose .headers .attach input
+{
+	z-index: 2;
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	opacity: 0;
+}
+
 .compose .headers .attach .attach-list
 {
 	position: absolute;
@@ -1461,6 +1474,7 @@ div
 	right: 0;
 	top: 0;
 	bottom: 0;
+	outline: 0;
 	background: white;
 	border-left: 1px solid #cac6c5;
 	-webkit-touch-callout: none;
@@ -1490,6 +1504,11 @@ div
 	right: 0;
 }
 
+.compose .headers .attach .attach-list .title .name .button
+{
+	position: absolute; top: 0; right: 4px; bottom: 0;
+}
+
 .compose .headers .attach .attach-list .title > div
 {
 	background: -moz-linear-gradient(left, #e0dddb 0%, #eae9e8 100%);

mail.htm

@@ -379,10 +379,13 @@
                     </div>
                 </div>
                 <div class="attach">
-                    <div class="no-attach" style="display: none"></div>
-                    <div class="attach-list" tabindex="1" onscroll="this.children[0].style.top = this.scrollTop+'px'">
+                    <div class="no-attach"><input type="file" multiple="multiple" onchange="addAttachments.apply(this)" /></div>
+                    <div class="attach-list" tabindex="1" onscroll="this.children[0].style.top = this.scrollTop+'px'" style="display: none">
                         <div class="title">
-                            <div class="name">Attachment</div>
+                            <div class="name">Attachment <a class="button">
+                                <img src="icons/attach.png" />
+                                <input type="file" multiple="multiple" onchange="addAttachments.apply(this)" />
+                            </a></div>
                             <div class="size">Size</div>
                         </div>
                         <div class="attachment selected">
@@ -658,9 +661,10 @@
 </div>
 <script>
 <!--
-// TODO: expand/collapse days, handle up/down keys (switch messages -> days -> messages -> scroll)
+// TODO: read/unread/unfetched icons before subject in bottom/list-only views
+// TODO: expand/collapse days, handle up/down (switch messages -> days -> messages -> scroll), pgup/pgdown, home/end keys
 // TODO: keyboard navigation in dropdowns
-// TODO: message multiselect in list
+// TODO: message multiselect in list (with ctrl, shift and keyboard)
 // TODO: space=read
 // TODO: quick reply
 // TODO: async backend with parallel fetch, ssh backdoor for work mail
@@ -704,6 +708,18 @@ function collapseFolders()
         e.style.height = '';
     }, expand ? 200 : 250);
 }
+function addAttachments()
+{
+    var p = this;
+    while (p && !/(^|\s)attach($|\s)/.exec(p.className))
+        p = p.parentNode;
+    var l = p.querySelector('.attach-list');
+    var no = p.querySelector('.no-attach');
+    l.style.display = '';
+    no.style.display = 'none';
+    // reset input
+    this.innerHTML = this.innerHTML;
+}
 (function()
 {
     var e = document.getElementsByClassName('account-header');