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

tab bar

master
Vitaliy Filippov 2016-06-14 01:03:06 +03:00
parent c36e9c1865
commit c1b2ff2b97
5 changed files with 152 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
icons/close_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 551 B

BIN
icons/dropdown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 B

106
mail.css
View File

@ -21,7 +21,7 @@ img
{
border: none;
margin: 0 auto;
vertical-align: bottom;
vertical-align: middle;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
@ -130,7 +130,7 @@ div
padding: 0 4px 0 0;
height: 26px;
width: 15px;
background: url(icons/down.png) 4px 11px no-repeat; /* FIXME closed.png */
background: url(icons/down.png) 4px 11px no-repeat; /* FIXME closed.png, dropdown.png */
}
.dropdown
@ -271,7 +271,7 @@ div
{
padding: 5px;
height: 42px;
background: -moz-linear-gradient(top, #f2eeec 0%, #e8e5e3 100%);
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}
@ -534,13 +534,103 @@ div
font-weight: bold;
}
.message-list
.tab-panel
{
position: absolute;
left: 20%;
right: 0;
top: 0;
bottom: 0;
width: 35%;
cursor: default;
}
.tab-panel .tab-bar
{
height: 35px;
padding: 0 2px;
border-bottom: 1px solid #b0adac;
background: -moz-linear-gradient(top, #e9e7e5 0%, #dddad8 100%);
}
.tab-panel .tab-bar .tab
{
height: 32px;
line-height: 30px;
float: left;
width: 180px;
border: 1px solid #969493;
border-radius: 5px 5px 0 0;
margin: 3px 2px 0;
padding: 0 28px 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: -moz-linear-gradient(top, #f3f1f1 0%, #e6e2e2 100%);
transition: all 0.2s ease-out;
position: relative;
opacity: 1;
}
.tab-panel .tab-bar .tab.noclose
{
padding: 0 8px;
}
.tab-panel .tab-bar .tab img.i16
{
vertical-align: middle;
margin-top: -4px;
}
.tab-panel .tab-bar .tab .close
{
display: block;
z-index: 10;
position: absolute;
top: 8px;
right: 6px;
width: 16px;
height: 16px;
background: url(icons/close.png) no-repeat;
}
.tab-panel .tab-bar .tab .close:hover
{
background: url(icons/close_hover.png) no-repeat;
}
.tab-panel .tab-bar .tab.selected
{
border-bottom: 1px solid transparent;
background: #f6f1ef -moz-linear-gradient(top, #f6f1ef 0%, #f6f1ef 100%);
}
.tab-panel .tab-bar .tab:hover
{
background: -moz-linear-gradient(top, #fefefe 0%, #efecec 100%);
}
.tab-panel .tab-bar .tab.selected:hover
{
background: -moz-linear-gradient(top, #fefefe 0%, #f6f1ef 100%);
}
.tab-panel .tab-content
{
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
}
.message-list
{
position: absolute;
left: 0%;
top: 0;
bottom: 0;
width: 40%;
/* right border */
border-right: 1px solid #aca9a7;
-webkit-touch-callout: none;
@ -555,7 +645,7 @@ div
{
padding: 5px;
height: 42px;
background: -moz-linear-gradient(top, #f2eeec 0%, #e8e5e3 100%);
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}
@ -789,7 +879,7 @@ div
right: 0;
top: 0;
bottom: 0;
width: 45%;
width: 60%;
}
.message-view .vert-split
@ -835,7 +925,7 @@ div
.message-view .actions
{
padding: 5px 5px 4px;
background: -moz-linear-gradient(top, #f2eeec 0%, #e8e5e3 100%);
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}

57
mail.htm
View File

@ -224,6 +224,19 @@
</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="tab2" style="display: none">
</div>
<div class="tab-content" id="tab3" style="display: none">
</div>
<div class="tab-content" id="tab1">
<div class="message-list">
<div class="top-border-gradient"></div>
<div class="bottom-border-gradient"></div>
@ -491,6 +504,7 @@
</div>
</div>
</div>
</div>
<script>
<!--
// TODO: compose window
@ -557,10 +571,47 @@ function collapseFolders()
e = document.getElementsByClassName('cfg');
for (var i = 0; i < e.length; i++)
e[i].addEventListener('click', showCfg);
function showCfg(ev)
e[i].addEventListener('click', showDropdown);
e = document.querySelectorAll('.tab-bar .tab');
for (var i = 0; i < e.length; i++)
{
showDropdown.call(this, ev);
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');