likeopera-frontend/raw/mail.htm

1050 lines
42 KiB
HTML
Raw Permalink 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" />
<link rel="stylesheet" type="text/css" href="mail-raw.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-reply" tabindex="1">
<div class="item">
<div class="hotkey">R</div>
<img src="icons/mail_reply.png" />
<span>Reply</span>
</div>
<div class="item">
<img src="icons/mail_reply.png" />
<span>Reply to Sender</span>
</div>
<div class="item disabled">
<img src="icons/mail_reply_all.png" />
<span>Reply to List</span>
</div>
</div>
<div class="dropdown" id="dropdown-forward" tabindex="1">
<div class="item">
<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">
<span>Move to Trash</span>
</div>
<div class="item">
<img src="icons/delete.png" />
<span>Delete Permanently</span>
</div>
</div>
<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 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>
<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="dropdown window" id="dropdown-settings" tabindex="1">
<div class="callout-top"></div>
<div class="text">Mail Layout</div>
<div class="layouts">
<a class="button mail-message-on-right selected" title="List and Message on Right"><span></span></a>
<a class="button mail-message-on-bottom" title="List and Message Below"><span></span></a>
<a class="button mail-message-invisible" title="List Only"><span></span></a>
</div>
<div class="split"><i></i></div>
<div class="text">Default List Sorting</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>
</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>
<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>Manually</option>
<option>On Select</option>
<option>After 1 second</option>
<option>After 3 seconds</option>
<option>After 5 seconds</option>
</select>
</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 data-dropdown="check-send" class="button show-dropdown check-send">
<img src="icons/mail_check_send.png" />
<span class="down"></span>
</a>
</div>
<div class="listview">
<div class="account"><!-- необязательная обёртка -->
<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>
<div class="account">
<div class="account-header">
vitalif@mail.ru
<div class="cfg" data-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>
<div class="account">
<div class="account-header collapsed">
vitalif@yourcmc.ru
<div class="cfg"></div>
<div class="msg-count">16</div>
<div class="loading icon" style="display: none"></div>
<div class="warning icon" style="display: none"></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>
<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="tab-panel">
<div class="tab-bar">
<div class="tab selected noclose" id="t-tab1"><img src="icons/mail_unread.png" /> Unread (64)</div>
<div class="tab" id="t-tab2"><a class="close"></a> <img src="icons/mail_drafts.png" class="i16" /> Compose Message</div>
<div class="tab" id="t-tab3"><a class="close"></a> <img src="icons/mail_drafts.png" class="i16" /> Compose Message</div>
</div>
<div class="tab-content" id="tab3" style="display: none">
</div>
<div class="tab-content" id="tab2" style="display: none">
<div class="compose">
<div class="actions">
<a class="button"><img src="icons/mail_send.png" />Send</a>
<a class="button"><img src="icons/delete.png" /></a>
</div>
<div class="flex">
<div class="headers">
<div class="headers-table">
<div class="header">
<div class="field">From</div>
<div class="value">
<select>
<option>"Виталий Филиппов" &lt;vitalif@mail.ru&gt;</option>
<option>"Виталий Филиппов" &lt;vitalif@yourcmc.ru&gt;</option>
</select>
</div>
</div>
<div class="header">
<div class="field">To</div>
<div class="value"><input /></div>
</div>
<div class="header">
<div class="field">Cc</div>
<div class="value"><input /></div>
</div>
<div class="header">
<div class="field">Bcc</div>
<div class="value"><input /></div>
</div>
<div class="header">
<div class="field">Subject</div>
<div class="value"><input /></div>
</div>
</div>
<div class="attach">
<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'" style="display: none">
<div class="title">
<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>
<div class="attachment selected">
<div class="name">selectedcolor1.png</div>
<div class="size">8.1 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
<div class="attachment">
<div class="name">selectedcolor2.png</div>
<div class="size">7.9 KB</div>
</div>
</div>
</div>
</div>
<div class="text">
<textarea>
--
С наилучшими пожеланиями,
Виталий Филиппов
</textarea>
</div>
</div>
</div>
</div>
<div class="tab-content message-on-right" id="tab1">
<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 data-dropdown="threads" class="button checkable show-dropdown threads" title="Show Message Thread">
<span class="img"></span>
<span class="down"></span>
</a>
<a class="button whole show-dropdown settings" data-dropdown="settings">
<img src="icons/config.png" />
<span class="down"></span>
</a>
<a data-dropdown="list-sort" class="button show-dropdown whole list-sort">
<img src="icons/list_sort.png" />
<span class="down"></span>
</a>
<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 sent thread0">
<div class="icon"></div>
<div class="subject">кошку хочешь?))</div>
<div class="expand collapse"></div>
<div class="bullet"></div>
<div class="from">To Margarita Philippova</div>
<div class="size">855 Б</div>
<div class="attach" style="display: none"></div>
<div class="time">Вт 21:24</div>
</div>
<div class="thread">
<div class="message">
<div class="icon" style="width: 30px; background-position: 10px 7px"></div>
<div class="subject" style="padding-left: 30px">Re: кошку хочешь?))</div>
<div class="bullet"></div>
<div class="from" style="left: 31px">Margarita Philippova</div>
<div class="size">4.1 КБ</div>
<div class="attach"></div>
<div class="time">Вт 22:31</div>
</div>
</div>
<div class="message unseen">
<div class="icon"></div>
<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="size">2.4 МБ</div>
<div class="attach"></div>
<div class="time">19:31</div>
</div>
<div class="message unread">
<div class="icon"></div>
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="size">2.0 МБ</div>
<div class="attach"></div>
<div class="time">14:03</div>
</div>
<div class="message">
<div class="icon"></div>
<div class="subject">Re: холод)))</div>
<div class="bullet"></div>
<div class="from">Margarita Philippova</div>
<div class="size">24 Кб</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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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="icon"></div>
<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 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="flex1"></div>
<div class="middle">
<img src="icons/no_mail.png" />
<div class="txt">No message selected</div>
</div>
<div class="flex1"></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: 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: async backend with parallel fetch, ssh backdoor for work mail
// 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';
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 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()
{
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.querySelectorAll('#dropdown-settings .layouts .button');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', switchLayout);
function switchLayout(ev)
{
if (this.className.indexOf(' selected') < 0)
{
var l = / mail-(\S+)/.exec(this.className)[1];
var e = document.querySelectorAll('#dropdown-settings .layouts .button');
for (var i = 0; i < e.length; i++)
e[i].className = e[i].className.replace(' selected', '');
this.className += ' selected';
var t = document.getElementById('tab1');
t.className = t.className.replace(/ message-\S+/, ' '+l);
e = document.querySelectorAll('.show-dropdown.settings');
for (var i = 0; i < e.length; i++)
{
if (e[i].offsetLeft && e[i].className.indexOf(' pressed') < 0)
{
showDropdown.call(e[i], ev);
break;
}
}
}
}
e = document.getElementsByClassName('cfg');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', showDropdown);
e = document.querySelectorAll('.tab-bar .tab');
for (var i = 0; i < e.length; i++)
{
e[i].addEventListener('click', switchTab);
var c = e[i].querySelector('.close');
if (c)
c.addEventListener('click', closeTab);
}
function switchTab(ev)
{
var cur = document.querySelector('.tab-bar .tab.selected');
if (cur != this)
{
if (cur)
{
var cur_c = document.getElementById(cur.id.substr(2));
cur.className = cur.className.replace(/ selected/g, '');
cur_c.style.display = 'none';
}
var this_c = document.getElementById(this.id.substr(2));
this.className += ' selected';
this_c.style.display = '';
}
}
function closeTab(ev)
{
var tab = this.className == 'close' ? this.parentNode : this;
var tab_c = document.getElementById(tab.id.substr(2));
tab.style.width = '1px';
tab.style.padding = '0';
tab.style.opacity = '0';
setTimeout(function()
{
tab.parentNode.removeChild(tab);
tab_c.parentNode.removeChild(tab_c);
if (tab.className.indexOf(' selected') >= 0)
switchTab.apply(document.querySelector('.tab-bar .tab'));
}, 200);
ev.stopPropagation();
}
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);
if (e[i].className.indexOf(' window') < 0)
{
e[i].addEventListener('keydown', dropdownKbNav);
e[i].addEventListener('mouseover', dropdownMouseNav);
}
}
document.body.addEventListener('click', hideAllDropdowns);
function stopHidingDropdowns(ev)
{
ev.stopPropagation();
}
function dropdownKbNav(ev)
{
if (ev.keyCode == 40 || ev.keyCode == 38)
{
var es = this.querySelectorAll('.item');
var cur = this._sel;
if (cur)
{
cur.className = cur.className.replace(/ over/, '');
for (var i = 0; i < es.length && cur != es[i]; i++) {}
cur = i;
}
else
cur = -1;
var a = ev.keyCode == 40 ? 1 : es.length-1;
cur = (cur+a) % es.length;
es[cur].className += ' over';
this._sel = es[cur];
}
else if ((ev.keyCode == 10 || ev.keyCode == 13) && this._sel)
this._sel.click();
}
function dropdownMouseNav(ev)
{
var el = ev.target||ev.srcElement;
while (el && !/(^|\s)item($|\s)/.exec(el.className))
el = el.parentNode;
if (!el || / over/.exec(el.className))
return;
if (this._sel)
this._sel.className = this._sel.className.replace(/ over/, '');
el.className += ' over';
this._sel = el;
}
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 dd = b.getAttribute('data-dropdown');
var m = document.getElementById('dropdown-'+dd);
var p = getOffset(b);
var x, y;
m.style.top = (y = p.top+b.offsetHeight)+'px';
m.style.left = (x = p.left)+'px';
m.style.display = 'block';
m.className += ' visible';
var callout;
if (m.className.indexOf(' window') >= 0)
{
m.style.top = (y = p.top+b.offsetHeight+3)+'px';
m.style.left = (x = Math.round(p.left+b.offsetWidth/2-m.offsetWidth/2))+'px';
callout = m.querySelector('.callout-top');
if (callout)
callout.style.left = '';
}
var ww = window.innerWidth || de.clientWidth || db.clientWidth;
var wh = window.innerHeight || de.clientHeight || db.clientHeight;
if (x + m.offsetWidth > ww)
{
m.style.left = (x = ww-m.offsetWidth)+'px';
if (callout)
callout.style.left = Math.round(p.left+b.offsetWidth/2-x)+'px';
}
if (y + m.offsetHeight > wh)
m.style.left = (wh-m.offsetHeight)+'px';
m.focus();
if (m._sel)
m._sel.className = m._sel.className.replace(/ over/, '');
m._sel = null;
}
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.getAttribute('data-dropdown'));
m.className = m.className.replace(/ visible/g, '');
m.style.display = '';
}
}
function hideAllDropdowns()
{
var e = document.querySelectorAll('.dropdown');
for (var i = 0; i < e.length; i++)
{
if (e[i].style.display == 'block')
{
e[i].className = e[i].className.replace(/ visible/g, '');
e[i].style.display = '';
}
}
e = document.querySelectorAll('.show-dropdown');
for (var i = 0; i < e.length; i++)
e[i].className = e[i].className.replace(/ pressed/g, '');
}
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;
var e = document.querySelector('.message-view');
e.className = e.className.replace(/ no-mail-shown/, '');
}
}
})();
-->
</script>
</body>
</html>