- Added vertical splitter for folders list resizing

- Added possibility to view all headers in message view
- Fixed splitter drag/resize on Opera (#1485170)
- debug console css fixes for IE

3 files changed, 52 insertions, 22 deletions

diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html
index 3f8e460a5..df5f20a02 100644
--- a/skins/default/templates/addressbook.html
+++ b/skins/default/templates/addressbook.html
@@ -24,26 +24,31 @@
 </div>
 
 <roundcube:if condition="config:ldap_public" />
+
 <div id="directorylist">
 <div id="groups-title"><roundcube:label name="groups" /></div>
 <roundcube:object name="directorylist" id="directories-list" />
 </div>
 
 <roundcube:else />
+
 <style type="text/css">
-#addresslist { left:20px; width:440px }
-#contacts-box { left:475px }
-#abookcountbar { left:20px }
+#abookcountbar { left: 20px;}
+#mainscreen { left:20px; /* IE hack */ width:expression((parseInt(document.documentElement.clientWidth)-40)+'px') }
+#addresslist { width:245px }
+#contacts-box { left:255px; /* IE hack */ width:expression((parseInt(mainscreen.offsetWidth)-255)+'px') }
 </style>
 
 <roundcube:endif />
 
+<div id="mainscreen">
+
 <div id="addresslist">
 <roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" />
 </div>
 
 <script type="text/javascript">
-  var addrviewsplit = new rcube_splitter({id:'addressviewsplitter', p1: 'addresslist', p2: 'contacts-box', orientation: 'v'});
+  var addrviewsplit = new rcube_splitter({id:'addressviewsplitter', p1: 'addresslist', p2: 'contacts-box', orientation: 'v', relative: true, start: 250});
   rcmail.add_onload('addrviewsplit.init()');
 </script>
 
@@ -51,6 +56,8 @@
 <roundcube:object name="addressframe" id="contact-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" />
 </div>
 
+</div>
+
 <div id="abookcountbar">
 <roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstpage" />
 <roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previouspage" />
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index 7b6037b31..3d2068d91 100644
--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@@ -47,17 +47,19 @@ body_keypress: function(evt, p)
 <roundcube:include file="/includes/taskbar.html" />
 <roundcube:include file="/includes/header.html" />
 
+<div id="mainscreen">
+
 <div id="mailboxlist-container">
 <h3 id="mailboxlist-header"><roundcube:label name="mailboxlist" /></h3>
 <roundcube:object name="mailboxlist" id="mailboxlist" maxlength="16" />
 </div>
 
-<div id="mailboxcontrols">
-<roundcube:label name="folder" />:&nbsp;
-<roundcube:button command="expunge" label="compact" classAct="active" />&nbsp;
-<roundcube:button command="purge" label="empty" classAct="active" />&nbsp;
-</div>
+<script type="text/javascript">
+  var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailboxlist-container', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165});
+  rcmail.add_onload('mailviewsplitv.init()');
+</script>
 
+<div id="mailrightcontainer">
 
 <div id="mailcontframe">
 <roundcube:object name="messages"
@@ -74,22 +76,33 @@ body_keypress: function(evt, p)
 </div>
 
 <roundcube:if condition="config:preview_pane == true" />
+
 <script type="text/javascript">
-  var mailviewsplit = new rcube_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h'});
+  var mailviewsplit = new rcube_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: 200});
   rcmail.add_onload('mailviewsplit.init()');
 </script>
+
 <div id="mailpreviewframe">
 <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" />
 </div>
 
 <style type="text/css">
-#mailcontframe {
-  bottom: auto;
-  height: 208px;
-}
+#mailcontframe { height: 195px; }
 </style>
+
 <roundcube:endif />
 
+</div>
+
+</div>
+
+<div id="mailboxcontrols">
+<roundcube:label name="folder" />:&nbsp;
+<roundcube:button command="expunge" label="compact" classAct="active" />&nbsp;
+<roundcube:button command="purge" label="empty" classAct="active" />&nbsp;
+</div>
+
+
 <div id="listcontrols">
 <roundcube:label name="select" />:&nbsp;
 <roundcube:button command="select-all" label="all" classAct="active" />&nbsp;
@@ -100,6 +113,14 @@ body_keypress: function(evt, p)
 <roundcube:endif />
 </div>
 
+<div id="messagecountbar">
+<roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
+<roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
+&nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
+<roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
+<roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
+</div>
+
 <div id="messagetoolbar">
 <roundcube:button command="checkmail" imageSel="/images/buttons/inbox_sel.png" imageAct="/images/buttons/inbox_act.png" imagePas="/images/buttons/inbox_pas.png" width="32" height="32" title="checkmail" />
 <roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />
@@ -124,14 +145,6 @@ body_keypress: function(evt, p)
 <roundcube:object name="searchform" type="search" results="5" id="quicksearchbox" /><roundcube:button command="reset-search" id="searchreset" image="/images/icons/reset.gif" title="resetsearch" />
 </div>
 
-<div id="messagecountbar">
-<roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
-<roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
-&nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
-<roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
-<roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
-</div>
-
 <script type="text/javascript">
 
 var rcmailUI = new rcube_mail_ui();
diff --git a/skins/default/templates/message.html b/skins/default/templates/message.html
index dc8dab7da..ccd23eb71 100644
--- a/skins/default/templates/message.html
+++ b/skins/default/templates/message.html
@@ -4,6 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 <link rel="stylesheet" type="text/css" href="/mail.css" />
+<script type="text/javascript" src="/splitter.js"></script>
 </head>
 <body>
 
@@ -30,6 +31,8 @@
 <roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mboxlist" />
 </div>
 
+<div id="mainscreen">
+
 <div id="mailboxlist-container">
 <div id="mailboxlist-header"><roundcube:label name="mailboxlist" /></div>
 <roundcube:object name="mailboxlist" id="mailboxlist" maxlength="16" />
@@ -45,5 +48,12 @@
 
 </div>
 
+</div>
+
+<script type="text/javascript">
+    var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailboxlist-container', p2: 'messageframe', orientation: 'v', relative: true, start: 165});
+    rcmail.add_onload('mailviewsplitv.init()');
+</script>
+
 </body>
 </html>