- UI unification

- Added button to hide/unhide the preview pane (#1484215)
14 years ago · ce06d32dd8
parent 37e467d55c
commit ce06d32dd8
25 changed files with 294 additions and 219 deletions
--- a/1
+++ b/1
@ -1,6 +1,7 @@
 CHANGELOG RoundCube Webmail
 ===========================

+- Add button to hide/unhide the preview pane (#1484215)
 - Fix no-cache headers on https to prevent content caching by proxies (#1486798)
 - Fix attachment filenames broken with TNEF decoder using long filenames (#1486795)
 - Use user's timezone in Date header, not server's timezone (#1486119)
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@ -142,6 +142,7 @@ $labels['markunread']       = 'As unread';
 $labels['markflagged']      = 'As flagged';
 $labels['markunflagged']    = 'As unflagged';
 $labels['messageactions']   = 'More actions...';
+$labels['preview']          = 'Preview';

 $labels['select'] = 'Select';
 $labels['all'] = 'All';
@ -246,6 +247,7 @@ $labels['email']     = 'E-Mail';

 $labels['addcontact'] = 'Add new contact';
 $labels['editcontact'] = 'Edit contact';
+$labels['contacts'] = 'Contacts';

 $labels['edit']   = 'Edit';
 $labels['cancel'] = 'Cancel';
--- a/program/localization/pl_PL/labels.inc
+++ b/program/localization/pl_PL/labels.inc
@ -345,5 +345,7 @@ $labels['japanese'] = 'japoński';
 $labels['korean'] = 'koreański';
 $labels['chinese'] = 'chiński';
 $labels['folderactions'] = 'Działania na folderach...';
+$labels['contacts'] = 'Kontakty';
+$labels['preview'] = 'Podgląd';

 ?>
--- a/program/steps/mail/func.inc
+++ b/program/steps/mail/func.inc
@ -407,14 +407,15 @@ function rcmail_message_list_head($attrib, $a_show_cols)
 */
 function rcmail_messagecontent_frame($attrib)
  {
-  global $OUTPUT;
+  global $OUTPUT, $RCMAIL;

  if (empty($attrib['id']))
    $attrib['id'] = 'rcmailcontentwindow';

  $attrib['name'] = $attrib['id'];

-  $OUTPUT->set_env('contentframe', $attrib['id']);
+  if ($RCMAIL->config->get('preview_pane'))
+    $OUTPUT->set_env('contentframe', $attrib['id']);
  $OUTPUT->set_env('blankpage', $attrib['src'] ? $OUTPUT->abs_url($attrib['src']) : 'program/blank.gif');

  return html::iframe($attrib);
--- a/skins/default/addressbook.css
+++ b/skins/default/addressbook.css
@ -74,18 +74,9 @@

 #abookcountbar
 {
-  position: absolute;
-  bottom: 6px;
-  left: 225px;
-  width: 240px;
-  height: 20px;
-  text-align: left;
-}
-
-#abookcountbar span
-{
-  font-size: 11px;
-  color: #333333;
+  margin-top: 4px;
+  margin-left: 4px;
+  min-width: 200px;
 }

 #addressscreen
@ -122,7 +113,7 @@
  bottom: 0px;
  border: 1px solid #999999;
  background-color: #F9F9F9;
-  overflow: auto;
+  overflow: hidden;
 }

 #contactgroupslist
--- a/skins/default/common.css
+++ b/skins/default/common.css
@ -243,73 +243,6 @@ img
  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;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  position: absolute;
-  background: url(images/dimple.png) center no-repeat;
-}
-
-.splitter-h
-{
-  cursor: n-resize;
-  background-position: center 2px;
-}
-
-.splitter-v
-{
-  cursor: e-resize;
-  background-position: 2px center;
-}
-
 .boxtitle
 {
  height: 12px !important;
@ -350,6 +283,7 @@ img
  bottom: 0px;
  left: 0px;
  right: 0px;
+  overflow: hidden;
  height: 22px;
  border-top: 1px solid #999;
  background: url('images/listheader.gif') top left repeat-x #CCC;
@ -379,6 +313,80 @@ img
  opacity: 0.35;
 }

+.pagenav span
+{
+  color: #666;
+  font-size: 11px;
+  text-shadow: white 1px 1px;
+}
+
+.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;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  position: absolute;
+  background: url(images/dimple.png) center no-repeat;
+}
+
+.splitter-h
+{
+  cursor: n-resize;
+  background-position: center 2px;
+}
+
+.splitter-v
+{
+  cursor: e-resize;
+  background-position: 2px center;
+}
+
 .popupmenu
 {
  position: absolute;
@ -436,7 +444,6 @@ img
 }


-
 /***** common table settings ******/

 table.records-table thead tr td
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@ -325,6 +325,38 @@ body_keypress: function(evt, p)
        this[k].hide();
    }
  }
+},
+
+switch_preview_pane: function(elem)
+{
+  var uid, prev_frm = $('#mailpreviewframe');
+
+  if (elem.checked) {
+    rcmail.env.contentframe = 'messagecontframe';
+    if (mailviewsplit.layer) {
+      mailviewsplit.resize();
+      mailviewsplit.layer.elm.style.display = '';
+    } else
+      mailviewsplit.init();
+    prev_frm.show();
+    if (uid = rcmail.message_list.get_single_selection())
+      rcmail.show_message(uid, false, true);
+    rcmail.http_post('save-pref', '_name=preview_pane&_value=1');
+  } else {
+    prev_frm.hide();
+    if (bw.ie6 || bw.ie7) {
+      var fr = document.getElementById('mailcontframe');
+      fr.style.bottom = 0;
+      fr.style.height = parseInt(fr.parentNode.offsetHeight)+'px';  
+    }
+    else
+      $('#mailcontframe').css({height: 'auto', bottom: 0});
+    if (mailviewsplit.layer)
+      mailviewsplit.layer.elm.style.display = 'none';
+    rcmail.env.contentframe = null;
+    rcmail.show_contentframe(false);
+    rcmail.http_post('save-pref', '_name=preview_pane&_value=0');
+  }
 }

 };
--- a/skins/default/ie6hacks.css
+++ b/skins/default/ie6hacks.css
@ -10,7 +10,7 @@ img
  behavior: url(skins/default/pngbehavior.htc);
 }

-#header img
+#logo
 {
  width: 178px;
  height: 47px;
@ -49,6 +49,11 @@ img
  padding-right: 10px;
 }

+#listcontrols a.button,
+#listcontrols a.buttonPas {
+  background-image: url(images/mail_footer.gif);
+}
+
 #messagetoolbar a.button,
 #messagetoolbar a.buttonPas {
  background-image: url(images/mail_toolbar.gif);
@ -76,6 +81,7 @@ ul.toolbarmenu li.separator_below
 .boxfooter
 {
  width: 100%;
+  bottom: -1px;
 }

 .boxtitle,
@ -86,6 +92,6 @@ ul.toolbarmenu li.separator_below

 .boxlistcontent
 {
-  height: expression((parseInt(this.parentNode.offsetHeight)-42)+'px');
-  width: 100%;
+  top: 21px;
+  height: expression((parseInt(this.parentNode.offsetHeight)-24-parseInt(this.style.top?this.style.top:21))+'px');
 }
--- a/skins/default/iehacks.css
+++ b/skins/default/iehacks.css
@ -61,8 +61,7 @@ input, textarea
  background-image: url(images/mail_toolbar.gif);
 }

-#listcontrols a.buttonPas,
-#mailboxcontrols a.buttonPas
+#listcontrols a.buttonPas
 {
  filter: alpha(opacity=35);
 }
@ -75,12 +74,12 @@ input, textarea
 #mainscreen
 {
  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-101)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-96)+'px');
 }

 #directorylistbox
 {
-  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-115)+'px');
 }

 #addresslist,
@ -102,7 +101,7 @@ input, textarea
 #messagepartcontainer
 {
  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-100)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-90)+'px');
 }

 #mailrightcontent
@ -148,11 +147,7 @@ input, textarea
 {
  width: expression((parseInt(this.parentNode.offsetWidth)-180)+'px');
  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
-}
-
-#messagecanvas 
-{
-  width: expression((parseInt(this.parentNode.offsetWidth)-20)+'px');
+  overflow: hidden;
 }

 #countcontrols
@ -189,7 +184,7 @@ div.message-part div.pre
 #addressscreen
 {
  width: expression((parseInt(document.documentElement.clientWidth)-245)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-115)+'px');
 }

 #prefsscreen
@ -201,7 +196,7 @@ div.message-part div.pre
 #importbox
 {
  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-145)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-140)+'px');
 }

 #contacts-table
@ -266,3 +261,8 @@ table.records-table thead tr td
  margin: 0 4px;
  padding: 0.8em;
 }
+
+#listcontrols input
+{
+  margin-top: 2px;
+}
--- a/skins/default/images/mail_footer.gif
+++ b/skins/default/images/mail_footer.gif
--- a/skins/default/images/mail_footer.png
+++ b/skins/default/images/mail_footer.png
--- a/skins/default/includes/header.html
+++ b/skins/default/includes/header.html
@ -1,3 +1,3 @@
-<div id="header"><a href="./"><img src="/images/roundcube_logo.png" alt="logo" title="<roundcube:object name='productname' />" /></a></div>
+<div id="header"><a href="./"><img id="logo" src="/images/roundcube_logo.png" alt="logo" title="<roundcube:object name='productname' />" /></a></div>

 <roundcube:object name="message" id="message" />
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@ -265,36 +265,36 @@ td.formlinks a:visited
  position: absolute;
  top: 85px;
  right: 20px;
-  bottom: 16px;
+  bottom: 30px;
  left: 20px;
 }

 #mailleftcontainer
 {
  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
+  top: 0;
+  left: 0;
+  bottom: 0;
  width: 195px;
 }

 #mailrightcontainer
 {
  position: absolute;
-  top: 0px;
+  top: 0;
  left: 170px;
-  bottom: 0px;
-  right: 0px;
+  bottom: 0;
+  right: 0;
  min-width: 600px;
 }

 #mailrightcontent
 {
  position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 20px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }

 #messagepartcontainer
@ -310,13 +310,11 @@ td.formlinks a:visited
 {
  position: absolute;
  width: 100%;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
  border: 1px solid #999999;
  background-color: #F9F9F9;
-  overflow: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }

 #mailpreviewframe
@ -372,16 +370,31 @@ td.formlinks a:visited
  font-weight: bold;
 }

+#quota
+{
+  position: absolute;
+  bottom: 12px;
+  left: 20px;
+}
+
+#quota span
+{
+  display: block;
+  float: left;
+  font-size: 11px;
+  color: #666;
+}
+

 /** mailbox list styles */

 #mailboxlist-container
 {
  position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
  width: 100%;
-  bottom: 20px;
+  bottom: 0;
  border: 1px solid #999;
  background-color: #F9F9F9;
  overflow: hidden;
@ -512,32 +525,32 @@ td.formlinks a:visited
  font-weight: normal;
 }

-#listcontrols,
-#mailboxcontrols
+#listcontrols
 {
-  position: absolute;
+  position: relative;
  white-space: nowrap;
-  left: 0px;
-  bottom: 0px;
-  height: 15px;
+  left: 4px;
+  height: 22px;
  width: auto;
  min-width: 300px;
 }

 #listcontrols a,
-#listcontrols span,
-#mailboxcontrols a,
-#mailboxcontrols span
+#listcontrols span
 {
  display: block;
  float: left;
+  margin-top: 4px;
  font-size: 11px;
 }

+#listcontrols input
+{
+  margin-top: 6px;
+}
+
 #listcontrols a.button,
-#listcontrols a.buttonPas,
-#mailboxcontrols a.button,
-#mailboxcontrols a.buttonPas
+#listcontrols a.buttonPas
 {
  display: block;
  float: left;
@ -550,28 +563,11 @@ td.formlinks a:visited
  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 }

-#listcontrols a.buttonPas,
-#mailboxcontrols a.buttonPas
+#listcontrols a.buttonPas
 {
  opacity: 0.35;
 }

-#mailboxcontrols a.expunge {
-  background-position: 0 0;
-}
-
-#mailboxcontrols a.expungesel {
-  background-position: 0 -15px;
-}
-
-#mailboxcontrols a.purge {
-  background-position: -15px 0;
-}
-
-#mailboxcontrols a.purgesel {
-  background-position: -15px -15px;
-}
-
 #listcontrols a.all {
  background-position: -30px 0;
 }
@ -638,10 +634,9 @@ td.formlinks a:visited

 #countcontrols
 {
-  height: 15px;
  position: absolute;
-  bottom: 0;
-  right: 0;
+  top: 4px;
+  right: 4px;
  min-width: 25em;
  white-space: nowrap;
  font-size: 11px;
@ -926,10 +921,10 @@ td span.branch div.l3
 #messageframe
 {
  position: absolute;
-  top: 0px;
+  top: 0;
  left: 180px;
-  right: 0px;
-  bottom: 20px;
+  right: 0;
+  bottom: 0;
  border: 1px solid #999;
  background-color: #FFF;
  overflow: auto;
@ -1155,13 +1150,6 @@ div.message-htmlpart div.rcmBody
  white-space: nowrap;
 }

-#priority-selector,
-#receipt-selector
-{
-  padding-left: 30px;
-  white-space: nowrap;
-}
-
 #compose-container
 {
  position: absolute;
@ -1178,11 +1166,6 @@ div.message-htmlpart div.rcmBody
  padding-top: 3px;
 }

-#editor-select
-{
-  float: left;
-}
-
 #compose-div
 {
  position: absolute;
@ -1207,7 +1190,7 @@ div.message-htmlpart div.rcmBody
 #compose-subject td.title
 {
  width: 80px !important;
-  color: #666666;
+  color: #666;
  font-size: 11px;
  font-weight: bold;
  padding-right: 10px;
@ -1302,6 +1285,26 @@ div.message-htmlpart div.rcmBody
  margin-top: 4px;
 }

+#editor-select
+{
+  float: left;
+  white-space: nowrap;
+  width: auto;
+}
+
+#editor-select label
+{
+  color: #666;
+  font-size: 11px;
+  font-weight: bold;
+  padding-left: 20px;
+}
+
+#editor-select input
+{
+  width: auto !important;
+}
+
 td.show-headers
 {
  background: url(images/icons/down_small.gif) no-repeat center;
--- a/skins/default/settings.css
+++ b/skins/default/settings.css
@ -197,7 +197,7 @@ input.disabled
  width: 600px;
  height: 120px;
  left: 20px;
-  bottom: 20px;
+  bottom: 25px;
 }

 div.settingsbox
--- a/skins/default/templates/addressbook.html
+++ b/skins/default/templates/addressbook.html
@ -56,7 +56,19 @@
 <div id="addressscreen">

 <div id="addresslist">
-<roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" />
+<div class="boxtitle"><roundcube:label name="contacts" /></div>
+<div class="boxlistcontent">
+<roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" noheader="true" />
+</div>
+<div class="boxfooter">
+<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 .5em; 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>
+</div>
 </div>

 <script type="text/javascript">
@ -70,13 +82,7 @@

 </div>

-<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 .5em; 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>
+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>

 </body>
 </html>
--- a/skins/default/templates/compose.html
+++ b/skins/default/templates/compose.html
@ -24,12 +24,6 @@
      <roundcube:button command="savedraft" type="link" class="buttonPas savedraft" classAct="button savedraft" classSel="button savedraftSel" title="savemessage" content=" " />
      <roundcube:container name="toolbar" id="compose-toolbar" />
    </td>
-    <td id="priority-selector">
-      <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>
-    </td>
 </tr></table>
 </div>

@ -70,7 +64,13 @@
 	    </tr><tr>
 		<td class="title"><roundcube:label name="editortype" /></td>
 		<td>
-		    <div id="editor-select"><roundcube:object name="editorSelector" editorid="compose-body" tabindex="7" /></div>
+		    <div id="editor-select">
+                <roundcube:object name="editorSelector" editorid="compose-body" tabindex="7" />
+                <label for="rcmcomposepriority"><roundcube:label name="priority" /></label>
+                <roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" />
+                <label for="rcmcomposereceipt"><roundcube:label name="returnreceipt" /></label>
+                <roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" />
+            </div>
 		    <div id="spellcheck-control"></div>
 		</td>
 	    </tr>
--- a/skins/default/templates/editidentity.html
+++ b/skins/default/templates/editidentity.html
@ -51,5 +51,7 @@

 </div>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/error.html
+++ b/skins/default/templates/error.html
@ -12,5 +12,7 @@
 $__page_content
 </div>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/identities.html
+++ b/skins/default/templates/identities.html
@ -44,5 +44,7 @@

 </div>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/importcontacts.html
+++ b/skins/default/templates/importcontacts.html
@ -22,5 +22,7 @@
 </div>
 </div>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/login.html
+++ b/skins/default/templates/login.html
@ -7,7 +7,7 @@
 </head>
 <body>

-<img src="/images/roundcube_logo.png" border="0" alt="<roundcube:object name='productname' />" style="margin:0 11px" />
+<img id="logo" src="/images/roundcube_logo.png" border="0" alt="<roundcube:object name='productname' />" style="margin:0 11px" />

 <roundcube:object name="message" id="message" />

--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@ -46,6 +46,7 @@
 <div id="mailrightcontainer">
 <div id="mailrightcontent">
 <div id="mailcontframe">
+<div id="messagelistcontainer" class="boxlistcontent" style="top:0">
 <roundcube:object name="messages"
  id="messagelist"
  cellspacing="0"
@ -63,48 +64,46 @@
  unreadchildrenIcon="" 
  optionsmenuIcon="/images/icons/columnpicker.gif" />
 </div>
-
-<roundcube:if condition="config:preview_pane == true" />
+<div class="boxfooter">
+    <div id="listcontrols" class="pagenav">
+        <span><roundcube:label name="select" />:&nbsp;</span>
+        <roundcube:button command="select-all" type="link" title="all" class="buttonPas all" classAct="button all" classSel="button allsel" content=" " />
+        <roundcube:button command="select-all" type="link" prop="page" title="currpage" class="buttonPas page" classAct="button page" classSel="button pagesel" content=" " />
+        <roundcube:button command="select-all" type="link" prop="unread" title="unread" class="buttonPas unread" classAct="button unread" classSel="button unreadsel" content=" " />
+        <roundcube:button command="select-all" type="link" prop="invert" title="invert" class="buttonPas invert" classAct="button invert" classSel="button invertsel" content=" " />
+        <roundcube:button command="select-none" type="link" title="none" class="buttonPas none" classAct="button none" classSel="button nonesel" content=" " />
+        <roundcube:container name="listcontrols" id="listcontrols" />
+    <roundcube:if condition="env:threads" />
+        <span style="margin-left: 10px"><roundcube:label name="threads" />:&nbsp;</span>
+        <roundcube:button command="expand-all" type="link" title="expand-all" class="buttonPas expand-all" classAct="button expand-all" classSel="button expand-allsel" content=" "  />
+        <roundcube:button command="expand-unread" type="link" title="expand-unread" class="buttonPas expand-unread" classAct="button expand-unread" classSel="button expand-unreadsel" content=" " />
+        <roundcube:button command="collapse-all" type="link" title="collapse-all" class="buttonPas collapse-all" classAct="button collapse-all" classSel="button collapse-allsel" content=" " />
+    <roundcube:endif />
+        <span style="margin-left: 10px"><roundcube:label name="preview" />:&nbsp;</span>
+        <input type="checkbox" onclick="rcmail_ui.switch_preview_pane(this)"<roundcube:if condition="config:preview_pane == true" /> checked="checked"<roundcube:endif /> />
+    </div>
+    <div 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 .5em; 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=" " />
+    </div>
+</div>
+</div>

 <script type="text/javascript">
  var mailviewsplit = new rcube_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: 205});
+<roundcube:if condition="config:preview_pane == true" />
  rcmail.add_onload('mailviewsplit.init()');
+<roundcube:endif />
 </script>

-<div id="mailpreviewframe">
+<div id="mailpreviewframe"<roundcube:if condition="config:preview_pane != true" /> style="display:none"<roundcube:endif />>
 <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" />
 </div>
-
-<roundcube:endif />
-</div>
-
-<div id="listcontrols">
-      <span><roundcube:label name="select" />:&nbsp;</span>
-      <roundcube:button command="select-all" type="link" title="all" class="buttonPas all" classAct="button all" classSel="button allsel" content=" " />
-      <roundcube:button command="select-all" type="link" prop="page" title="currpage" class="buttonPas page" classAct="button page" classSel="button pagesel" content=" " />
-      <roundcube:button command="select-all" type="link" prop="unread" title="unread" class="buttonPas unread" classAct="button unread" classSel="button unreadsel" content=" " />
-      <roundcube:button command="select-all" type="link" prop="invert" title="invert" class="buttonPas invert" classAct="button invert" classSel="button invertsel" content=" " />
-      <roundcube:button command="select-none" type="link" title="none" class="buttonPas none" classAct="button none" classSel="button nonesel" content=" " />
-      <roundcube:container name="listcontrols" id="listcontrols" />
-<roundcube:if condition="env:threads" />
-      <span style="margin-left: 20px"><roundcube:label name="threads" />:&nbsp;</span>
-      <roundcube:button command="expand-all" type="link" title="expand-all" class="buttonPas expand-all" classAct="button expand-all" classSel="button expand-allsel" content=" "  />
-      <roundcube:button command="expand-unread" type="link" title="expand-unread" class="buttonPas expand-unread" classAct="button expand-unread" classSel="button expand-unreadsel" content=" " />
-      <roundcube:button command="collapse-all" type="link" title="collapse-all" class="buttonPas collapse-all" classAct="button collapse-all" classSel="button collapse-allsel" content=" " />
-<roundcube:endif />
-  <roundcube:if condition="env:quota" />
-  <span style="margin-left: 20px; margin-right: 5px"><roundcube:label name="quota" />:</span>
-  <roundcube:object name="quotaDisplay" display="image" width="100" height="14" id="quotadisplay" />
-  <roundcube:endif />
 </div>

-<div 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 .5em; 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=" " />
-</div>

 </div>
 </div>
@ -216,5 +215,14 @@
 </div>
 </div>

+<roundcube:if condition="env:quota" />
+<div id="quota">
+  <span style="margin-right: 5px"><roundcube:label name="quota" />:</span>
+  <roundcube:object name="quotaDisplay" display="image" width="100" height="14" id="quotadisplay" />
+</div>
+<roundcube:endif />
+
+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/managefolders.html
+++ b/skins/default/templates/managefolders.html
@ -36,5 +36,7 @@

 </form>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/message.html
+++ b/skins/default/templates/message.html
@ -45,15 +45,14 @@
 </div>

 <div id="messageframe">
-<div id="messagecanvas">
+<div class="boxlistcontent" style="top:0">
 <roundcube:object name="messageHeaders" class="headers-table" cellspacing="0" cellpadding="2" addicon="/images/icons/silhouette.png" summary="Message headers" />
 <roundcube:object name="messageAttachments" id="attachment-list" />

 <roundcube:object name="blockedObjects" id="remote-objects-message" />
 <roundcube:object name="messageBody" id="messagebody" />
 </div>
-</div>
-
+<div class="boxfooter">
 <div id="countcontrols" 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=" " />
@ -61,6 +60,9 @@
  <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>
+</div>
+
 </div>

 <script type="text/javascript">
@ -77,5 +79,7 @@
  </ul>
 </div>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
--- a/skins/default/templates/messageerror.html
+++ b/skins/default/templates/messageerror.html
@ -72,6 +72,8 @@
  </ul>
 </div>

+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 <roundcube:endif />