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; margin: 0 -2px 0 0;
height: 26px; height: 26px;
width: 15px; width: 15px;
background: url(icons/down.png) 4px 11px no-repeat; background: url(icons/down.png) 4px 11px no-repeat; /* FIXME closed.png */
} }
.dropdown .dropdown
@ -129,6 +129,7 @@ div
position: absolute; position: absolute;
cursor: default; cursor: default;
display: none; display: none;
outline: 0;
left: 0; left: 0;
top: 0; top: 0;
z-index: 10; z-index: 10;
@ -185,7 +186,14 @@ div
position: absolute; position: absolute;
width: 22px; width: 22px;
height: 18px; height: 18px;
vertical-align: middle; }
.dropdown .item.i16 img
{
top: 4px;
left: 6px;
width: 16px;
height: 16px;
} }
.dropdown .item span .dropdown .item span
@ -267,6 +275,7 @@ div
{ {
background: #f4f3f2; background: #f4f3f2;
overflow: auto; overflow: auto;
outline: 0;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -420,7 +429,7 @@ div
opacity: 1; opacity: 1;
} }
.folder-list .account-header .cfg.configuring .folder-list .account-header .cfg.pressed
{ {
opacity: 1; opacity: 1;
background: url(icons/config_small_selected.png); 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" /> <link rel="stylesheet" type="text/css" href="mail.css" />
</head> </head>
<body> <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="folder-list progress-visible">
<div class="top-border-gradient"></div> <div class="top-border-gradient"></div>
<div class="bottom-border-gradient"></div> <div class="bottom-border-gradient"></div>
@ -14,7 +28,7 @@
<img src="icons/mail_check_send.png" /> <img src="icons/mail_check_send.png" />
<span class="down"></span> <span class="down"></span>
</a> </a>
<div class="dropdown" id="dropdown-check-send"> <div class="dropdown" id="dropdown-check-send" tabindex="1">
<div class="item"> <div class="item">
<div class="hotkey">Ctrl-K</div> <div class="hotkey">Ctrl-K</div>
<img src="icons/mail_check.png" /> <img src="icons/mail_check.png" />
@ -43,7 +57,6 @@
<div class="listview"> <div class="listview">
<div class="account-header"> <div class="account-header">
All Messages All Messages
<div class="cfg"></div>
<div class="msg-count">65</div> <div class="msg-count">65</div>
</div> </div>
<div class="account-folders"> <div class="account-folders">
@ -88,7 +101,7 @@
</div> </div>
<div class="account-header"> <div class="account-header">
vitalif@mail.ru vitalif@mail.ru
<div class="cfg"></div> <div class="cfg" id="show-dropdown-account"></div>
<div class="msg-count">48</div> <div class="msg-count">48</div>
<div class="loading icon"></div> <div class="loading icon"></div>
<div class="warning icon" style="display: none"></div> <div class="warning icon" style="display: none"></div>
@ -202,7 +215,7 @@
<span class="img"></span> <span class="img"></span>
<span class="down"></span> <span class="down"></span>
</a> </a>
<div class="dropdown" id="dropdown-threads"> <div class="dropdown" id="dropdown-threads" tabindex="1">
<div class="item"> <div class="item">
<img src="icons/thread.png" /> <img src="icons/thread.png" />
<span>Show Message Thread</span> <span>Show Message Thread</span>
@ -228,7 +241,7 @@
<img src="icons/list_sort.png" /> <img src="icons/list_sort.png" />
<span class="down"></span> <span class="down"></span>
</a> </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="callout-top"></div>
<div class="title">Sorting for INBOX</div> <div class="title">Sorting for INBOX</div>
<label><input type="checkbox" checked="checked" /> Override default sorting</label> <label><input type="checkbox" checked="checked" /> Override default sorting</label>
@ -461,6 +474,7 @@
<script> <script>
<!-- <!--
// TODO: expand/collapse days, handle up/down keys (switch messages -> days -> messages -> scroll) // TODO: expand/collapse days, handle up/down keys (switch messages -> days -> messages -> scroll)
// TODO: keyboard navigation in dropdowns
// TODO: message multiselect in list // TODO: message multiselect in list
// TODO: space=read // TODO: space=read
// TODO: spam, read on/off button states // TODO: spam, read on/off button states
@ -523,7 +537,12 @@ function collapseFolders()
e = document.getElementsByClassName('cfg'); e = document.getElementsByClassName('cfg');
for (var i = 0; i < e.length; i++) 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'); e = document.querySelectorAll('.show-dropdown .down');
for (var i = 0; i < e.length; i++) for (var i = 0; i < e.length; i++)
@ -544,6 +563,33 @@ function collapseFolders()
{ {
ev.stopPropagation(); 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) function showDropdown(ev)
{ {
var b = this.className == 'down' ? this.parentNode : this; var b = this.className == 'down' ? this.parentNode : this;
@ -552,14 +598,14 @@ function collapseFolders()
hideAllDropdowns(); hideAllDropdowns();
b.className += ' pressed'; b.className += ' pressed';
var m = document.getElementById('dropdown-'+b.id.substr(14)); var m = document.getElementById('dropdown-'+b.id.substr(14));
var x = b.offsetLeft, y = b.offsetTop; // FIXME calculate offsets correctly var p = getOffset(b);
m.style.top = (y+b.offsetHeight)+'px'; m.style.top = (p.top+b.offsetHeight)+'px';
m.style.left = x+'px'; m.style.left = p.left+'px';
m.style.display = 'block'; m.style.display = 'block';
if (m.className.indexOf(' window') >= 0) if (m.className.indexOf(' window') >= 0)
{ {
m.style.top = (y+b.offsetHeight+3)+'px'; m.style.top = (p.top+b.offsetHeight+3)+'px';
m.style.left = Math.round(x+b.offsetWidth/2-m.offsetWidth/2)+'px'; m.style.left = Math.round(p.left+b.offsetWidth/2-m.offsetWidth/2)+'px';
} }
} }
else else
@ -599,12 +645,6 @@ function collapseFolders()
e[i].style.width = f.offsetWidth+'px'; e[i].style.width = f.offsetWidth+'px';
} }
function setCfg(ev)
{
this.className = this.className == 'cfg' ? 'cfg configuring' : 'cfg';
ev.stopPropagation();
return false;
}
function selectMsg() function selectMsg()
{ {
if (this != selectedMsg) if (this != selectedMsg)