Finally: make message list header stay on top when scrolling (#1295420)

2 files changed, 59 insertions, 0 deletions

diff --git a/program/js/app.js b/program/js/app.js
index 04fb9cdb4..45a17d640 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -6437,6 +6437,7 @@ function rcube_webmail()
 
           if ((response.action == 'list' || response.action == 'search') && this.message_list) {
             this.msglist_select(this.message_list);
+            this.message_list.resize();
             this.triggerEvent('listupdate', { folder:this.env.mailbox, rowcount:this.message_list.rowcount });
           }
         }
@@ -6447,6 +6448,7 @@ function rcube_webmail()
             this.enable_command('search-create', this.env.source == '');
             this.enable_command('search-delete', this.env.search_id);
             this.update_group_commands();
+            this.contact_list.resize();
             this.triggerEvent('listupdate', { folder:this.env.source, rowcount:this.contact_list.rowcount });
           }
         }
diff --git a/program/js/list.js b/program/js/list.js
index 8b8a7196e..e8f72107c 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -33,6 +33,7 @@ function rcube_list_widget(list, p)
   this.tagname = this.list ? this.list.nodeName.toLowerCase() : 'table';
   this.thead;
   this.tbody;
+  this.fixed_header;
   this.frame = null;
   this.rows = [];
   this.selection = [];
@@ -152,6 +153,14 @@ init_header: function()
   if (this.thead) {
     this.colcount = 0;
 
+    if (this.fixed_header) {  // copy (modified) fixed header back to the actual table
+      $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone());
+      $(this.list.tHead).find('tr td').attr('style', '');  // remove fixed widths
+    }
+    else if (!bw.ie7 && this.list.className.indexOf('fixedheader') >= 0) {
+      this.init_fixed_header();
+    }
+
     var col, r, p = this;
     // add events for list columns moving
     if (this.column_movable && this.thead && this.thead.rows) {
@@ -166,6 +175,47 @@ init_header: function()
   }
 },
 
+init_fixed_header: function()
+{
+  var clone = $(this.list.tHead).clone();
+
+  if (!this.fixed_header) {
+    this.fixed_header = $('<table>')
+      .attr('class', this.list.className)
+      .css({ position:'fixed' })
+      .append(clone)
+      .append('<tbody></tbody>');
+    $(this.list).before(this.fixed_header);
+
+    var me = this;
+    $(window).resize(function(){ me.resize() });
+  }
+  else {
+    $(this.fixed_header).find('thead').replaceWith(clone);
+  }
+
+  this.thead = clone.get(0);
+  this.resize();
+},
+
+resize: function()
+{
+    if (!this.fixed_header)
+      return;
+
+    var column_widths = [];
+
+    // get column widths from original thead
+    $(this.tbody).parent().find('thead tr td').each(function(index) {
+      column_widths[index] = $(this).width();
+    });
+
+    // apply fixed widths to fixed table header
+    $(this.thead).parent().width($(this.tbody).parent().width());
+    $(this.thead).find('tr td').each(function(index) {
+      $(this).css('width', column_widths[index]);
+    });
+},
 
 /**
  * Remove all list rows
@@ -494,6 +544,7 @@ collapse: function(row)
     new_row = new_row.nextSibling;
   }
 
+  this.resize();
   this.triggerEvent('listupdate');
   return false;
 },
@@ -542,6 +593,7 @@ expand: function(row)
     new_row = new_row.nextSibling;
   }
 
+  this.resize();
   this.triggerEvent('listupdate');
   return false;
 },
@@ -585,6 +637,7 @@ collapse_all: function(row)
     new_row = new_row.nextSibling;
   }
 
+  this.resize();
   this.triggerEvent('listupdate');
   return false;
 },
@@ -623,6 +676,7 @@ expand_all: function(row)
     new_row = new_row.nextSibling;
   }
 
+  this.resize();
   this.triggerEvent('listupdate');
   return false;
 },
@@ -1531,6 +1585,9 @@ column_replace: function(from, to)
   else if (this.subject_col > from && to >= this.subject_col)
     this.subject_col--;
 
+  if (this.fixed_header)
+    this.init_header();
+
   this.triggerEvent('column_replace');
 }