banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
pull/89/head
Thomas Bruederli 12 years ago
parent 95a18fa549
commit 73ad4f1bfd
5 changed files with 191 additions and 105 deletions
Show Stats Download Patch File Download Diff File

2
program/js/app.js
Unescape Escape View File

@ -6437,6 +6437,7 @@ function rcube_webmail()
if ((response.action == 'list' || response.action == 'search') && this.message_list) { if ((response.action == 'list' || response.action == 'search') && this.message_list) {
this.msglist_select(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 }); 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-create', this.env.source == '');
this.enable_command('search-delete', this.env.search_id); this.enable_command('search-delete', this.env.search_id);
this.update_group_commands(); this.update_group_commands();
this.contact_list.resize();
this.triggerEvent('listupdate', { folder:this.env.source, rowcount:this.contact_list.rowcount }); this.triggerEvent('listupdate', { folder:this.env.source, rowcount:this.contact_list.rowcount });
} }
} }

57
program/js/list.js
Unescape Escape View File

@ -33,6 +33,7 @@ function rcube_list_widget(list, p)
this.tagname = this.list ? this.list.nodeName.toLowerCase() : 'table'; this.tagname = this.list ? this.list.nodeName.toLowerCase() : 'table';
this.thead; this.thead;
this.tbody; this.tbody;
this.fixed_header;
this.frame = null; this.frame = null;
this.rows = []; this.rows = [];
this.selection = []; this.selection = [];
@ -152,6 +153,14 @@ init_header: function()
if (this.thead) { if (this.thead) {
this.colcount = 0; 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; var col, r, p = this;
// add events for list columns moving // add events for list columns moving
if (this.column_movable && this.thead && this.thead.rows) { 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 * Remove all list rows
@ -494,6 +544,7 @@ collapse: function(row)
new_row = new_row.nextSibling; new_row = new_row.nextSibling;
} }
this.resize();
this.triggerEvent('listupdate'); this.triggerEvent('listupdate');
return false; return false;
}, },
@ -542,6 +593,7 @@ expand: function(row)
new_row = new_row.nextSibling; new_row = new_row.nextSibling;
} }
this.resize();
this.triggerEvent('listupdate'); this.triggerEvent('listupdate');
return false; return false;
}, },
@ -585,6 +637,7 @@ collapse_all: function(row)
new_row = new_row.nextSibling; new_row = new_row.nextSibling;
} }
this.resize();
this.triggerEvent('listupdate'); this.triggerEvent('listupdate');
return false; return false;
}, },
@ -623,6 +676,7 @@ expand_all: function(row)
new_row = new_row.nextSibling; new_row = new_row.nextSibling;
} }
this.resize();
this.triggerEvent('listupdate'); this.triggerEvent('listupdate');
return false; return false;
}, },
@ -1531,6 +1585,9 @@ column_replace: function(from, to)
else if (this.subject_col > from && to >= this.subject_col) else if (this.subject_col > from && to >= this.subject_col)
this.subject_col--; this.subject_col--;
if (this.fixed_header)
this.init_header();
this.triggerEvent('column_replace'); this.triggerEvent('column_replace');
} }

228
skins/larry/mail.css
Unescape Escape View File

@ -79,6 +79,25 @@
overflow: auto; 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 { #messagelistfooter {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -447,141 +466,146 @@ a.iconbutton.threadmode.selected {
/*** message list ***/ /*** 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 */ border-radius: 4px 0 0 0; /* for Chrome */
} }
#messagelist tr td.attachment, .messagelist tr td.attachment,
#messagelist tr td.threads, .messagelist tr td.threads,
#messagelist tr td.status, .messagelist tr td.status,
#messagelist tr td.flag, .messagelist tr td.flag,
#messagelist tr td.priority { .messagelist tr td.priority {
width: 20px; width: 20px;
padding: 2px 3px; padding: 2px 3px;
} }
.webkit #messagelist tr td.attachment, .webkit .messagelist tr td.attachment,
.webkit #messagelist tr td.threads, .webkit .messagelist tr td.threads,
.webkit #messagelist tr td.status, .webkit .messagelist tr td.status,
.webkit #messagelist tr td.flag, .webkit .messagelist tr td.flag,
.webkit #messagelist tr td.priority { .webkit .messagelist tr td.priority {
width: 26px; width: 26px;
} }
#messagelist tr td.threads { .messagelist tr td.threads {
width: 26px; width: 26px;
} }
.webkit #messagelist tr td.threads { .webkit .messagelist tr td.threads {
width: 30px; width: 30px;
} }
#messagelist tr td.threads, .messagelist tr td.threads,
#messagelist tr td.threads + td { .messagelist tr td.threads + td {
border-left: 0; border-left: 0;
} }
#messagelist tr td.size { .messagelist tr td.size {
width: 60px; width: 60px;
text-align: right; text-align: right;
} }
#messagelist thead tr td.size { .messagelist thead tr td.size {
text-align: left; text-align: left;
} }
#messagelist tr td.fromto, .messagelist tr td.fromto,
#messagelist tr td.from, .messagelist tr td.from,
#messagelist tr td.to, .messagelist tr td.to,
#messagelist tr td.cc, .messagelist tr td.cc,
#messagelist tr td.replyto { .messagelist tr td.replyto {
width: 200px; width: 200px;
} }
#messagelist tr td.date { .messagelist tr td.date {
width: 135px; width: 135px;
} }
#messagelist tr.message { .messagelist tr.message {
/* background-color: #fff; */ /* background-color: #fff; */
} }
#messagelist tr.thread.expanded td { .messagelist tr.thread.expanded td {
background-color: #ededed; background-color: #ededed;
} }
#messagelist tr.unread { .messagelist tr.unread {
font-weight: bold; font-weight: bold;
/* background-color: #fff; */ /* background-color: #fff; */
} }
#messagelist tr.flagged td, .messagelist tr.flagged td,
#messagelist tr.flagged td a { .messagelist tr.flagged td a {
color: #f30; color: #f30;
} }
#messagelist thead tr td.sortedASC a, .messagelist thead tr td.sortedASC a,
#messagelist thead tr td.sortedDESC a { .messagelist thead tr td.sortedDESC a {
color: #004458; color: #004458;
text-decoration: underline; text-decoration: underline;
background: url(images/listicons.png) right -912px no-repeat; 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; background-position: right -944px;
} }
#messagelist td img { .messagelist td img {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
#messagelist tbody td a { .messagelist tbody td a {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
cursor: default; cursor: default;
} }
#messagelist tbody tr td.flag, .messagelist tbody tr td.flag,
#messagelist tbody tr td.status, .messagelist tbody tr td.status,
#messagelist tbody tr td.subject span.status { .messagelist tbody tr td.subject span.status {
cursor: pointer; cursor: pointer;
} }
#messagelist tr td.flag span, .messagelist tr td.flag span,
#messagelist tr td.status span, .messagelist tr td.status span,
#messagelist tr td.attachment span, .messagelist tr td.attachment span,
#messagelist tr td.priority span { .messagelist tr td.priority span {
display: block; display: block;
width: 20px; width: 20px;
} }
#messagelist tr td div.collapsed, .messagelist tr td div.collapsed,
#messagelist tr td div.expanded, .messagelist tr td div.expanded,
#messagelist tr td.threads div.listmenu, .messagelist tr td.threads div.listmenu,
#messagelist tr td.attachment span.attachment, .messagelist tr td.attachment span.attachment,
#messagelist tr td.attachment span.report, .messagelist tr td.attachment span.report,
#messagelist tr td.priority span.priority, .messagelist tr td.priority span.priority,
#messagelist tr td.priority span.prio1, .messagelist tr td.priority span.prio1,
#messagelist tr td.priority span.prio2, .messagelist tr td.priority span.prio2,
#messagelist tr td.priority span.prio3, .messagelist tr td.priority span.prio3,
#messagelist tr td.priority span.prio4, .messagelist tr td.priority span.prio4,
#messagelist tr td.priority span.prio5, .messagelist tr td.priority span.prio5,
#messagelist tr td.flag span.flagged, .messagelist tr td.flag span.flagged,
#messagelist tr td.flag span.unflagged, .messagelist tr td.flag span.unflagged,
#messagelist tr td.flag span.unflagged:hover, .messagelist tr td.flag span.unflagged:hover,
#messagelist tr td.status span.status, .messagelist tr td.status span.status,
#messagelist tr td.status span.msgicon, .messagelist tr td.status span.msgicon,
#messagelist tr td.status span.deleted, .messagelist tr td.status span.deleted,
#messagelist tr td.status span.unread, .messagelist tr td.status span.unread,
#messagelist tr td.status span.unreadchildren, .messagelist tr td.status span.unreadchildren,
#messagelist tr td.subject span.msgicon, .messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.deleted, .messagelist tr td.subject span.deleted,
#messagelist tr td.subject span.unread, .messagelist tr td.subject span.unread,
#messagelist tr td.subject span.replied, .messagelist tr td.subject span.replied,
#messagelist tr td.subject span.forwarded, .messagelist tr td.subject span.forwarded,
#messagelist tr td.subject span.unreadchildren { .messagelist tr td.subject span.unreadchildren {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 18px; height: 18px;
@ -590,135 +614,135 @@ a.iconbutton.threadmode.selected {
background: url(images/listicons.png) -100px 0 no-repeat; 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; background-position: 0 -996px;
} }
#messagelist thead tr td.attachment span.attachment { .messagelist thead tr td.attachment span.attachment {
background-position: -24px -997px; background-position: -24px -997px;
} }
#messagelist tbody tr td.attachment span.report { .messagelist tbody tr td.attachment span.report {
background-position: -24px -1116px; background-position: -24px -1116px;
} }
#messagelist tr td.priority span.prio5 { .messagelist tr td.priority span.prio5 {
background-position: 0 -1905px; background-position: 0 -1905px;
} }
#messagelist tr td.priority span.prio4 { .messagelist tr td.priority span.prio4 {
background-position: 0 -1885px; background-position: 0 -1885px;
} }
#messagelist tr td.priority span.prio2 { .messagelist tr td.priority span.prio2 {
background-position: 0 -1865px; background-position: 0 -1865px;
} }
#messagelist tr td.priority span.prio1 { .messagelist tr td.priority span.prio1 {
background-position: 0 -1845px; background-position: 0 -1845px;
} }
#messagelist tbody tr td.flag span.flagged { .messagelist tbody tr td.flag span.flagged {
background-position: 0 -1036px; background-position: 0 -1036px;
} }
#messagelist thead tr td.flag span.flagged { .messagelist thead tr td.flag span.flagged {
background-position: -24px -1036px; background-position: -24px -1036px;
} }
#messagelist tr td.status span.msgicon:hover { .messagelist tr td.status span.msgicon:hover {
background-position: -23px -1056px; background-position: -23px -1056px;
} }
#messagelist tr td.flag span.unflagged:hover { .messagelist tr td.flag span.unflagged:hover {
background-position: -23px -1076px; background-position: -23px -1076px;
} }
#messagelist tr td.subject span.msgicon, .messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.unreadchildren { .messagelist tr td.subject span.unreadchildren {
background-position: 0 -1056px; background-position: 0 -1056px;
margin: 0 1px 0 0; margin: 0 1px 0 0;
width: 24px; width: 24px;
} }
#messagelist tr td.subject span.replied { .messagelist tr td.subject span.replied {
background-position: 0 -1076px; background-position: 0 -1076px;
} }
#messagelist tr td.subject span.forwarded { .messagelist tr td.subject span.forwarded {
background-position: 0 -1096px; background-position: 0 -1096px;
} }
#messagelist tr td.subject span.replied.forwarded { .messagelist tr td.subject span.replied.forwarded {
background-position: 0 -1116px; background-position: 0 -1116px;
} }
#messagelist tr td.status span.msgicon, .messagelist tr td.status span.msgicon,
#messagelist tr td.flag span.unflagged, .messagelist tr td.flag span.unflagged,
#messagelist tr td.status span.unreadchildren { .messagelist tr td.status span.unreadchildren {
background-position: 0 1056px; /* no icon */ background-position: 0 1056px; /* no icon */
} }
/* /*
#messagelist tr td.status span.msgicon:hover { .messagelist tr td.status span.msgicon:hover {
background-position: 0 -272px; background-position: 0 -272px;
} }
*/ */
#messagelist tr td.status span.deleted, .messagelist tr td.status span.deleted,
#messagelist tr td.status span.deleted:hover, .messagelist tr td.status span.deleted:hover,
#messagelist tr td.subject span.deleted { .messagelist tr td.subject span.deleted {
background-position: -22px -1096px; background-position: -22px -1096px;
} }
#messagelist tr td.status span.status, .messagelist tr td.status span.status,
#messagelist tr td.status span.unread, .messagelist tr td.status span.unread,
#messagelist tr td.subject span.unread, .messagelist tr td.subject span.unread,
#messagelist tr td.status span.unread:hover { .messagelist tr td.status span.unread:hover {
background-position: 0 -1016px; background-position: 0 -1016px;
} }
#messagelist thead tr td.status span.status { .messagelist thead tr td.status span.status {
background-position: -24px -1016px; background-position: -24px -1016px;
} }
#messagelist tr td div.collapsed { .messagelist tr td div.collapsed {
background-position: 0 -1137px; background-position: 0 -1137px;
cursor: pointer; cursor: pointer;
} }
#messagelist tr td div.expanded { .messagelist tr td div.expanded {
background-position: 0 -1157px; background-position: 0 -1157px;
cursor: pointer; cursor: pointer;
} }
#messagelist tr td.threads div.listmenu { .messagelist tr td.threads div.listmenu {
background-position: 0 -976px; background-position: 0 -976px;
cursor: pointer; cursor: pointer;
width: 26px; width: 26px;
} }
#messagelist thead tr td.subject, .messagelist thead tr td.subject,
#messagelist tbody tr td.subject { .messagelist tbody tr td.subject {
width: 99%; width: 99%;
white-space: nowrap; white-space: nowrap;
} }
#messagelist tbody tr td.subject a { .messagelist tbody tr td.subject a {
cursor: default; cursor: default;
vertical-align: middle; /* #1487091 */ vertical-align: middle; /* #1487091 */
} }
/* thread parent message with unread children */ /* thread parent message with unread children */
#messagelist tbody tr.unroot td.subject a { .messagelist tbody tr.unroot td.subject a {
text-decoration: underline; text-decoration: underline;
} }
/**** tree indicators ****/ /**** tree indicators ****/
#messagelist tbody tr td span.branch div { .messagelist tbody tr td span.branch div {
display: inline-block; display: inline-block;
} }
#messagelist tbody tr td span.branch div.tree { .messagelist tbody tr td span.branch div.tree {
width: 15px; width: 15px;
} }

2
skins/larry/templates/mail.html
Unescape Escape View File

@ -70,7 +70,7 @@
<div id="messagelistcontainer" class="boxlistcontent"> <div id="messagelistcontainer" class="boxlistcontent">
<roundcube:object name="messages" <roundcube:object name="messages"
id="messagelist" id="messagelist"
class="records-table sortheader" class="records-table messagelist sortheader fixedheader"
optionsmenuIcon="true" /> optionsmenuIcon="true" />
</div> </div>

5
skins/larry/ui.js
Unescape Escape View File

@ -600,8 +600,11 @@ function rcube_mail_ui()
mailviewsplit.handle.hide(); mailviewsplit.handle.hide();
} }
if (visible && uid && rcmail.message_list) if (rcmail.message_list) {
if (visible && uid)
rcmail.message_list.scrollto(uid); rcmail.message_list.scrollto(uid);
rcmail.message_list.resize();
}
rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) }); rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) });
} }

Write Preview
Loading…
Cancel
Save