- Use css sprite image for messages list

release-0.6
alecpl 14 years ago
parent f22ea7ba18
commit e9470683bf

@ -22,6 +22,7 @@ CHANGELOG Roundcube Webmail
- Make htmleditor option more consistent and add option to use HTML on reply to HTML message (#1485840)
- Use empty envelope sender address for message disposition notifications (RFC2298.3)
- Support SMTP Delivery Status Notifications - RFC3461 (#1486142)
- Use css sprite image for messages list
RELEASE 0.4.2
-------------

@ -368,7 +368,7 @@ function rcube_webmail()
$('#rcmlogintz').val(new Date().getTimezoneOffset() / -60);
// display 'loading' message on form submit
$('form').submit(function () {
$('form').submit(function () {
rcmail.display_message(rcmail.get_label('loading'), 'loading', true);
});
@ -1526,13 +1526,13 @@ function rcube_webmail()
// set eventhandler to message icon
if (this.env.subject_col != null && (row.icon = document.getElementById('msgicn'+row.uid))) {
row.icon._row = row.obj;
row.icon.onmousedown = function(e) { self.command('toggle_status', this); };
row.icon.onmousedown = function(e) { self.command('toggle_status', this); rcube_event.cancel(e); };
}
// set eventhandler to flag icon, if icon found
if (this.env.flagged_col != null && (row.flagged_icon = document.getElementById('flaggedicn'+row.uid))) {
if (this.env.flagged_col != null && (row.flagged_icon = document.getElementById('flagicn'+row.uid))) {
row.flagged_icon._row = row.obj;
row.flagged_icon.onmousedown = function(e) { self.command('toggle_flag', this); };
row.flagged_icon.onmousedown = function(e) { self.command('toggle_flag', this); rcube_event.cancel(e); };
}
if (!row.depth && row.has_children && (expando = document.getElementById('rcmexpando'+row.uid))) {
@ -1569,7 +1569,7 @@ function rcube_webmail()
flags: flags.extra_flags
});
var c, tree = expando = '',
var c, html, tree = expando = '',
list = this.message_list,
rows = list.rows,
tbody = this.gui_objects.messagelist.tBodies[0],
@ -1591,21 +1591,19 @@ function rcube_webmail()
row.className = css_class;
// message status icon
var icon = this.env.messageicon;
if (!flags.unread && flags.unread_children > 0 && this.env.unreadchildrenicon)
icon = this.env.unreadchildrenicon;
else if (flags.deleted && this.env.deletedicon)
icon = this.env.deletedicon;
else if (flags.replied && this.env.repliedicon) {
if (flags.forwarded && this.env.forwardedrepliedicon)
icon = this.env.forwardedrepliedicon;
else
icon = this.env.repliedicon;
}
else if (flags.forwarded && this.env.forwardedicon)
icon = this.env.forwardedicon;
else if(flags.unread && this.env.unreadicon)
icon = this.env.unreadicon;
css_class = 'msgicon';
if (!flags.unread && flags.unread_children > 0)
css_class += ' unreadchildren';
if (flags.deleted)
css_class += ' deleted';
else if (flags.replied || flags.forwarded) {
if (flags.replied)
css_class += ' replied';
if (flags.forwarded)
css_class += ' forwarded';
}
else if (flags.unread)
css_class += ' unread';
// update selection
if (message.selected && !list.in_selection(uid))
@ -1639,7 +1637,7 @@ function rcube_webmail()
expando = '<div id="rcmexpando' + uid + '" class="' + (message.expanded ? 'expanded' : 'collapsed') + '">&nbsp;&nbsp;</div>';
}
tree += icon ? '<img id="msgicn'+uid+'" src="'+icon+'" alt="" class="msgicon" />' : '';
tree += '<span id="msgicn'+uid+'" class="'+css_class+'">&nbsp;</span>';
// build subject link
if (!bw.ie && cols.subject) {
@ -1655,17 +1653,15 @@ function rcube_webmail()
col = document.createElement('td');
col.className = String(c).toLowerCase();
var html;
if (c == 'flag') {
if (flags.flagged && this.env.flaggedicon)
html = '<img id="flaggedicn'+uid+'" src="'+this.env.flaggedicon+'" class="flagicon" alt="" />';
else if(!flags.flagged && this.env.unflaggedicon)
html = '<img id="flaggedicn'+uid+'" src="'+this.env.unflaggedicon+'" class="flagicon" alt="" />';
css_class = (flags.flagged ? 'flagged' : 'unflagged');
html = '<span id="flagicn'+uid+'" class="'+css_class+'">&nbsp;</span>';
}
else if (c == 'attachment') {
html = flags.attachment ? '<span class="attachment">&nbsp;</span>' : '&nbsp;';
}
else if (c == 'threads')
html = expando;
else if (c == 'attachment')
html = flags.attachment && this.env.attachmenticon ? '<img src="'+this.env.attachmenticon+'" alt="" />' : '&nbsp;';
else if (c == 'subject')
html = tree + cols[c];
else
@ -2184,40 +2180,34 @@ function rcube_webmail()
// set message icon
this.set_message_icon = function(uid)
{
var icn_src,
var css_class,
rows = this.message_list.rows;
if (!rows[uid])
return false;
if (!rows[uid].unread && rows[uid].unread_children && this.env.unreadchildrenicon) {
icn_src = this.env.unreadchildrenicon;
}
else if (rows[uid].deleted && this.env.deletedicon)
icn_src = this.env.deletedicon;
else if (rows[uid].replied && this.env.repliedicon) {
if (rows[uid].forwarded && this.env.forwardedrepliedicon)
icn_src = this.env.forwardedrepliedicon;
else
icn_src = this.env.repliedicon;
}
else if (rows[uid].forwarded && this.env.forwardedicon)
icn_src = this.env.forwardedicon;
else if (rows[uid].unread && this.env.unreadicon)
icn_src = this.env.unreadicon;
else if (this.env.messageicon)
icn_src = this.env.messageicon;
if (icn_src && rows[uid].icon)
rows[uid].icon.src = icn_src;
icn_src = '';
if (rows[uid].flagged && this.env.flaggedicon)
icn_src = this.env.flaggedicon;
else if (!rows[uid].flagged && this.env.unflaggedicon)
icn_src = this.env.unflaggedicon;
if (rows[uid].flagged_icon && icn_src)
rows[uid].flagged_icon.src = icn_src;
if (rows[uid].icon) {
css_class = 'msgicon';
if (!rows[uid].unread && rows[uid].unread_children)
css_class += ' unreadchildren';
if (rows[uid].deleted)
css_class += ' deleted';
else if (rows[uid].replied || rows[uid].forwarded) {
if (rows[uid].replied)
css_class += ' replied';
if (rows[uid].forwarded)
css_class += ' forwarded';
}
else if (rows[uid].unread)
css_class += ' unread';
rows[uid].icon.className = css_class;
}
if (rows[uid].flagged_icon) {
css_class = (rows[uid].flagged ? 'flagged' : 'unflagged');
rows[uid].flagged_icon.className = css_class;
}
};
// set message status

@ -186,28 +186,6 @@ function rcmail_message_list($attrib)
$OUTPUT->set_env('autoexpand_threads', intval($CONFIG['autoexpand_threads']));
$OUTPUT->set_env('sort_col', $_SESSION['sort_col']);
$OUTPUT->set_env('sort_order', $_SESSION['sort_order']);
if ($attrib['messageicon'])
$OUTPUT->set_env('messageicon', $skin_path . $attrib['messageicon']);
if ($attrib['deletedicon'])
$OUTPUT->set_env('deletedicon', $skin_path . $attrib['deletedicon']);
if ($attrib['unreadicon'])
$OUTPUT->set_env('unreadicon', $skin_path . $attrib['unreadicon']);
if ($attrib['repliedicon'])
$OUTPUT->set_env('repliedicon', $skin_path . $attrib['repliedicon']);
if ($attrib['forwardedicon'])
$OUTPUT->set_env('forwardedicon', $skin_path . $attrib['forwardedicon']);
if ($attrib['forwardedrepliedicon'])
$OUTPUT->set_env('forwardedrepliedicon', $skin_path . $attrib['forwardedrepliedicon']);
if ($attrib['attachmenticon'])
$OUTPUT->set_env('attachmenticon', $skin_path . $attrib['attachmenticon']);
if ($attrib['flaggedicon'])
$OUTPUT->set_env('flaggedicon', $skin_path . $attrib['flaggedicon']);
if ($attrib['unflaggedicon'])
$OUTPUT->set_env('unflaggedicon', $skin_path . $attrib['unflaggedicon']);
if ($attrib['unreadchildrenicon'])
$OUTPUT->set_env('unreadchildrenicon', $skin_path . $attrib['unreadchildrenicon']);
$OUTPUT->set_env('messages', array());
$OUTPUT->set_env('coltypes', $a_show_cols);
@ -394,10 +372,10 @@ function rcmail_message_list_head($attrib, $a_show_cols)
// get column name
switch ($col) {
case 'flag':
$col_name = sprintf($image_tag, $skin_path, $attrib['unflaggedicon'], '');
$col_name = '<span class="flagged">&nbsp;</span>';
break;
case 'attachment':
$col_name = sprintf($image_tag, $skin_path, $attrib['attachmenticon'], '');
$col_name = '<span class="attachment">&nbsp;</span>';
break;
case 'threads':
$col_name = $list_menu;
@ -411,7 +389,7 @@ function rcmail_message_list_head($attrib, $a_show_cols)
$col_name = html::a(array('href'=>"./#sort", 'onclick' => 'return '.JS_OBJECT_NAME.".command('sort','".$col."',this)", 'title' => rcube_label('sortby')), $col_name);
$sort_class = $col == $sort_col ? " sorted$sort_order" : '';
$class_name = $col == 'attachment' ? 'icon' : $col.$sort_class;
$class_name = $col.$sort_class;
// put it all together
$cells[] = array('className' => $class_name, 'id' => "rcm$col", 'html' => $col_name);

@ -25,9 +25,7 @@ img
background-image: url(images/display/icons.gif);
}
#messagemenu li a,
#messagelist tr td div.expanded,
#messagelist tr td div.collapsed
#messagemenu li a
{
background-image: url(images/messageactions.gif);
}
@ -122,3 +120,18 @@ ul.toolbarmenu li.separator_below
{
height: expression((parseInt(document.documentElement.clientHeight)-105)+'px');
}
#messagelist tr td div.collapsed,
#messagelist tr td div.expanded,
#messagelist tr td.attachment span.attachment,
#messagelist tr td.flag span.flagged,
#messagelist tr td.flag span.unflagged:hover,
#messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.msgicon.replied,
#messagelist tr td.subject span.msgicon.forwarded,
#messagelist tr td.subject span.msgicon.deleted,
#messagelist tr td.subject span.msgicon.unread,
#messagelist tr td.subject span.msgicon.unreadchildren
{
background-image: url(images/messageicons.gif);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

@ -689,50 +689,100 @@ body.messagelist
cursor: inherit;
}
#messagelist tr td.icon,
#messagelist tr td.threads,
#messagelist tr td.attachment,
#messagelist tr td.flag
#messagelist td span,
#messagelist td img
{
width: 18px;
padding: 0px 1px 1px 3px;
vertical-align: middle;
display: inline-block;
}
#messagelist tbody td span.branch,
#messagelist tbody td img
#messagelist tr td div.collapsed,
#messagelist tr td div.expanded,
#messagelist tbody tr td.flag
{
vertical-align: middle;
display: inline-block;
cursor: pointer;
}
#messagelist tbody td img.msgicon
#messagelist tr td.flag span,
#messagelist tr td.attachment span
{
margin: 0 2px;
width: 15px;
}
#messagelist tr td div.collapsed,
#messagelist tr td div.expanded,
#messagelist tr td img.flagicon,
#messagelist tr td img.msgicon,
#messagelist tbody tr td.flag
#messagelist tr td.attachment span.attachment,
#messagelist tr td.flag span.flagged,
#messagelist tr td.flag span.unflagged:hover,
#messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.msgicon.replied,
#messagelist tr td.subject span.msgicon.forwarded,
#messagelist tr td.subject span.msgicon.deleted,
#messagelist tr td.subject span.msgicon.unread,
#messagelist tr td.subject span.msgicon.unreadchildren
{
vertical-align: middle;
height: 17px;
width: 15px;
background: url(images/messageicons.png) center no-repeat;
}
#messagelist tr td.attachment span.attachment
{
background-position: -150px 0;
}
#messagelist tr td.flag span.flagged
{
background-position: -135px 0;
}
#messagelist tr td.flag span.unflagged:hover
{
background-position: -120px 0;
}
#messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.msgicon.unreadchildren
{
background-position: -45px 0;
margin: 0 2px;
cursor: pointer;
}
#messagelist tr td div.collapsed
#messagelist tr td.subject span.msgicon.replied
{
background: url(images/messageactions.png) -1px -91px no-repeat;
background-position: -60px 0;
}
#messagelist tr td div.expanded
#messagelist tr td.subject span.msgicon.forwarded
{
background-position: -75px 0;
}
#messagelist tr td.subject span.msgicon.replied.forwarded
{
background-position: -90px 0;
}
#messagelist tr td.subject span.msgicon.deleted
{
background-position: -165px 0;
}
#messagelist tr td.subject span.msgicon.unread
{
background-position: -105px 0;
}
#messagelist tr td div.collapsed
{
background: url(images/messageactions.png) -1px -109px no-repeat;
background-position: -195px 0;
}
#messagelist tbody tr td.flag img:hover,
#messagelist thead tr td.flag img
#messagelist tr td div.expanded
{
background: url(images/icons/unflagged.png) center no-repeat;
background-position: -180px 0;
}
#messagelist tbody tr td.subject
@ -751,6 +801,14 @@ body.messagelist
text-decoration: underline;
}
#messagelist tr td.attachment,
#messagelist tr td.threads,
#messagelist tr td.flag
{
width: 19px;
padding: 0 2px;
}
#messagelist tr td.size
{
width: 60px;

@ -32,14 +32,9 @@
/images/pagenav.gif
/images/mail_toolbar.png
/images/searchfield.gif
/images/icons/glass_roll.png
/images/messageicons.png
/images/icons/reset.gif
/images/icons/attachment.png
/images/icons/dot.png
/images/icons/unread.png
/images/abook_toolbar.png
/images/icons/glass.png
/images/icons/groupactions.png
/images/watermark.gif
" />

@ -58,16 +58,6 @@
cellspacing="0"
columns=""
summary="Message list"
messageIcon="/images/icons/dot.png"
unreadIcon="/images/icons/unread.png"
deletedIcon="/images/icons/deleted.png"
repliedIcon="/images/icons/replied.png"
forwardedIcon="/images/icons/forwarded.png"
forwardedrepliedIcon="/images/icons/forwarded_replied.png"
attachmentIcon="/images/icons/attachment.png"
flaggedIcon="/images/icons/flagged.png"
unflaggedIcon="/images/icons/blank.gif"
unreadchildrenIcon=""
optionsmenuIcon="/images/icons/columnpicker.gif" />
</div>
<div class="boxfooter">

Loading…
Cancel
Save