From 741b51da66fc64059d79eb8d35f94f8b2e6d9920 Mon Sep 17 00:00:00 2001 From: Nathan Kinkade Date: Tue, 31 Mar 2009 18:40:55 -0400 Subject: Cherry-picked rev 84a7acd which implemented CSS sprites into branch npk. --- roundcubemail/program/include/main.inc | 1 + roundcubemail/program/js/app.js | 27 +++--- roundcubemail/program/steps/mail/func.inc | 78 +++++++---------- .../program/steps/settings/manage_folders.inc | 15 +--- .../skins/default/images/icons/rc_icons.png | Bin 0 -> 8224 bytes roundcubemail/skins/default/mail.css | 93 +++++++++++++++++---- roundcubemail/skins/default/settings.css | 18 ++++ roundcubemail/skins/default/templates/mail.html | 9 -- 8 files changed, 145 insertions(+), 96 deletions(-) create mode 100644 roundcubemail/skins/default/images/icons/rc_icons.png 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 ? '' : ''; + 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 = ''; - else if(!flags.flagged && this.env.unflaggedicon) - html = ''; + if (flags.flagged) + html = this.env.flaggedicon; + else if(!flags.flagged) + html = this.env.unflaggedicon; } else if (c=='attachment') - html = attachment && this.env.attachmenticon ? '' : ' '; + html = attachment ? this.env.attachmenticon : ' '; 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 = '
'; break; case 'attachment': - $col_name = sprintf($image_tag, $skin_path, $attrib['attachmenticon'], ''); + $col_name = '
'; 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 = '
'; + else if ($header->answered) { - if ($attrib['forwardedrepliedicon'] && $header->forwarded) - $message_icon = $attrib['forwardedrepliedicon']; + if ($header->forwarded) + $message_icon = '
'; else - $message_icon = $attrib['repliedicon']; + $message_icon = '
'; } - 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']; - - 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']; + else if ($header->forwarded) + $message_icon = '
'; + else if (!$header->seen) + $message_icon = '
'; + else + $message_icon = '
'; + + // set attachment icons + if (preg_match("/multipart\/m/i", $header->ctype)) + $attach_icon = '
'; + else + $attach_icon = ' '; $out .= sprintf(''."\n", $header->uid, @@ -315,7 +312,7 @@ function rcmail_message_list($attrib) $js_row_arr['expanded'] = true; $tree .= $header->has_children?'
 
':'
 
'; } - $tree .= $message_icon ? sprintf($image_tag, $skin_path, $message_icon, '') : ''; + $tree .= sprintf("%s\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('%s', 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 = '
'; 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 .= '' . $cont . "\n"; else - $out .= sprintf("%s\n", $attach_icon ? sprintf($image_tag, $skin_path, $attach_icon, '') : ' '); + $out .= '' . $attach_icon . "\n"; } $out .= "\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', '
'); + $OUTPUT->set_env('deletedicon', '
'); + $OUTPUT->set_env('unreadicon', '
'); + $OUTPUT->set_env('repliedicon', '
'); + $OUTPUT->set_env('forwardedicon', '
'); + $OUTPUT->set_env('forwardedrepliedicon', '
'); + $OUTPUT->set_env('attachmenticon', '
'); + $OUTPUT->set_env('flagicon', '
'); 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 = '
'; + $edit_button = '
'; // 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', ' '); 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 Binary files /dev/null and b/roundcubemail/skins/default/images/icons/rc_icons.png differ 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
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" />
-- cgit v1.2.3