Add layout for threads
parent
7b451b95cc
commit
0113e4b644
Binary file not shown.
|
After Width: | Height: | Size: 320 B |
Binary file not shown.
|
After Width: | Height: | Size: 351 B |
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
Binary file not shown.
|
After Width: | Height: | Size: 125 B |
101
mail.css
101
mail.css
|
|
@ -847,6 +847,13 @@ div
|
|||
height: 30px;
|
||||
}
|
||||
|
||||
.message-list .listview .thread .message
|
||||
{
|
||||
height: 30px;
|
||||
background: #f5f6f8;
|
||||
border-bottom: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.message-list .listview .message.unread
|
||||
{
|
||||
font-weight: bold;
|
||||
|
|
@ -875,11 +882,6 @@ div
|
|||
background: #43ace8;
|
||||
}
|
||||
|
||||
.message-list .listview .message:last-child
|
||||
{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.message-list .listview .day-list.collapsed
|
||||
{
|
||||
display: none;
|
||||
|
|
@ -890,6 +892,16 @@ div
|
|||
border-bottom: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.message-list .listview .thread .message:last-child
|
||||
{
|
||||
border-bottom: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.message-list .listview .day-list:last-child .thread:last-child .message:last-child
|
||||
{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.message-list .listview .message .icon
|
||||
{
|
||||
position: absolute;
|
||||
|
|
@ -935,6 +947,42 @@ div
|
|||
width: 60%;
|
||||
}
|
||||
|
||||
.message-on-right .message-list .listview .thread .message .subject
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-list .listview .message .expand
|
||||
{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(icons/group_closed.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-list .listview .message .expand.collapse
|
||||
{
|
||||
background: url(icons/group_open.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-list .listview .message.thread0 .from,
|
||||
.message-invisible .message-list .listview .message.thread0 .from
|
||||
{
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-list .listview .message .expand,
|
||||
.message-invisible .message-list .listview .message .expand
|
||||
{
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 80%;
|
||||
width: 15px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.message-list .listview .message .bullet
|
||||
{
|
||||
position: absolute;
|
||||
|
|
@ -951,6 +999,11 @@ div
|
|||
top: 7px;
|
||||
}
|
||||
|
||||
.message-list .listview .thread .message .bullet
|
||||
{
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.message-list .listview .message.unread .bullet
|
||||
{
|
||||
background-image: url(icons/bullet_unread.png);
|
||||
|
|
@ -981,6 +1034,16 @@ div
|
|||
background-image: url(icons/bullet_replied_pinned.png);
|
||||
}
|
||||
|
||||
.message-list .listview .message.sent .bullet
|
||||
{
|
||||
background-image: url(icons/bullet_sent_read.png);
|
||||
}
|
||||
|
||||
.message-list .listview .message.sent.pinned .bullet
|
||||
{
|
||||
background-image: url(icons/bullet_sent_pinned.png);
|
||||
}
|
||||
|
||||
.message-list .listview .message .from
|
||||
{
|
||||
position: absolute;
|
||||
|
|
@ -999,6 +1062,24 @@ div
|
|||
{
|
||||
top: 0;
|
||||
right: 80%;
|
||||
left: 21px !important;
|
||||
}
|
||||
|
||||
.message-list .listview .thread .message .from
|
||||
{
|
||||
top: 0;
|
||||
left: 21px;
|
||||
right: 4px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.message-on-bottom .message-list .listview .thread .message .from,
|
||||
.message-invisible .message-list .listview .thread .message .from
|
||||
{
|
||||
top: 0;
|
||||
left: 21px;
|
||||
right: 4px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.message-list .listview .message .size
|
||||
|
|
@ -1037,6 +1118,11 @@ div
|
|||
left: 88%;
|
||||
}
|
||||
|
||||
.message-list .listview .thread .message .attach
|
||||
{
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.message-list .listview .message .time
|
||||
{
|
||||
position: absolute;
|
||||
|
|
@ -1055,6 +1141,11 @@ div
|
|||
left: 90%;
|
||||
}
|
||||
|
||||
.message-list .listview .thread .message .time
|
||||
{
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.message-list .listview .message.selected .from,
|
||||
.message-list .listview .message.selected .time
|
||||
{
|
||||
|
|
|
|||
22
mail.htm
22
mail.htm
|
|
@ -465,6 +465,27 @@
|
|||
<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>
|
||||
|
|
@ -685,7 +706,6 @@
|
|||
</div>
|
||||
<script>
|
||||
<!--
|
||||
// TODO: threads
|
||||
// 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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue