- Use css sprite image for messages list

CHANGELOG

@@ -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
 -------------

program/js/app.js

@@ -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;
+    css_class = 'msgicon';
-    if (!flags.unread && flags.unread_children > 0 && this.env.unreadchildrenicon)
+    if (!flags.unread && flags.unread_children > 0)
-      icon = this.env.unreadchildrenicon;
+      css_class += ' unreadchildren';
-    else if (flags.deleted && this.env.deletedicon)
+    if (flags.deleted)
-      icon = this.env.deletedicon;
+      css_class += ' deleted';
-    else if (flags.replied && this.env.repliedicon) {
+    else if (flags.replied || flags.forwarded) {
-      if (flags.forwarded && this.env.forwardedrepliedicon)
+      if (flags.replied)
-        icon = this.env.forwardedrepliedicon;
+        css_class += ' replied';
-      else
+      if (flags.forwarded)
-        icon = this.env.repliedicon;
+        css_class += ' forwarded';
-    }
+    }
-    else if (flags.forwarded && this.env.forwardedicon)
+    else if (flags.unread)
-      icon = this.env.forwardedicon;
+      css_class += ' unread';
-    else if(flags.unread && this.env.unreadicon)
-      icon = this.env.unreadicon;
 
     // 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)
+        css_class = (flags.flagged ? 'flagged' : 'unflagged');
-          html = '<img id="flaggedicn'+uid+'" src="'+this.env.flaggedicon+'" class="flagicon" alt="" />';
+        html = '<span id="flagicn'+uid+'" class="'+css_class+'">&nbsp;</span>';
-        else if(!flags.flagged && this.env.unflaggedicon)
+      }
-          html = '<img id="flaggedicn'+uid+'" src="'+this.env.unflaggedicon+'" class="flagicon" alt="" />';
+      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;
+    if (rows[uid].icon) {
-    }
+      css_class = 'msgicon';
-    else if (rows[uid].deleted && this.env.deletedicon)
+      if (!rows[uid].unread && rows[uid].unread_children)
-      icn_src = this.env.deletedicon;
+        css_class += ' unreadchildren';
-    else if (rows[uid].replied && this.env.repliedicon) {
+      if (rows[uid].deleted)
-      if (rows[uid].forwarded && this.env.forwardedrepliedicon)
+        css_class += ' deleted';
-        icn_src = this.env.forwardedrepliedicon;
+      else if (rows[uid].replied || rows[uid].forwarded) {
-      else
+        if (rows[uid].replied)
-        icn_src = this.env.repliedicon;
+          css_class += ' replied';
-    }
+        if (rows[uid].forwarded)
-    else if (rows[uid].forwarded && this.env.forwardedicon)
+          css_class += ' forwarded';
-      icn_src = this.env.forwardedicon;
+      }
-    else if (rows[uid].unread && this.env.unreadicon)
+      else if (rows[uid].unread)
-      icn_src = this.env.unreadicon;
+        css_class += ' unread';
-    else if (this.env.messageicon)
+
-      icn_src = this.env.messageicon;
+      rows[uid].icon.className = css_class;
-
+    }
-    if (icn_src && rows[uid].icon)
+
-      rows[uid].icon.src = icn_src;
+    if (rows[uid].flagged_icon) {
-
+      css_class = (rows[uid].flagged ? 'flagged' : 'unflagged');
-    icn_src = '';
+      rows[uid].flagged_icon.className = css_class;
-
+    }
-    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;
   };
 
   // set message status

program/steps/mail/func.inc

@@ -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);

skins/default/ie6hacks.css

@@ -25,9 +25,7 @@ img
   background-image: url(images/display/icons.gif);
 }
 
-#messagemenu li a,
+#messagemenu li a
-#messagelist tr td div.expanded,
-#messagelist tr td div.collapsed
 {
   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);
+}

skins/default/mail.css

@@ -689,50 +689,100 @@ body.messagelist
   cursor: inherit;
 }
 
-#messagelist tr td.icon,
+#messagelist td span,
-#messagelist tr td.threads,
+#messagelist td img
-#messagelist tr td.attachment,
-#messagelist tr td.flag
 {
-  width: 18px;
+  vertical-align: middle;
-  padding: 0px 1px 1px 3px;
+  display: inline-block;
 }
 
-#messagelist tbody td span.branch,
+#messagelist tr td div.collapsed,
-#messagelist tbody td img
+#messagelist tr td div.expanded,
+#messagelist tbody tr td.flag
 {
-  vertical-align: middle;
+  cursor: pointer;
-  display: inline-block;
 }
 
-#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.attachment span.attachment,
-#messagelist tr td img.msgicon,
+#messagelist tr td.flag span.flagged,
-#messagelist tbody tr td.flag
+#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 tr td div.expanded
-#messagelist thead tr td.flag img
 {
-  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;

skins/default/templates/login.html

@@ -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
 " />

skins/default/templates/mail.html

@@ -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">