add attach inputs

master
Vitaliy Filippov 2016-06-16 13:49:34 +03:00
parent 254f9bafcc
commit c57b0467bb
3 changed files with 40 additions and 5 deletions

BIN
icons/attach.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 B

View File

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

View File

@ -379,10 +379,13 @@
</div> </div>
</div> </div>
<div class="attach"> <div class="attach">
<div class="no-attach" style="display: none"></div> <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'"> <div class="attach-list" tabindex="1" onscroll="this.children[0].style.top = this.scrollTop+'px'" style="display: none">
<div class="title"> <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 class="size">Size</div>
</div> </div>
<div class="attachment selected"> <div class="attachment selected">
@ -658,9 +661,10 @@
</div> </div>
<script> <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: keyboard navigation in dropdowns
// TODO: message multiselect in list // TODO: message multiselect in list (with ctrl, shift and keyboard)
// TODO: space=read // TODO: space=read
// TODO: quick reply // TODO: quick reply
// TODO: async backend with parallel fetch, ssh backdoor for work mail // TODO: async backend with parallel fetch, ssh backdoor for work mail
@ -704,6 +708,18 @@ function collapseFolders()
e.style.height = ''; e.style.height = '';
}, expand ? 200 : 250); }, 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() (function()
{ {
var e = document.getElementsByClassName('account-header'); var e = document.getElementsByClassName('account-header');