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;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-list .listview .thread .message
|
||||||
|
{
|
||||||
|
height: 30px;
|
||||||
|
background: #f5f6f8;
|
||||||
|
border-bottom: 1px solid #dadce0;
|
||||||
|
}
|
||||||
|
|
||||||
.message-list .listview .message.unread
|
.message-list .listview .message.unread
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -875,11 +882,6 @@ div
|
||||||
background: #43ace8;
|
background: #43ace8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-list .listview .message:last-child
|
|
||||||
{
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-list .listview .day-list.collapsed
|
.message-list .listview .day-list.collapsed
|
||||||
{
|
{
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -890,6 +892,16 @@ div
|
||||||
border-bottom: 1px solid #dadce0;
|
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
|
.message-list .listview .message .icon
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -935,6 +947,42 @@ div
|
||||||
width: 60%;
|
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
|
.message-list .listview .message .bullet
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -951,6 +999,11 @@ div
|
||||||
top: 7px;
|
top: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-list .listview .thread .message .bullet
|
||||||
|
{
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
.message-list .listview .message.unread .bullet
|
.message-list .listview .message.unread .bullet
|
||||||
{
|
{
|
||||||
background-image: url(icons/bullet_unread.png);
|
background-image: url(icons/bullet_unread.png);
|
||||||
|
@ -981,6 +1034,16 @@ div
|
||||||
background-image: url(icons/bullet_replied_pinned.png);
|
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
|
.message-list .listview .message .from
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -999,6 +1062,24 @@ div
|
||||||
{
|
{
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 80%;
|
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
|
.message-list .listview .message .size
|
||||||
|
@ -1037,6 +1118,11 @@ div
|
||||||
left: 88%;
|
left: 88%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-list .listview .thread .message .attach
|
||||||
|
{
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
.message-list .listview .message .time
|
.message-list .listview .message .time
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -1055,6 +1141,11 @@ div
|
||||||
left: 90%;
|
left: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-list .listview .thread .message .time
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.message-list .listview .message.selected .from,
|
.message-list .listview .message.selected .from,
|
||||||
.message-list .listview .message.selected .time
|
.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="listview" tabindex="1" onscroll="this.children[0].style.top = this.scrollTop+'px'">
|
||||||
<div class="day first-day">TODAY</div>
|
<div class="day first-day">TODAY</div>
|
||||||
<div class="day-list">
|
<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="message unseen">
|
||||||
<div class="icon"></div>
|
<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>
|
<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>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
<!--
|
<!--
|
||||||
// TODO: threads
|
|
||||||
// TODO: virtual scroll
|
// TODO: virtual scroll
|
||||||
// TODO: expand/collapse days, handle up/down (switch messages -> days -> messages -> scroll), pgup/pgdown, home/end keys
|
// 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)
|
// TODO: message multiselect in list (with ctrl, shift and keyboard)
|
||||||
|
|
Loading…
Reference in New Issue