- Improved compose screen: resizable body and attachments list, vertical splitter, options menu

- Removed productname/version element, changed footer size to 20px

20 files changed, 342 insertions, 308 deletions

diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css
index dc9e865b7..450b5bd82 100644
--- a/skins/default/addressbook.css
+++ b/skins/default/addressbook.css
@@ -84,7 +84,7 @@
   position: absolute;
   top: 85px;
   right: 20px;
-  bottom: 30px;
+  bottom: 20px;
   left: 225px;
 }
 
@@ -92,7 +92,7 @@
 {
   position: absolute;
   top: 85px;
-  bottom: 30px;
+  bottom: 20px;
   left: 20px;
   width: 195px;
   border: 1px solid #999999;
@@ -109,8 +109,8 @@
 #addresslist
 {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   border: 1px solid #999999;
   background-color: #F9F9F9;
   overflow: hidden;
@@ -121,30 +121,12 @@
   border-top: 1px solid #999;
 }
 
-#importbox
-{
-  position: absolute;
-  top: 85px;
-  bottom: 30px;
-  left: 20px;
-  right: 20px;
-  border: 1px solid #999999;
-  background-color: #F2F2F2;
-  padding-bottom: 4ex;
-  overflow: auto;
-}
-
 #addresslist
 {
   left: 0px;
   width: 280px;
 }
 
-#importbox a
-{
-  color: blue;
-}
-
 #directorylist
 {
   list-style: none;
diff --git a/skins/default/common.css b/skins/default/common.css
index f3af5f1a6..9f386ff25 100644
--- a/skins/default/common.css
+++ b/skins/default/common.css
@@ -128,6 +128,15 @@ img
 
 /** common user interface objects */
 
+#mainscreen
+{
+  position: absolute;
+  top: 85px;
+  right: 20px;
+  bottom: 20px;
+  left: 20px;
+}
+
 #header
 {
   position: absolute;
@@ -235,11 +244,9 @@ img
   border: 1px solid #CCCCCC;
 }
 
-#pagecontent
+.box
 {
-  position: absolute;
-  top: 95px;
-  left: 20px;
+  border: 1px solid #999;
 }
 
 .boxtitle
@@ -250,6 +257,7 @@ img
   color: #333;
   font-size: 11px;
   font-weight: bold;
+  overflow: hidden;
   background: url(images/listheader.gif) top left repeat-x #CCC;
 }
 
@@ -277,6 +285,18 @@ img
   overflow-x: hidden;
 }
 
+.boxsubject
+{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  overflow: hidden;
+  height: 22px;
+  border-bottom: 1px solid #999;
+  background: url(images/listheader.gif) top left repeat-x #CCC;
+}
+
 .boxfooter
 {
   position: absolute;
@@ -318,6 +338,7 @@ img
   color: #444;
   font-size: 11px;
   text-shadow: white 1px 1px;
+  white-space: nowrap;
 }
 
 .pagenav a.button,
@@ -728,3 +749,9 @@ ul.toolbarmenu li.separator_above
 {
   color: #999;
 }
+
+font.bold
+{
+  font-weight: bold;
+}
+  
\ No newline at end of file
diff --git a/skins/default/functions.js b/skins/default/functions.js
index b1ee9b088..3a97448ac 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -41,7 +41,8 @@ function rcmail_show_header_form(id)
     var div = document.getElementById('compose-div'),
       headers_div = document.getElementById('compose-headers-div');
     row.style.display = (document.all && !window.opera) ? 'block' : 'table-row';
-    div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px';
+    div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
+    rcmail_resize_compose_body();
   }
 
   return false;
@@ -71,7 +72,8 @@ function rcmail_hide_header_form(id)
     var div = document.getElementById('compose-div'),
       headers_div = document.getElementById('compose-headers-div');
     row.style.display = 'none';
-    div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px';
+    div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
+    rcmail_resize_compose_body();
   }
 
   return false;
@@ -115,8 +117,30 @@ function rcmail_init_compose_form()
     };
   }
 
-  // fix editor position on some browsers
-  div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px';
+  $(window).resize(function() {
+    rcmail_resize_compose_body();
+  });
+
+  $('#compose-container').resize(function() {
+    rcmail_resize_compose_body();
+  });
+
+  div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
+  $(window).resize();
+}
+
+function rcmail_resize_compose_body(elem)
+{
+  var ed, div = $('#compose-div'), w = div.width(), h = div.height();
+  w = w-4;
+  h = h-25;
+
+  $('#compose-body').width(w-(bw.ie || bw.opera || bw.safari ? 2 : 0)+'px').height(h+'px');
+
+  if (window.tinyMCE && tinyMCE.get('compose-body')) {
+    $('#compose-body_tbl').width((w+4)+'px').height('');
+    $('#compose-body_ifr').width((w+2)+'px').height((h-54)+'px');
+  }
 }
 
 /**
@@ -132,7 +156,9 @@ function rcube_mail_ui()
     listmenu:'listmenu',
     dragmessagemenu:'dragmessagemenu',
     groupmenu:'groupoptionsmenu',
-    mailboxmenu:'mailboxoptionsmenu'
+    mailboxmenu:'mailboxoptionsmenu',
+    composemenu:'composeoptionsmenu',
+    uploadform:'attachment-form'
   };
   
   var obj;
@@ -179,6 +205,20 @@ show_mailboxmenu: function(show)
   this.show_popupmenu(this.mailboxmenu, 'mboxactionslink', show, true);
 },
 
+show_composemenu: function(show)
+{
+  this.show_popupmenu(this.composemenu, 'composemenulink', show, true);
+},
+
+show_uploadform: function(show)
+{
+  if (typeof show == 'object') // called as event handler
+    show = false;
+  if (!show)
+    $('input[type=file]').val('');
+  this.show_popupmenu(this.uploadform, 'uploadformlink', show, true);
+},
+
 show_searchmenu: function(show)
 {
   if (typeof show == 'undefined')
@@ -297,26 +337,35 @@ body_mouseup: function(evt, p)
     this.show_groupmenu(false);
   else if (this.mailboxmenu &&  this.mailboxmenu.is(':visible') && target != rcube_find_object('mboxactionslink'))
     this.show_mailboxmenu(false);
-  else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink')) {
-    var menu = rcube_find_object('listmenu');
-    while (target.parentNode) {
-      if (target.parentNode == menu)
-        return;
-      target = target.parentNode;
-    }
+  else if (this.composemenu &&  this.composemenu.is(':visible') && target != rcube_find_object('composemenulink')
+    && !this.target_overlaps(target, this.popupmenus.composemenu)) {
+    this.show_composemenu(false);
+  }
+  else if (this.uploadform &&  this.uploadform.is(':visible') && target != rcube_find_object('uploadformlink')
+    && !this.target_overlaps(target, this.popupmenus.uploadform)) {
+    this.show_uploadform(false);
+  }
+  else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink')
+    && !this.target_overlaps(target, this.popupmenus.listmenu)) {
     this.show_listmenu(false);
   }
-  else if (this.searchmenu && this.searchmenu.is(':visible') && target != rcube_find_object('searchmod')) {
-    var menu = rcube_find_object('searchmenu');
-    while (target.parentNode) {
-      if (target.parentNode == menu)
-        return;
-      target = target.parentNode;
-    }
+  else if (this.searchmenu && this.searchmenu.is(':visible') && target != rcube_find_object('searchmod')
+    && !this.target_overlaps(target, this.popupmenus.searchmenu)) {
     this.show_searchmenu(false);
   }
 },
 
+target_overlaps: function (target, elementid)
+{
+  var element = rcube_find_object(elementid);
+  while (target.parentNode) {
+    if (target.parentNode == element)
+      return true;
+    target = target.parentNode;
+  }
+  return false;
+},
+
 body_keypress: function(evt, p)
 {
   if (rcube_event.get_keycode(evt) == 27) {
@@ -386,6 +435,7 @@ function rcube_init_mail_ui()
   if (rcmail.env.task == 'mail') {
     rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui);
     rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui);
+    rcmail.addEventListener('aftersend-attachment', 'show_uploadform', rcmail_ui);
     rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
   }
 }
diff --git a/skins/default/ie6hacks.css b/skins/default/ie6hacks.css
index f1d74e6ce..aaba2f2a6 100644
--- a/skins/default/ie6hacks.css
+++ b/skins/default/ie6hacks.css
@@ -55,6 +55,11 @@ img
   background-image: url(images/icons/groupactions.gif);
 }
 
+.pagenav
+{
+  width: 200px;
+}
+
 .pagenav a.button,
 .pagenav a.buttonPas
 {
@@ -107,3 +112,8 @@ ul.toolbarmenu li.separator_below
   top: 21px;
   height: expression((parseInt(this.parentNode.offsetHeight)-24-parseInt(this.style.top?this.style.top:21))+'px');
 }
+
+#directorylistbox
+{
+  height: expression((parseInt(document.documentElement.clientHeight)-105)+'px');
+}
diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css
index d070ea328..7f6529921 100644
--- a/skins/default/iehacks.css
+++ b/skins/default/iehacks.css
@@ -32,9 +32,15 @@ input, textarea
   width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
 }
 
+#mainscreen
+{
+  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-105)+'px');
+}
+
 #folder-manager
 {
-  height: expression((parseInt(document.documentElement.clientHeight)-235)+'px');
+  height: expression((parseInt(this.parentNode.offsetHeight)-105)+'px');
 }
 
 #messagetoolbar
@@ -71,23 +77,20 @@ input, textarea
   z-index: 250;
 }
 
-#mainscreen
-{
-  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-96)+'px');
-}
-
-#directorylistbox
-{
-  height: expression((parseInt(document.documentElement.clientHeight)-115)+'px');
-}
-
 #addresslist,
 #sectionslist,
 #identities-list,
 #mailleftcontainer,
+#mailrightcontainer,
+#compose-container,
+#compose-attachments,
 #mailcontframe,
-#identity-details
+#mailboxlist-container,
+#mailrightcontent,
+#messageframe,
+#identity-details,
+#contacts-box,
+#prefs-box
 {
   height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
@@ -95,7 +98,6 @@ input, textarea
 #mailrightcontainer
 {
   width: expression((parseInt(this.parentNode.offsetWidth)-170)+'px');
-  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
 
 #messagepartcontainer
@@ -106,18 +108,17 @@ input, textarea
 
 #mailrightcontent
 {
-  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
   width: 100%;
 }
 
-#partheader
+#compose-div
 {
-  width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
+  height: expression((parseInt(this.parentNode.offsetHeight)-1-parseInt(document.getElementById('compose-headers').offsetHeight))+'px');
 }
 
-#mailboxlist-container
+#partheader
 {
-  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
+  width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
 }
 
 #subscription-table
@@ -137,7 +138,7 @@ input, textarea
 {
   height: 18px;
 }
-  
+
 #messagelist tbody tr.unroot td.subject
 {
   text-decoration: underline;
@@ -146,7 +147,6 @@ input, textarea
 #messageframe
 {
   width: expression((parseInt(this.parentNode.offsetWidth)-180)+'px');
-  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
   overflow: hidden;
 }
 
@@ -161,13 +161,6 @@ body.iframe
   width: expression((parseInt(document.documentElement.clientWidth))+'px');
 }
 
-#compose-container
-{
-  width: expression((parseInt(document.documentElement.clientWidth)-230)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-120)+'px');
-}
-
-#compose-body,
 #compose-headers td textarea,
 #compose-headers td input
 {
@@ -184,19 +177,7 @@ div.message-part div.pre
 #addressscreen
 {
   width: expression((parseInt(document.documentElement.clientWidth)-245)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-115)+'px');
-}
-
-#prefsscreen
-{
-  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
-}
-
-#importbox
-{
-  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-140)+'px');
+  height: expression((parseInt(document.documentElement.clientHeight)-105)+'px');
 }
 
 #contacts-table
@@ -207,7 +188,6 @@ div.message-part div.pre
 #contacts-box,
 #prefs-box
 {
-  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
   width: expression((parseInt(this.parentNode.offsetWidth)-555)+'px');
 }
 
diff --git a/skins/default/mail.css b/skins/default/mail.css
index 8534e17df..f78d98296 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -246,29 +246,6 @@
   font-size: 11px;
 }
 
-td.formlinks a,
-td.formlinks a:visited
-{
-  color: #999999;
-  font-size: 11px;
-  text-decoration: none;
-}
-
-td.formlinks a,
-td.formlinks a:visited
-{
-  color: #CC0000;
-}
-
-#mainscreen
-{
-  position: absolute;
-  top: 85px;
-  right: 20px;
-  bottom: 30px;
-  left: 20px;
-}
-
 #mailleftcontainer
 {
   position: absolute;
@@ -515,7 +492,7 @@ td.formlinks a:visited
   position: relative;
   white-space: nowrap;
   left: 4px;
-  height: 22px;
+  line-height: 22px;
   width: auto;
   min-width: 300px;
 }
@@ -525,7 +502,6 @@ td.formlinks a:visited
 {
   display: block;
   float: left;
-  margin-top: 4px;
   font-size: 11px;
 }
 
@@ -542,6 +518,7 @@ td.formlinks a:visited
   width: 15px;
   height: 15px;
   padding: 0;
+  margin-top: 4px;
   margin-right: 2px;
   overflow: hidden;
   background: url(images/mail_footer.png) 0 0 no-repeat transparent;
@@ -1115,35 +1092,38 @@ div.message-htmlpart div.rcmBody
 
 /** message compose styles */
 
-#compose-toolbar
-{
-  white-space: nowrap;
-}
-
 #compose-container
 {
   position: absolute;
-  top: 90px;
-  left: 205px;
-  right: 25px;
-  bottom: 30px;
-  margin: 0px;
+  top: 0;
+  left: 185px;
+  right: 0;
+  bottom: 0;
+  margin: 0;
 }
 
-#spellcheck-control
+#compose-div
 {
-  text-align: right;
-  padding-top: 3px;
+  position: absolute;
+  top: 85px;
+  bottom: 0;
+  margin: 0;
+  width: 100%;
+  border: 1px solid #999;
 }
 
-#compose-div
+#compose-body
 {
   position: absolute;
-  top: 130px;
-  bottom: 30px;
-  width: 100%;
-  vertical-align: top;
-  padding-top: 2px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  font-size: 9pt;
+  border: none;
+  font-family: monospace;
+  resize: none;
 }
 
 #compose-headers
@@ -1151,6 +1131,12 @@ div.message-htmlpart div.rcmBody
   width: 100%;
 }
 
+#compose-headers td.editfield
+{
+  padding-right: 5px;
+  min-width: 200px;
+}
+
 #compose-headers td.top
 {
   vertical-align: top;
@@ -1160,23 +1146,28 @@ div.message-htmlpart div.rcmBody
 #compose-subject td.title
 {
   width: 80px !important;
-  color: #666;
   font-size: 11px;
   font-weight: bold;
   padding-right: 10px;
   white-space: nowrap;
 }
 
-#compose-body,
 #compose-headers td textarea,
 #compose-headers td input
 {
+  resize: none;
+  width: 100%;
+  border: 1px solid #999;
+}
+
+#compose-headers td select
+{
   width: 100%;
 }
 
 #compose-headers td textarea
 {
-  height: 38px;
+  height: 32px;
 }
 
 #compose-cc,
@@ -1186,28 +1177,60 @@ div.message-htmlpart div.rcmBody
   display: none;
 }
 
-#compose-body
+#formlinks
 {
-  min-height: 100px;
-  height: 100%;
-  font-size: 9pt;
-  font-family: monospace;
+  text-align: right;
+  white-space: nowrap;
+  width: 1%;
+  padding-left: 5px;
+}
+
+#formlinks a,
+#formlinks a:visited
+{
+  color: #999999;
+  font-size: 11px;
+  text-decoration: none;
+}
+
+#formlinks a,
+#formlinks a:visited
+{
+  color: #CC0000;
+}
+
+#compose-editorfooter
+{
+  position: absolute;
+  right: 5px;
+  bottom: 0;
+  text-align: right;
+  line-height: 22px;
+}
+
+#compose-buttons
+{
+  position: absolute;
+  left: 40px;
+  top: 1px;
 }
 
 #compose-attachments
 {
   position: absolute;
-  top: 100px;
-  left: 20px;
+  top: 0;
+  left: 0;
+  bottom: 0;
   width: 175px;
+  border: 1px solid #999;
+  background-color: #F9F9F9;
 }
 
 #compose-attachments ul
 {
   margin: 0px;
   padding: 0px;
-  border: 1px solid #CCCCCC;
-  background-color: #F9F9F9;
+  background-color: #FFF;
   list-style-image: none;
   list-style-type: none;
 }
@@ -1230,16 +1253,6 @@ div.message-htmlpart div.rcmBody
   vertical-align: middle;
 }
 
-#attachment-title
-{
-  color: #666666;
-  font-weight: bold;
-  font-size: 11px;
-  background: url(images/icons/attachment.png) top left no-repeat;
-  padding: 0px 0px 3px 18px;
-  margin-left: 3px;
-}
-
 #attachment-form
 {
   padding: 6px;
@@ -1255,26 +1268,6 @@ 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;
@@ -1306,11 +1299,6 @@ td.hide-headers
   color: #333;
 }
 
-font.bold
-{
-  font-weight: bold;
-}
-
 #listmenu
 {
   padding: 6px;
diff --git a/skins/default/settings.css b/skins/default/settings.css
index 7c2f8b3e4..de05c70bf 100644
--- a/skins/default/settings.css
+++ b/skins/default/settings.css
@@ -53,15 +53,10 @@ span.tablink-selected a
 #folder-manager
 {
   position: absolute;
-  top: 95px;
-  left: 20px;
-  overflow: auto;
-}
-
-#folder-manager
-{
   width: 600px;
-  bottom: 140px;
+  top: 0;
+  left: 0;
+  bottom: 105px;
   overflow: auto;
   border: 1px solid #999999;
 }
@@ -195,16 +190,9 @@ input.disabled
 {
   position: absolute;
   width: 600px;
-  height: 120px;
-  left: 20px;
-  bottom: 25px;
-}
-
-div.settingsbox
-{
-  width: 600px;
-  margin-top: 20px;
-  border: 1px solid #999999;
+  height: 95px;
+  left: 0;
+  bottom: 0;
 }
 
 fieldset 
@@ -219,22 +207,13 @@ legend
   color: #999999;
 }
 
-#prefsscreen
-{
-  position: absolute;
-  top: 95px;
-  right: 20px;
-  bottom: 30px;
-  left: 20px;
-}
-
 #identities-list,
 #sectionslist
 {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
+  top: 0;
+  left: 0;
+  bottom: 0;
   border: 1px solid #999999;
   background-color: #F9F9F9;
   overflow: hidden;
@@ -254,9 +233,9 @@ legend
 #prefs-box
 {
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
+  top: 0;
+  right: 0;
+  bottom: 0;
   border: 1px solid #999999;
   overflow: hidden;
 }
diff --git a/skins/default/splitter.js b/skins/default/splitter.js
index af66575b4..2a16b0b6f 100644
--- a/skins/default/splitter.js
+++ b/skins/default/splitter.js
@@ -82,6 +82,8 @@ function rcube_splitter(attrib)
         this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px';
       }
     }
+    $(this.p2).resize();
+    $(this.p1).resize();
   };
 
   /**
diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html
index aa3f288e7..6c3d3c260 100644
--- a/skins/default/templates/addressbook.html
+++ b/skins/default/templates/addressbook.html
@@ -82,7 +82,5 @@
 
 </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 c413988c6..96f771f8f 100644
--- a/skins/default/templates/compose.html
+++ b/skins/default/templates/compose.html
@@ -5,8 +5,15 @@
 <roundcube:include file="/includes/links.html" />
 <link rel="stylesheet" type="text/css" href="/googiespell.css" />
 <script type="text/javascript" src="/functions.js"></script>
+<script type="text/javascript" src="/splitter.js"></script>
+<style type="text/css">
+#compose-attachments { width: <roundcube:exp expression="!empty(cookie:composesplitterv) ? cookie:composesplitterv-5 : 175" />px; }
+#compose-container { left: <roundcube:exp expression="!empty(cookie:composesplitterv) ? cookie:composesplitterv+5 : 185" />px;
+<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:composesplitterv) ? cookie:composesplitterv+5 : 180).')+\\'px\\');') : ''" />
+}
+</style>
 </head>
-<body onload="rcmail_init_compose_form()">
+<body onload="rcmail_init_compose_form(); rcube_init_mail_ui()">
 
 <roundcube:include file="/includes/taskbar.html" />
 <roundcube:include file="/includes/header.html" />
@@ -14,89 +21,117 @@
 <form name="form" action="./" method="post">
 
 <div id="messagetoolbar">
-<table border="0" cellspacing="0" cellpadding="0"><tr>
-    <td id="compose-toolbar">
-      <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="insert-sig" type="link" class="buttonPas insertsig" classAct="button insertsig" classSel="button insertsigSel" title="insertsignature" content=" " />
-      <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>
-</tr></table>
+    <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="insert-sig" type="link" class="buttonPas insertsig" classAct="button insertsig" classSel="button insertsigSel" title="insertsignature" content=" " />
+    <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" />
 </div>
 
+<div id="mainscreen">
+
+<div id="compose-attachments">
+<div class="boxtitle"><roundcube:label name="attachments" /></div>
+<div class="boxlistcontent">
+  <roundcube:object name="composeAttachmentList" deleteIcon="/images/icons/delete.png" cancelIcon="/images/icons/delete.png" loadingIcon="/images/display/loading_blue.gif" />
+</div>
+<div class="boxfooter">
+  <roundcube:button name="uploadform" id="uploadformlink" type="link" title="addattachment" class="button addgroup" onclick="rcmail_ui.show_uploadform();return false" content=" " />
+</div>
+</div>
+
+<script type="text/javascript">
+  var composesplitv = new rcube_splitter({id:'composesplitterv', p1: 'compose-attachments', p2: 'compose-container', orientation: 'v', relative: true, start: 165});
+  rcmail.add_onload('composesplitv.init()');
+</script>
+
 <div id="compose-container">
     <div id="compose-headers-div" style="width: 100%;">
-	<table border="0" cellspacing="0" cellpadding="1" id="compose-headers" summary="">
-	<tbody>
+	    <table border="0" cellspacing="0" cellpadding="1" id="compose-headers">
 	    <tr>
-		<td class="title"><label for="_from"><roundcube:label name="from" /></label></td>
-		<td><roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" /></td>
+		    <td class="title"><label for="_from"><roundcube:label name="from" /></label></td>
+		    <td class="editfield">
+                <roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" />
+            </td>
+            <td id="formlinks">
+		        <a href="#cc" onclick="return rcmail_show_header_form('cc')" id="cc-link"><roundcube:label name="addcc" /></a>
+		        <span class="separator">|</span>
+		        <a href="#bcc" onclick="return rcmail_show_header_form('bcc')" id="bcc-link"><roundcube:label name="addbcc" /></a>
+		        <span class="separator">|</span>
+		        <a href="#reply-to" onclick="return rcmail_show_header_form('replyto')" id="replyto-link"><roundcube:label name="addreplyto" /></a>
+            </td>
 	    </tr><tr>
-		<td class="title top"><label for="_to"><roundcube:label name="to" /></label></td>
-		<td><roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="2" tabindex="2" /></td>
+		    <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td>
+		    <td colspan="2" class="editfield">
+                <roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="2" tabindex="2" />
+            </td>
 	    </tr><tr id="compose-cc">
-		<td class="title top"><a href="#cc" onclick="return rcmail_hide_header_form('cc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
-		<label for="_cc"><roundcube:label name="cc" /></label></td>
-		<td><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="2" tabindex="3" /></td>
+		    <td class="title top">
+                <a href="#cc" onclick="return rcmail_hide_header_form('cc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
+		        <label for="_cc"><roundcube:label name="cc" /></label>
+            </td>
+		    <td colspan="2" class="editfield">
+                <roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="2" tabindex="3" />
+            </td>
 	    </tr><tr id="compose-bcc">
-		<td class="title top"><a href="#bcc" onclick="return rcmail_hide_header_form('bcc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
-		<label for="_bcc"><roundcube:label name="bcc" /></label></td>
-		<td><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="2" tabindex="4" /></td>
+		    <td class="title top">
+                <a href="#bcc" onclick="return rcmail_hide_header_form('bcc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
+		        <label for="_bcc"><roundcube:label name="bcc" /></label>
+            </td>
+		    <td colspan="2" class="editfield">
+                <roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="2" tabindex="4" />
+            </td>
 	    </tr><tr id="compose-replyto">
-		<td class="title top"><a href="#replyto" onclick="return rcmail_hide_header_form('replyto');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
-		<label for="_replyto"><roundcube:label name="replyto" /></label></td>
-		<td><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="5" /></td>
-	    </tr><tr id="compose-links">
-		<td></td>
-		<td class="formlinks">
-		    <a href="#cc" onclick="return rcmail_show_header_form('cc')" id="cc-link"><roundcube:label name="addcc" /></a>
-		    <span class="separator">|</span>
-		    <a href="#bcc" onclick="return rcmail_show_header_form('bcc')" id="bcc-link"><roundcube:label name="addbcc" /></a>
-		    <span class="separator">|</span>
-		    <a href="#reply-to" onclick="return rcmail_show_header_form('replyto')" id="replyto-link"><roundcube:label name="addreplyto" /></a>
-		</td>
-	    </tr><tr>
-		<td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td>
-		<td><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="6" /></td>
-	    </tr><tr>
-		<td class="title"><roundcube:label name="editortype" /></td>
-		<td>
-		    <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>
-	</tbody>
-	</table>
+		    <td class="title top">
+                <a href="#replyto" onclick="return rcmail_hide_header_form('replyto');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
+		        <label for="_replyto"><roundcube:label name="replyto" /></label>
+            </td>
+		    <td colspan="2" class="editfield">
+                <roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="5" />
+            </td>
+        </tr><tr>
+		    <td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td>
+		    <td colspan="2" class="editfield">
+                <roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="6" />
+            </td>
+        </table>
     </div>
     <div id="compose-div">
-	<roundcube:object name="composeBody" id="compose-body" form="form" cols="70" rows="20" tabindex="8" />
-	<table border="0" cellspacing="0" summary="" style="width:100%; margin-top: 5px;"><tbody>
-	    <tr>
-		<td style="white-space: nowrap">
-		    <roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="9" />
-		    <roundcube:button type="input" command="list" class="button" label="cancel" tabindex="10" />
-		</td>
-		<td style="text-align:right; white-space: nowrap">
-		    <label><roundcube:label name="savesentmessagein" />: <roundcube:object name="storetarget" maxlength="30" tabindex="11" /></label>
-		</td>
-	    </tr>
-	</tbody></table>
+        <div class="boxlistcontent" style="overflow: hidden; top: 0">
+	        <roundcube:object name="composeBody" id="compose-body" form="form" cols="70" rows="20" tabindex="7" />
+        </div>
+        <div class="boxfooter">
+            <roundcube:button name="messageoptions" id="composemenulink" type="link" title="messageoptions" class="button groupactions" onclick="rcmail_ui.show_composemenu();return false" content=" " />
+            <span id="compose-buttons">
+		    <roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="8" />
+		    <roundcube:button type="input" command="list" class="button" label="cancel" tabindex="9" />
+            </span>
+            <div id="compose-editorfooter" class="pagenav">
+                <span id="spellcheck-control" style="margin-right: 10px"></span>
+                <span>
+                <roundcube:label name="editortype" />
+                <roundcube:object name="editorSelector" editorid="compose-body" tabindex="10" />
+                </span>
+            </div>
+        </div>
     </div>
 </div>
 
-<div id="compose-attachments">
-<div id="attachment-title"><roundcube:label name="attachments" /></div>
-<roundcube:object name="composeAttachmentList" deleteIcon="/images/icons/delete.png" cancelIcon="/images/icons/delete.png" loadingIcon="/images/display/loading_blue.gif" />
-<p><roundcube:button command="add-attachment" imagePas="/images/buttons/add_pas.png" imageSel="/images/buttons/add_sel.png" imageAct="/images/buttons/add_act.png" width="23" height="18" title="addattachment" /></p>
+</div>
+
+<div id="composeoptionsmenu" class="popupmenu">
+    <table>
+        <tr><td><label for="rcmcomposereceipt"><roundcube:label name="returnreceipt" />:</label></td>
+            <td><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /></td>
+        </tr>
+        <tr><td><label for="rcmcomposepriority"><roundcube:label name="priority" />:</label></td>
+            <td><roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></td>
+        </tr>
+        <tr><td><label><roundcube:label name="savesentmessagein" />:</label></td>
+            <td><roundcube:object name="storetarget" maxlength="30" /></td>
+        </tr>
+    </table>
 </div>
 
 </form>
diff --git a/skins/default/templates/editidentity.html b/skins/default/templates/editidentity.html
index 895859ce6..576a0d816 100644
--- a/skins/default/templates/editidentity.html
+++ b/skins/default/templates/editidentity.html
@@ -19,7 +19,7 @@
 <roundcube:include file="/includes/header.html" />
 <roundcube:include file="/includes/settingstabs.html" />
 
-<div id="prefsscreen">
+<div id="mainscreen">
 
 <div id="identities-list">
 <div id="identity-title" class="boxtitle"><roundcube:label name="identities" /></div>
@@ -51,7 +51,5 @@
 
 </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 f21c684ce..36862ce38 100644
--- a/skins/default/templates/error.html
+++ b/skins/default/templates/error.html
@@ -12,7 +12,5 @@
 $__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 aef8dceb4..f40f394fc 100644
--- a/skins/default/templates/identities.html
+++ b/skins/default/templates/identities.html
@@ -19,7 +19,7 @@
 <roundcube:include file="/includes/header.html" />
 <roundcube:include file="/includes/settingstabs.html" />
 
-<div id="prefsscreen">
+<div id="mainscreen">
 
 <div id="identities-list">
 <div id="identity-title" class="boxtitle"><roundcube:label name="identities" /></div>
@@ -44,7 +44,5 @@
 
 </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 08e5afe16..422b70ffb 100644
--- a/skins/default/templates/importcontacts.html
+++ b/skins/default/templates/importcontacts.html
@@ -9,7 +9,7 @@
 <roundcube:include file="/includes/taskbar.html" />
 <roundcube:include file="/includes/header.html" />
 
-<div id="importbox">
+<div id="mainscreen" class="box">
 <div class="boxtitle"><roundcube:label name="importcontacts" /></div>
 
 <div class="boxcontent">
@@ -22,7 +22,5 @@
 </div>
 </div>
 
-<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
-
 </body>
 </html>
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index ae3dac1d1..9b725751e 100644
--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@@ -230,7 +230,5 @@
 </div>
 </div>
 
-<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 a61904b2f..164d56f54 100644
--- a/skins/default/templates/managefolders.html
+++ b/skins/default/templates/managefolders.html
@@ -13,6 +13,8 @@
 
 <form name="subscriptionform" action="./" onsubmit="rcmail.command('create-folder');return false;">
 
+<div id="mainscreen">
+
 <div id="folder-manager">
 <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table"
   cellpadding="1" cellspacing="0" summary="Folder subscription table" class="records-table"
@@ -20,8 +22,7 @@
   renameIcon="/images/icons/rename.png" />
 </div>
 
-<div id="bottomboxes">
-<div class="settingsbox">
+<div id="bottomboxes" class="box">
 <div class="boxtitle"><roundcube:label name="createfolder" /></div>
 
 <div class="boxcontent">
@@ -36,7 +37,5 @@
 
 </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 c154dc434..419241af5 100644
--- a/skins/default/templates/message.html
+++ b/skins/default/templates/message.html
@@ -79,7 +79,5 @@
   </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 26df8ba15..3712217a3 100644
--- a/skins/default/templates/messageerror.html
+++ b/skins/default/templates/messageerror.html
@@ -72,8 +72,6 @@
   </ul>
 </div>
 
-<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
-
 </body>
 <roundcube:endif />
 
diff --git a/skins/default/templates/plugin.html b/skins/default/templates/plugin.html
index 03f020307..cec701301 100644
--- a/skins/default/templates/plugin.html
+++ b/skins/default/templates/plugin.html
@@ -13,7 +13,7 @@
   <roundcube:include file="/includes/settingstabs.html" />
 <roundcube:endif />
 
-<div id="pagecontent">
+<div id="mainscreen">
 <roundcube:object name="plugin.body" />
 </div>
   
diff --git a/skins/default/templates/settings.html b/skins/default/templates/settings.html
index 2e00635c8..0cd623f75 100644
--- a/skins/default/templates/settings.html
+++ b/skins/default/templates/settings.html
@@ -20,7 +20,7 @@
 <roundcube:include file="/includes/header.html" />
 <roundcube:include file="/includes/settingstabs.html" />
 
-<div id="prefsscreen">
+<div id="mainscreen">
 
 <div id="sectionslist">
 <roundcube:object name="sectionslist" id="sections-table" class="records-table" cellspacing="0" />
@@ -37,7 +37,5 @@
 
 </div>
 
-<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div>
-
 </body>
 </html>