likeopera-frontend/mail.htm

686 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mail.css" />
</head>
<body>
<div class="dropdown" id="dropdown-account" tabindex="1">
<div class="item i16">
<img src="icons/mail_unread.png" />
<span>Read vitalif@mail.ru</span>
</div>
<div class="item i16">
<img src="icons/folder.png" />
<span>IMAP Folders</span>
</div>
<div class="item">
<img src="icons/properties.png" />
<span>Properties...</span>
</div>
</div>
<div class="dropdown" id="dropdown-forward" tabindex="1">
<div class="item i16">
<div class="hotkey">F</div>
<img src="icons/mail_forward.png" />
<span>Forward</span>
</div>
<div class="item">
<div class="hotkey">D</div>
<span>Redirect</span>
</div>
</div>
<div class="dropdown" id="dropdown-delete" tabindex="1">
<div class="item i16">
<span>Move to Trash</span>
</div>
<div class="item">
<img src="icons/delete.png" />
<span>Delete Permanently</span>
</div>
</div>
<div class="folder-list progress-visible">
<div class="top-border-gradient"></div>
<div class="bottom-border-gradient"></div>
<div class="actions">
<a class="button"><img src="icons/compose.png" /> Compose</a>
<a id="show-dropdown-check-send" class="button show-dropdown check-send">
<img src="icons/mail_check_send.png" />
<span class="down"></span>
</a>
<div class="dropdown" id="dropdown-check-send" tabindex="1">
<div class="item">
<div class="hotkey">Ctrl-K</div>
<img src="icons/mail_check.png" />
<span>Check All</span>
</div>
<div class="item">
<div class="hotkey">Ctrl-Shift-K</div>
<img src="icons/mail_send.png" />
<span>Send Queued</span>
</div>
<div class="split"><i></i></div>
<div class="item">
<img src="icons/mail_check.png" />
<span>vitalif@mail.ru</span>
</div>
<div class="item">
<img src="icons/mail_check.png" />
<span>vitalif@yourcmc.ru</span>
</div>
<div class="split"><i></i></div>
<div class="item">
<span>Resynchronize All Messages</span>
</div>
</div>
</div>
<div class="listview">
<div class="account-header">
All Messages
<div class="msg-count">65</div>
</div>
<div class="account-folders">
<div class="visible-part">
<div class="folder with-unread selected">
<img src="icons/mail_unread.png" />
<span>Unread</span>
<div class="msg-count">65</div>
</div>
<div class="folder with-unread">
<img src="icons/mail_received.png" />
<span>Received</span>
<div class="msg-count">65</div>
</div>
<div class="folder">
<img src="icons/mail_pinned.png" />
<span>Pinned</span>
</div>
<div class="folder">
<img src="icons/mail_outbox.png" />
<span>Outbox</span>
</div>
<div class="folder">
<img src="icons/mail_sent.png" />
<span>Sent</span>
</div>
<div class="folder">
<img src="icons/mail_drafts.png" />
<span>Drafts</span>
<div class="msg-count">507</div>
</div>
<div class="folder">
<img src="icons/mail_spam.png" />
<span>Spam</span>
</div>
<div class="folder">
<img src="icons/mail_trash.png" />
<span>Trash</span>
<div class="msg-count">423</div>
</div>
</div>
</div>
<div class="account-header">
vitalif@mail.ru
<div class="cfg" id="show-dropdown-account"></div>
<div class="msg-count">48</div>
<div class="loading icon"></div>
<div class="warning icon" style="display: none"></div>
</div>
<div class="account-folders">
<div class="visible-part">
<div class="folder with-unread">
<img src="icons/mail_unread.png" />
<span>Unread</span>
<div class="msg-count">48</div>
</div>
<div class="folder with-unread">
<img src="icons/folder.png" />
<span>INBOX</span>
<div class="msg-count">48</div>
</div>
<div class="folder">
<img src="icons/folder.png" />
<span>TODO</span>
</div>
<div class="folder">
<img src="icons/folder.png" />
<span>Архив</span>
</div>
<div class="folder">
<img src="icons/mail_trash.png" />
<span>Корзина</span>
</div>
<div class="folder">
<img src="icons/mail_sent.png" />
<span>Отправленные</span>
</div>
<div class="folder">
<img src="icons/mail_spam.png" />
<span>Спам</span>
</div>
<div class="folder">
<img src="icons/mail_drafts.png" />
<span>Черновики</span>
</div>
<div class="folder">
<img src="icons/mail_pinned.png" />
<span>Pinned</span>
</div>
</div>
</div>
<div class="account-header collapsed">
vitalif@yourcmc.ru
<div class="warning" style="display: none"></div>
<div class="cfg"></div>
<div class="msg-count">16</div>
</div>
<div class="account-folders collapsed">
<div class="visible-part">
<div class="folder with-unread">
<img src="icons/mail_unread.png" />
<span>Unread</span>
<div class="msg-count">16</div>
</div>
<div class="folder">
<img src="icons/folder.png" />
<span>Drafts</span>
</div>
<div class="folder">
<img src="icons/folder.png" />
<span>HAM</span>
</div>
<div class="folder with-unread">
<img src="icons/folder.png" />
<span>INBOX</span>
<div class="msg-count">16</div>
</div>
<div class="folder">
<img src="icons/folder.png" />
<span>intermedia_su</span>
</div>
<div class="folder">
<img src="icons/mail_sent.png" />
<span>Sent</span>
</div>
<div class="folder">
<img src="icons/mail_spam.png" />
<span>SPAM</span>
</div>
<div class="folder">
<img src="icons/mail_trash.png" />
<span>TRASH</span>
</div>
<div class="folder">
<img src="icons/mail_pinned.png" />
<span>Pinned</span>
</div>
</div>
</div>
</div>
<div class="progress-bar">
<div class="pending">Loading database (33%)</div>
<div class="clip" style="width: 33%; overflow: hidden">
<div class="done">Loading database (33%)</div>
</div>
</div>
</div>
<div class="message-list">
<div class="top-border-gradient"></div>
<div class="bottom-border-gradient"></div>
<div class="actions">
<div class="searchbox">
<input type="text" placeholder="Search mail" />
</div>
<a id="show-dropdown-threads" class="button checkable show-dropdown threads" title="Show Message Thread">
<span class="img"></span>
<span class="down"></span>
</a>
<div class="dropdown" id="dropdown-threads" tabindex="1">
<div class="item">
<img src="icons/thread.png" />
<span>Show Message Thread</span>
</div>
<div class="item">
<span>Follow Thread</span>
</div>
<div class="item">
<span>Ignore Thread</span>
</div>
<div class="split"><i></i></div>
<div class="item">
<div class="hotkey">M</div>
<img src="icons/read.png" />
<span>Mark Thread as Read</span>
</div>
<div class="item">
<div class="hotkey">N</div>
<span>Mark Thread and Go to Next Unread</span>
</div>
</div>
<a id="show-dropdown-list-sort" class="button show-dropdown whole list-sort">
<img src="icons/list_sort.png" />
<span class="down"></span>
</a>
<div class="dropdown window list-sort" id="dropdown-list-sort" tabindex="1">
<div class="callout-top"></div>
<div class="title">Sorting for INBOX</div>
<label><input type="checkbox" checked="checked" /> Override default sorting</label>
<div class="sorting">
<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>
</select>
<select class="group">
<option>Do not group</option>
<option>Group by read status</option>
<option>Group by pinned status</option>
<option>Group by date</option>
</select>
<label><input type="checkbox" /> Sort ascending</label>
<label><input type="checkbox" checked="checked" /> Threaded</label>
</div>
<div class="show">
<a class="button" onclick="expandChecks.apply(this)"><span class="expand"></span> Show</a>
</div>
<div class="show-checks" style="display: none">
<label><input type="checkbox" checked="checked" /> Show Read</label>
<label><input type="checkbox" /> Show Trash</label>
<label><input type="checkbox" checked="checked" /> Show Spam</label>
<label><input type="checkbox" checked="checked" /> Show Hidden</label>
<label><input type="checkbox" checked="checked" /> Show Mailing Lists</label>
<label><input type="checkbox" checked="checked" /> Show Sent</label>
<label><input type="checkbox" /> Show Duplicates</label>
</div>
</div>
<div class="clear"></div>
</div>
<div class="listview" tabindex="1" onscroll="this.children[0].style.top = this.scrollTop+'px'">
<div class="day first-day">TODAY</div>
<div class="day-list">
<div class="message unseen">
<div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
<div class="bullet"></div>
<div class="from">Jan Luca Naumann</div>
<div class="attach"></div>
<div class="time">19:31</div>
</div>
<div class="message unread">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach"></div>
<div class="time">14:03</div>
</div>
<div class="message selected">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach" style="display: none"></div>
<div class="time">13:49</div>
</div>
</div>
<div class="day">YESTERDAY</div>
<div class="day-list">
<div class="message">
<div class="subject">интересно про Сингапур</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach" style="display: none"></div>
<div class="time">Сб 22:09</div>
</div>
</div>
<div class="day">THURSDAY</div>
<div class="day-list">
<div class="message">
<div class="subject">Re: [mediawiki4intranet/IntraACL] Manage Groups (#59)</div>
<div class="bullet"></div>
<div class="from">Serze</div>
<div class="attach" style="display: none"></div>
<div class="time">Чт 21:10</div>
</div>
<!-- -->
<div class="message">
<div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
<div class="bullet"></div>
<div class="from">Jan Luca Naumann</div>
<div class="attach"></div>
<div class="time">19:31</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach"></div>
<div class="time">14:03</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach" style="display: none"></div>
<div class="time">13:49</div>
</div>
<div class="message">
<div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
<div class="bullet"></div>
<div class="from">Jan Luca Naumann</div>
<div class="attach"></div>
<div class="time">19:31</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach"></div>
<div class="time">14:03</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach" style="display: none"></div>
<div class="time">13:49</div>
</div>
<div class="message">
<div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
<div class="bullet"></div>
<div class="from">Jan Luca Naumann</div>
<div class="attach"></div>
<div class="time">19:31</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach"></div>
<div class="time">14:03</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach" style="display: none"></div>
<div class="time">13:49</div>
</div>
<div class="message">
<div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
<div class="bullet"></div>
<div class="from">Jan Luca Naumann</div>
<div class="attach"></div>
<div class="time">19:31</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach"></div>
<div class="time">14:03</div>
</div>
<div class="message">
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="attach" style="display: none"></div>
<div class="time">13:49</div>
</div>
</div>
</div>
</div>
<div class="message-view">
<div class="vert-split">
<div class="row">
<div class="actions">
<a class="button"><img src="icons/mail_reply.png" />Reply <img src="icons/down.png" /></a>
<a class="button"><img src="icons/mail_reply_all.png" />Reply All</a>
<a class="button show-dropdown" id="show-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" id="show-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 show-dropdown"><img src="icons/config.png" />Settings <span class="down"></span></a>
</div>
</div>
<div class="row full">
<div class="nomail" style="display: none">
<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="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>
</div>
<script>
<!--
// TODO: compose window
// TODO: expand/collapse days, handle up/down keys (switch messages -> days -> messages -> scroll)
// TODO: keyboard navigation in dropdowns
// TODO: message multiselect in list
// TODO: space=read
// TODO: quick reply
// TODO: async backend with parallel fetch, ssh backdoor for work mail
// TODO: threads
// TODO: "default mail settings" window popup
function expandChecks()
{
var e = this.firstChild.className == 'expand';
this.firstChild.className = e ? 'collapse' : 'expand';
this.parentNode.nextSibling.nextSibling.style.display = e ? '' : 'none';
}
function checkButton()
{
this.className = this.className.indexOf(' checked') >= 0 ? this.className.replace(' checked', '') : this.className+' checked';
}
function collapseFolders()
{
var h = this, e = this;
e = e.nextSibling.nextSibling;
if (e.className.indexOf('animating') >= 0)
return;
var expand = e.className.indexOf('collapsed') >= 0;
if (expand)
{
e.children[0].className = 'visible-part animating';
e.style.height = e.children[0].offsetHeight+'px';
}
else
{
e.children[0].className = 'visible-part animating';
e.style.height = e.children[0].offsetHeight+'px';
setTimeout(function()
{
e.style.height = '0px';
}, 50);
}
setTimeout(function()
{
h.className = expand ? 'account-header' : 'account-header collapsed';
e.className = expand ? 'account-folders' : 'account-folders collapsed';
e.children[0].className = 'visible-part';
e.style.height = '';
}, expand ? 200 : 250);
}
(function() {
var e = document.getElementsByClassName('account-header');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', collapseFolders);
e = document.querySelectorAll('.message-list .message');
var selectedMsg;
for (var i = 0; i < e.length; i++)
{
if (e[i].className.indexOf(' selected') >= 0)
selectedMsg = e[i];
e[i].addEventListener('mousedown', selectMsg);
}
e = document.getElementsByClassName('cfg');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', showCfg);
function showCfg(ev)
{
showDropdown.call(this, ev);
}
e = document.querySelectorAll('.button.checkable');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', checkButton);
e = document.querySelectorAll('.show-dropdown .down');
for (var i = 0; i < e.length; i++)
{
if (e[i].parentNode.className.indexOf(' whole') >= 0)
e[i].parentNode.addEventListener('click', showDropdown);
else
{
e[i].addEventListener('click', showDropdown);
e[i].parentNode.addEventListener('click', hideDropdown);
}
}
e = document.querySelectorAll('.dropdown');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', stopHidingDropdowns);
document.body.addEventListener('click', hideAllDropdowns);
function stopHidingDropdowns(ev)
{
ev.stopPropagation();
}
function getOffset(elem)
{
if (elem.getBoundingClientRect)
{
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
else
{
var top = 0, left = 0;
while(elem)
{
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent;
}
return { top: top, left: left };
}
}
function showDropdown(ev)
{
var b = this.className == 'down' ? this.parentNode : this;
if (b.className.indexOf(' pressed') < 0)
{
hideAllDropdowns();
b.className += ' pressed';
var m = document.getElementById('dropdown-'+b.id.substr(14));
var p = getOffset(b);
m.style.top = (p.top+b.offsetHeight)+'px';
m.style.left = p.left+'px';
m.style.display = 'block';
if (m.className.indexOf(' window') >= 0)
{
m.style.top = (p.top+b.offsetHeight+3)+'px';
m.style.left = Math.round(p.left+b.offsetWidth/2-m.offsetWidth/2)+'px';
}
}
else
hideDropdown.apply(b);
ev.stopPropagation();
}
function hideDropdown()
{
if (this.className.indexOf(' pressed') >= 0)
{
this.className = this.className.replace(/ pressed/g, '');
var m = document.getElementById('dropdown-'+this.id.substr(14));
m.style.display = '';
}
}
function hideAllDropdowns()
{
var e = document.querySelectorAll('.dropdown');
for (var i = 0; i < e.length; i++)
{
if (e[i].style.display == 'block')
{
var m = document.getElementById('show-'+e[i].id);
m.className = m.className.replace(/ pressed/g, '');
e[i].style.display = '';
}
}
}
window.addEventListener('resize', resize);
resize();
function resize()
{
var f = document.querySelector('.folder-list .progress-bar');
var e = document.querySelectorAll('.folder-list .progress-bar .done, .folder-list .progress-bar .pending');
for (var i = 0; i < e.length; i++)
e[i].style.width = f.offsetWidth+'px';
}
function selectMsg()
{
if (this != selectedMsg)
{
this.className += ' selected';
if (selectedMsg)
selectedMsg.className = selectedMsg.className.replace(/ selected/, '');
selectedMsg = this;
}
}
})();
-->
</script>
</body>
</html>