vitalif
/
likeopera-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add quick reply, remove extra flex wrappers

master
Vitaliy Filippov 2016-06-18 13:42:48 +03:00
parent 506164791e
commit 7b451b95cc
2 changed files with 213 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
mail.css
View File

@ -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;

148
mail.htm
View File

@ -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,84 +614,93 @@
</div>
</div>
</div>
<div class="message-view">
<div class="vert-split">
<div class="row">
<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>
<a class="button show-dropdown" data-dropdown="forward"><img src="icons/mail_forward.png" />Forward <span class="down"></span></a>
<a class="button checkable action-read"><span class="img"></span><span class="txt"></span></a>
<a class="button checkable action-spam"><span class="img"></span><span class="txt"></span></a>
<a class="button checkable action-delete show-dropdown" data-dropdown="delete"><span class="img"></span><span class="txt"></span> <span class="down"></span></a>
<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="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>
<a class="button show-dropdown" data-dropdown="forward"><img src="icons/mail_forward.png" />Forward <span class="down"></span></a>
<a class="button checkable action-read"><span class="img"></span><span class="txt"></span></a>
<a class="button checkable action-spam"><span class="img"></span><span class="txt"></span></a>
<a class="button checkable action-delete show-dropdown" data-dropdown="delete"><span class="img"></span><span class="txt"></span> <span class="down"></span></a>
<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 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 class="headers">
<div class="top">
<div class="pin"></div>
<div class="time">Чт 09 июн 2016 21:10:50</div>
<div class="subject">Re: [mediawiki4intranet/IntraACL] Manage Groups (#59)</div>
</div>
<div class="header-table">
<div class="header">
<div class="field">From</div>
<div class="value"><a class="button">Serze &lt;notifications@github.com&gt;</a></div>
</div>
<div class="header">
<div class="field">To</div>
<div class="value"><a class="button">mediawiki4intranet/IntraACL &lt;IntraACL@noreply.github.com&gt;</a></div>
</div>
<div class="header">
<div class="field">Cc</div>
<div class="value"><a class="button">vitalif@mail.ru</a> <a class="button">Comment &lt;comment@noreply.github.com&gt;</a></div>
</div>
<div class="header">
<div class="field">Reply-to</div>
<div class="value"><a class="button">mediawiki4intranet/IntraACL &lt;reply+000e6cbb7663582057cb5221d288cb49c4366302aa8b038b92cf000000011371732a92a169ce097e4f81@reply.github.com&gt;</a></div>
</div>
</div>
</div>
<div class="blocked-images">
<img src="icons/block.png" /> This message contains blocked images.
<a class="button raised">Load Images</a>
<label><input type="checkbox" /> Always load from invitations@linkedin.com</label>
</div>
<div class="text">
<p>Any update on this?</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">&mdash;<br />You are receiving this because you commented.<br />Reply to this email directly, <a href="https://github.com/mediawiki4intranet/IntraACL/issues/59#issuecomment-224979690">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe/AA5suyv1q1MukSFruqkkKiGePYCL1Ti0ks5qKFcqgaJpZM4IxZ6X">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/AA5su8dZdGM2S9AObD3rLSBnaRRvUSAkks5qKFcqgaJpZM4IxZ6X.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
<link itemprop="url" href="https://github.com/mediawiki4intranet/IntraACL/issues/59#issuecomment-224979690"></link>
<meta itemprop="name" content="View Issue"></meta>
</div>
<meta itemprop="description" content="View this Issue on GitHub"></meta>
</div>
</div>
</div>
</div>
</div>
<div class="headers">
<div class="top">
<div class="pin"></div>
<div class="time">Чт 09 июн 2016 21:10:50</div>
<div class="subject">Re: [mediawiki4intranet/IntraACL] Manage Groups (#59)</div>
</div>
<div class="header-table">
<div class="header">
<div class="field">From</div>
<div class="value"><a class="button">Serze &lt;notifications@github.com&gt;</a></div>
</div>
<div class="header">
<div class="field">To</div>
<div class="value"><a class="button">mediawiki4intranet/IntraACL &lt;IntraACL@noreply.github.com&gt;</a></div>
</div>
<div class="header">
<div class="field">Cc</div>
<div class="value"><a class="button">vitalif@mail.ru</a> <a class="button">Comment &lt;comment@noreply.github.com&gt;</a></div>
</div>
<div class="header">
<div class="field">Reply-to</div>
<div class="value"><a class="button">mediawiki4intranet/IntraACL &lt;reply+000e6cbb7663582057cb5221d288cb49c4366302aa8b038b92cf000000011371732a92a169ce097e4f81@reply.github.com&gt;</a></div>
</div>
</div>
</div>
<div class="blocked-images">
<img src="icons/block.png" /> This message contains blocked images.
<a class="button raised">Load Images</a>
<label><input type="checkbox" /> Always load from invitations@linkedin.com</label>
</div>
<div class="text">
<p>Any update on this?</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">&mdash;<br />You are receiving this because you commented.<br />Reply to this email directly, <a href="https://github.com/mediawiki4intranet/IntraACL/issues/59#issuecomment-224979690">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe/AA5suyv1q1MukSFruqkkKiGePYCL1Ti0ks5qKFcqgaJpZM4IxZ6X">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/AA5su8dZdGM2S9AObD3rLSBnaRRvUSAkks5qKFcqgaJpZM4IxZ6X.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
<link itemprop="url" href="https://github.com/mediawiki4intranet/IntraACL/issues/59#issuecomment-224979690"></link>
<meta itemprop="name" content="View Issue"></meta>
</div>
<meta itemprop="description" content="View this Issue on GitHub"></meta>
</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/, '');
}
}
})();