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

5 files changed, 191 insertions, 105 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');
 }
 
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 138fad772..6e90ea66f 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -79,6 +79,25 @@
 	overflow: auto;
 }
 
+/* Real browsers accept this (not IE) */
+html>/**/body #messagelist>tbody {
+	overflow: auto;
+	overflow-x: hidden;
+}
+/*
+#messagelistcontainer::-webkit-scrollbar {
+	-webkit-appearance: none;
+	width: 14px;
+	border-left: 1px solid #e4e4e4;
+	background: #fafafa;
+}
+#messagelistcontainer::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	border: 3px solid #f2f2f2;
+	background-color: #c2c2c2;
+	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+*/
 #messagelistfooter {
 	position: absolute;
 	bottom: 0;
@@ -447,141 +466,146 @@ a.iconbutton.threadmode.selected {
 
 /*** message list ***/
 
-#messagelist thead td:first-child {
+/* this is necessary to make FF3 display borders */
+body:-moz-last-node #messagelist {
+	border-collapse: separate;
+}
+
+.messagelist thead td:first-child {
 	border-radius: 4px 0 0 0; /* for Chrome */
 }
 
-#messagelist tr td.attachment,
-#messagelist tr td.threads,
-#messagelist tr td.status,
-#messagelist tr td.flag,
-#messagelist tr td.priority {
+.messagelist tr td.attachment,
+.messagelist tr td.threads,
+.messagelist tr td.status,
+.messagelist tr td.flag,
+.messagelist tr td.priority {
 	width: 20px;
 	padding: 2px 3px;
 }
 
-.webkit #messagelist tr td.attachment,
-.webkit #messagelist tr td.threads,
-.webkit #messagelist tr td.status,
-.webkit #messagelist tr td.flag,
-.webkit #messagelist tr td.priority {
+.webkit .messagelist tr td.attachment,
+.webkit .messagelist tr td.threads,
+.webkit .messagelist tr td.status,
+.webkit .messagelist tr td.flag,
+.webkit .messagelist tr td.priority {
 	width: 26px;
 }
 
-#messagelist tr td.threads {
+.messagelist tr td.threads {
 	width: 26px;
 }
 
-.webkit #messagelist tr td.threads {
+.webkit .messagelist tr td.threads {
 	width: 30px;
 }
 
-#messagelist tr td.threads,
-#messagelist tr td.threads + td {
+.messagelist tr td.threads,
+.messagelist tr td.threads + td {
 	border-left: 0;
 }
 
-#messagelist tr td.size {
+.messagelist tr td.size {
 	width: 60px;
 	text-align: right;
 }
 
-#messagelist thead tr td.size {
+.messagelist thead tr td.size {
 	text-align: left;
 }
 
-#messagelist tr td.fromto,
-#messagelist tr td.from,
-#messagelist tr td.to,
-#messagelist tr td.cc,
-#messagelist tr td.replyto {
+.messagelist tr td.fromto,
+.messagelist tr td.from,
+.messagelist tr td.to,
+.messagelist tr td.cc,
+.messagelist tr td.replyto {
 	width: 200px;
 }
 
-#messagelist tr td.date {
+.messagelist tr td.date {
 	width: 135px;
 }
 
-#messagelist tr.message {
+.messagelist tr.message {
 /*	background-color: #fff; */
 }
 
-#messagelist tr.thread.expanded td {
+.messagelist tr.thread.expanded td {
 	background-color: #ededed;
 }
 
-#messagelist tr.unread {
+.messagelist tr.unread {
 	font-weight: bold;
 /*	background-color: #fff; */
 }
 
-#messagelist tr.flagged td,
-#messagelist tr.flagged td a {
+.messagelist tr.flagged td,
+.messagelist tr.flagged td a {
 	color: #f30;
 }
 
-#messagelist thead tr td.sortedASC a,
-#messagelist thead tr td.sortedDESC a {
+.messagelist thead tr td.sortedASC a,
+.messagelist thead tr td.sortedDESC a {
 	color: #004458;
 	text-decoration: underline;
 	background: url(images/listicons.png) right -912px no-repeat;
 }
 
-#messagelist thead tr td.sortedASC a {
+.messagelist thead tr td.sortedASC a {
 	background-position: right -944px;
 }
 
-#messagelist td img {
+.messagelist td img {
 	vertical-align: middle;
 	display: inline-block;
 }
 
-#messagelist tbody td a {
+.messagelist tbody td a {
 	color: #333;
 	text-decoration: none;
 	white-space: nowrap;
 	cursor: default;
 }
 
-#messagelist tbody tr td.flag,
-#messagelist tbody tr td.status,
-#messagelist tbody tr td.subject span.status {
+.messagelist tbody tr td.flag,
+.messagelist tbody tr td.status,
+.messagelist tbody tr td.subject span.status {
 	cursor: pointer;
 }
 
-#messagelist tr td.flag span,
-#messagelist tr td.status span,
-#messagelist tr td.attachment span,
-#messagelist tr td.priority span {
+.messagelist tr td.flag span,
+.messagelist tr td.status span,
+.messagelist tr td.attachment span,
+.messagelist tr td.priority span {
 	display: block;
 	width: 20px;
 }
 
-#messagelist tr td div.collapsed,
-#messagelist tr td div.expanded,
-#messagelist tr td.threads div.listmenu,
-#messagelist tr td.attachment span.attachment,
-#messagelist tr td.attachment span.report,
-#messagelist tr td.priority span.priority,
-#messagelist tr td.priority span.prio1,
-#messagelist tr td.priority span.prio2,
-#messagelist tr td.priority span.prio3,
-#messagelist tr td.priority span.prio4,
-#messagelist tr td.priority span.prio5,
-#messagelist tr td.flag span.flagged,
-#messagelist tr td.flag span.unflagged,
-#messagelist tr td.flag span.unflagged:hover,
-#messagelist tr td.status span.status,
-#messagelist tr td.status span.msgicon,
-#messagelist tr td.status span.deleted,
-#messagelist tr td.status span.unread,
-#messagelist tr td.status span.unreadchildren,
-#messagelist tr td.subject span.msgicon,
-#messagelist tr td.subject span.deleted,
-#messagelist tr td.subject span.unread,
-#messagelist tr td.subject span.replied,
-#messagelist tr td.subject span.forwarded,
-#messagelist tr td.subject span.unreadchildren {
+.messagelist tr td div.collapsed,
+.messagelist tr td div.expanded,
+.messagelist tr td.threads div.listmenu,
+.messagelist tr td.attachment span.attachment,
+.messagelist tr td.attachment span.report,
+.messagelist tr td.priority span.priority,
+.messagelist tr td.priority span.prio1,
+.messagelist tr td.priority span.prio2,
+.messagelist tr td.priority span.prio3,
+.messagelist tr td.priority span.prio4,
+.messagelist tr td.priority span.prio5,
+.messagelist tr td.flag span.flagged,
+.messagelist tr td.flag span.unflagged,
+.messagelist tr td.flag span.unflagged:hover,
+.messagelist tr td.status span.status,
+.messagelist tr td.status span.msgicon,
+.messagelist tr td.status span.deleted,
+.messagelist tr td.status span.unread,
+.messagelist tr td.status span.unreadchildren,
+.messagelist tr td.subject span.msgicon,
+.messagelist tr td.subject span.deleted,
+.messagelist tr td.subject span.unread,
+.messagelist tr td.subject span.replied,
+.messagelist tr td.subject span.forwarded,
+.messagelist tr td.subject span.unreadchildren {
 	display: inline-block;
 	vertical-align: middle;
 	height: 18px;
@@ -590,135 +614,135 @@ a.iconbutton.threadmode.selected {
 	background: url(images/listicons.png) -100px 0 no-repeat;
 }
 
-#messagelist tbody tr td.attachment span.attachment {
+.messagelist tbody tr td.attachment span.attachment {
 	background-position: 0 -996px;
 }
 
-#messagelist thead tr td.attachment span.attachment {
+.messagelist thead tr td.attachment span.attachment {
 	background-position: -24px -997px;
 }
 
-#messagelist tbody tr td.attachment span.report {
+.messagelist tbody tr td.attachment span.report {
 	background-position: -24px -1116px;
 }
 
-#messagelist tr td.priority span.prio5 {
+.messagelist tr td.priority span.prio5 {
 	background-position: 0 -1905px;
 }
 
-#messagelist tr td.priority span.prio4 {
+.messagelist tr td.priority span.prio4 {
 	background-position: 0 -1885px;
 }
 
-#messagelist tr td.priority span.prio2 {
+.messagelist tr td.priority span.prio2 {
 	background-position: 0 -1865px;
 }
 
-#messagelist tr td.priority span.prio1 {
+.messagelist tr td.priority span.prio1 {
 	background-position: 0 -1845px;
 }
 
-#messagelist tbody tr td.flag span.flagged {
+.messagelist tbody tr td.flag span.flagged {
 	background-position: 0 -1036px;
 }
 
-#messagelist thead tr td.flag span.flagged {
+.messagelist thead tr td.flag span.flagged {
 	background-position: -24px -1036px;
 }
 
-#messagelist tr td.status span.msgicon:hover {
+.messagelist tr td.status span.msgicon:hover {
 	background-position: -23px -1056px;
 }
 
-#messagelist tr td.flag span.unflagged:hover {
+.messagelist tr td.flag span.unflagged:hover {
 	background-position: -23px -1076px;
 }
 
-#messagelist tr td.subject span.msgicon,
-#messagelist tr td.subject span.unreadchildren {
+.messagelist tr td.subject span.msgicon,
+.messagelist tr td.subject span.unreadchildren {
 	background-position: 0 -1056px;
 	margin: 0 1px 0 0;
 	width: 24px;
 }
 
-#messagelist tr td.subject span.replied {
+.messagelist tr td.subject span.replied {
 	background-position: 0 -1076px;
 }
 
-#messagelist tr td.subject span.forwarded {
+.messagelist tr td.subject span.forwarded {
 	background-position: 0 -1096px;
 }
 
-#messagelist tr td.subject span.replied.forwarded {
+.messagelist tr td.subject span.replied.forwarded {
 	background-position: 0 -1116px;
 }
 
-#messagelist tr td.status span.msgicon,
-#messagelist tr td.flag span.unflagged,
-#messagelist tr td.status span.unreadchildren {
+.messagelist tr td.status span.msgicon,
+.messagelist tr td.flag span.unflagged,
+.messagelist tr td.status span.unreadchildren {
 	background-position: 0 1056px; /* no icon */
 }
 /*
-#messagelist tr td.status span.msgicon:hover {
+.messagelist tr td.status span.msgicon:hover {
 	background-position: 0 -272px;
 }
 */
-#messagelist tr td.status span.deleted,
-#messagelist tr td.status span.deleted:hover,
-#messagelist tr td.subject span.deleted {
+.messagelist tr td.status span.deleted,
+.messagelist tr td.status span.deleted:hover,
+.messagelist tr td.subject span.deleted {
 	background-position: -22px -1096px;
 }
 
-#messagelist tr td.status span.status,
-#messagelist tr td.status span.unread,
-#messagelist tr td.subject span.unread,
-#messagelist tr td.status span.unread:hover {
+.messagelist tr td.status span.status,
+.messagelist tr td.status span.unread,
+.messagelist tr td.subject span.unread,
+.messagelist tr td.status span.unread:hover {
 	background-position: 0 -1016px;
 }
 
-#messagelist thead tr td.status span.status {
+.messagelist thead tr td.status span.status {
 	background-position: -24px -1016px;
 }
 
-#messagelist tr td div.collapsed {
+.messagelist tr td div.collapsed {
 	background-position: 0 -1137px;
 	cursor: pointer;
 }
 
-#messagelist tr td div.expanded {
+.messagelist tr td div.expanded {
 	background-position: 0 -1157px;
 	cursor: pointer;
 }
 
-#messagelist tr td.threads div.listmenu {
+.messagelist tr td.threads div.listmenu {
 	background-position: 0 -976px;
 	cursor: pointer;
 	width: 26px;
 }
 
-#messagelist thead tr td.subject,
-#messagelist tbody tr td.subject {
+.messagelist thead tr td.subject,
+.messagelist tbody tr td.subject {
 	width: 99%;
 	white-space: nowrap;
 }
 
-#messagelist tbody tr td.subject a {
+.messagelist tbody tr td.subject a {
 	cursor: default;
 	vertical-align: middle; /* #1487091 */
 }
 
 /* thread parent message with unread children */
-#messagelist tbody tr.unroot td.subject a {
+.messagelist tbody tr.unroot td.subject a {
 	text-decoration: underline;
 }
 
 /**** tree indicators ****/
 
-#messagelist tbody tr td span.branch div {
+.messagelist tbody tr td span.branch div {
 	display: inline-block;
 }
 
-#messagelist tbody tr td span.branch div.tree {
+.messagelist tbody tr td span.branch div.tree {
 	width: 15px;
 }
 
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 6b6ffd7ae..6015054d3 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -70,7 +70,7 @@
 <div id="messagelistcontainer" class="boxlistcontent">
 <roundcube:object name="messages"
 	id="messagelist"
-	class="records-table sortheader"
+	class="records-table messagelist sortheader fixedheader"
 	optionsmenuIcon="true" />
 </div>
 
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 19f05cca4..e5733bd23 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -600,8 +600,11 @@ function rcube_mail_ui()
         mailviewsplit.handle.hide();
     }
 
-    if (visible && uid && rcmail.message_list)
-      rcmail.message_list.scrollto(uid);
+    if (rcmail.message_list) {
+      if (visible && uid)
+          rcmail.message_list.scrollto(uid);
+      rcmail.message_list.resize();
+    }
 
     rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) });
   }