Mobile theme W.I.P.:

-Styling enhancement for mail rows
- Introduce color column to mail index
This commit is contained in:
Hadi Nategh 2015-12-23 11:13:26 +00:00
parent 4ed126cbbe
commit 07308f28c5
3 changed files with 177 additions and 16 deletions

View File

@ -5,6 +5,7 @@
<template id="mail.index.rows" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column width="20"/>
<column/> <column/>
<column width="80"/> <column width="80"/>
</columns> </columns>
@ -12,16 +13,21 @@
<row class="th"> <row class="th">
</row> </row>
<row class="$row_cont[class]"> <row>
<description class="$row_cont[class] mobile_cat_col"/>
<vbox> <vbox>
<url-email id="${row}[fromaddress]" contact_plus = "true" readonly="true"/> <url-email id="${row}[fromaddress]" contact_plus = "true" class="$row_cont[class]" readonly="true"/>
<description id="${row}[subject]" no_lang="1"/> <hbox>
<description class="status_img $row_cont[class]"/>
<description id="${row}[subject]" no_lang="1" class="$row_cont[class]" />
</hbox>
</vbox> </vbox>
<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> <hbox>
<html id="${row}[attachments]"/> <html id="${row}[attachments]"/>
<description class="status_img"/>
</hbox> </hbox>
</vbox> </vbox>
</row> </row>

View File

@ -2619,18 +2619,94 @@ div.mailComposeHeaderSection > table {
padding-top: 8px; padding-top: 8px;
padding-bottom: 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]'] { #mail-index table.egwGridView_outer tbody td span[id^='mail-index_'][id$='attachments]'] {
float: right; 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]'] { #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 { #mail-index table.egwGridView_outer tbody tr {
height: 55px; height: 55px;
} }
#mail-index table.egwGridView_outer tbody span.status_img { #mail-index table.egwGridView_outer tbody tr div.recent,
background-image: none !important; #mail-index table.egwGridView_outer tbody tr span.recent,
padding-left: 3px; #mail-index table.egwGridView_outer tbody tr time.recent,
float: right; #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);
} }
} }

View File

@ -1768,20 +1768,99 @@ div.mailComposeHeaderSection > table {
td { td {
padding-top: 8px; padding-top: 8px;
padding-bottom: 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]'] { span[id^='mail-index_'][id$='attachments]'] {
float: right; float: right;
img {
width: 16px;
height: 16px;
}
} }
span[id^='mail-index_'][id$='subject]'] { 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{ tr{
height:55px; height:55px;
} div.recent ,
span.status_img { span.recent ,
background-image: none !important; time.recent ,
padding-left: 3px; a.recent,
float: right; 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);
}
} }
} }
} }