- UI unification

- Added button to hide/unhide the preview pane (#1484215)

21 files changed, 286 insertions, 217 deletions

diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css
index 73375ced0..dc9e865b7 100644
--- 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
diff --git a/skins/default/common.css b/skins/default/common.css
index 66ea82dd0..583f8a157 100644
--- 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
diff --git a/skins/default/functions.js b/skins/default/functions.js
index 3a37b6d8d..4ef069b88 100644
--- 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');
+  }
 }
 
 };
diff --git a/skins/default/ie6hacks.css b/skins/default/ie6hacks.css
index 5b42f1cfb..9fa3eb804 100644
--- 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');
 }
diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css
index cf27c3be8..d070ea328 100644
--- 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;
+}
diff --git a/skins/default/images/mail_footer.gif b/skins/default/images/mail_footer.gif
new file mode 100644
index 000000000..302b55870
--- /dev/null
+++ b/skins/default/images/mail_footer.gif
diff --git a/skins/default/images/mail_footer.png b/skins/default/images/mail_footer.png
index 7e0867748..e0f82b578 100644
--- a/skins/default/images/mail_footer.png
+++ b/skins/default/images/mail_footer.png
diff --git a/skins/default/includes/header.html b/skins/default/includes/header.html
index 14cc80caf..393ee9218 100644
--- 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" />
diff --git a/skins/default/mail.css b/skins/default/mail.css
index b29688492..fae7a82a5 100644
--- 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;
diff --git a/skins/default/settings.css b/skins/default/settings.css
index 46a02d81f..36567fa9f 100644
--- 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
diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html
index 974622210..aa3f288e7 100644
--- 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>
diff --git a/skins/default/templates/compose.html b/skins/default/templates/compose.html
index 614d8862b..c413988c6 100644
--- 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>
diff --git a/skins/default/templates/editidentity.html b/skins/default/templates/editidentity.html
index 5b4c75386..895859ce6 100644
--- 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>
diff --git a/skins/default/templates/error.html b/skins/default/templates/error.html
index 36862ce38..f21c684ce 100644
--- 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>
diff --git a/skins/default/templates/identities.html b/skins/default/templates/identities.html
index 04fa9816c..aef8dceb4 100644
--- 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>
diff --git a/skins/default/templates/importcontacts.html b/skins/default/templates/importcontacts.html
index 83ab4ab3d..08e5afe16 100644
--- 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>
diff --git a/skins/default/templates/login.html b/skins/default/templates/login.html
index 8300a23bc..3e8d5ef42 100644
--- 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" />
 
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index 7a0cee129..5fcd45c70 100644
--- 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>
diff --git a/skins/default/templates/managefolders.html b/skins/default/templates/managefolders.html
index 97758880a..a61904b2f 100644
--- 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>
diff --git a/skins/default/templates/message.html b/skins/default/templates/message.html
index 0bafc3e08..c154dc434 100644
--- 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=" " />
@@ -62,6 +61,9 @@
   <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">
     var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailboxlist-container', p2: 'messageframe', orientation: 'v', relative: true, start: 165});
@@ -77,5 +79,7 @@
   </ul>
 </div>
 
+<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
+
 </body>
 </html>
diff --git a/skins/default/templates/messageerror.html b/skins/default/templates/messageerror.html
index 3712217a3..26df8ba15 100644
--- 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 />