Add link to pop the address group stack; add animations when pushing/popping lists (in larry skin)

program/js/app.js

@@ -251,6 +251,7 @@ function rcube_webmail()
           }
         }
         else if (this.env.action == 'compose') {
+          this.env.address_group_stack = [];
           this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel', 'toggle-editor', 'list-adresses', 'pushgroup', 'search', 'reset-search', 'extwin'];
 
           if (this.env.drafts_mailbox)
@@ -318,13 +319,13 @@ function rcube_webmail()
         break;
 
       case 'addressbook':
+        this.env.address_group_stack = [];
+
         if (this.gui_objects.folderlist)
           this.env.contactfolders = $.extend($.extend({}, this.env.address_sources), this.env.contactgroups);
 
         this.enable_command('add', 'import', this.env.writable_source);
-        this.enable_command('list', 'listgroup', 'pushgroup', 'listsearch', 'advanced-search', true);
-
-        this.env.address_group_stack = [];
+        this.enable_command('list', 'listgroup', 'pushgroup', 'popgroup', 'listsearch', 'advanced-search', true);
 
         if (this.gui_objects.contactslist) {
           this.contact_list = new rcube_list_widget(this.gui_objects.contactslist,
@@ -1093,6 +1094,14 @@ function rcube_webmail()
         this.list_contacts(props.source, props.id);
         break;
 
+      case 'popgroup':
+        if (this.env.address_group_stack.length > 1) {
+          this.env.address_group_stack.pop();
+          this.reset_qsearch();
+          this.list_contacts(props.source, this.env.address_group_stack[this.env.address_group_stack.length-1]);
+        }
+        break;
+
       case 'import':
         if (this.env.action == 'import' && this.gui_objects.importform) {
           var file = document.getElementById('rcmimportfile');
@@ -4198,8 +4207,20 @@ function rcube_webmail()
 
   this.set_group_prop = function(prop)
   {
-    if (this.gui_objects.addresslist_title)
-      $(this.gui_objects.addresslist_title).html(prop.name);
+    if (this.gui_objects.addresslist_title) {
+      var boxtitle = $(this.gui_objects.addresslist_title).html('');  // clear contents
+
+      // add link to pop back to parent group
+      if (this.env.address_group_stack.length > 1) {
+        $('<a href="#list">...</a>')
+          .addClass('poplink')
+          .appendTo(boxtitle)
+          .click(function(e){ return ref.command('popgroup','',this); });
+        boxtitle.append('&nbsp;&raquo;&nbsp;');
+      }
+
+      boxtitle.append($('<span>'+prop.name+'</span>'));
+    }
 
     this.triggerEvent('groupupdate', prop);
   };

program/steps/addressbook/func.inc

@@ -372,6 +372,8 @@ function rcmail_js_contacts_list($result, $prefix='')
                             'onclick' => sprintf("return %s.command('pushgroup',{'source':'%s','id':'%s'},this,event)", JS_OBJECT_NAME, $source_id, $row['CID']),
                         ), '»');
                     }
+                    else
+                        $val = ' ';
                     break;
 
                 default:

skins/larry/addressbook.css

@@ -175,6 +175,13 @@
 	text-overflow: ellipsis;
 }
 
+#addresslist .boxtitle a.poplink {
+	color: #004458;
+	font-size: 14px;
+	line-height: 12px;
+	text-decoration: none;
+}
+
 #contact-frame {
 	position: absolute;
 	top: 0;

skins/larry/styles.css

@@ -995,6 +995,10 @@ table.listing tr.droptarget td {
 	background-color: #e8e798;
 }
 
+.listbox table.listing {
+	background-color: #d9ecf4;
+}
+
 table.listing,
 table.layout {
 	border: 0;

skins/larry/ui.js

@@ -175,6 +175,8 @@ function rcube_mail_ui()
     /***  addressbook task  ***/
     else if (rcmail.env.task == 'addressbook') {
       rcmail.addEventListener('afterupload-photo', show_uploadform);
+      rcmail.addEventListener('beforepushgroup', push_contactgroup);
+      rcmail.addEventListener('beforepopgroup', pop_contactgroup);
 
       if (rcmail.env.action == '') {
         new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
@@ -745,6 +747,35 @@ function rcube_mail_ui()
     });
   }
 
+  function push_contactgroup(p)
+  {
+    // lets the contacts list swipe to the left, nice!
+    var table = $('#contacts-table'),
+      scroller = table.parent().css('overflow', 'hidden');
+
+    table.clone()
+      .css({ position:'absolute', top:'0', left:'0', width:table.width()+'px', 'z-index':10 })
+      .appendTo(scroller)
+      .animate({ left: -(table.width()+5) + 'px' }, 300, 'swing', function(){
+        $(this).remove();
+        scroller.css('overflow', 'auto')
+      });
+  }
+
+  function pop_contactgroup(p)
+  {
+    // lets the contacts list swipe to the left, nice!
+    var table = $('#contacts-table'),
+      scroller = table.parent().css('overflow', 'hidden'),
+      clone = table.clone().appendTo(scroller);
+
+      table.css({ position:'absolute', top:'0', left:-(table.width()+5) + 'px', width:table.width()+'px', height:table.height()+'px', 'z-index':10 })
+        .animate({ left:'0' }, 300, 'linear', function(){
+        clone.remove();
+        $(this).css({ position:'relative', left:'0', width:'100%', height:'auto', 'z-index':1 });
+        scroller.css('overflow', 'auto')
+      });
+  }
 
   function show_uploadform()
   {
@@ -755,7 +786,7 @@ function rcube_mail_ui()
       $dialog.dialog('close');
       return;
     }
-    
+
     // add icons to clone file input field
     if (rcmail.env.action == 'compose' && !$dialog.data('extended')) {
       $('<a>')