From 07308f28c53e7ea17de5a45638e0d0a014f555b9 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Wed, 23 Dec 2015 11:13:26 +0000
Subject: [PATCH] Mobile theme W.I.P.: -Styling enhancement for mail rows -
 Introduce color column to mail index

---
 mail/templates/mobile/index.xet  | 16 ++++--
 mail/templates/pixelegg/app.css  | 86 ++++++++++++++++++++++++++++--
 mail/templates/pixelegg/app.less | 91 +++++++++++++++++++++++++++++---
 3 files changed, 177 insertions(+), 16 deletions(-)
diff --git a/mail/templates/mobile/index.xet b/mail/templates/mobile/index.xet
index a369fdd0fd..831f959773 100644
--- a/mail/templates/mobile/index.xet
+++ b/mail/templates/mobile/index.xet
@@ -5,6 +5,7 @@
 	<template id="mail.index.rows" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
 			<columns>
+				<column width="20"/>
 				<column/>
 				<column width="80"/>
 			</columns>
@@ -12,16 +13,21 @@
 				<row class="th">
 					
 				</row>
-				<row class="$row_cont[class]">
+				<row>
+					<description class="$row_cont[class] mobile_cat_col"/>
 					<vbox>
-						<url-email id="${row}[fromaddress]" contact_plus = "true" readonly="true"/>
-						<description id="${row}[subject]" no_lang="1"/>
+						<url-email id="${row}[fromaddress]" contact_plus = "true"  class="$row_cont[class]" readonly="true"/>
+						<hbox>
+							<description  class="status_img $row_cont[class]"/>
+							<description id="${row}[subject]" no_lang="1" class="$row_cont[class]" />
+						</hbox>
 					</vbox>
 					<vbox>
-						<time_or_date align="center" id="${row}[date]" readonly="true"/>
+						<hbox>
+							<time_or_date align="center"  class="$row_cont[class]" id="${row}[date]" readonly="true"/>
+						</hbox>
 						<hbox>
 							<html id="${row}[attachments]"/>
-							<description class="status_img"/>
 						</hbox>
 					</vbox>	
 				</row>
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index abaa0289a8..36fdded2da 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -2619,18 +2619,94 @@ div.mailComposeHeaderSection > table {
     padding-top: 8px;
     padding-bottom: 8px;
   }
+  #mail-index table.egwGridView_outer tbody td a[id^='mail-index_'][id$='fromaddress]'] {
+    color: #26537c;
+    font-size: 10pt;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 98%;
+  }
   #mail-index table.egwGridView_outer tbody td span[id^='mail-index_'][id$='attachments]'] {
     float: right;
   }
+  #mail-index table.egwGridView_outer tbody td span[id^='mail-index_'][id$='attachments]'] img {
+    width: 16px;
+    height: 16px;
+  }
   #mail-index table.egwGridView_outer tbody td span[id^='mail-index_'][id$='subject]'] {
-    font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 98%;
+  }
+  #mail-index table.egwGridView_outer tbody td label[id^='mail-index_'][id$='date]'] {
+    padding-top: 0;
   }
   #mail-index table.egwGridView_outer tbody tr {
     height: 55px;
   }
-  #mail-index table.egwGridView_outer tbody span.status_img {
-    background-image: none !important;
-    padding-left: 3px;
-    float: right;
+  #mail-index table.egwGridView_outer tbody tr div.recent,
+  #mail-index table.egwGridView_outer tbody tr span.recent,
+  #mail-index table.egwGridView_outer tbody tr time.recent,
+  #mail-index table.egwGridView_outer tbody tr a.recent,
+  #mail-index table.egwGridView_outer tbody tr div.unseen,
+  #mail-index table.egwGridView_outer tbody tr span.unseen,
+  #mail-index table.egwGridView_outer tbody tr time.unseen,
+  #mail-index table.egwGridView_outer tbody tr a.unseen {
+    color: black !important;
+    font-weight: bold;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.mobile_cat_col {
+    background: #F5F5F5;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.labelone.mobile_cat_col {
+    background: #ff0080;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.labeltwo.mobile_cat_col {
+    background: #ff8000;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.labelthree.mobile_cat_col {
+    background: #008000;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.labelfour.mobile_cat_col {
+    background: #0000ff;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.labelfive.mobile_cat_col {
+    background: #8000ff;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.flagged.mobile_cat_col {
+    background: #ff0000;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.prio_high.mobile_cat_col {
+    background: #ac0000;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.mail.deleted.mobile_cat_col {
+    background: silver;
+    text-decoration: line-through;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.status_img {
+    padding: 0 2px 2px 0;
+  }
+  #mail-index table.egwGridView_outer tbody tr span.deleted.status_img {
+    background-image: url(images/kmmsgdel.png);
+  }
+  #mail-index table.egwGridView_outer tbody tr span.unseen.status_img {
+    background-image: url(images/kmmsgunseen.png);
+  }
+  #mail-index table.egwGridView_outer tbody tr span.flagged_seen.status_img {
+    background-image: url(images/read_flagged_small.png);
+  }
+  #mail-index table.egwGridView_outer tbody tr span.flagged_unseen.status_img {
+    background-image: url(images/unread_flagged_small.png);
+  }
+  #mail-index table.egwGridView_outer tbody tr span.recent.status_img {
+    background-image: url(images/kmmsgnew.png);
+  }
+  #mail-index table.egwGridView_outer tbody tr span.replied.status_img {
+    background-image: url(images/kmmsgreplied.png);
+  }
+  #mail-index table.egwGridView_outer tbody tr span.forwarded.status_img {
+    background-image: url(images/kmmsgforwarded.png);
   }
 }
diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less
index 2027fa0de6..fd20c3564e 100755
--- a/mail/templates/pixelegg/app.less
+++ b/mail/templates/pixelegg/app.less
@@ -1768,20 +1768,99 @@ div.mailComposeHeaderSection > table {
 			td {
 				padding-top: 8px;
 				padding-bottom: 8px;
+				a[id^='mail-index_'][id$='fromaddress]']{
+					color:#26537c;
+					.mob-fontsize-n;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					width: 98%;
+				}
 				span[id^='mail-index_'][id$='attachments]'] {
 					float: right;
+					img {
+						width: 16px;
+						height: 16px;
+					}
 				}
 				span[id^='mail-index_'][id$='subject]'] {
-					font-weight: bold;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					width: 98%;
+				}
+				label[id^='mail-index_'][id$='date]']{
+					padding-top: 0;
 				}
 			}
 			tr{
 				height:55px;
-			}
-			span.status_img {
-				background-image: none !important;
-				padding-left: 3px;
-				float: right;
+				div.recent ,
+				span.recent ,
+				time.recent ,
+				a.recent,
+				div.unseen ,
+				span.unseen ,
+				time.unseen ,
+				a.unseen  {
+					color: black !important;
+					font-weight: bold;
+				}
+				span.mail.mobile_cat_col {
+					background: #F5F5F5;
+				}
+				span.mail.labelone.mobile_cat_col  {
+					background: #ff0080;
+				}
+				span.mail.labeltwo.mobile_cat_col{
+					background: #ff8000;
+				}
+				span.mail.labelthree.mobile_cat_col {
+					background: #008000;
+				}
+				span.mail.labelfour.mobile_cat_col {
+					background: #0000ff;
+				}
+				span.mail.labelfive.mobile_cat_col {
+					background: #8000ff;
+				}
+
+				span.mail.flagged.mobile_cat_col  {
+					background: #ff0000;
+				}
+
+				span.mail.prio_high.mobile_cat_col {
+					background: #ac0000;
+				}
+
+				span.mail.deleted.mobile_cat_col {
+					background: silver;
+					text-decoration : line-through;
+				}
+				span.status_img {
+				padding:0 2px 2px 0;
+				}
+				span.deleted.status_img {
+					background-image: url(images/kmmsgdel.png);
+				}
+				span.unseen.status_img {
+					background-image: url(images/kmmsgunseen.png);
+				}
+				span.flagged_seen.status_img {
+					background-image: url(images/read_flagged_small.png);
+				}
+				span.flagged_unseen.status_img {
+					background-image: url(images/unread_flagged_small.png);
+				}
+				span.recent.status_img {
+					background-image: url(images/kmmsgnew.png);
+				}
+				span.replied.status_img {
+					background-image: url(images/kmmsgreplied.png);
+				}
+				span.forwarded.status_img {
+					background-image: url(images/kmmsgforwarded.png);
+				}
 			}
 		}
 	}
