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

Read/delete/spam selected/unselected

master
Vitaliy Filippov 2016-06-13 23:24:36 +03:00
parent 16f15be901
commit 6170f27a49
5 changed files with 113 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/delete_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 545 B

BIN
icons/read_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 476 B

BIN
icons/spam_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 B

82
mail.css
View File

@ -63,6 +63,8 @@ table, td, th
button, a.button
{
display: inline-block;
cursor: default;
vertical-align: middle;
outline: 0;
text-decoration: none;
background: transparent;
@ -90,8 +92,6 @@ button img, a.button img
button:hover, a.button:hover
{
/*background: #f2eeec;
background: -moz-linear-gradient(top, #f8f6f5 0%, #f2eeec 5%, #e8e5e3 100%);*/
background: -moz-linear-gradient(top, #fdfbfa 0%, #efebea 100%);
border-color: #cac6c5 #bab7b4 #bab7b4 #cac6c5;
border-radius: 3px;
@ -99,7 +99,6 @@ button:hover, a.button:hover
button:active, button.pressed, a.button:active, a.button.pressed
{
/*background: -moz-linear-gradient(top, #e8e5e3 0%, #f2eeec 95%, #f8f6f5 100%);*/
box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.2);
background: -moz-linear-gradient(top, #efebea 0%, #fdfbfa 100%);
border-color: #bab7b4 #cac6c5 #cac6c5 #bab7b4;
@ -108,6 +107,15 @@ button:active, button.pressed, a.button:active, a.button.pressed
button::-moz-focus-inner { border: 0; }
a.button .img
{
display: inline-block;
width: 22px;
height: 18px;
vertical-align: top;
margin-top: 4px;
}
div
{
box-sizing: border-box;
@ -118,7 +126,8 @@ div
float: right;
z-index: 2;
display: block;
margin: 0 -2px 0 0;
margin: 0 -4px 0 0;
padding: 0 4px 0 0;
height: 26px;
width: 15px;
background: url(icons/down.png) 4px 11px no-repeat; /* FIXME closed.png */
@ -576,12 +585,7 @@ div
.message-list .actions .threads .img
{
display: inline-block;
background: url(icons/thread.png) no-repeat;
width: 22px;
height: 18px;
vertical-align: top;
margin-top: 4px;
}
.message-list .actions .threads.checked .img
@ -835,6 +839,66 @@ div
border-bottom: 1px solid #aca9a7;
}
.message-view .actions .action-read .img
{
background: url(icons/read.png) no-repeat;
}
.message-view .actions .action-read .txt:before
{
content: "Read";
}
.message-view .actions .action-read.checked .img
{
background: url(icons/read_selected.png) no-repeat;
}
.message-view .actions .action-read.checked .txt:before
{
content: "Unread";
}
.message-view .actions .action-spam .img
{
background: url(icons/spam.png) no-repeat;
}
.message-view .actions .action-spam .txt:before
{
content: "Spam";
}
.message-view .actions .action-spam.checked .img
{
background: url(icons/spam_selected.png) no-repeat;
}
.message-view .actions .action-spam.checked .txt:before
{
content: "Not Spam";
}
.message-view .actions .action-delete .img
{
background: url(icons/delete.png) no-repeat;
}
.message-view .actions .action-delete .txt:before
{
content: "Delete";
}
.message-view .actions .action-delete.checked .img
{
background: url(icons/delete_selected.png) no-repeat;
}
.message-view .actions .action-delete.checked .txt:before
{
content: "Undelete";
}
.message-view .message
{
display: table-cell;

57
mail.htm
View File

@ -19,11 +19,31 @@
<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">
<button><img src="icons/compose.png" /> Compose</button>
<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>
@ -211,7 +231,7 @@
<div class="searchbox">
<input type="text" placeholder="Search mail" />
</div>
<a id="show-dropdown-threads" onclick="checkDropdown.apply(this)" class="button show-dropdown threads" title="Show Message Thread">
<a id="show-dropdown-threads" class="button checkable show-dropdown threads" title="Show Message Thread">
<span class="img"></span>
<span class="down"></span>
</a>
@ -413,14 +433,14 @@
<div class="vert-split">
<div class="row">
<div class="actions">
<button><img src="icons/mail_reply.png" />Reply <img src="icons/down.png" /></button>
<button><img src="icons/mail_reply_all.png" />Reply All <img src="icons/down.png" /></button>
<button><img src="icons/mail_forward.png" />Forward <img src="icons/down.png" /></button>
<button><img src="icons/read.png" />Read</button>
<button><img src="icons/spam.png" />Spam</button>
<button><img src="icons/delete.png" />Delete <img src="icons/down.png" /></button>
<button><img src="icons/label.png" />Tag <img src="icons/down.png" /></button>
<button><img src="icons/config.png" />Settings <img src="icons/down.png" /></button>
<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">
@ -439,19 +459,19 @@
<div class="header-table">
<div class="header">
<div class="field">From</div>
<div class="value"><button>Serze &lt;notifications@github.com&gt;</button></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"><button>mediawiki4intranet/IntraACL &lt;IntraACL@noreply.github.com&gt;</button></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"><button>vitalif@mail.ru</button> <button>Comment &lt;comment@noreply.github.com&gt;</button></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"><button>mediawiki4intranet/IntraACL &lt;reply+000e6cbb7663582057cb5221d288cb49c4366302aa8b038b92cf000000011371732a92a169ce097e4f81@reply.github.com&gt;</button></div>
<div class="value"><a class="button">mediawiki4intranet/IntraACL &lt;reply+000e6cbb7663582057cb5221d288cb49c4366302aa8b038b92cf000000011371732a92a169ce097e4f81@reply.github.com&gt;</a></div>
</div>
</div>
</div>
@ -477,10 +497,10 @@
// TODO: keyboard navigation in dropdowns
// TODO: message multiselect in list
// TODO: space=read
// TODO: spam, read on/off button states
// TODO: threads
// TODO: quick reply
// TODO: compose window
// TODO: "default mail settings" window popup
// TODO: async backend with parallel fetch, ssh backdoor for work mail
function expandChecks()
{
@ -488,7 +508,7 @@ function expandChecks()
this.firstChild.className = e ? 'collapse' : 'expand';
this.parentNode.nextSibling.nextSibling.style.display = e ? '' : 'none';
}
function checkDropdown()
function checkButton()
{
this.className = this.className.indexOf(' checked') >= 0 ? this.className.replace(' checked', '') : this.className+' checked';
}
@ -540,10 +560,13 @@ function collapseFolders()
e[i].addEventListener('click', showCfg);
function showCfg(ev)
{
//this.className = this.className == 'cfg' ? 'cfg configuring' : 'cfg';
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++)
{