Cherry-picked rev 84a7acd which implemented CSS sprites into branch npk.

8 files changed, 144 insertions, 95 deletions

diff --git a/roundcubemail/program/include/main.inc b/roundcubemail/program/include/main.inc
index c243d7b1d..d349efd3c 100644
--- a/roundcubemail/program/include/main.inc
+++ b/roundcubemail/program/include/main.inc
@@ -1109,6 +1109,7 @@ function rcmail_render_folder_tree_html(&$arrFolders, &$mbox_name, &$jslist, $at
         'id' => "rcmli".$folder_id,
         'class' => join(' ', $classes),
         'noclose' => true),
+      html::div(array('class' => 'icon-holder')) .
       html::a($link_attrib, $html_name) .
       (!empty($folder['folders']) ? html::div(array(
         'class' => ($collapsed ? 'collapsed' : 'expanded'),
diff --git a/roundcubemail/program/js/app.js b/roundcubemail/program/js/app.js
index 4daf0239b..a64c98ff0 100644
--- a/roundcubemail/program/js/app.js
+++ b/roundcubemail/program/js/app.js
@@ -388,7 +388,7 @@ function rcube_webmail()
       }
 
     // set eventhandler to message icon
-    if ((row.icon = row.obj.cells[0].childNodes[0]) && row.icon.nodeName=='IMG')
+    if ((row.icon = row.obj.cells[0].childNodes[1]) && row.icon.nodeName=='DIV')
       {
       var p = this;
       row.icon.id = 'msgicn_'+row.uid;
@@ -406,7 +406,7 @@ function rcube_webmail()
 
     // set eventhandler to flag icon, if icon found
     if (this.env.flagged_col && (row.flagged_icon = row.obj.cells[this.env.flagged_col].childNodes[0]) 
-	&& row.flagged_icon.nodeName=='IMG')
+	&& row.flagged_icon.nodeName=='DIV')
       {
       var p = this;
       row.flagged_icon.id = 'flaggedicn_'+row.uid;
@@ -1305,7 +1305,7 @@ function rcube_webmail()
     {
     var div;
     if ((li = this.get_folder_li(id)) &&
-        (div = li.getElementsByTagName("div")[0]) &&
+        (div = li.getElementsByTagName("div")[1]) &&
         (div.className.match(/collapsed/) || div.className.match(/expanded/)))
       {
       var ul = li.getElementsByTagName("ul")[0];
@@ -1679,13 +1679,8 @@ function rcube_webmail()
 
     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].flagged && this.env.flagicon)
+      icn_src = this.env.flagicon;
   }
 
   // set message status
@@ -3667,7 +3662,7 @@ function rcube_webmail()
         }
       }
     
-    tree += icon ? '<img src="'+icon+'" alt="" />' : '';
+    tree += icon ? icon : '';
 
     // add each submitted col
     for (var n = 0; n < this.coltypes.length; n++) 
@@ -3679,13 +3674,13 @@ function rcube_webmail()
       var html;
       if (c=='flag')
         {
-        if (flags.flagged && this.env.flaggedicon)
-          html = '<img src="'+this.env.flaggedicon+'" alt="" />';
-        else if(!flags.flagged && this.env.unflaggedicon)
-          html = '<img src="'+this.env.unflaggedicon+'" alt="" />';
+        if (flags.flagged)
+          html = this.env.flaggedicon;
+        else if(!flags.flagged)
+          html = this.env.unflaggedicon;
       }
       else if (c=='attachment')
-        html = attachment && this.env.attachmenticon ? '<img src="'+this.env.attachmenticon+'" alt="" />' : '&nbsp;';
+        html = attachment ? this.env.attachmenticon : '&nbsp;';
       else
         html = cols[c];
 	  if (n == 0)
diff --git a/roundcubemail/program/steps/mail/func.inc b/roundcubemail/program/steps/mail/func.inc
index 89c566fba..e69551c1c 100644
--- a/roundcubemail/program/steps/mail/func.inc
+++ b/roundcubemail/program/steps/mail/func.inc
@@ -174,10 +174,10 @@ function rcmail_message_list($attrib)
     switch ($col)
       {
       case 'flag':
-        $col_name = sprintf($image_tag, $skin_path, $attrib['unflaggedicon'], '');
+        $col_name = '<div class="icon-holder flag"></div>';
         break;
       case 'attachment':
-        $col_name = sprintf($image_tag, $skin_path, $attrib['attachmenticon'], '');
+        $col_name = '<div class="icon-holder attachment"></div>';
         break;
       default:
         $col_name = Q(rcube_label($col));
@@ -268,32 +268,29 @@ function rcmail_message_list($attrib)
     $js_row_arr['unread_children'] = $header->unread_children;
 
     // set message icon
-    if ($header->seen && $attrib['unreadchildrenicon'] && $header->unread_children > 0) 
+    if ($header->seen && $header->unread_children > 0) 
       $message_icon = $attrib['unreadchildrenicon'];
-    else if ($attrib['deletedicon'] && $header->deleted)
-      $message_icon = $attrib['deletedicon'];
-    else if ($attrib['repliedicon'] && $header->answered)
+    else if ($header->deleted)
+      $message_icon = '<div class="icon-holder deleted"></div>';
+    else if ($header->answered)
       {
-      if ($attrib['forwardedrepliedicon'] && $header->forwarded)
-        $message_icon = $attrib['forwardedrepliedicon'];
+      if ($header->forwarded)
+        $message_icon = '<div class="icon-holder forwardedreplied"></div>';
       else
-        $message_icon = $attrib['repliedicon'];
+        $message_icon = '<div class="icon-holder replied"></div>';
       }
-    else if ($attrib['forwardedicon'] && $header->forwarded)
-      $message_icon = $attrib['forwardedicon'];
-    else if ($attrib['unreadicon'] && !$header->seen)
-      $message_icon = $attrib['unreadicon'];
-    else if ($attrib['messageicon'])
-      $message_icon = $attrib['messageicon'];
+    else if ($header->forwarded)
+      $message_icon = '<div class="icon-holder forwarded"></div>';
+    else if (!$header->seen)
+      $message_icon = '<div class="icon-holder unread"></div>';
+    else
+      $message_icon = '<div class="icon-holder message"></div>';
 
-    if ($attrib['flaggedicon'] && $header->flagged)
-      $flagged_icon = $attrib['flaggedicon'];
-    else if ($attrib['unflaggedicon'] && !$header->flagged)
-      $flagged_icon = $attrib['unflaggedicon'];
-    
-    // set attachment icon
-    if ($attrib['attachmenticon'] && preg_match("/multipart\/m/i", $header->ctype))
-      $attach_icon = $attrib['attachmenticon'];
+    // set attachment icons
+    if (preg_match("/multipart\/m/i", $header->ctype))
+      $attach_icon = '<div class="icon-holder attachment"></div>';
+    else
+      $attach_icon = '&nbsp';
         
     $out .= sprintf('<tr id="rcmrow%d" class="message%s%s%s%s"%s>'."\n",
                     $header->uid,
@@ -315,7 +312,7 @@ function rcmail_message_list($attrib)
         $js_row_arr['expanded'] = true;
       $tree .= $header->has_children?'<div id="rcmexpando' . $header->uid . '" class="' . $toggle_expanded . '">&nbsp;</div>':'<div class="leaf">&nbsp;</div>';
       }
-    $tree .= $message_icon ? sprintf($image_tag, $skin_path, $message_icon, '') : '';
+    $tree .= sprintf("<td class=\"icon\">%s</td>\n", $message_icon);
 
     $IMAP->set_charset(!empty($header->charset) ? $header->charset : $CONFIG['default_charset']);
   
@@ -334,7 +331,7 @@ function rcmail_message_list($attrib)
         $cont = sprintf('<a href="%s" onclick="return rcube_event.cancel(event)">%s</a>', Q(rcmail_url($action, array($uid_param=>$header->uid, '_mbox'=>$mbox))), Q($cont));
         }
       else if ($col=='flag')
-        $cont = $flagged_icon ? sprintf($image_tag, $skin_path, $flagged_icon, '') : '';
+        $cont = '<div class="icon-holder flag"></div>';
       else if ($col=='size')
         $cont = show_bytes($header->$col);
       else if ($col=='date')
@@ -349,7 +346,7 @@ function rcmail_message_list($attrib)
       if ($col!='attachment')
         $out .= '<td class="'.$col.'">' . $cont . "</td>\n";
       else
-        $out .= sprintf("<td class=\"icon\">%s</td>\n", $attach_icon ? sprintf($image_tag, $skin_path, $attach_icon, '') : '&nbsp;');
+        $out .= '<td class="icon">' . $attach_icon . "</td>\n";
       }
 
     $out .= "</tr>\n";
@@ -372,27 +369,16 @@ function rcmail_message_list($attrib)
   $OUTPUT->set_env('sort_col', $sort_col);
   $OUTPUT->set_env('sort_order', $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']);
+  $OUTPUT->set_env('messageicon', '<div class="icon-holder message"></div>');
+  $OUTPUT->set_env('deletedicon', '<div class="icon-holder deleted"></div>');
+  $OUTPUT->set_env('unreadicon', '<div class="icon-holder unread"></div>');
+  $OUTPUT->set_env('repliedicon', '<div class="icon-holder replied"></div>');
+  $OUTPUT->set_env('forwardedicon', '<div class="icon-holder forwarded"></div>');
+  $OUTPUT->set_env('forwardedrepliedicon', '<div class="icon-holder forwardedreplied"></div>');
+  $OUTPUT->set_env('attachmenticon', '<div class="icon-holder attachment"></div>');
+  $OUTPUT->set_env('flagicon', '<div class="icon-holder flag"></div>');
   if ($attrib['unreadchildrenicon'])
     $OUTPUT->set_env('unreadchildrenicon', $skin_path . $attrib['unreadchildrenicon']);
-  
   $OUTPUT->set_env('messages', $a_js_message_arr);
   $OUTPUT->set_env('coltypes', $a_show_cols);
   
diff --git a/roundcubemail/program/steps/settings/manage_folders.inc b/roundcubemail/program/steps/settings/manage_folders.inc
index 80a6b7c65..4adeca4c7 100644
--- a/roundcubemail/program/steps/settings/manage_folders.inc
+++ b/roundcubemail/program/steps/settings/manage_folders.inc
@@ -244,15 +244,8 @@ function rcube_subscription_form($attrib)
     'onclick' => JS_OBJECT_NAME.".command(this.checked?'enable-threading':'disable-threading',this.value)",
   ));
   
-  if (!empty($attrib['deleteicon']))
-    $del_button = html::img(array('src' => $CONFIG['skin_path'] . $attrib['deleteicon'], 'alt' => rcube_label('delete')));
-  else
-    $del_button = rcube_label('delete');
-
-  if (!empty($attrib['renameicon']))
-    $edit_button = html::img(array('src' => $CONFIG['skin_path'] . $attrib['renameicon'], 'alt' => rcube_label('rename')));
-  else
-    $edit_button = rcube_label('rename');
+  $del_button = '<div class="icon-holder delete"></div>';
+  $edit_button = '<div class="icon-holder rename"></div>';
     
   // create list of available folders
   foreach ($list_folders as $i => $folder) {
@@ -281,8 +274,8 @@ function rcube_subscription_form($attrib)
     
     // add rename and delete buttons
     if (!$protected && !$folder['virtual']) {
-      $table->add('rename', html::a(array('href' => "#rename", 'title' => rcube_label('renamefolder')), $edit_button));
-      $table->add('delete', html::a(array('href' => "#delete", 'title' => rcube_label('deletefolder')), $del_button));
+      $table->add('rename', html::div('icon-holder rename', html::a(array('href' => "#rename", 'title' => rcube_label('renamefolder'), 'style' => 'display: block; width: 16px; height: 16px;'), '')));
+      $table->add('delete', html::div('icon-holder delete', html::a(array('href' => "#delete", 'title' => rcube_label('deletefolder'), 'style' => 'display: block; width: 16px; height: 16px;'), '')));
     }
     else {
       $table->add('rename', '&nbsp;');
diff --git a/roundcubemail/skins/default/images/icons/rc_icons.png b/roundcubemail/skins/default/images/icons/rc_icons.png
new file mode 100644
index 000000000..a8771153b
--- /dev/null
+++ b/roundcubemail/skins/default/images/icons/rc_icons.png
diff --git a/roundcubemail/skins/default/mail.css b/roundcubemail/skins/default/mail.css
index e93afa100..071d76d2b 100644
--- a/roundcubemail/skins/default/mail.css
+++ b/roundcubemail/skins/default/mail.css
@@ -320,8 +320,6 @@ td.formlinks a:visited
   display: block;
   position: relative;
   font-size: 11px;
-  background: url(images/icons/folder-closed.png) no-repeat;
-  background-position: 5px 1px;
   border-bottom: 1px solid #EBEBEB;
 }
 
@@ -335,6 +333,56 @@ td.formlinks a:visited
   height: 16px;
 }
 
+#mailboxlist li div.icon-holder {
+  position: static;
+  height: 16px;
+  width: 16px;
+  margin: 2px 4px 2px 4px;
+  overflow: hidden;
+  float: left;
+}
+
+div.icon-holder {
+  position: static;
+  height: 16px;
+  width: 16px;
+  overflow: hidden;
+}
+div.icon-holder.attachment {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -16px;
+}
+div.icon-holder.unflagged {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -32px;
+}
+div.icon-holder.flagged {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -32px;
+}
+div.icon-holder.replied {
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -48px;
+}
+div.icon-holder.forwarded {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px -48px;
+}
+div.icon-holder.forwardedreplied {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -48px;
+}
+div.icon-holder.unread {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -64px -16px;
+}
+div.icon-holder.message {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -64px 0;
+}
+div.icon-holder.delete {
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -32px;
+}
+div.icon-holder.deleted {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px -32px;
+}
+div.icon-holder.rename {
+  background: #ffffff url(images/icons/rc_icons.png) no-repeat scroll -48px -48px;
+}
+
+
 #mailboxlist li div.collapsed,
 #mailboxlist li div.expanded
 {
@@ -351,29 +399,38 @@ td.formlinks a:visited
   background: url(images/icons/expanded.png) bottom right no-repeat;
 }
 
-#mailboxlist li.inbox
+#mailboxlist li.inbox div.icon-holder
+{
+  background: url(images/icons/rc_icons.png) no-repeat scroll;
+}
+
+#mailboxlist li.drafts div.icon-holder
 {
-  background-image: url(images/icons/folder-inbox.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px 0;
 }
 
-#mailboxlist li.drafts
+#mailboxlist li.sent div.icon-holder
 {
-  background-image: url(images/icons/folder-drafts.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px 0;
 }
 
-#mailboxlist li.sent
+#mailboxlist li.junk div.icon-holder
 {
-  background-image: url(images/icons/folder-sent.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px 0;
 }
 
-#mailboxlist li.junk
+#mailboxlist li.trash div.icon-holder
 {
-  background-image: url(images/icons/folder-junk.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -16px;
 }
 
-#mailboxlist li.trash
+#mailboxlist li div.icon-holder
+{
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px -16px;
+}
+#mailboxlist li.selected > div.icon-holder
 {
-  background-image: url(images/icons/folder-trash.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -16px;
 }
 
 #mailboxlist li a
@@ -381,7 +438,6 @@ td.formlinks a:visited
   cursor: default;
   display: block;
   position: relative;
-  padding-left: 25px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-decoration: none;
@@ -581,8 +637,17 @@ body.messagelist
 
 #messagelist tbody tr td.flag img:hover,
 #messagelist thead tr td.flag img
+
+#messagelist tbody tr.flagged td.flag div.icon-holder
+{
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -32px;
+}
+
+#messagelist tbody tr.flagged td.flag div.icon-holder:hover,
+#messagelist tbody tr td.flag div:hover,
+#messagelist thead tr td.flag div 
 {
-  background: url(images/icons/unflagged.png) center no-repeat;
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -32px;
 }
 
 #messagelist tr td.subject
diff --git a/roundcubemail/skins/default/settings.css b/roundcubemail/skins/default/settings.css
index 5c4bd56dc..ab93eaf47 100644
--- a/roundcubemail/skins/default/settings.css
+++ b/roundcubemail/skins/default/settings.css
@@ -292,3 +292,21 @@ div.advswitch
   right: 20px;
   width: 460px;
 }
+
+div.icon-holder {
+  position: static;
+  height: 16px;
+  width: 16px;
+  overflow: hidden;
+}
+div.icon-holder.delete {
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -16px;
+}
+div.icon-holder.rename {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -48px;
+}
+
+/* Background image of containing <div> must be visible */
+#subscription-table tr.selected td div.icon-holder a {
+  background-color: transparent;
+}
diff --git a/roundcubemail/skins/default/templates/mail.html b/roundcubemail/skins/default/templates/mail.html
index 2e6e1e791..a480a9289 100644
--- a/roundcubemail/skins/default/templates/mail.html
+++ b/roundcubemail/skins/default/templates/mail.html
@@ -48,15 +48,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="/images/icons/unread_children.png" />
 </div>