Add quick reply, remove extra flex wrappers
parent
506164791e
commit
7b451b95cc
206
mail.css
206
mail.css
|
@ -687,7 +687,7 @@ div
|
|||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-list
|
||||
|
@ -1067,7 +1067,7 @@ div
|
|||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 60%;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view
|
||||
|
@ -1089,46 +1089,6 @@ div
|
|||
display: none;
|
||||
}
|
||||
|
||||
.message-view .vert-split
|
||||
{
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.message-view .row
|
||||
{
|
||||
display: table-row;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.message-view .row.full
|
||||
{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.message-view .nomail
|
||||
{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
box-shadow: inset 20px 20px 60px 0 rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-view .nomail img
|
||||
{
|
||||
/*display: block;*/
|
||||
}
|
||||
|
||||
.message-view .nomail .txt
|
||||
{
|
||||
color: #858a9b;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.message-view .actions
|
||||
{
|
||||
padding: 5px 5px 4px;
|
||||
|
@ -1202,34 +1162,52 @@ div
|
|||
display: none;
|
||||
}
|
||||
|
||||
.message-view .message
|
||||
{
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-view .message .flex
|
||||
.message-view
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.message-view .message .flex .headers
|
||||
.message-view .nomail
|
||||
{
|
||||
flex: none;
|
||||
display: none;
|
||||
box-shadow: inset 20px 20px 60px 0 rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-view .message .flex .text
|
||||
.message-view.no-mail-shown .nomail
|
||||
{
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-view .nomail .middle-wrap
|
||||
{
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.message-view .nomail .middle
|
||||
{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.message-view .nomail .txt
|
||||
{
|
||||
color: #858a9b;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.message-view .text
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-view .message .blocked-images
|
||||
.message-view .blocked-images
|
||||
{
|
||||
flex: none;
|
||||
background: -moz-linear-gradient(top, #f6e0a4 0%, #f5dc99 100%);
|
||||
|
@ -1240,17 +1218,22 @@ div
|
|||
color: #464646;
|
||||
}
|
||||
|
||||
.message-view .message .blocked-images .button
|
||||
.message-view .blocked-images .button
|
||||
{
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.message-view .message .blocked-images label
|
||||
.message-view .blocked-images label
|
||||
{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.message-view .message .headers
|
||||
.message-view.no-mail-shown .blocked-images
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-view .headers
|
||||
{
|
||||
background: -moz-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
|
||||
background: -webkit-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
|
||||
|
@ -1261,26 +1244,31 @@ div
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message-view .message .headers .top
|
||||
.message-view.no-mail-shown .headers
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-view .headers .top
|
||||
{
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.message-view .message .headers .top .subject
|
||||
.message-view .headers .top .subject
|
||||
{
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
color: #464646;
|
||||
}
|
||||
|
||||
.message-view .message .headers .top .time
|
||||
.message-view .headers .top .time
|
||||
{
|
||||
float: right;
|
||||
margin: 1px 0 0 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.message-view .message .headers .top .pin
|
||||
.message-view .headers .top .pin
|
||||
{
|
||||
float: right;
|
||||
width: 16px;
|
||||
|
@ -1291,52 +1279,124 @@ div
|
|||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.message-view .message .headers .top .pin:hover
|
||||
.message-view .headers .top .pin:hover
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-view .message .headers .top .pin.pressed
|
||||
.message-view .headers .top .pin.pressed
|
||||
{
|
||||
background: url(icons/mail_pinned.png);
|
||||
}
|
||||
|
||||
.message-view .message .headers .header-table
|
||||
.message-view .headers .header-table
|
||||
{
|
||||
display: table;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.message-view .message .headers .header
|
||||
.message-view .headers .header
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.message-view .message .headers .header > div
|
||||
.message-view .headers .header > div
|
||||
{
|
||||
display: table-cell;
|
||||
line-height: 32px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.message-view .message .headers .header .field
|
||||
.message-view .headers .header .field
|
||||
{
|
||||
font-weight: bold;
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
|
||||
.message-view .message .text
|
||||
.message-view .text
|
||||
{
|
||||
background: white;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-view .message .text p
|
||||
.message-view.no-mail-shown .text
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-view .text p
|
||||
{
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.message-view .quick-reply
|
||||
{
|
||||
border-top: 1px solid #bab7b5;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.message-view.no-quick .quick-reply,
|
||||
.message-view.no-mail-shown .quick-reply
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-view .quick-reply textarea
|
||||
{
|
||||
display: block;
|
||||
height: 100px;
|
||||
border: 1px solid gray;
|
||||
width: 100%;
|
||||
font: 16px/20px Consolas;
|
||||
}
|
||||
|
||||
.message-view .quick-reply .btns
|
||||
{
|
||||
float: right;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view
|
||||
{
|
||||
padding-right: 40%;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view.no-quick,
|
||||
.message-on-bottom .message-view.no-mail-shown
|
||||
{
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view .quick-reply
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #bab7b5;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view.no-quick .quick-reply,
|
||||
.message-on-bottom .message-view.no-mail-shown .quick-reply
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view .quick-reply textarea
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view .quick-reply .btns
|
||||
{
|
||||
text-align: right;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.window .title
|
||||
{
|
||||
font-weight: bold;
|
||||
|
|
48
mail.htm
48
mail.htm
|
@ -161,16 +161,17 @@
|
|||
</select>
|
||||
<label><input type="checkbox" /> Sort ascending</label>
|
||||
<label><input type="checkbox" checked="checked" /> Threaded</label>
|
||||
<label><input type="checkbox" checked="checked" onclick="switchQuickReply.apply(this)" /> Show Quick Reply</label>
|
||||
</div>
|
||||
<div class="split"><i></i></div>
|
||||
<div class="text">Mark as Read</div>
|
||||
<div class="fields">
|
||||
<select class="sortby">
|
||||
<option>Sort by sent date</option>
|
||||
<option>Sort by status</option>
|
||||
<option>Sort by label</option>
|
||||
<option>Sort by size</option>
|
||||
<option>Sort by subject</option>
|
||||
<option>Manually</option>
|
||||
<option>On Select</option>
|
||||
<option>After 1 second</option>
|
||||
<option>After 3 seconds</option>
|
||||
<option>After 5 seconds</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -482,7 +483,7 @@
|
|||
<div class="attach"></div>
|
||||
<div class="time">14:03</div>
|
||||
</div>
|
||||
<div class="message selected">
|
||||
<div class="message">
|
||||
<div class="icon"></div>
|
||||
<div class="subject">Re: холод)))</div>
|
||||
<div class="bullet"></div>
|
||||
|
@ -613,9 +614,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-view">
|
||||
<div class="vert-split">
|
||||
<div class="row">
|
||||
<div class="message-view no-mail-shown">
|
||||
<div class="actions">
|
||||
<a class="button show-dropdown" data-dropdown="reply"><img src="icons/mail_reply.png" />Reply <span class="down"></span></a>
|
||||
<a class="button"><img src="icons/mail_reply_all.png" />Reply All</a>
|
||||
|
@ -626,14 +625,14 @@
|
|||
<a class="button show-dropdown"><img src="icons/label.png" />Label <span class="down"></span></a>
|
||||
<a class="button whole show-dropdown settings" data-dropdown="settings"><img src="icons/config.png" />Settings <span class="down"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row full">
|
||||
<div class="nomail" style="display: none">
|
||||
<div class="nomail">
|
||||
<div class="middle-wrap">
|
||||
<div class="middle">
|
||||
<img src="icons/no_mail.png" />
|
||||
<div class="txt">No message selected</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="flex">
|
||||
</div>
|
||||
</div>
|
||||
<div class="headers">
|
||||
<div class="top">
|
||||
<div class="pin"></div>
|
||||
|
@ -675,22 +674,33 @@
|
|||
<meta itemprop="description" content="View this Issue on GitHub"></meta>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quick-reply">
|
||||
<textarea></textarea>
|
||||
<div class="btns">
|
||||
<a class="button"><img src="icons/mail_send.png" /> Quick Reply</a>
|
||||
<a class="button"><img src="icons/mail_reply_all.png" /> Quick Reply All</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
<!--
|
||||
// TODO: threads
|
||||
// TODO: virtual scroll
|
||||
// TODO: expand/collapse days, handle up/down (switch messages -> days -> messages -> scroll), pgup/pgdown, home/end keys
|
||||
// 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
|
||||
// TODO: threads
|
||||
// TODO: mailing lists (via List-Id)
|
||||
// APIs: get accounts, get folders, get message groups, get messages (with virtual scroll), get message, save message
|
||||
function switchQuickReply()
|
||||
{
|
||||
var e = document.querySelector('.message-view');
|
||||
if (this.checked)
|
||||
e.className = e.className.replace(/ no-quick/, '');
|
||||
else
|
||||
e.className += ' no-quick';
|
||||
}
|
||||
function expandChecks()
|
||||
{
|
||||
var e = this.firstChild.className == 'expand';
|
||||
|
@ -1006,6 +1016,8 @@ function addAttachments()
|
|||
if (selectedMsg)
|
||||
selectedMsg.className = selectedMsg.className.replace(/ selected/, '');
|
||||
selectedMsg = this;
|
||||
var e = document.querySelector('.message-view');
|
||||
e.className = e.className.replace(/ no-mail-shown/, '');
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
Loading…
Reference in New Issue