Add link to pop the address group stack; add animations when pushing/poppin...

Thomas Bruederli

2013-02-07 de98a897f618c4d251a4d3a5e3d2e4f2bb9a441b

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 @@
          }
        }
        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 @@
        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,
@@ -1091,6 +1092,14 @@
      case 'listgroup':
        this.reset_qsearch();
        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':
@@ -4198,8 +4207,20 @@

  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 @@
                            'onclick' => sprintf("return %s.command('pushgroup',{'source':'%s','id':'%s'},this,event)", JS_OBJECT_NAME, $source_id, $row['CID']),
                        ), '&raquo;');
                    }
                    else
                        $val = '&nbsp;';
                    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/images/listicons.png

 skins/larry/styles.css

@@ -995,6 +995,10 @@
    background-color: #e8e798;
}

.listbox table.listing {
    background-color: #d9ecf4;
}

table.listing,
table.layout {
    border: 0;

 skins/larry/ui.js

@@ -175,6 +175,8 @@
    /***  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 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 @@
      $dialog.dialog('close');
      return;
    }
    

    // add icons to clone file input field
    if (rcmail.env.action == 'compose' && !$dialog.data('extended')) {
      $('<a>')