- Larry: scroller (#1485946)

alecpl

2012-03-08 efaf2e077ffd479230efce331beeaaf3049440f8

- Larry: scroller (#1485946)

 skins/larry/mail.css

@@ -50,6 +50,12 @@
    left: auto !important;
}

#folderlist-header {
    width: 100%;
    height: 12px;
    top: 32px;
}

#mailboxcontainer,
#messagelistcontainer {
    position: absolute;

 skins/larry/templates/addressbook.html

@@ -21,11 +21,11 @@

<!-- sources/groups list -->
<div id="directorylistbox" class="uibox listbox">
<h2 class="boxtitle"><roundcube:label name="groups" /></h2>
<div class="scroller withfooter">
<h2 id="directorylist-header" class="boxtitle"><roundcube:label name="groups" /></h2>
<div id="directorylist-content" class="scroller withfooter">
    <roundcube:object name="directorylist" id="directorylist" class="listing" />
</div>
<div class="boxfooter">
<div id="directorylist-footer" class="boxfooter">
    <roundcube:button command="group-create" type="link" title="newcontactgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('groupoptions');return false" innerClass="inner" content="&#9881;" />
</div>
</div>

 skins/larry/templates/folders.html

@@ -15,11 +15,11 @@
<div id="settings-right">

<div id="folderslist" class="uibox listbox">
<h2 class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2>
<div class="scroller withfooter">
<h2 id="folderslist-header" class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2>
<div id="folderslist-content" class="scroller withfooter">
<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" noheader="true" />
</div>
<div class="boxfooter">
<div id="folderslist-footer" class="boxfooter">
    <roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><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" display="text" />

 skins/larry/templates/mail.html

@@ -27,11 +27,12 @@
</div>

<!-- folders list -->
<div id="folderlist-header"></div>
<div id="mailboxcontainer" class="uibox listbox">
<div class="scroller withfooter">
<div id="folderlist-content" class="scroller withfooter">
<roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" />
</div>
<div class="boxfooter">
<div id="folderlist-footer" 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" display="text" />

 skins/larry/ui.js

@@ -112,6 +112,8 @@
        if (previewframe)
          mailviewsplit.init();

        new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer');

        rcmail.addEventListener('setquota', update_quota);
      }

@@ -135,6 +137,8 @@
        new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details',
          orientation:'v', relative:true, start:305, min:150, size:12 }).init();

        new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer');

        rcmail.addEventListener('setquota', update_quota);
      }
      else if (rcmail.env.action == 'identities') {
@@ -151,6 +155,8 @@
          orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init();
        new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
          orientation:'v', relative:true, start:296, min:220, size:12 }).init();

        new rcube_scroller('#directorylist-content', '#directorylist-header', '#directorylist-footer');
      }
    }
    /***  login page  ***/
@@ -837,6 +843,43 @@
}


/**
 * Roundcube Scroller class
 */
function rcube_scroller(list, top, bottom)
{
  var ref = this;

  this.list = $(list);
  this.top = $(top);
  this.bottom = $(bottom);
  this.step_size = 6;
  this.step_time = 20;
  this.delay = 500;

  this.top
    .mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); })
    .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });

  this.bottom
    .mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); })
    .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });

  this.scroll = function(dir)
  {
    var ref = this, size = this.step_size;

    if (!rcmail.drag_active)
      return;

    if (dir == 'down')
      size *= -1;

    this.list.get(0).scrollTop += size;
    this.ts = window.setTimeout(function() { ref.scroll(dir); }, this.step_time);
  };
};


/**
 * Roundcube UI splitter class
@@ -1067,4 +1110,3 @@
{
  return rcube_splitter._instances[id];
};