From 0113e4b644db8b3d53b778852ae6b3b9209e0c8d Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Sat, 18 Jun 2016 17:31:00 +0300
Subject: [PATCH] Add layout for threads

---
 icons/bullet_sent_pinned.png | Bin 0 -> 320 bytes
 icons/bullet_sent_read.png   | Bin 0 -> 351 bytes
 icons/group_closed.png       | Bin 0 -> 123 bytes
 icons/group_open.png         | Bin 0 -> 125 bytes
 mail.css                     | 101 +++++++++++++++++++++++++++++++++--
 mail.htm                     |  22 +++++++-
 6 files changed, 117 insertions(+), 6 deletions(-)
 create mode 100644 icons/bullet_sent_pinned.png
 create mode 100644 icons/bullet_sent_read.png
 create mode 100644 icons/group_closed.png
 create mode 100644 icons/group_open.png

diff --git a/icons/bullet_sent_pinned.png b/icons/bullet_sent_pinned.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b231e842352e2017625a00d800edd90b1827c0d
GIT binary patch
literal 320
zcmV-G0l)r<P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00038Nkl<ZI1yv~
z|NlP&C4h+%%^<zBH6V?V(KDTq@fr}D<8mn@t}w`CWYqb`z;MElfr0xx1H)^eQ_ZIT
z|Nj8pAgo>pV`O9oYF?-d)GPzkp~b);3gj<nWMsrpk0AiEL6CtVNQ!~MNCCtF0%ahU
zW?-;?#=sB(7C<7f8UU0pd<i73K^0yG(ocbyk%6HIDg>u+h5<0(xR@CjzPbXH?qFbe
zH}n60VYn_N1}+yc0F#$CFHqqVAO_mJ9Z3%g6Q=<{O&(%ErB@gjz5x|Aqv%57VD$pX
z`9L){ftU|yP|%G3|Mw#4L1E%@K@L#WG9cE#rx|1tRu_OIhy}P@K&*bsGZO$BjXFS+
ScC?590000<MNUMnLSTZ5`g(-`

literal 0
HcmV?d00001

diff --git a/icons/bullet_sent_read.png b/icons/bullet_sent_read.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6eb8fb553a3f866e3133cf9b04ae4fa74ed0bcb
GIT binary patch
literal 351
zcmV-l0igbgP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0003dNkl<ZI1yv~
z|NlP&C4h+%%^<xL8^D6k1@l&J_GJFg*!z#+Z(?GE|4D3Wak^mc%B?y~{~1>^Ffw#7
zGB9smuwsJ((FUwuy_%W%|Nn)IjEtr6;XaFihIBJ9uq<e7Y{ak-LjYvU*Wc_xK<aLM
zxc77rKOx))XaK`gd3ECm5FZ&}HGq+csSv2hd*O<$AdL(QR&JdNq@sW>DFX440VA$-
zFl);eF19ZWum3W$$}<1`eLEq-M;KWnjE&U=AW62b|FwbCRhGZMV}LeqhiO2kaYy6-
z{~insj5~nowEf@je@5sUVSKD!06Cxi3&TyIW<Ev+hM@QepS>^*=rmR@uzqI90Xlmb
x%b#Bw_%wqI!|DQbTk!F*x&WUBbUBI*006w8R|)C4P<Q|U002ovPDHLkV1j=Oma_l=

literal 0
HcmV?d00001

diff --git a/icons/group_closed.png b/icons/group_closed.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ff6da6b07a9687f07dc08be1cb436c579c529bf
GIT binary patch
literal 123
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhPM$7~ArhC9fBgS%&%AL)W6sg3
zrGJ+?<hZSQG}B=Y&k;$7Gu{D)Q@*i2l2f>*wnF06HTFlGOJ?MFn3{(R$x4OviZIA+
W4LISZxT+Xv8iS{+pUXO@geCymVJM0K

literal 0
HcmV?d00001

diff --git a/icons/group_open.png b/icons/group_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..7617e1a6af8b36b1bb7053659f95a1b96edd5cdc
GIT binary patch
literal 125
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhE}kxqArhC9fBgS%&%AL);sot&
z8@^s<dlc5xwUBE$!$+1qU5Q-5n^&bj3hi05VaqD%?MW%EQ%nD{h<<1I=wlM&Ty}wx
Z;mBKu(nCJwen9gWJYD@<);T3K0RW+yEdKxi

literal 0
HcmV?d00001

diff --git a/mail.css b/mail.css
index d9e37c9..3a3d7d2 100644
--- a/mail.css
+++ b/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
 {
diff --git a/mail.htm b/mail.htm
index 1b5f9dd..34f7916 100644
--- a/mail.htm
+++ b/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)