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

Account config popup

master
Vitaliy Filippov 2016-06-13 22:06:50 +03:00
parent 4d6159196b
commit 16f15be901
3 changed files with 69 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/properties.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 673 B

15
mail.css
View File

@ -121,7 +121,7 @@ div
margin: 0 -2px 0 0;
height: 26px;
width: 15px;
background: url(icons/down.png) 4px 11px no-repeat;
background: url(icons/down.png) 4px 11px no-repeat; /* FIXME closed.png */
}
.dropdown
@ -129,6 +129,7 @@ div
position: absolute;
cursor: default;
display: none;
outline: 0;
left: 0;
top: 0;
z-index: 10;
@ -185,7 +186,14 @@ div
position: absolute;
width: 22px;
height: 18px;
vertical-align: middle;
}
.dropdown .item.i16 img
{
top: 4px;
left: 6px;
width: 16px;
height: 16px;
}
.dropdown .item span
@ -267,6 +275,7 @@ div
{
background: #f4f3f2;
overflow: auto;
outline: 0;
position: absolute;
left: 0;
right: 0;
@ -420,7 +429,7 @@ div
opacity: 1;
}
.folder-list .account-header .cfg.configuring
.folder-list .account-header .cfg.pressed
{
opacity: 1;
background: url(icons/config_small_selected.png);

74
mail.htm
View File

@ -5,6 +5,20 @@
<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="folder-list progress-visible">
<div class="top-border-gradient"></div>
<div class="bottom-border-gradient"></div>
@ -14,7 +28,7 @@
<img src="icons/mail_check_send.png" />
<span class="down"></span>
</a>
<div class="dropdown" id="dropdown-check-send">
<div class="dropdown" id="dropdown-check-send" tabindex="1">
<div class="item">
<div class="hotkey">Ctrl-K</div>
<img src="icons/mail_check.png" />
@ -43,7 +57,6 @@
<div class="listview">
<div class="account-header">
All Messages
<div class="cfg"></div>
<div class="msg-count">65</div>
</div>
<div class="account-folders">
@ -88,7 +101,7 @@
</div>
<div class="account-header">
vitalif@mail.ru
<div class="cfg"></div>
<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>
@ -202,7 +215,7 @@
<span class="img"></span>
<span class="down"></span>
</a>
<div class="dropdown" id="dropdown-threads">
<div class="dropdown" id="dropdown-threads" tabindex="1">
<div class="item">
<img src="icons/thread.png" />
<span>Show Message Thread</span>
@ -228,7 +241,7 @@
<img src="icons/list_sort.png" />
<span class="down"></span>
</a>
<div class="dropdown window list-sort" id="dropdown-list-sort">
<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>
@ -461,6 +474,7 @@
<script>
<!--
// 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: spam, read on/off button states
@ -523,7 +537,12 @@ function collapseFolders()
e = document.getElementsByClassName('cfg');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', setCfg);
e[i].addEventListener('click', showCfg);
function showCfg(ev)
{
//this.className = this.className == 'cfg' ? 'cfg configuring' : 'cfg';
showDropdown.call(this, ev);
}
e = document.querySelectorAll('.show-dropdown .down');
for (var i = 0; i < e.length; i++)
@ -544,6 +563,33 @@ function collapseFolders()
{
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;
@ -552,14 +598,14 @@ function collapseFolders()
hideAllDropdowns();
b.className += ' pressed';
var m = document.getElementById('dropdown-'+b.id.substr(14));
var x = b.offsetLeft, y = b.offsetTop; // FIXME calculate offsets correctly
m.style.top = (y+b.offsetHeight)+'px';
m.style.left = x+'px';
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 = (y+b.offsetHeight+3)+'px';
m.style.left = Math.round(x+b.offsetWidth/2-m.offsetWidth/2)+'px';
m.style.top = (p.top+b.offsetHeight+3)+'px';
m.style.left = Math.round(p.left+b.offsetWidth/2-m.offsetWidth/2)+'px';
}
}
else
@ -599,12 +645,6 @@ function collapseFolders()
e[i].style.width = f.offsetWidth+'px';
}
function setCfg(ev)
{
this.className = this.className == 'cfg' ? 'cfg configuring' : 'cfg';
ev.stopPropagation();
return false;
}
function selectMsg()
{
if (this != selectedMsg)