Changeset 5986 in subversion

Timestamp:

Mar 8, 2012 7:27:11 AM (15 months ago)

Author:

alec

Message:

• Larry: scroller (#1485946)

Location:

trunk/roundcubemail/skins/larry

Files:

• mail.css (modified) (1 diff)
• templates/addressbook.html (modified) (1 diff)
• templates/folders.html (modified) (1 diff)
• templates/mail.html (modified) (1 diff)
• ui.js (modified) (5 diffs)

trunk/roundcubemail/skins/larry/mail.css

@@ -49 +49 @@
         width: 30px;
         left: auto !important;
+}
+
+#folderlist-header {
+        width: 100%;
+        height: 12px;
+        top: 32px;
 }
 

trunk/roundcubemail/skins/larry/templates/addressbook.html

@@ -22 +22 @@
 <!-- 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>

trunk/roundcubemail/skins/larry/templates/folders.html

@@ -16 +16 @@
 
 <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" />

trunk/roundcubemail/skins/larry/templates/mail.html

@@ -28 +28 @@
 
 <!-- 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" />

trunk/roundcubemail/skins/larry/ui.js

@@ -113 +113 @@
           mailviewsplit.init();
 
+        new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer');
+
         rcmail.addEventListener('setquota', update_quota);
       }
@@ -136 +138 @@
           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);
       }
@@ -152 +156 @@
         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');
       }
     }
@@ -837 +843 @@
 }
 
+
+/**
+ * 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);
+  };
+};
 
 
@@ -1068 +1111 @@
   return rcube_splitter._instances[id];
 };
-