Complete Larry's mail view with selection menus and quota display

thomascube

2011-12-26 847d31060967760f009485dbb80cd588669e21bf

Complete Larry's mail view with selection menus and quota display

 skins/larry/images/listicons.png

 skins/larry/images/quota.png

 skins/larry/images/selector.png

 skins/larry/mail.css

@@ -82,7 +82,8 @@
    display: inline-block;
}

#messagelistfooter #listcontrols {
#messagelistfooter #listcontrols,
#messagelistfooter #listselectors {
    display: inline-block;
    margin-right: 2em;
}
@@ -127,51 +128,51 @@
    background-position: 6px -21px;
}

#mailboxlist li.inbox > a {
#mailboxlist li.mailbox.inbox > a {
    background-position: 6px -189px;
}

#mailboxlist li.inbox.selected > a {
#mailboxlist li.mailbox.inbox.selected > a {
    background-position: 6px -213px;
}

#mailboxlist li.drafts > a {
#mailboxlist li.mailbox.drafts > a {
    background-position: 6px -238px;
}

#mailboxlist li.drafts.selected > a {
#mailboxlist li.mailbox.drafts.selected > a {
    background-position: 6px -262px;
}

#mailboxlist li.sent > a {
#mailboxlist li.mailbox.sent > a {
    background-position: 6px -286px;
}

#mailboxlist li.sent.selected > a {
#mailboxlist li.mailbox.sent.selected > a {
    background-position: 6px -310px;
}

#mailboxlist li.junk > a {
#mailboxlist li.mailbox.junk > a {
    background-position: 6px -334px;
}

#mailboxlist li.junk.selected > a {
#mailboxlist li.mailbox.junk.selected > a {
    background-position: 6px -358px;
}

#mailboxlist li.trash > a {
#mailboxlist li.mailbox.trash > a {
    background-position: 6px -382px;
}

#mailboxlist li.trash.selected > a {
#mailboxlist li.mailbox.trash.selected > a {
    background-position: 6px -406px;
}

#mailboxlist li.archive > a {
#mailboxlist li.mailbox.archive > a {
    background-position: 6px -1699px;
}

#mailboxlist li.archive.selected > a {
#mailboxlist li.mailbox.archive.selected > a {
    background-position: 6px -1723px;
}

@@ -225,8 +226,8 @@
    position: absolute;
    top: 4px;
    right: 6px;
    width: 2.8em;
    padding: 2px;
    min-width: 1.8em;
    padding: 2px 4px;
    background: #82acb5;
    background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
@@ -868,6 +869,15 @@
    border: 0;
}

#quotadisplay {
    left: 6px;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px 1px 1px #fff;
    padding-left: 30px;
    height: 18px;
    background: url(images/quota.png) -100px 0 no-repeat;
}

/*** message composition ***/


 skins/larry/styles.css

@@ -61,6 +61,10 @@
    color: #aaa;
}

select.selector {
    padding: 2px 4px;
}


/*** buttons ***/

@@ -304,9 +308,9 @@

.pagenav .countdisplay {
    display: inline-block;
    padding:0 0.5em;
    padding:0 1em;
    text-shadow: 0px 1px 1px #fff;
    min-width: 20em;
    min-width: 16em;
}

a.iconbutton {
@@ -1295,6 +1299,38 @@
    background-position: center -1050px;
}

a.menuselector {
    display: inline-block;
    border: 1px solid #ababab;
    border-radius: 4px;
    background: #f8f8f8;
    background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
    background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%, #dddddd 100%);
    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    text-decoration: none;
    color: #333;
}

a.menuselector .handle {
    display: inline-block;
    padding: 3px 32px 4px 8px;
    text-shadow: 0px 1px 1px #fff;
    background: url(images/selector.png) right center no-repeat;
    border-radius: 4px;
}

a.menuselector:active {
    background: #dddddd;
    background: -moz-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f8f8f8));
    background: -o-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
    background: -ms-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
    background: linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
    text-decoration: none;
}


/*** popup menus ***/

@@ -1313,6 +1349,11 @@
    -moz-box-shadow: 0 2px 6px 0 #333;
    -webkit-box-shadow: 0 2px 6px 0 #333;
    -o-box-shadow: 0 2px 6px 0 #333;
}

.popupmenu.dropdown {
    border-radius: 0 0 4px 4px;
    border-top: 0;
}

ul.toolbarmenu,
@@ -1416,6 +1457,22 @@
    background-position: 0 -1268px;
}

ul.toolbarmenu li span.mail {
    background-position: 0 -1293px;
}

ul.toolbarmenu li span.list {
    background-position: 0 -1317px;
}

ul.toolbarmenu li span.invert {
    background-position: 0 -1340px;
}

ul.toolbarmenu li span.cross {
    background-position: 0 -1365px;
}

ul.toolbarmenu li span.print {
    background-position: 0 -1436px;
}
@@ -1436,6 +1493,10 @@
    background-position: 0 -1484px;
}

ul.toolbarmenu li span.conversation {
    background-position: 0 -1532px;
}

#rcmKSearchpane {
    border-radius: 0 0 4px 4px;
    border-top: 0;

 skins/larry/templates/mail.html

@@ -34,6 +34,9 @@
</div>
<div class="boxfooter">
    <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" />
    <roundcube:if condition="env:quota" />
        <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" />
    <roundcube:endif />
</div>
</div>

@@ -43,7 +46,7 @@

<!-- search filter -->
<div id="searchfilter">
    <roundcube:object name="searchfilter" class="searchfilter" />
    <roundcube:object name="searchfilter" class="searchfilter selector" />
</div>

<!-- toolbar -->
@@ -70,6 +73,13 @@
        <roundcube:else />
            <a href="#list" class="iconbutton listmode selected" title="<roundcube:label name='list' />" onclick="return false">List</a>
            <a href="#threads" class="iconbutton threadmode disabled" title="<roundcube:label name='threads' />" onclick="return false">Threads</a>
        <roundcube:endif />
    </div>
	
    <div id="listselectors">
    <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.show_popup('listselectmenu');return false"><span class="handle"><roundcube:label name="select" /></span></a>
    <roundcube:if condition="env:threads" />
        &nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.show_popup('threadselectmenu');return false"><span class="handle"><roundcube:label name="threads" /></span></a>
        <roundcube:endif />
    </div>

@@ -127,6 +137,25 @@
    </ul>
</div>

<div id="listselectmenu" class="popupmenu dropdown">
    <ul class="toolbarmenu iconized">
        <li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
        <li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
        <li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
        <li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
        <li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
        <li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
    </ul>
</div>

<div id="threadselectmenu" class="popupmenu dropdown">
    <ul class="toolbarmenu">
        <li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
        <li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
        <li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
    </ul>
</div>

<div id="listoptions" class="propform popupdialog">
<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
    <fieldset class="floating">

 skins/larry/ui.js

@@ -96,6 +96,8 @@
            orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 });
          if (previewframe)
            mailviewsplit.init();

          rcmail.addEventListener('setquota', update_quota);
      }
      
      if ($('#mailview-left').length) {
@@ -227,6 +229,13 @@
  }


  function update_quota(p)
  {
    var y = p.total ? Math.ceil(p.percent / 100 * 20) * 24 : 0;
    $('#quotadisplay').css('background-position', '0 -'+y+'px');
  }


  /**
   * Trigger for popup menus
   */