Changeset 77fad16 in github


Ignore:
Timestamp:
Jul 4, 2012 5:39:45 PM (11 months ago)
Author:
Thomas Bruederli <thomas@…>
Children:
4478eb3
Parents:
b1f30d8
Message:

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

Location:
skins/larry
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • skins/larry/addressbook.css

    r0be8bd1 r77fad16  
    2929} 
    3030 
     31#directorytoolbar, 
    3132#addressbooktoolbar { 
    3233        position: absolute; 
    3334        top: -6px; 
    3435        left: 0; 
    35         right: 0; 
     36        right: 260px; 
    3637        height: 40px; 
    3738        white-space: nowrap; 
     39} 
     40 
     41#directorytoolbar { 
     42        right: 0; 
    3843} 
    3944 

  • skins/larry/ie7hacks.css

    r5effd52 r77fad16  
    4343#uploadform a.iconlink { 
    4444        display: inline; 
     45} 
     46 
     47.pagenavbuttons { 
     48        top: 4px; 
    4549} 
    4650 
    … …  
    114118#quicksearchbar input { 
    115119        padding-top: 4px; 
    116         padding-bottom: 4px; 
     120        padding-bottom: 2px; 
    117121} 
    118122 

  • skins/larry/iehacks.css

    rbe72a0f9 r77fad16  
    132132/*** mail.css ***/ 
    133133 
     134#messagelistfooter { 
     135        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#c6c6c6', GradientType=0); 
     136} 
     137 
    134138#mailboxlist li.mailbox .unreadcount { 
    135139        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82acb5', endColorstr='#6a939f', GradientType=0); 

  • skins/larry/includes/mailtoolbar.html

    r84d9b15 r77fad16  
    22<roundcube:if condition="template:name == 'message'" /> 
    33<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> 
    4 <roundcube:else /> 
    5 <roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" /> 
    6 <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> 
    74<roundcube:endif /> 
    85<roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="reply" title="replytomessage" /> 

  • skins/larry/mail.css

    rf69eb5f r77fad16  
    3737} 
    3838 
     39#mailview-top.fullheight { 
     40        border-radius: 4px 4px 0 0; 
     41} 
     42 
    3943#mailview-bottom { 
    4044        position: absolute; 
    … …  
    6872#messagelistcontainer { 
    6973        top: 0; 
    70         bottom: 28px; 
     74        bottom: 30px; 
    7175        overflow: auto; 
    7276} 
    … …  
    7882        right: 0; 
    7983        height: 22px; 
    80         padding: 2px 4px; 
     84        padding: 4px 8px; 
     85        border-top: 1px solid #ddd; 
     86        background: #ebebeb; 
     87        background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); 
     88        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6)); 
     89        background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); 
     90        background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); 
     91        background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); 
     92        border-radius: 0 0 4px 4px; 
     93} 
     94 
     95#mailview-top.fullheight #messagelistfooter { 
     96        border-radius: 0; 
    8197} 
    8298 
    … …  
    94110        margin-right: 2em; 
    95111        vertical-align: middle; 
     112} 
     113 
     114#messagelistfooter #listselectors .menuselector { 
     115        margin-top: -2px; 
    96116} 
    97117 
    … …  
    303323 
    304324#searchfilter { 
    305         width: 16em; 
    306     top: 8px; 
    307         position: absolute; 
     325        position: absolute; 
     326        right: 256px; 
     327        width: auto; 
     328        top: 8px; 
    308329} 
    309330 
    … …  
    318339} 
    319340 
     341#mailboxtoolbar, 
    320342#messagetoolbar { 
    321343        position: absolute; 
    322344        top: -6px; 
    323         right: 0; 
    324         left: 15em; 
     345        right: 390px; 
     346        left: 0; 
    325347        height: 40px; 
    326348        white-space: nowrap; 
    … …  
    328350 
    329351#messagetoolbar.fullwidth { 
    330         left: 0; 
    331 } 
    332  
    333 #mailtoolbar { 
    334         text-align: right; 
     352        right: 0; 
     353} 
     354 
     355#mailboxtoolbar { 
     356        right: 0; 
     357} 
     358 
     359#messagesearchtools { 
     360        position: absolute; 
     361        right: 0; 
     362        top: 0; 
     363        width: 240px; 
    335364} 
    336365 
    … …  
    338367        display: block; 
    339368        position: absolute; 
    340         top: 4px; 
    341         right: 0; 
     369        top: 6px; 
     370        right: 6px; 
    342371        width: 20px; 
    343372        height: 18px; 
    … …  
    351380 
    352381/*** message list ***/ 
     382 
     383#messagelist thead td:first-child { 
     384        border-radius: 4px 0 0 0; 
     385} 
     386 
     387#messagelist thead td:last-child { 
     388        border-radius: 0 4px 0 0; 
     389} 
    353390 
    354391#messagelist tr td.attachment, 

  • skins/larry/styles.css

    r3d122f0 r77fad16  
    317317.pagenav .countdisplay { 
    318318        display: inline-block; 
    319         padding:0 1em; 
     319        padding: 3px 1em 0 1em; 
    320320        text-shadow: 0px 1px 1px #fff; 
    321321        min-width: 16em; 
    … …  
    324324.pagenavbuttons { 
    325325        position: relative; 
     326        top: -2px; 
    326327} 
    327328 
    … …  
    12761277 
    12771278#quicksearchbar { 
    1278         width: 100%; 
     1279        position: absolute; 
     1280        right: 1px; 
     1281        top: 0; 
     1282        width: 240px; 
    12791283} 
    12801284 
    … …  
    12821286        width: 176px; 
    12831287        margin: 0; 
    1284         margin-top: 8px; 
    1285         padding: 2px 30px 2px 34px; 
     1288        margin-top: 7px; 
     1289        padding: 3px 30px 3px 34px; 
    12861290        height: 18px; 
    12871291        background: #f1f1f1; 

  • skins/larry/svggradients.css

    rbe72a0f9 r77fad16  
    142142} 
    143143 
     144#messagelistfooter { 
     145        background-image: url(svggradient.php?c=ebebeb;c6c6c6); 
     146} 
    144147 
    145148/*** jqueryui theme ***/ 

  • skins/larry/templates/addressbook.html

    r4372e92 r77fad16  
    1313<div id="addressview-left"> 
    1414 
    15 <!-- search box --> 
    16 <div id="quicksearchbar"> 
    17 <roundcube:object name="searchform" id="quicksearchbox" /> 
    18 <roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> 
    19 <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> 
     15<!-- toolbar --> 
     16<div id="directorytoolbar" class="toolbar"> 
     17        <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" /> 
     18        <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" /> 
    2019</div> 
    2120 
    … …  
    3736<!-- toolbar --> 
    3837<div id="addressbooktoolbar" class="toolbar"> 
     38        <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> 
    3939        <roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" /> 
    40         <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> 
    41         <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" /> 
    42         <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" /> 
    4340        <roundcube:container name="toolbar" id="addressbooktoolbar" /> 
     41</div> 
     42 
     43<!-- search box --> 
     44<div id="quicksearchbar"> 
     45<roundcube:object name="searchform" id="quicksearchbox" /> 
     46<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> 
     47<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> 
    4448</div> 
    4549 

  • skins/larry/templates/mail.html

    r077befb r77fad16  
    66<style type="text/css"> 
    77<roundcube:if condition="config:preview_pane == true" /> 
    8         #mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-38 : 300" />px; } 
     8        #mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-45 : 300" />px; } 
    99        #mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 320" />px; height: auto; } 
    1010        #mailpreviewframe { display: block; } 
    … …  
    2020<div id="mailview-left"> 
    2121 
     22<!-- toolbar --> 
     23<div id="mailboxtoolbar" class="toolbar"> 
     24        <roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" /> 
     25        <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> 
     26</div> 
     27 
     28<!-- folders list --> 
     29<div id="folderlist-header"></div> 
     30<div id="mailboxcontainer" class="uibox listbox"> 
     31<div id="folderlist-content" class="scroller withfooter"> 
     32<roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" /> 
     33</div> 
     34<div id="folderlist-footer" class="boxfooter"> 
     35        <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" /> 
     36        <roundcube:if condition="env:quota" /> 
     37                <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> 
     38        <roundcube:endif /> 
     39</div> 
     40</div> 
     41 
     42</div> 
     43 
     44<div id="mailview-right"> 
     45 
     46<!-- toolbar --> 
     47<div id="messagetoolbar"> 
     48<roundcube:include file="/includes/mailtoolbar.html" /> 
     49</div> 
     50 
     51<div id="messagesearchtools"> 
     52 
     53<!-- search filter --> 
     54<div id="searchfilter"> 
     55        <roundcube:object name="searchfilter" class="searchfilter decorated" /> 
     56</div> 
     57 
    2258<!-- search box --> 
    2359<div id="quicksearchbar"> 
    … …  
    2763</div> 
    2864 
    29 <!-- folders list --> 
    30 <div id="folderlist-header"></div> 
    31 <div id="mailboxcontainer" class="uibox listbox"> 
    32 <div id="folderlist-content" class="scroller withfooter"> 
    33 <roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" /> 
    34 </div> 
    35 <div id="folderlist-footer" class="boxfooter"> 
    36         <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" /> 
    37         <roundcube:if condition="env:quota" /> 
    38                 <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> 
    39         <roundcube:endif /> 
    40 </div> 
    41 </div> 
    42  
    43 </div> 
    44  
    45 <div id="mailview-right"> 
    46  
    47 <!-- search filter --> 
    48 <div id="searchfilter"> 
    49         <roundcube:object name="searchfilter" class="searchfilter decorated" /> 
    50 </div> 
    51  
    52 <!-- toolbar --> 
    53 <div id="messagetoolbar"> 
    54 <roundcube:include file="/includes/mailtoolbar.html" /> 
    55 </div> 
    56  
    57 <div id="mailview-top"> 
     65</div> 
     66 
     67<roundcube:if condition="config:preview_pane == true" /> 
     68<div id="mailview-top" class="uibox"> 
     69<roundcube:else /> 
     70<div id="mailview-top" class="uibox fullheight"> 
     71<roundcube:endif /> 
    5872 
    5973<!-- messagelist --> 
    60 <div id="messagelistcontainer" class="uibox boxlistcontent"> 
     74<div id="messagelistcontainer" class="boxlistcontent"> 
    6175<roundcube:object name="messages" 
    6276        id="messagelist" 

  • skins/larry/ui.js

    r8ba01c0 r77fad16  
    109109 
    110110        mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', 
    111           orientation:'h', relative:true, start:310, min:150, size:0, offset:-18 }); 
     111          orientation:'h', relative:true, start:310, min:150, size:6, offset:-18 }); 
    112112        if (previewframe) 
    113113          mailviewsplit.init(); 
    … …  
    179179        title = $('option:selected', this).text(); 
    180180 
    181       var new_select = $('<a class="menuselector"><span class="handle">' + title + '</span></a>') 
     181      var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>') 
    182182        .css('position', 'absolute') 
    183183        .offset(select.position()) 
    184184        .insertAfter(select); 
    185185 
    186       new_select.children().width(width).height(height).css('line-height', (height - 1) + 'px'); 
     186      overlay.children().width(width).height(height).css('line-height', (height - 1) + 'px'); 
    187187 
    188188      select.change(function() { 
    189189          var val = $('option:selected', this).text(); 
    190190          $(this).next().children().html(val); 
    191         }) 
    192         .parent().css('position', 'relative'); 
     191        }); 
     192 
     193      var parent = select.parent(); 
     194      if (parent.css('position') != 'absolute') 
     195        parent.css('position', 'relative'); 
    193196 
    194197      // re-set original select width to fix click action and options width in some browsers 
    195       select.width(new_select.width()); 
     198      select.width(overlay.width()); 
    196199    }); 
    197200 
    … …  
    312315  function resize_leftcol(splitter) 
    313316  { 
    314     if (splitter) 
     317    if (0&&splitter) 
    315318      $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px'); 
    316319  } 
    … …  
    448451 
    449452    if (visible) { 
    450       $('#mailview-top').css({ bottom:'auto' }); 
     453      $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); 
    451454      $('#mailview-bottom').css({ height:'auto' }); 
    452455 
    … …  
    467470      rcmail.show_contentframe(false); 
    468471 
    469       $('#mailview-top').css({ height:'auto', bottom:'28px' }); 
     472      $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'28px' }); 
    470473      $('#mailview-bottom').css({ top:'auto', height:'26px' }); 
    471474 
Note: See TracChangeset for help on using the changeset viewer.