add attach inputs
parent
254f9bafcc
commit
c57b0467bb
Binary file not shown.
After Width: | Height: | Size: 745 B |
19
mail.css
19
mail.css
|
@ -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%);
|
||||||
|
|
26
mail.htm
26
mail.htm
|
@ -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');
|
||||||
|
|
Loading…
Reference in New Issue