Some last layout changes for Larry: move search box to the right, visually connect message list footer to the list

skins/larry/addressbook.css

@@ -28,15 +28,20 @@
 	bottom: 0;
 }
 
+#directorytoolbar,
 #addressbooktoolbar {
 	position: absolute;
 	top: -6px;
 	left: 0;
-	right: 0;
+	right: 260px;
 	height: 40px;
 	white-space: nowrap;
 }
 
+#directorytoolbar {
+	right: 0;
+}
+
 #directorylistbox {
 	position: absolute;
 	top: 42px;

skins/larry/ie7hacks.css

@@ -44,6 +44,10 @@ a.deletebutton,
 	display: inline;
 }
 
+.pagenavbuttons {
+	top: 4px;
+}
+
 .dropbutton .dropbuttontip {
 	right: -2px;
 }
@@ -113,7 +117,7 @@ ul.toolbarmenu li label {
 
 #quicksearchbar input {
 	padding-top: 4px;
-	padding-bottom: 4px;
+	padding-bottom: 2px;
 }
 
 #messagelistfooter #listcontrols,

skins/larry/iehacks.css

@@ -131,6 +131,10 @@ ul.toolbarmenu li a.active:hover,
 
 /*** mail.css ***/
 
+#messagelistfooter {
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#c6c6c6', GradientType=0);
+}
+
 #mailboxlist li.mailbox .unreadcount {
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82acb5', endColorstr='#6a939f', GradientType=0);
 }

skins/larry/includes/mailtoolbar.html

@@ -1,9 +1,6 @@
 <div id="mailtoolbar" class="toolbar">
 <roundcube:if condition="template:name == 'message'" />
 <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
-<roundcube:else />
-<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" />
-<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" />
 <roundcube:endif />
 <roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="reply" title="replytomessage" />
 <span class="dropbutton">

skins/larry/mail.css

@@ -36,6 +36,10 @@
 	bottom: 28px;
 }
 
+#mailview-top.fullheight {
+	border-radius: 4px 4px 0 0;
+}
+
 #mailview-bottom {
 	position: absolute;
 	left: 0;
@@ -67,7 +71,7 @@
 
 #messagelistcontainer {
 	top: 0;
-	bottom: 28px;
+	bottom: 30px;
 	overflow: auto;
 }
 
@@ -77,7 +81,19 @@
 	left: 0;
 	right: 0;
 	height: 22px;
-	padding: 2px 4px;
+	padding: 4px 8px;
+	border-top: 1px solid #ddd;
+	background: #ebebeb;
+	background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6));
+	background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
+	background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
+	background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
+	border-radius: 0 0 4px 4px;
+}
+
+#mailview-top.fullheight #messagelistfooter {
+	border-radius: 0;
 }
 
 #messagelistfooter.rightalign {
@@ -95,6 +111,10 @@
 	vertical-align: middle;
 }
 
+#messagelistfooter #listselectors .menuselector {
+	margin-top: -2px;
+}
+
 a.iconbutton.listmode {
 	width: 26px;
 	height: 20px;
@@ -302,9 +322,10 @@ a.iconbutton.threadmode.selected {
 }
 
 #searchfilter {
-	width: 16em;
-    top: 8px;
 	position: absolute;
+	right: 256px;
+	width: auto;
+	top: 8px;
 }
 
 #searchfilter select {
@@ -317,28 +338,36 @@ a.iconbutton.threadmode.selected {
 	width: 100%;
 }
 
+#mailboxtoolbar,
 #messagetoolbar {
 	position: absolute;
 	top: -6px;
-	right: 0;
-	left: 15em;
+	right: 390px;
+	left: 0;
 	height: 40px;
 	white-space: nowrap;
 }
 
 #messagetoolbar.fullwidth {
-	left: 0;
+	right: 0;
 }
 
-#mailtoolbar {
-	text-align: right;
+#mailboxtoolbar {
+	right: 0;
+}
+
+#messagesearchtools {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 240px;
 }
 
 #mailpreviewtoggle {
 	display: block;
 	position: absolute;
-	top: 4px;
-	right: 0;
+	top: 6px;
+	right: 6px;
 	width: 20px;
 	height: 18px;
 	background: url(images/buttons.png) -3px -458px no-repeat;
@@ -351,6 +380,14 @@ a.iconbutton.threadmode.selected {
 
 /*** message list ***/
 
+#messagelist thead td:first-child {
+	border-radius: 4px 0 0 0;
+}
+
+#messagelist thead td:last-child {
+	border-radius: 0 4px 0 0;
+}
+
 #messagelist tr td.attachment,
 #messagelist tr td.threads,
 #messagelist tr td.status,

skins/larry/styles.css

@@ -316,13 +316,14 @@ input.button:active {
 
 .pagenav .countdisplay {
 	display: inline-block;
-	padding:0 1em;
+	padding: 3px 1em 0 1em;
 	text-shadow: 0px 1px 1px #fff;
 	min-width: 16em;
 }
 
 .pagenavbuttons {
 	position: relative;
+	top: -2px;
 }
 
 a.iconbutton {
@@ -1275,14 +1276,17 @@ ul.proplist li {
 /*** quicksearch **/
 
 #quicksearchbar {
-	width: 100%;
+	position: absolute;
+	right: 1px;
+	top: 0;
+	width: 240px;
 }
 
 #quicksearchbar input {
 	width: 176px;
 	margin: 0;
-	margin-top: 8px;
-	padding: 2px 30px 2px 34px;
+	margin-top: 7px;
+	padding: 3px 30px 3px 34px;
 	height: 18px;
 	background: #f1f1f1;
 	border-color: #ababab;

skins/larry/svggradients.css

@@ -141,6 +141,9 @@ ul.toolbarmenu li a.active:hover,
 	background-image: url(svggradient.php?c=fbfbfb;e9e9e9&h=1);
 }
 
+#messagelistfooter {
+	background-image: url(svggradient.php?c=ebebeb;c6c6c6);
+}
 
 /*** jqueryui theme ***/
 

skins/larry/templates/addressbook.html

@@ -12,11 +12,10 @@
 
 <div id="addressview-left">
 
-<!-- search box -->
-<div id="quicksearchbar">
-<roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+<!-- toolbar -->
+<div id="directorytoolbar" class="toolbar">
+	<roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" />
+	<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" />
 </div>
 
 <!-- sources/groups list -->
@@ -36,13 +35,18 @@
 
 <!-- toolbar -->
 <div id="addressbooktoolbar" class="toolbar">
-	<roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" />
 	<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" />
-	<roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" />
-	<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" />
+	<roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" />
 	<roundcube:container name="toolbar" id="addressbooktoolbar" />
 </div>
 
+<!-- search box -->
+<div id="quicksearchbar">
+<roundcube:object name="searchform" id="quicksearchbox" />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+</div>
+
 <!-- contacts list -->
 <div id="addresslist" class="uibox listbox">
 <h2 class="boxtitle"><roundcube:label name="contacts" /></h2>

skins/larry/templates/mail.html

@@ -5,7 +5,7 @@
 <roundcube:include file="/includes/links.html" />
 <style type="text/css">
 <roundcube:if condition="config:preview_pane == true" />
-	#mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-38 : 300" />px; }
+	#mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-45 : 300" />px; }
 	#mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 320" />px; height: auto; }
 	#mailpreviewframe { display: block; }
 <roundcube:endif />
@@ -19,11 +19,10 @@
 
 <div id="mailview-left">
 
-<!-- search box -->
-<div id="quicksearchbar">
-<roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+<!-- toolbar -->
+<div id="mailboxtoolbar" class="toolbar">
+	<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" />
+	<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" />
 </div>
 
 <!-- folders list -->
@@ -44,20 +43,35 @@
 
 <div id="mailview-right">
 
+<!-- toolbar -->
+<div id="messagetoolbar">
+<roundcube:include file="/includes/mailtoolbar.html" />
+</div>
+
+<div id="messagesearchtools">
+
 <!-- search filter -->
 <div id="searchfilter">
 	<roundcube:object name="searchfilter" class="searchfilter decorated" />
 </div>
 
-<!-- toolbar -->
-<div id="messagetoolbar">
-<roundcube:include file="/includes/mailtoolbar.html" />
+<!-- search box -->
+<div id="quicksearchbar">
+<roundcube:object name="searchform" id="quicksearchbox" />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+</div>
+
 </div>
 
-<div id="mailview-top">
+<roundcube:if condition="config:preview_pane == true" />
+<div id="mailview-top" class="uibox">
+<roundcube:else />
+<div id="mailview-top" class="uibox fullheight">
+<roundcube:endif />
 
 <!-- messagelist -->
-<div id="messagelistcontainer" class="uibox boxlistcontent">
+<div id="messagelistcontainer" class="boxlistcontent">
 <roundcube:object name="messages"
 	id="messagelist"
 	class="records-table sortheader"

skins/larry/ui.js

@@ -110,7 +110,7 @@ function rcube_mail_ui()
         $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });
 
         mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
-          orientation:'h', relative:true, start:310, min:150, size:0, offset:-18 });
+          orientation:'h', relative:true, start:310, min:150, size:6, offset:-18 });
         if (previewframe)
           mailviewsplit.init();
 
@@ -180,21 +180,24 @@ function rcube_mail_ui()
       if ($('option:selected', this).val() != '')
         title = $('option:selected', this).text();
 
-      var new_select = $('<a class="menuselector"><span class="handle">' + title + '</span></a>')
+      var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>')
         .css('position', 'absolute')
         .offset(select.position())
         .insertAfter(select);
 
-      new_select.children().width(width).height(height).css('line-height', (height - 1) + 'px');
+      overlay.children().width(width).height(height).css('line-height', (height - 1) + 'px');
 
       select.change(function() {
           var val = $('option:selected', this).text();
           $(this).next().children().html(val);
-        })
-        .parent().css('position', 'relative');
+        });
+
+      var parent = select.parent();
+      if (parent.css('position') != 'absolute')
+        parent.css('position', 'relative');
 
       // re-set original select width to fix click action and options width in some browsers
-      select.width(new_select.width());
+      select.width(overlay.width());
     });
 
     $(document.body)
@@ -313,7 +316,7 @@ function rcube_mail_ui()
 
   function resize_leftcol(splitter)
   {
-    if (splitter)
+    if (0&&splitter)
       $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px');
   }
 
@@ -449,7 +452,7 @@ function rcube_mail_ui()
     button.removeClass().addClass(visible ? 'enabled' : 'closed');
 
     if (visible) {
-      $('#mailview-top').css({ bottom:'auto' });
+      $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
       $('#mailview-bottom').css({ height:'auto' });
 
       rcmail.env.contentframe = 'messagecontframe';
@@ -468,7 +471,7 @@ function rcube_mail_ui()
       rcmail.env.contentframe = null;
       rcmail.show_contentframe(false);
 
-      $('#mailview-top').css({ height:'auto', bottom:'28px' });
+      $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'28px' });
       $('#mailview-bottom').css({ top:'auto', height:'26px' });
 
       if (mailviewsplit.handle)