Some last layout changes for Larry: move search box to the right, visually ...

Thomas Bruederli

2012-07-04 e8b45a6e0faee3dd3f76f17f21eca7feb800f3e1

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 @@
    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,

 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);
}

 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 {
@@ -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,

 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;

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


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

<!-- 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"

 skins/larry/ui.js

@@ -110,7 +110,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();

@@ -180,21 +180,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)
@@ -313,7 +316,7 @@

  function resize_leftcol(splitter)
  {
    if (splitter)
    if (0&&splitter)
      $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px');
  }

@@ -449,7 +452,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';
@@ -468,7 +471,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)