From 77fad166e30e5fd225495c6c78f525d0ce27c7b3 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 04 Jul 2012 17:39:45 -0400
Subject: [PATCH] Some last layout changes for Larry: move search box to the right, visually connect message list footer to the list
---
skins/larry/templates/mail.html | 40 +++++++++----
skins/larry/includes/mailtoolbar.html | 3 -
skins/larry/templates/addressbook.html | 20 ++++--
skins/larry/ie7hacks.css | 6 +
skins/larry/styles.css | 12 ++-
skins/larry/svggradients.css | 3 +
skins/larry/addressbook.css | 7 ++
skins/larry/iehacks.css | 4 +
skins/larry/mail.css | 59 ++++++++++++++++---
skins/larry/ui.js | 21 ++++---
10 files changed, 125 insertions(+), 50 deletions(-)
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 9856e28..37315cf 100644
--- 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
index f86cbe8..6161d03 100644
--- a/skins/larry/ie7hacks.css
+++ b/skins/larry/ie7hacks.css
@@ -44,6 +44,10 @@
display: inline;
}
+.pagenavbuttons {
+ top: 4px;
+}
+
.dropbutton .dropbuttontip {
right: -2px;
}
@@ -113,7 +117,7 @@
#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
index 9d0d782..2882021 100644
--- a/skins/larry/iehacks.css
+++ b/skins/larry/iehacks.css
@@ -131,6 +131,10 @@
/*** 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
index 317ff15..fbc2e5e 100644
--- 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
index c23f4d5..864d005 100644
--- 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 {
@@ -93,6 +109,10 @@
display: inline-block;
margin-right: 2em;
vertical-align: middle;
+}
+
+#messagelistfooter #listselectors .menuselector {
+ margin-top: -2px;
}
a.iconbutton.listmode {
@@ -302,9 +322,10 @@
}
#searchfilter {
- width: 16em;
- top: 8px;
position: absolute;
+ right: 256px;
+ width: auto;
+ top: 8px;
}
#searchfilter select {
@@ -317,28 +338,36 @@
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 @@
/*** 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
index 0c713fd..063e793 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -316,13 +316,14 @@
.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 @@
/*** 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
index 7e64bed..143fb37 100644
--- a/skins/larry/svggradients.css
+++ b/skins/larry/svggradients.css
@@ -141,6 +141,9 @@
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
index cec1dcf..b379609 100644
--- 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 @@
<!-- 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
index 183129a..404a8ad 100644
--- 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">
-<!-- search filter -->
-<div id="searchfilter">
- <roundcube:object name="searchfilter" class="searchfilter decorated" />
-</div>
-
<!-- toolbar -->
<div id="messagetoolbar">
<roundcube:include file="/includes/mailtoolbar.html" />
</div>
-<div id="mailview-top">
+<div id="messagesearchtools">
+
+<!-- search filter -->
+<div id="searchfilter">
+ <roundcube:object name="searchfilter" class="searchfilter decorated" />
+</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>
+
+</div>
+
+<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"
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index d0dbc6c6..884ee55 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -108,7 +108,7 @@
$('#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();
@@ -178,21 +178,24 @@
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)
@@ -311,7 +314,7 @@
function resize_leftcol(splitter)
{
- if (splitter)
+ if (0&&splitter)
$('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px');
}
@@ -447,7 +450,7 @@
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';
@@ -466,7 +469,7 @@
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)
--
Gitblit v1.9.1