Some last layout changes for Larry: move search box to the right, vis…

…ually connect message list footer to the list
roundcube · Jul 4, 2012 · 77fad16 · 77fad16
1 parent b1f30d8
commit 77fad16
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 48 deletions.
diff --git a/skins/larry/addressbook.css b/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;

diff --git a/skins/larry/ie7hacks.css b/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,

diff --git a/skins/larry/iehacks.css b/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);
 }

diff --git a/skins/larry/includes/mailtoolbar.html b/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">

diff --git a/skins/larry/mail.css b/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,

diff --git a/skins/larry/styles.css b/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;

diff --git a/skins/larry/svggradients.css b/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 ***/
 

diff --git a/skins/larry/templates/addressbook.html b/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 @@ <h2 id="directorylist-header" class="boxtitle"><roundcube:label name="groups" />
 
 <!-- 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>

diff --git a/skins/larry/templates/mail.html b/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"