From efaf2e077ffd479230efce331beeaaf3049440f8 Mon Sep 17 00:00:00 2001 From: alecpl <alec@alec.pl> Date: Thu, 08 Mar 2012 07:27:11 -0500 Subject: [PATCH] - Larry: scroller (#1485946) --- skins/larry/templates/mail.html | 5 +- skins/larry/templates/addressbook.html | 6 +- skins/larry/templates/folders.html | 6 +- skins/larry/mail.css | 6 +++ skins/larry/ui.js | 44 +++++++++++++++++++++ 5 files changed, 58 insertions(+), 9 deletions(-) diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 8737a42..a9deea6 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -50,6 +50,12 @@ left: auto !important; } +#folderlist-header { + width: 100%; + height: 12px; + top: 32px; +} + #mailboxcontainer, #messagelistcontainer { position: absolute; diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 94d326a..522f321 100644 --- a/skins/larry/templates/addressbook.html +++ b/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="⚙" /> </div> </div> diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index 54616be..ab4e46c 100644 --- a/skins/larry/templates/folders.html +++ b/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="⚙" /> <roundcube:if condition="env:quota" /> <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index ca4ea4b..c915c94 100644 --- a/skins/larry/templates/mail.html +++ b/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="⚙" /> <roundcube:if condition="env:quota" /> <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 480e171..d6f945a 100644 --- a/skins/larry/ui.js +++ b/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]; }; - -- Gitblit v1.9.1