More speedup by using sprites for buttons: replacing 76 images with 4 new

thomascube

2009-07-29 4a42653fa362d90992036fc3b26cb72399f7421d

More speedup by using sprites for buttons: replacing 76 images with 4 new

 CHANGELOG

@@ -1,6 +1,7 @@
CHANGELOG RoundCube Webmail
===========================

- Speedup UI by using sprites for (toolbar) buttons
- Fix charset names with X- prefix handling
- Fix displaying of HTML messages with unknown/malformed tags (#1486003)


 skins/default/addresses.css

@@ -13,6 +13,66 @@
  padding-right: 10px;
}

#abooktoolbar a.button,
#abooktoolbar a.buttonPas,
#abooktoolbar span.separator {
  display: block;
  float: left;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: 10px;
  overflow: hidden;
  background: url('images/abook_toolbar.png') 0 0 no-repeat transparent;
  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}

#abooktoolbar a.buttonPas {
  opacity: 0.35;
}

#abooktoolbar a.addcontactSel {
  background-position: 0 -32px;
}

#abooktoolbar a.compose {
  background-position: -32px 0;
}

#abooktoolbar a.composeSel {
  background-position: -32px -32px;
}

#abooktoolbar a.delete {
  background-position: -64px 0;
}

#abooktoolbar a.deleteSel {
  background-position: -64px -32px;
}

#abooktoolbar a.import {
  background-position: -96px 0;
}

#abooktoolbar a.importSel {
  background-position: -96px -32px;
}

#abooktoolbar a.export {
  background-position: -128px 0;
}

#abooktoolbar a.exportSel {
  background-position: -128px -32px;
}

#abooktoolbar span.separator {
  width: 5px;
  background-image: url('images/abook_toolbar.png');
  background-position: -162px 0;
}

#abookcountbar
{
  position: absolute;

 skins/default/common.css

@@ -241,6 +241,52 @@
  left: 20px;
}

.pagenav a.button,
.pagenav a.buttonPas
{
  display: block;
  float: left;
  width: 11px;
  height: 11px;
  padding: 0;
  margin: 1px;
  overflow: hidden;
  background: url('images/pagenav.gif') 0 0 no-repeat transparent;
  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}

.pagenav a.buttonPas {
  opacity: 0.35;
}

.pagenav a.firstpageSel {
  background-position: 0 -11px;
}

.pagenav a.prevpage {
  background-position: -11px 0;
}

.pagenav a.prevpageSel {
  background-position: -11px -11px;
}

.pagenav a.nextpage {
  background-position: -22px 0;
}

.pagenav a.nextpageSel {
  background-position: -22px -11px;
}

.pagenav a.lastpage {
  background-position: -33px 0;
}

.pagenav a.lastpageSel {
  background-position: -33px -11px;
}

.splitter
{
  user-select: none;

 skins/default/ie6hacks.css

@@ -28,4 +28,15 @@
#mailboxlist li
{
  background-image: url('images/icons/folders.gif');
}
}

#messagetoolbar a.button,
#messagetoolbar a.buttonPas {
  background-image: url('images/mail_toolbar.gif');
}

#abooktoolbar a.button,
#abooktoolbar a.buttonPas,
#abooktoolbar span.separator {
  background-image: url('images/abook_toolbar.gif');
}

 skins/default/iehacks.css

@@ -8,6 +8,11 @@
  background-color: expression(this.type=='checkbox' || this.type=='radio' ? 'transparent' : '#ffffff');
}

.pagenav a.buttonPas
{
  filter: alpha(opacity=35);
}

#message
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
@@ -58,6 +63,24 @@
  top: -8px;
}

#abooktoolbar a.buttonPas
{
  filter: alpha(opacity=35);
  background-image: url('images/abook_toolbar.gif');
}

#messagetoolbar a.buttonPas
{
  filter: alpha(opacity=35);
  background-image: url('images/mail_toolbar.gif');
}

#messagetoolbar select.mboxlist
{
  margin: 0 8px;
  top: 8px;
}

#mainscreen
{
  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');

 skins/default/images/abook_toolbar.gif

 skins/default/images/abook_toolbar.png

 skins/default/images/buttons/actions_act.png

Binary files differ

 skins/default/images/buttons/actions_pas.png

Binary files differ

 skins/default/images/buttons/add_contact_act.png

Binary files differ

 skins/default/images/buttons/add_contact_pas.png

Binary files differ

 skins/default/images/buttons/add_contact_sel.png

Binary files differ

 skins/default/images/buttons/adr_import_act.png

Binary files differ

 skins/default/images/buttons/adr_import_pas.png

Binary files differ

 skins/default/images/buttons/adr_import_sel.png

Binary files differ

 skins/default/images/buttons/attach_act.png

Binary files differ

 skins/default/images/buttons/attach_pas.png

Binary files differ

 skins/default/images/buttons/attach_sel.png

Binary files differ

 skins/default/images/buttons/back_act.png

Binary files differ

 skins/default/images/buttons/back_pas.png

Binary files differ

 skins/default/images/buttons/back_sel.png

Binary files differ

 skins/default/images/buttons/compose_act.png

Binary files differ

 skins/default/images/buttons/compose_pas.png

Binary files differ

 skins/default/images/buttons/compose_sel.png

Binary files differ

 skins/default/images/buttons/contacts_act.png

Binary files differ

 skins/default/images/buttons/contacts_pas.png

Binary files differ

 skins/default/images/buttons/contacts_sel.png

Binary files differ

 skins/default/images/buttons/delete_act.png

Binary files differ

 skins/default/images/buttons/delete_pas.png

Binary files differ

 skins/default/images/buttons/delete_sel.png

Binary files differ

 skins/default/images/buttons/down_arrow.png

Binary files differ

 skins/default/images/buttons/download_act.png

Binary files differ

 skins/default/images/buttons/download_pas.png

Binary files differ

 skins/default/images/buttons/download_sel.png

Binary files differ

 skins/default/images/buttons/drafts_act.png

Binary files differ

 skins/default/images/buttons/drafts_pas.png

Binary files differ

 skins/default/images/buttons/drafts_sel.png

Binary files differ

 skins/default/images/buttons/edit_contact_act.png

Binary files differ

 skins/default/images/buttons/edit_contact_pas.png

Binary files differ

 skins/default/images/buttons/edit_contact_sel.png

Binary files differ

 skins/default/images/buttons/first_act.png

Binary files differ

 skins/default/images/buttons/first_pas.png

Binary files differ

 skins/default/images/buttons/first_sel.png

Binary files differ

 skins/default/images/buttons/forward_act.png

Binary files differ

 skins/default/images/buttons/forward_pas.png

Binary files differ

 skins/default/images/buttons/forward_sel.png

Binary files differ

 skins/default/images/buttons/inbox_act.png

Binary files differ

 skins/default/images/buttons/inbox_pas.png

Binary files differ

 skins/default/images/buttons/inbox_sel.png

Binary files differ

 skins/default/images/buttons/last_act.png

Binary files differ

 skins/default/images/buttons/last_pas.png

Binary files differ

 skins/default/images/buttons/last_sel.png

Binary files differ

 skins/default/images/buttons/logout.gif

Binary files differ

 skins/default/images/buttons/logout.png

Binary files differ

 skins/default/images/buttons/markread_act.png

Binary files differ

 skins/default/images/buttons/next_act.png

Binary files differ

 skins/default/images/buttons/next_pas.png

Binary files differ

 skins/default/images/buttons/next_sel.png

Binary files differ

 skins/default/images/buttons/previous_act.png

Binary files differ

 skins/default/images/buttons/previous_pas.png

Binary files differ

 skins/default/images/buttons/previous_sel.png

Binary files differ

 skins/default/images/buttons/print_act.png

Binary files differ

 skins/default/images/buttons/print_pas.png

Binary files differ

 skins/default/images/buttons/print_sel.png

Binary files differ

 skins/default/images/buttons/reply_act.png

Binary files differ

 skins/default/images/buttons/reply_pas.png

Binary files differ

 skins/default/images/buttons/reply_sel.png

Binary files differ

 skins/default/images/buttons/replyall_act.png

Binary files differ

 skins/default/images/buttons/replyall_pas.png

Binary files differ

 skins/default/images/buttons/replyall_sel.png

Binary files differ

 skins/default/images/buttons/send_act.png

Binary files differ

 skins/default/images/buttons/send_pas.png

Binary files differ

 skins/default/images/buttons/send_sel.png

Binary files differ

 skins/default/images/buttons/source_act.png

Binary files differ

 skins/default/images/buttons/source_pas.png

Binary files differ

 skins/default/images/buttons/source_sel.png

Binary files differ

 skins/default/images/buttons/spacer.gif

Binary files differ

 skins/default/images/buttons/spellcheck_act.png

Binary files differ

 skins/default/images/buttons/spellcheck_pas.png

Binary files differ

 skins/default/images/buttons/spellcheck_sel.png

Binary files differ

 skins/default/images/buttons/up_arrow.png

Binary files differ

 skins/default/images/mail_toolbar.gif

 skins/default/images/mail_toolbar.png

 skins/default/images/pagenav.gif

 skins/default/images/tab_act.gif

Binary files differ

 skins/default/images/tab_pas.gif

Binary files differ

 skins/default/images/tabs.gif

 skins/default/mail.css

@@ -12,10 +12,123 @@
/*  border: 1px solid #cccccc; */
}

#messagetoolbar a
#messagetoolbar > a
{
  display: block;
  float: left;
  padding-right: 10px;
}

#messagetoolbar a.button,
#messagetoolbar a.buttonPas {
  display: block;
  float: left;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: 10px;
  overflow: hidden;
  background: url('images/mail_toolbar.png') 0 0 no-repeat transparent;
  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}

#messagetoolbar a.buttonPas {
  opacity: 0.35;
}

#messagetoolbar a.checkmailSel {
  background-position: 0 -32px;
}

#messagetoolbar a.back {
  background-position: -32px 0;
}

#messagetoolbar a.backSel {
  background-position: -32px -32px;
}

#messagetoolbar a.compose {
  background-position: -64px 0;
}

#messagetoolbar a.composeSel {
  background-position: -64px -32px;
}

#messagetoolbar a.reply {
  background-position: -96px 0;
}

#messagetoolbar a.replySel {
  background-position: -96px -32px;
}

#messagetoolbar a.replyAll {
  background-position: -128px 0;
}

#messagetoolbar a.replyAllSel {
  background-position: -128px -32px;
}

#messagetoolbar a.forward {
  background-position: -160px 0;
}

#messagetoolbar a.forwardSel {
  background-position: -160px -32px;
}

#messagetoolbar a.delete {
  background-position: -192px 0;
}

#messagetoolbar a.deleteSel {
  background-position: -192px -32px;
}

#messagetoolbar a.markmessage {
  background-position: -256px 0;
}

#messagetoolbar a.messagemenu {
  width: 36px;
  background-position: -288px 0;
}

#messagetoolbar a.spellcheck {
  background-position: -386px 0;
}

#messagetoolbar a.spellcheckSel {
  background-position: -386px -32px;
}

#messagetoolbar a.attach {
  background-position: -354px 0;
}

#messagetoolbar a.attachSel {
  background-position: -354px -32px;
}

#messagetoolbar a.savedraft {
  background-position: -322px 0;
}

#messagetoolbar a.savedraftSel {
  background-position: -322px -32px;
}

#messagetoolbar a.send {
  background-position: -418px 0;
}

#messagetoolbar a.sendSel {
  background-position: -418px -32px;
}


#messagetoolbar select,
#compose-container select
@@ -30,7 +143,7 @@
{
  position: relative;
  margin: 0 8px;
  top: -12px;
  top: 6px;
}

#messagetoolbar select.mboxlist option
@@ -548,6 +661,14 @@
  font-size: 11px;
}

#countcontrols a.button,
#countcontrols a.buttonPas,
#messagecountbar a.button,
#messagecountbar a.buttonPas
{
  float: right;
}


/** message list styles */

@@ -762,6 +883,7 @@
  border: 1px solid #999;
  background-color: #FFF;
  overflow: auto;
  z-index: 1;
}

#printmessageframe

 skins/default/settings.css

@@ -19,12 +19,14 @@
  width: 100px;
  height: 24px !important;
  height: 22px;
  background: url('images/tab_pas.gif') top left no-repeat;
  overflow: hidden;
  text-overflow: ellipsis;
  background: url('images/tabs.gif') top left no-repeat;
}

span.tablink-selected
{
  background: url('images/tab_act.gif') top left no-repeat;
  background-position: -102px 0;
}

span.tablink a,

 skins/default/templates/addressbook.html

@@ -30,11 +30,13 @@
<roundcube:include file="/includes/header.html" />

<div id="abooktoolbar">
<roundcube:button command="add" imageSel="/images/buttons/add_contact_sel.png" imageAct="/images/buttons/add_contact_act.png" imagePas="/images/buttons/add_contact_pas.png" width="32" height="32" title="newcontact" />
<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletecontact" />
<roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="composeto" />
<roundcube:button command="import" imageSel="/images/buttons/adr_import_sel.png" imageAct="/images/buttons/adr_import_act.png" imagePas="/images/buttons/adr_import_pas.png" width="32" height="32" title="importcontacts" />
<roundcube:button command="export" imageSel="/images/buttons/download_sel.png" imageAct="/images/buttons/download_act.png" imagePas="/images/buttons/download_pas.png" width="32" height="32" title="exportvcards" />
<roundcube:button command="add" type="link" class="button addcontact" classAct="button addcontact" classSel="button addcontactSel" title="newcontact" content=" " />
<roundcube:button command="compose" type="link" class="buttonPas compose" classAct="button compose" classSel="button composeSel" title="composeto" content=" " />
<roundcube:button command="delete" type="link" class="buttonPas delete" classAct="button delete" classSel="button deleteSel" title="deletecontact" content=" " />
<span class="separator">&nbsp;</span>
<roundcube:button command="import" type="link" class="buttonPas import" classAct="button import" classSel="button importSel" title="importcontacts" content=" " />
<roundcube:button command="export" type="link" class="buttonPas export" classAct="button export" classSel="button exportSel" title="exportvcards" content=" " />
<roundcube:container name="toolbar" id="abooktoolbar" />
</div>

<div id="quicksearchbar">
@@ -67,12 +69,12 @@

</div>

<div id="abookcountbar">
<roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstpage" />
<roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previouspage" />
&nbsp;<roundcube:object name="recordsCountDisplay" />&nbsp;
<roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextpage" />
<roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastpage" />
<div id="abookcountbar" class="pagenav">
  <roundcube:button command="firstpage" type="link" class="buttonPas firstpage" classAct="button firstpage" classSel="button firstpageSel" title="firstpage" content=" " />
  <roundcube:button command="previouspage" type="link" class="buttonPas prevpage" classAct="button prevpage" classSel="button prevpageSel" title="previouspage" content=" " />
  <roundcube:object name="recordsCountDisplay" style="padding:0 1em; float:left" />
  <roundcube:button command="nextpage" type="link" class="buttonPas nextpage" classAct="button nextpage" classSel="button nextpageSel" title="nextpage" content=" " />
  <roundcube:button command="lastpage" type="link" class="buttonPas lastpage" classAct="button lastpage" classSel="button lastpageSel" title="lastpage" content=" " />
</div>

</body>

 skins/default/templates/compose.html

@@ -16,17 +16,17 @@
<div id="messagetoolbar">
<table border="0" cellspacing="0" cellpadding="0"><tr>
    <td id="compose-toolbar">
    <roundcube:button command="list" image="/images/buttons/back_act.png" imageSel="/images/buttons/back_sel.png" imageAct="/images/buttons/back_act.png" width="32" height="32" title="backtolist" />
    <roundcube:button command="send" imageSel="/images/buttons/send_sel.png" imageAct="/images/buttons/send_act.png" imagePas="/images/buttons/send_pas.png" width="32" height="32" title="sendmessage" />
    <roundcube:button command="spellcheck" imageSel="/images/buttons/spellcheck_sel.png" imageAct="/images/buttons/spellcheck_act.png" imagePas="/images/buttons/spellcheck_pas.png" width="32" height="32" title="checkspelling" />
    <roundcube:button command="add-attachment" imageSel="/images/buttons/attach_sel.png" imageAct="/images/buttons/attach_act.png" imagePas="/images/buttons/attach_pas.png" width="32" height="32" title="addattachment" />
    <roundcube:button command="savedraft" imageSel="/images/buttons/drafts_sel.png" imageAct="/images/buttons/drafts_act.png" imagePas="/images/buttons/drafts_pas.png" width="32" height="32" title="savemessage" />
      <roundcube:button command="list" type="link" class="button back" classAct="button back" classSel="button backSel" title="backtolist" content=" " />
      <roundcube:button command="send" type="link" class="buttonPas send" classAct="button send" classSel="button sendSel" title="sendmessage" content=" " />
      <roundcube:button command="spellcheck" type="link" class="buttonPas spellcheck" classAct="button spellcheck" classSel="button spellcheckSel" title="checkspelling" content=" " />
      <roundcube:button command="add-attachment" type="link" class="buttonPas attach" classAct="button attach" classSel="button attachSel" title="addattachment" content=" " />
      <roundcube:button command="savedraft" type="link" class="buttonPas savedraft" classAct="button savedraft" classSel="button savedraftSel" title="savemessage" content=" " />
    </td>
    <td id="priority-selector">
    <label for="rcmcomposepriority"><roundcube:label name="priority" />:</label>&nbsp;<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" />
      <label for="rcmcomposepriority"><roundcube:label name="priority" />:</label>&nbsp;<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" />
    </td>
    <td id="receipt-selector">
    <roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" />&nbsp;<label for="rcmcomposereceipt"><roundcube:label name="returnreceipt" /></label>
      <roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" />&nbsp;<label for="rcmcomposereceipt"><roundcube:label name="returnreceipt" /></label>
    </td>
</tr></table>
</div>

 skins/default/templates/importcontacts.html

@@ -12,7 +12,7 @@
<div id="importbox">
<div class="boxtitle"><roundcube:label name="importcontacts" /></div>

<div style="padding-left:20px; width:48em">
<div style="padding-left:12px; width:48em">
<roundcube:object name="importstep" />

<p><br />

 skins/default/templates/mail.html

@@ -76,8 +76,8 @@
</div>

<div id="mailfooter">
<table cellpadding="1" cellspacing="0"><tr>
  <td width="90%">
<table cellpadding="1" cellspacing="0" width="100%"><tr>
  <td>
    <span id="listcontrols">
      <roundcube:label name="select" />:&nbsp;
      <roundcube:button command="select-all" label="all" classAct="active" />&nbsp;
@@ -86,18 +86,18 @@
      <roundcube:button command="select-none" label="none" classAct="active" /> &nbsp;
      <roundcube:container name="listcontrols" id="listcontrols" />
    </span>
  <roundcube:if condition="env:quota" />
    <span id="quotabox"><roundcube:label name="quota" />: <roundcube:object name="quotaDisplay" display="image" width="100" id="quotadisplay" /></span>
  <roundcube:endif />
  </td>
  <td width="10%">
    <span id="countcontrols">
      <roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
      <roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
      &nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
      <roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
      <roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
    </span>
  <roundcube:if condition="env:quota" />
  <td style="text-align:center">
    <span id="quotabox"><roundcube:label name="quota" />: <roundcube:object name="quotaDisplay" display="image" width="100" id="quotadisplay" /></span>
  </td>
  <roundcube:endif />
  <td id="countcontrols" class="pagenav">
    <roundcube:button command="lastpage" type="link" class="buttonPas lastpage" classAct="button lastpage" classSel="button lastpageSel" title="lastmessages" content=" " />
    <roundcube:button command="nextpage" type="link" class="buttonPas nextpage" classAct="button nextpage" classSel="button nextpageSel" title="nextmessages" content=" " />
    <roundcube:object name="messageCountDisplay" style="padding:0 1em; float:right" />
    <roundcube:button command="previouspage" type="link" class="buttonPas prevpage" classAct="button prevpage" classSel="button prevpageSel" title="previousmessages" content=" " />
    <roundcube:button command="firstpage" type="link" class="buttonPas firstpage" classAct="button firstpage" classSel="button firstpageSel" title="firstmessages" content=" " />
  </td>
</tr></table>
</div>
@@ -107,15 +107,15 @@


<div id="messagetoolbar">
<roundcube:button command="checkmail" imageSel="/images/buttons/inbox_sel.png" imageAct="/images/buttons/inbox_act.png" imagePas="/images/buttons/inbox_pas.png" width="32" height="32" title="checkmail" />
<roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />
<roundcube:button command="reply" imageSel="/images/buttons/reply_sel.png" imageAct="/images/buttons/reply_act.png" imagePas="/images/buttons/reply_pas.png" width="32" height="32" title="replytomessage" />
<roundcube:button command="reply-all" imageSel="/images/buttons/replyall_sel.png" imageAct="/images/buttons/replyall_act.png" imagePas="/images/buttons/replyall_pas.png" width="32" height="32" title="replytoallmessage" />
<roundcube:button command="forward" imageSel="/images/buttons/forward_sel.png" imageAct="/images/buttons/forward_act.png" imagePas="/images/buttons/forward_pas.png" width="32" height="32" title="forwardmessage" />
<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletemessage" />
<roundcube:button command="checkmail" type="link" class="button checkmail" classAct="button checkmail" classSel="button checkmailSel" title="checkmail" content=" " />
<roundcube:button command="compose" type="link" class="button compose" classAct="button compose" classSel="button composeSel" title="writenewmessage" content=" " />
<roundcube:button command="reply" type="link" class="buttonPas reply" classAct="button reply" classSel="button replySel" title="replytomessage" content=" " />
<roundcube:button command="reply-all" type="link" class="buttonPas replyAll" classAct="button replyAll" classSel="button replyAllSel" title="replytoallmessage" content=" " />
<roundcube:button command="forward" type="link" class="buttonPas forward" classAct="button forward" classSel="button forwardSel" title="forwardmessage" content=" " />
<roundcube:button command="delete" type="link" class="buttonPas delete" classAct="button delete" classSel="button deleteSel" title="deletemessage" content=" " />
<roundcube:container name="toolbar" id="messagetoolbar" />
<roundcube:button name="markreadbutton" id="markreadbutton" image="/images/buttons/markread_act.png" width="32" height="32" title="markmessages" onclick="rcmail_ui.show_markmenu();return false" />
<roundcube:button name="messagemenulink" id="messagemenulink" image="/images/buttons/actions_act.png" width="34" height="32" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" />
<roundcube:button name="markreadbutton" id="markreadbutton" type="link" class="button markmessage" title="markmessages" onclick="rcmail_ui.show_markmenu();return false" content=" " />
<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button messagemenu" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" content=" " />

<div id="markmessagemenu">
  <ul class="toolbarmenu">

 skins/default/templates/message.html

@@ -18,14 +18,14 @@
<roundcube:include file="/includes/header.html" />

<div id="messagetoolbar">
<roundcube:button command="list" image="/images/buttons/back_act.png" imageSel="/images/buttons/back_sel.png" imageAct="/images/buttons/back_act.png" width="32" height="32" title="backtolist" />
<roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />
<roundcube:button command="reply" imageSel="/images/buttons/reply_sel.png" imageAct="/images/buttons/reply_act.png" imagePas="/images/buttons/reply_pas.png" width="32" height="32" title="replytomessage" />
<roundcube:button command="reply-all" imageSel="/images/buttons/replyall_sel.png" imageAct="/images/buttons/replyall_act.png" imagePas="/images/buttons/replyall_pas.png" width="32" height="32" title="replytoallmessage" />
<roundcube:button command="forward" imageSel="/images/buttons/forward_sel.png" imageAct="/images/buttons/forward_act.png" imagePas="/images/buttons/forward_pas.png" width="32" height="32" title="forwardmessage" />
<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletemessage" />
<roundcube:button command="list" type="link" class="button back" classAct="button back" classSel="button backSel" title="backtolist" content=" " />
<roundcube:button command="compose" type="link" class="button compose" classAct="button compose" classSel="button composeSel" title="writenewmessage" content=" " />
<roundcube:button command="reply" type="link" class="buttonPas reply" classAct="button reply" classSel="button replySel" title="replytomessage" content=" " />
<roundcube:button command="reply-all" type="link" class="buttonPas replyAll" classAct="button replyAll" classSel="button replyAllSel" title="replytoallmessage" content=" " />
<roundcube:button command="forward" type="link" class="buttonPas forward" classAct="button forward" classSel="button forwardSel" title="forwardmessage" content=" " />
<roundcube:button command="delete" type="link" class="buttonPas delete" classAct="button delete" classSel="button deleteSel" title="deletemessage" content=" " />
<roundcube:container name="toolbar" id="messagetoolbar" />
<roundcube:button name="messagemenulink" image="/images/buttons/actions_act.png" width="34" height="32" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" id="messagemenulink" />
<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button messagemenu" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" content=" " />
<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mboxlist" />

<roundcube:include file="/includes/messagemenu.html" />
@@ -49,12 +49,12 @@
</div>
</div>

<div id="messagecountbar">
  <roundcube:button command="firstmessage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessage" />
  <roundcube:button command="previousmessage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessage" />
  &nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
  <roundcube:button command="nextmessage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessage" />
  <roundcube:button command="lastmessage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessage" />
<div id="messagecountbar" class="pagenav">
  <roundcube:button command="lastmessage" type="link" class="buttonPas lastpage" classAct="button lastpage" classSel="button lastpageSel" title="lastmessage" content=" " />
  <roundcube:button command="nextmessage" type="link" class="buttonPas nextpage" classAct="button nextpage" classSel="button nextpageSel" title="nextmessage" content=" " />
  <roundcube:object name="messageCountDisplay" style="padding:0 1em 0 1em; float:right" />
  <roundcube:button command="previousmessage" type="link" class="buttonPas prevpage" classAct="button prevpage" classSel="button prevpageSel" title="previousmessage" content=" " />
  <roundcube:button command="firstmessage" type="link" class="buttonPas firstpage" classAct="button firstpage" classSel="button firstpageSel" title="firstmessage" content=" " />
</div>
</div>