- UI unification

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

11 files changed, 81 insertions, 51 deletions

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 />