Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F9785885
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
133 KB
Referenced Files
None
Subscribers
None
View Options
diff --git a/program/js/treelist.js b/program/js/treelist.js
index 5913f44b4..d940e396c 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -1,575 +1,631 @@
/*
+-----------------------------------------------------------------------+
| Roundcube Treelist widget |
| |
| This file is part of the Roundcube Webmail client |
| Copyright (C) 2013, The Roundcube Dev Team |
| |
| Licensed under the GNU General Public License version 3 or |
| any later version with exceptions for skins & plugins. |
| See the README file for a full license statement. |
| |
+-----------------------------------------------------------------------+
| Authors: Thomas Bruederli <roundcube@gmail.com> |
+-----------------------------------------------------------------------+
| Requires: common.js |
+-----------------------------------------------------------------------+
*/
/**
* Roundcube Treelist widget class
* @contructor
*/
function rcube_treelist_widget(node, p)
{
// apply some defaults to p
p = $.extend({
id_prefix: '',
autoexpand: 1000,
selectable: false,
+ scroll_delay: 500,
+ scroll_step: 5,
+ scroll_speed: 20,
check_droptarget: function(node){ return !node.virtual }
}, p || {});
var container = $(node),
data = p.data || [],
indexbyid = {},
selection = null,
drag_active = false,
box_coords = {},
item_coords = [],
autoexpand_timer,
autoexpand_item,
body_scroll_top = 0,
list_scroll_top = 0,
+ scroll_timer,
me = this;
/////// export public members and methods
this.container = container;
this.expand = expand;
this.collapse = collapse;
this.select = select;
this.render = render;
this.drag_start = drag_start;
this.drag_end = drag_end;
this.intersects = intersects;
this.update = update_node;
this.insert = insert;
this.remove = remove;
this.get_item = get_item;
this.get_selection = get_selection;
/////// startup code (constructor)
// abort if node not found
if (!container.length)
return;
if (p.data)
index_data({ children:data });
// load data from DOM
else
update_data();
// register click handlers on list
container.on('click', 'div.treetoggle', function(e){
toggle(dom2id($(this).parent()));
});
container.on('click', 'li', function(e){
var node = p.selectable ? indexbyid[dom2id($(this))] : null;
if (node && !node.virtual) {
select(node.id);
e.stopPropagation();
}
});
/////// private methods
/**
* Collaps a the node with the given ID
*/
function collapse(id, recursive, set)
{
var node;
if (node = indexbyid[id]) {
node.collapsed = typeof set == 'undefined' || set;
update_dom(node);
// Work around a bug in IE6 and IE7, see #1485309
if (window.bw && (bw.ie6 || bw.ie7) && node.collapsed) {
id2dom(node.id).next().children('ul:visible').hide().show();
}
if (recursive && node.children) {
for (var i=0; i < node.children.length; i++) {
collapse(node.children[i].id, recursive, set);
}
}
me.triggerEvent(node.collapsed ? 'collapse' : 'expand', node);
}
}
/**
* Expand a the node with the given ID
*/
function expand(id, recursive)
{
collapse(id, recursive, false);
}
/**
* Toggle collapsed state of a list node
*/
function toggle(id, recursive)
{
var node;
if (node = indexbyid[id]) {
collapse(id, recursive, !node.collapsed);
}
}
/**
* Select a tree node by it's ID
*/
function select(id)
{
if (selection) {
id2dom(selection).removeClass('selected');
selection = null;
}
var li = id2dom(id);
if (li.length) {
li.addClass('selected');
selection = id;
// TODO: expand all parent nodes if collapsed
scroll_to_node(li);
}
me.triggerEvent('select', indexbyid[id]);
}
/**
* Getter for the currently selected node ID
*/
function get_selection()
{
return selection;
}
/**
* Return the DOM element of the list item with the given ID
*/
function get_item(id)
{
return id2dom(id).get(0);
}
/**
* Insert the given node
*/
function insert(node, parent_id, sort)
{
var li, parent_li,
parent_node = parent_id ? indexbyid[parent_id] : null;
// insert as child of an existing node
if (parent_node) {
if (!parent_node.children)
parent_node.children = [];
parent_node.children.push(node);
parent_li = id2dom(parent_id);
// re-render the entire subtree
if (parent_node.children.length == 1) {
render_node(parent_node, parent_li.parent(), parent_li);
li = id2dom(node.id);
}
else {
// append new node to parent's child list
li = render_node(node, parent_li.children('ul').first());
}
}
// insert at top level
else {
data.push(node);
li = render_node(node, container);
}
indexbyid[node.id] = node;
if (sort) {
resort_node(li, typeof sort == 'string' ? '[class~="' + sort + '"]' : '');
}
}
/**
* Update properties of an existing node
*/
function update_node(id, updates, sort)
{
var li, node = indexbyid[id];
if (node) {
li = id2dom(id);
if (updates.id || updates.html || updates.children || updates.classes) {
$.extend(node, updates);
render_node(node, li.parent(), li);
}
if (node.id != id) {
delete indexbyid[id];
indexbyid[node.id] = node;
}
if (sort) {
resort_node(li, typeof sort == 'string' ? '[class~="' + sort + '"]' : '');
}
}
}
/**
* Helper method to sort the list of the given item
*/
function resort_node(li, filter)
{
var first, sibling,
myid = li.get(0).id,
sortname = li.children().first().text().toUpperCase();
li.parent().children('li' + filter).each(function(i, elem) {
if (i == 0)
first = elem;
if (elem.id == myid) {
// skip
}
else if (elem.id != myid && sortname >= $(elem).children().first().text().toUpperCase()) {
sibling = elem;
}
else {
return false;
}
});
if (sibling) {
li.insertAfter(sibling);
}
else if (first.id != myid) {
li.insertBefore(first);
}
// reload data from dom
update_data();
}
/**
* Remove the item with the given ID
*/
function remove(id)
{
var node, li;
if (node = indexbyid[id]) {
li = id2dom(id);
li.remove();
node.deleted = true;
delete indexbyid[id];
return true;
}
return false;
}
/**
* (Re-)read tree data from DOM
*/
function update_data()
{
data = walk_list(container);
}
/**
* Apply the 'collapsed' status of the data node to the corresponding DOM element(s)
*/
function update_dom(node)
{
var li = id2dom(node.id);
li.children('ul').first()[(node.collapsed ? 'hide' : 'show')]();
li.children('div.treetoggle').removeClass('collapsed expanded').addClass(node.collapsed ? 'collapsed' : 'expanded');
me.triggerEvent('toggle', node);
}
/**
* Render the tree list from the internal data structure
*/
function render()
{
if (me.triggerEvent('renderBefore', data) === false)
return;
// remove all child nodes
container.html('');
// render child nodes
for (var i=0; i < data.length; i++) {
render_node(data[i], container);
}
me.triggerEvent('renderAfter', container);
}
/**
* Render a specific node into the DOM list
*/
function render_node(node, parent, replace)
{
if (node.deleted)
return;
var li = $('<li>')
.attr('id', p.id_prefix + (p.id_encode ? p.id_encode(node.id) : node.id))
.addClass((node.classes || []).join(' '));
if (replace)
replace.replaceWith(li);
else
li.appendTo(parent);
if (typeof node.html == 'string')
li.html(node.html);
else if (typeof node.html == 'object')
li.append(node.html);
if (node.virtual)
li.addClass('virtual');
if (node.id == selection)
li.addClass('selected');
// add child list and toggle icon
if (node.children && node.children.length) {
$('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '"> </div>').appendTo(li);
var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass);
if (node.collapsed)
ul.hide();
for (var i=0; i < node.children.length; i++) {
render_node(node.children[i], ul);
}
}
return li;
}
/**
* Recursively walk the DOM tree and build an internal data structure
* representing the skeleton of this tree list.
*/
function walk_list(ul)
{
var result = [];
ul.children('li').each(function(i,e){
var li = $(e), sublist = li.children('ul');
var node = {
id: dom2id(li),
classes: li.attr('class').split(' '),
virtual: li.hasClass('virtual'),
html: li.children().first().get(0).outerHTML,
children: walk_list(sublist)
}
if (sublist.length) {
node.childlistclass = sublist.attr('class');
}
if (node.children.length) {
node.collapsed = sublist.css('display') == 'none';
}
if (li.hasClass('selected')) {
selection = node.id;
}
result.push(node);
indexbyid[node.id] = node;
})
return result;
}
/**
* Recursively walk the data tree and index nodes by their ID
*/
function index_data(node)
{
if (node.id) {
indexbyid[node.id] = node;
}
for (var c=0; node.children && c < node.children.length; c++) {
index_data(node.children[c]);
}
}
/**
* Get the (stripped) node ID from the given DOM element
*/
function dom2id(li)
{
var domid = li.attr('id').replace(new RegExp('^' + (p.id_prefix) || '%'), '');
return p.id_decode ? p.id_decode(domid) : domid;
}
/**
* Get the <li> element for the given node ID
*/
function id2dom(id)
{
var domid = p.id_encode ? p.id_encode(id) : id;
return $('#' + p.id_prefix + domid);
}
/**
* Scroll the parent container to make the given list item visible
*/
function scroll_to_node(li)
{
var scroller = container.parent(),
current_offset = scroller.scrollTop(),
rel_offset = li.offset().top - scroller.offset().top;
if (rel_offset < 0 || rel_offset + li.height() > scroller.height())
scroller.scrollTop(rel_offset + current_offset);
}
///// drag & drop support
/**
* When dragging starts, compute absolute bounding boxes of the list and it's items
* for faster comparisons while mouse is moving
*/
function drag_start()
{
var li, item, height,
pos = container.offset();
body_scroll_top = bw.ie ? 0 : window.pageYOffset;
list_scroll_top = container.parent().scrollTop();
+ pos.top += list_scroll_top;
drag_active = true;
box_coords = {
x1: pos.left,
y1: pos.top,
x2: pos.left + container.width(),
y2: pos.top + container.height()
};
item_coords = [];
for (var id in indexbyid) {
li = id2dom(id);
item = li.children().first().get(0);
if (height = item.offsetHeight) {
pos = $(item).offset();
+ pos.top += list_scroll_top;
item_coords[id] = {
x1: pos.left,
y1: pos.top,
x2: pos.left + item.offsetWidth,
y2: pos.top + height,
on: id == autoexpand_item
};
}
}
+
+ // enable auto-scrolling of list container
+ if (container.height() > container.parent().height()) {
+ container.parent()
+ .mousemove(function(e) {
+ var scroll = 0,
+ mouse = rcube_event.get_mouse_pos(e);
+ mouse.y -= container.parent().offset().top;
+
+ if (mouse.y < 25 && list_scroll_top > 0) {
+ scroll = -1; // up
+ }
+ else if (mouse.y > container.parent().height() - 25) {
+ scroll = 1; // down
+ }
+
+ if (drag_active && scroll != 0) {
+ if (!scroll_timer)
+ scroll_timer = window.setTimeout(function(){ drag_scroll(scroll); }, p.scroll_delay);
+ }
+ else if (scroll_timer) {
+ window.clearTimeout(scroll_timer);
+ scroll_timer = null;
+ }
+ })
+ .mouseleave(function() {
+ if (scroll_timer) {
+ window.clearTimeout(scroll_timer);
+ scroll_timer = null;
+ }
+ });
+ }
}
/**
* Signal that dragging has stopped
*/
function drag_end()
{
drag_active = false;
+ scroll_timer = null;
if (autoexpand_timer) {
clearTimeout(autoexpand_timer);
autoexpand_timer = null;
autoexpand_item = null;
}
$('li.droptarget', container).removeClass('droptarget');
}
+ /**
+ * Scroll list container in the given direction
+ */
+ function drag_scroll(dir)
+ {
+ if (!drag_active)
+ return;
+
+ var old_top = list_scroll_top;
+ container.parent().get(0).scrollTop += p.scroll_step * dir;
+ list_scroll_top = container.parent().scrollTop();
+ scroll_timer = null;
+
+ if (list_scroll_top != old_top)
+ scroll_timer = window.setTimeout(function(){ drag_scroll(dir); }, p.scroll_speed);
+ }
+
/**
* Determine if the given mouse coords intersect the list and one if its items
*/
function intersects(mouse, highlight)
{
// offsets to compensate for scrolling while dragging a message
var boffset = bw.ie ? -document.documentElement.scrollTop : body_scroll_top,
- moffset = list_scroll_top - container.parent().scrollTop(),
+ moffset = container.parent().scrollTop(),
result = null;
- mouse.top = mouse.y + -moffset - boffset;
+ mouse.top = mouse.y + moffset - boffset;
// no intersection with list bounding box
if (mouse.x < box_coords.x1 || mouse.x >= box_coords.x2 || mouse.top < box_coords.y1 || mouse.top >= box_coords.y2) {
// TODO: optimize performance for this operation
$('li.droptarget', container).removeClass('droptarget');
return result;
}
// check intersection with visible list items
var pos, node;
for (var id in item_coords) {
pos = item_coords[id];
if (mouse.x >= pos.x1 && mouse.x < pos.x2 && mouse.top >= pos.y1 && mouse.top < pos.y2) {
node = indexbyid[id];
// if the folder is collapsed, expand it after the configured time
if (node.children && node.children.length && node.collapsed && p.autoexpand && autoexpand_item != id) {
if (autoexpand_timer)
clearTimeout(autoexpand_timer);
autoexpand_item = id;
autoexpand_timer = setTimeout(function() {
expand(autoexpand_item);
drag_start(); // re-calculate item coords
autoexpand_item = null;
}, p.autoexpand);
}
else if (autoexpand_timer && autoexpand_item != id) {
clearTimeout(autoexpand_timer);
autoexpand_item = null;
autoexpand_timer = null;
}
// check if this item is accepted as drop target
if (p.check_droptarget(node)) {
if (highlight) {
id2dom(id).addClass('droptarget');
pos.on = true;
}
result = id;
}
else {
result = null;
}
}
else if (pos.on) {
id2dom(id).removeClass('droptarget');
pos.on = false;
}
}
return result;
}
}
// use event processing functions from Roundcube's rcube_event_engine
rcube_treelist_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
rcube_treelist_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
rcube_treelist_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;
diff --git a/skins/classic/functions.js b/skins/classic/functions.js
index 4312d57bc..049e4d5d4 100644
--- a/skins/classic/functions.js
+++ b/skins/classic/functions.js
@@ -1,1004 +1,999 @@
/**
* Roundcube functions for default skin interface
*/
/**
* Settings
*/
function rcube_init_settings_tabs()
{
var el, cl, container = $('#tabsbar'),
last_tab = $('span:last', container),
tab = '#settingstabpreferences',
action = window.rcmail && rcmail.env.action ? rcmail.env.action : null;
// move About tab to the end
if (last_tab && last_tab.attr('id') != 'settingstababout' && (el = $('#settingstababout'))) {
cl = el.clone(true);
el.remove();
last_tab.after(cl);
}
// get selected tab
if (action)
tab = '#settingstab' + (action.indexOf('identity')>0 ? 'identities' : action.replace(/\./g, ''));
$(tab).addClass('tablink-selected');
$('a', tab).removeAttr('onclick').click(function() { return false; });
}
// Fieldsets-to-tabs converter
// Warning: don't place "caller" <script> inside page element (id)
function rcube_init_tabs(id, current)
{
var content = $('#'+id),
fs = content.children('fieldset');
if (!fs.length)
return;
current = current ? current : 0;
// first hide not selected tabs
fs.each(function(idx) { if (idx != current) $(this).hide(); });
// create tabs container
var tabs = $('<div>').addClass('tabsbar').appendTo(content);
// convert fildsets into tabs
fs.each(function(idx) {
var tab, a, elm = $(this), legend = elm.children('legend');
// create a tab
a = $('<a>').text(legend.text()).attr('href', '#');
tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'})
.click(function() { rcube_show_tab(id, idx); return false })
// remove legend
legend.remove();
// style fieldset
elm.addClass('tabbed');
// style selected tab
if (idx == current)
tab.addClass('tablink-selected');
// add the tab to container
tab.append(a).appendTo(tabs);
});
}
function rcube_show_tab(id, index)
{
var fs = $('#'+id).children('fieldset');
fs.each(function(idx) {
// Show/hide fieldset (tab content)
$(this)[index==idx ? 'show' : 'hide']();
// Select/unselect tab
$('#tab'+idx).toggleClass('tablink-selected', idx==index);
});
}
/**
* Mail UI
*/
function rcube_mail_ui()
{
this.popups = {
markmenu: {id:'markmessagemenu'},
replyallmenu: {id:'replyallmenu'},
forwardmenu: {id:'forwardmenu', editable:1},
searchmenu: {id:'searchmenu', editable:1},
messagemenu: {id:'messagemenu'},
attachmentmenu: {id:'attachmentmenu'},
listmenu: {id:'listmenu', editable:1},
dragmenu: {id:'dragmenu', sticky:1},
groupmenu: {id:'groupoptionsmenu', above:1},
mailboxmenu: {id:'mailboxoptionsmenu', above:1},
composemenu: {id:'composeoptionsmenu', editable:1, overlap:1},
spellmenu: {id:'spellmenu'},
// toggle: #1486823, #1486930
uploadmenu: {id:'attachment-form', editable:1, above:1, toggle:!bw.ie&&!bw.linux },
uploadform: {id:'upload-form', editable:1, toggle:!bw.ie&&!bw.linux }
};
var obj;
for (var k in this.popups) {
obj = $('#'+this.popups[k].id)
if (obj.length)
this.popups[k].obj = obj;
else {
delete this.popups[k];
}
}
}
rcube_mail_ui.prototype = {
show_popup: function(popup, show, config)
{
var obj;
// auto-register menu object
if (!this.popups[popup] && (obj = $('#'+popup)) && obj.length)
this.popups[popup] = $.extend(config, {id: popup, obj: obj});
if (typeof this[popup] == 'function')
return this[popup](show);
else
return this.show_popupmenu(popup, show);
},
show_popupmenu: function(popup, show)
{
var obj = this.popups[popup].obj,
above = this.popups[popup].above,
ref = $(this.popups[popup].link ? this.popups[popup].link : rcube_find_object(popup+'link'));
if (typeof show == 'undefined')
show = obj.is(':visible') ? false : true;
else if (this.popups[popup].toggle && show && this.popups[popup].obj.is(':visible') )
show = false;
if (show && ref.length) {
var parent = ref.parent(),
win = $(window),
pos = parent.hasClass('dropbutton') ? parent.offset() : ref.offset();
if (!above && pos.top + ref.height() + obj.height() > win.height())
above = true;
if (pos.left + obj.width() > win.width())
pos.left = win.width() - obj.width() - 30;
obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.height())) });
}
obj[show?'show':'hide']();
if (bw.ie6 && this.popups[popup].overlap) {
$('select').css('visibility', show?'hidden':'inherit');
$('select', obj).css('visibility', 'inherit');
}
},
dragmenu: function(show)
{
this.popups.dragmenu.obj[show?'show':'hide']();
},
forwardmenu: function(show)
{
$("input[name='forwardtype'][value="+(rcmail.env.forward_attachment ? 1 : 0)+"]", this.popups.forwardmenu.obj)
.prop('checked', true);
this.show_popupmenu('forwardmenu', show);
},
uploadmenu: function(show)
{
if (typeof show == 'object') // called as event handler
show = false;
// clear upload form
if (!show) {
try { $('#attachment-form form')[0].reset(); }
catch(e){} // ignore errors
}
this.show_popupmenu('uploadmenu', show);
if (!document.all && this.popups.uploadmenu.obj.is(':visible'))
$('#attachment-form input[type=file]').click();
},
searchmenu: function(show)
{
var obj = this.popups.searchmenu.obj,
ref = rcube_find_object('searchmenulink');
if (typeof show == 'undefined')
show = obj.is(':visible') ? false : true;
if (show && ref) {
var pos = $(ref).offset();
obj.css({left:pos.left, top:(pos.top + ref.offsetHeight + 2)});
if (rcmail.env.search_mods) {
var n, all,
list = $('input:checkbox[name="s_mods[]"]', obj),
mbox = rcmail.env.mailbox,
mods = rcmail.env.search_mods;
if (rcmail.env.task == 'mail') {
mods = mods[mbox] ? mods[mbox] : mods['*'];
all = 'text';
}
else {
all = '*';
}
if (mods[all])
list.map(function() {
this.checked = true;
this.disabled = this.value != all;
});
else {
list.prop('disabled', false).prop('checked', false);
for (n in mods)
$('#s_mod_' + n).prop('checked', true);
}
}
}
obj[show?'show':'hide']();
},
set_searchmod: function(elem)
{
var all, m, task = rcmail.env.task,
mods = rcmail.env.search_mods,
mbox = rcmail.env.mailbox;
if (!mods)
mods = {};
if (task == 'mail') {
if (!mods[mbox])
mods[mbox] = rcube_clone_object(mods['*']);
m = mods[mbox];
all = 'text';
}
else { //addressbook
m = mods;
all = '*';
}
if (!elem.checked)
delete(m[elem.value]);
else
m[elem.value] = 1;
// mark all fields
if (elem.value != all)
return;
$('input:checkbox[name="s_mods[]"]').map(function() {
if (this == elem)
return;
this.checked = true;
if (elem.checked) {
this.disabled = true;
delete m[this.value];
}
else {
this.disabled = false;
m[this.value] = 1;
}
});
},
listmenu: function(show)
{
var obj = this.popups.listmenu.obj,
ref = rcube_find_object('listmenulink');
if (typeof show == 'undefined')
show = obj.is(':visible') ? false : true;
if (show && ref) {
var pos = $(ref).offset(),
menuwidth = obj.width(),
pagewidth = $(document).width();
if (pagewidth - pos.left < menuwidth && pos.left > menuwidth)
pos.left = pos.left - menuwidth;
obj.css({ left:pos.left, top:(pos.top + ref.offsetHeight + 2)});
// set form values
$('input[name="sort_col"][value="'+rcmail.env.sort_col+'"]').prop('checked', true);
$('input[name="sort_ord"][value="DESC"]').prop('checked', rcmail.env.sort_order == 'DESC');
$('input[name="sort_ord"][value="ASC"]').prop('checked', rcmail.env.sort_order != 'DESC');
$('input[name="view"][value="thread"]').prop('checked', rcmail.env.threading ? true : false);
$('input[name="view"][value="list"]').prop('checked', rcmail.env.threading ? false : true);
// set checkboxes
$('input[name="list_col[]"]').each(function() {
$(this).prop('checked', jQuery.inArray(this.value, rcmail.env.coltypes) != -1);
});
}
obj[show?'show':'hide']();
if (show) {
var maxheight=0;
$('#listmenu fieldset').each(function() {
var height = $(this).height();
if (height > maxheight) {
maxheight = height;
}
});
$('#listmenu fieldset').css("min-height", maxheight+"px")
// IE6 complains if you set this attribute using either method:
//$('#listmenu fieldset').css({'height':'auto !important'});
//$('#listmenu fieldset').css("height","auto !important");
.height(maxheight);
};
},
open_listmenu: function()
{
this.listmenu();
},
save_listmenu: function()
{
this.listmenu();
var sort = $('input[name="sort_col"]:checked').val(),
ord = $('input[name="sort_ord"]:checked').val(),
thread = $('input[name="view"]:checked').val(),
cols = $('input[name="list_col[]"]:checked')
.map(function(){ return this.value; }).get();
rcmail.set_list_options(cols, sort, ord, thread == 'thread' ? 1 : 0);
},
spellmenu: function(show)
{
var link, li,
lang = rcmail.spellcheck_lang(),
menu = this.popups.spellmenu.obj,
ul = $('ul', menu);
if (!ul.length) {
ul = $('<ul>');
for (i in rcmail.env.spell_langs) {
li = $('<li>');
link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i])
.addClass('active').data('lang', i)
.click(function() {
rcmail.spellcheck_lang_set($(this).data('lang'));
});
link.appendTo(li);
li.appendTo(ul);
}
ul.appendTo(menu);
}
// select current language
$('li', ul).each(function() {
var el = $('a', this);
if (el.data('lang') == lang)
el.addClass('selected');
else if (el.hasClass('selected'))
el.removeClass('selected');
});
this.show_popupmenu('spellmenu', show);
},
show_attachmentmenu: function(elem)
{
var id = elem.parentNode.id.replace(/^attach/, '');
$('#attachmenuopen').unbind('click').attr('onclick', '').click(function(e) {
return rcmail.command('open-attachment', id, this);
});
$('#attachmenudownload').unbind('click').attr('onclick', '').click(function() {
rcmail.command('download-attachment', id, this);
});
this.popups.attachmentmenu.link = elem;
rcmail.command('menu-open', {menu: 'attachmentmenu', id: id});
},
menu_open: function(p)
{
if (p && p.props && p.props.menu == 'attachmentmenu')
this.show_popup('attachmentmenu');
else
this.open_listmenu();
},
menu_save: function(prop)
{
this.save_listmenu();
},
body_mouseup: function(evt, p)
{
var i, target = rcube_event.get_target(evt);
for (i in this.popups) {
if (this.popups[i].obj.is(':visible') && target != rcube_find_object(i+'link')
&& !this.popups[i].toggle
&& (!this.popups[i].editable || !this.target_overlaps(target, this.popups[i].id))
&& (!this.popups[i].sticky || !rcube_mouse_is_over(evt, rcube_find_object(this.popups[i].id)))
&& !$(target).is('.folder-selector-link') && !$(target).children('.folder-selector-link').length
) {
window.setTimeout('rcmail_ui.show_popup("'+i+'",false);', 50);
}
}
},
target_overlaps: function (target, elementid)
{
var element = rcube_find_object(elementid);
while (target.parentNode) {
if (target.parentNode == element)
return true;
target = target.parentNode;
}
return false;
},
body_keydown: function(evt, p)
{
if (rcube_event.get_keycode(evt) == 27) {
for (var k in this.popups) {
if (this.popups[k].obj.is(':visible'))
this.show_popup(k, false);
}
}
},
switch_preview_pane: function(elem)
{
var uid, prev_frm = $('#mailpreviewframe');
if (elem.checked) {
rcmail.env.contentframe = 'messagecontframe';
if (mailviewsplit.layer) {
mailviewsplit.resize();
mailviewsplit.layer.elm.style.display = '';
}
else
mailviewsplit.init();
if (bw.opera) {
$('#messagelistcontainer').css({height: ''});
}
prev_frm.show();
if (uid = rcmail.message_list.get_single_selection())
rcmail.show_message(uid, false, true);
}
else {
prev_frm.hide();
if (bw.ie6 || bw.ie7) {
var fr = document.getElementById('mailcontframe');
fr.style.bottom = 0;
fr.style.height = parseInt(fr.parentNode.offsetHeight)+'px';
}
else {
$('#mailcontframe').css({height: 'auto', bottom: 0});
if (bw.opera)
$('#messagelistcontainer').css({height: 'auto'});
}
if (mailviewsplit.layer)
mailviewsplit.layer.elm.style.display = 'none';
rcmail.env.contentframe = null;
rcmail.show_contentframe(false);
}
rcmail.command('save-pref', {name: 'preview_pane', value: (elem.checked?1:0)});
},
/* Message composing */
init_compose_form: function()
{
var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto'],
div = document.getElementById('compose-div'),
headers_div = document.getElementById('compose-headers-div');
// Show input elements with non-empty value
for (f=0; f<fields.length; f++) {
v = fields[f]; field = $('#_'+v);
if (field.length) {
field.on('change', {v:v}, function(e) { if (this.value) rcmail_ui.show_header_form(e.data.v); });
if (field.val() != '')
rcmail_ui.show_header_form(v);
}
}
// prevent from form data loss when pressing ESC key in IE
if (bw.ie) {
var form = rcube_find_object('form');
form.onkeydown = function (e) {
if (rcube_event.get_keycode(e) == 27)
rcube_event.cancel(e);
};
}
$(window).resize(function() {
rcmail_ui.resize_compose_body();
});
$('#compose-container').resize(function() {
rcmail_ui.resize_compose_body();
});
div.style.top = (parseInt(headers_div.offsetHeight, 10) + 3) + 'px';
$(window).resize();
// fixes contacts-table position when there's more than one addressbook
$('#contacts-table').css('top', $('#directorylist').height() + 24 + 'px');
// contacts search submit
$('#quicksearchbox').keydown(function(e) {
if (rcube_event.get_keycode(e) == 13)
rcmail.command('search');
});
},
resize_compose_body: function()
{
var div = $('#compose-div .boxlistcontent'),
w = div.width() - 2, h = div.height(),
x = bw.ie || bw.opera ? 4 : 0;
$('#compose-body_tbl').width((w+3)+'px').height('');
$('#compose-body_ifr').width((w+3)+'px').height((h-54)+'px');
$('#compose-body').width((w-x)+'px').height(h+'px');
$('#googie_edit_layer').height(h+'px');
},
resize_compose_body_ev: function()
{
window.setTimeout(function(){rcmail_ui.resize_compose_body();}, 100);
},
show_header_form: function(id)
{
var row, s,
link = document.getElementById(id + '-link');
if ((s = this.next_sibling(link)))
s.style.display = 'none';
else if ((s = this.prev_sibling(link)))
s.style.display = 'none';
link.style.display = 'none';
if ((row = document.getElementById('compose-' + id))) {
var div = document.getElementById('compose-div'),
headers_div = document.getElementById('compose-headers-div');
$(row).show();
div.style.top = (parseInt(headers_div.offsetHeight, 10) + 3) + 'px';
this.resize_compose_body();
}
return false;
},
hide_header_form: function(id)
{
var row, ns,
link = document.getElementById(id + '-link'),
parent = link.parentNode,
links = parent.getElementsByTagName('a');
link.style.display = '';
for (var i=0; i<links.length; i++)
if (links[i].style.display != 'none')
for (var j=i+1; j<links.length; j++)
if (links[j].style.display != 'none')
if ((ns = this.next_sibling(links[i]))) {
ns.style.display = '';
break;
}
document.getElementById('_' + id).value = '';
if ((row = document.getElementById('compose-' + id))) {
var div = document.getElementById('compose-div'),
headers_div = document.getElementById('compose-headers-div');
row.style.display = 'none';
div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
this.resize_compose_body();
}
return false;
},
next_sibling: function(elm)
{
var ns = elm.nextSibling;
while (ns && ns.nodeType == 3)
ns = ns.nextSibling;
return ns;
},
prev_sibling: function(elm)
{
var ps = elm.previousSibling;
while (ps && ps.nodeType == 3)
ps = ps.previousSibling;
return ps;
},
enable_command: function(p)
{
if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) {
var label = rcmail.gettext(p.status ? 'replylist' : 'replyall');
$('a.button.replyAll').attr('title', label);
}
}
};
/**
* Roundcube generic layer (floating box) class
*
* @constructor
*/
function rcube_layer(id, attributes)
{
this.name = id;
// create a new layer in the current document
this.create = function(arg)
{
var l = (arg.x) ? arg.x : 0,
t = (arg.y) ? arg.y : 0,
w = arg.width,
h = arg.height,
z = arg.zindex,
vis = arg.vis,
parent = arg.parent,
obj = document.createElement('DIV');
obj.id = this.name;
obj.style.position = 'absolute';
obj.style.visibility = (vis) ? (vis==2) ? 'inherit' : 'visible' : 'hidden';
obj.style.left = l+'px';
obj.style.top = t+'px';
if (w)
obj.style.width = w.toString().match(/\%$/) ? w : w+'px';
if (h)
obj.style.height = h.toString().match(/\%$/) ? h : h+'px';
if (z)
obj.style.zIndex = z;
if (parent)
parent.appendChild(obj);
else
document.body.appendChild(obj);
this.elm = obj;
};
// create new layer
if (attributes != null) {
this.create(attributes);
this.name = this.elm.id;
}
else // just refer to the object
this.elm = document.getElementById(id);
if (!this.elm)
return false;
// ********* layer object properties *********
this.css = this.elm.style;
this.event = this.elm;
this.width = this.elm.offsetWidth;
this.height = this.elm.offsetHeight;
this.x = parseInt(this.elm.offsetLeft);
this.y = parseInt(this.elm.offsetTop);
this.visible = (this.css.visibility=='visible' || this.css.visibility=='show' || this.css.visibility=='inherit') ? true : false;
// ********* layer object methods *********
// move the layer to a specific position
this.move = function(x, y)
{
this.x = x;
this.y = y;
this.css.left = Math.round(this.x)+'px';
this.css.top = Math.round(this.y)+'px';
};
// change the layers width and height
this.resize = function(w,h)
{
this.css.width = w+'px';
this.css.height = h+'px';
this.width = w;
this.height = h;
};
// show or hide the layer
this.show = function(a)
{
if(a == 1) {
this.css.visibility = 'visible';
this.visible = true;
}
else if(a == 2) {
this.css.visibility = 'inherit';
this.visible = true;
}
else {
this.css.visibility = 'hidden';
this.visible = false;
}
};
// write new content into a Layer
this.write = function(cont)
{
this.elm.innerHTML = cont;
};
};
/**
* Scroller
*/
function rcmail_scroller(list, top, bottom)
{
var ref = this;
this.list = $(list);
this.top = $(top);
this.bottom = $(bottom);
this.step_size = 6;
this.step_time = 20;
this.delay = 500;
this.top
.mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); })
.mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });
this.bottom
.mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); })
.mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });
this.scroll = function(dir)
{
var ref = this, size = this.step_size;
if (!rcmail.drag_active)
return;
if (dir == 'down')
size *= -1;
this.list.get(0).scrollTop += size;
this.ts = window.setTimeout(function() { ref.scroll(dir); }, this.step_time);
};
};
// Events handling in iframes (eg. preview pane)
function iframe_events()
{
// this==iframe
try {
var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null;
rcube_event.add_listener({ element: doc, object:rcmail_ui, method:'body_mouseup', event:'mouseup' });
}
catch (e) {
// catch possible "Permission denied" error in IE
};
};
// Abbreviate mailbox names to fit width of the container
function rcube_render_mailboxlist()
{
var list = $('#mailboxlist > li > a, #mailboxlist ul:visible > li > a');
// it's too slow with really big number of folders, especially on IE
if (list.length > (bw.ie && bw.vendver < 9 ? 40 : 100))
return;
list.each(function() {
var elem = $(this),
text = elem.data('text');
if (!text) {
text = elem.text().replace(/\s+\([0-9]+\)$/, '');
elem.data('text', text);
}
if (text.length < 6)
return;
var abbrev = fit_string_to_size(text, elem, elem.width() - elem.children('span.unreadcount').width() - 16);
if (abbrev != text)
elem.attr('title', text);
elem.contents().filter(function(){ return (this.nodeType == 3); }).get(0).data = abbrev;
});
};
// inspired by https://gist.github.com/24261/7fdb113f1e26111bd78c0c6fe515f6c0bf418af5
function fit_string_to_size(str, elem, len)
{
var w, span, $span, result = str, ellip = '...';
if (!rcmail.env.tmp_span) {
// it should be appended to elem to use the same css style
// but for performance reasons we'll append it to body (once)
span = $('<b>').css({visibility: 'hidden', padding: '0px',
'font-family': elem.css('font-family'),
'font-size': elem.css('font-size')})
.appendTo($('body', document)).get(0);
rcmail.env.tmp_span = span;
}
else {
span = rcmail.env.tmp_span;
}
$span = $(span);
$span.text(result);
// on first run, check if string fits into the length already.
w = span.offsetWidth;
if (w > len) {
var cut = Math.max(1, Math.floor(str.length * ((w - len) / w) / 2)),
mid = Math.floor(str.length / 2),
offLeft = mid,
offRight = mid;
while (true) {
offLeft = mid - cut;
offRight = mid + cut;
$span.text(str.substring(0,offLeft) + ellip + str.substring(offRight));
// break loop if string fits size
if (offLeft < 3 || span.offsetWidth)
break;
cut++;
}
// build resulting string
result = str.substring(0,offLeft) + ellip + str.substring(offRight);
}
return result;
};
function update_quota(data)
{
percent_indicator(rcmail.gui_objects.quotadisplay, data);
};
// percent (quota) indicator
function percent_indicator(obj, data)
{
if (!data || !obj)
return false;
var limit_high = 80,
limit_mid = 55,
width = data.width ? data.width : rcmail.env.indicator_width ? rcmail.env.indicator_width : 100,
height = data.height ? data.height : rcmail.env.indicator_height ? rcmail.env.indicator_height : 14,
quota = data.percent ? Math.abs(parseInt(data.percent)) : 0,
quota_width = parseInt(quota / 100 * width),
pos = $(obj).position();
// workarounds for Opera and Webkit bugs
pos.top = Math.max(0, pos.top);
pos.left = Math.max(0, pos.left);
rcmail.env.indicator_width = width;
rcmail.env.indicator_height = height;
// overlimit
if (quota_width > width) {
quota_width = width;
quota = 100;
}
if (data.title)
data.title = rcmail.get_label('quota') + ': ' + data.title;
// main div
var main = $('<div>');
main.css({position: 'absolute', top: pos.top, left: pos.left,
width: width + 'px', height: height + 'px', zIndex: 100, lineHeight: height + 'px'})
.attr('title', data.title).addClass('quota_text').html(quota + '%');
// used bar
var bar1 = $('<div>');
bar1.css({position: 'absolute', top: pos.top + 1, left: pos.left + 1,
width: quota_width + 'px', height: height + 'px', zIndex: 99});
// background
var bar2 = $('<div>');
bar2.css({position: 'absolute', top: pos.top + 1, left: pos.left + 1,
width: width + 'px', height: height + 'px', zIndex: 98})
.addClass('quota_bg');
if (quota >= limit_high) {
main.addClass(' quota_text_high');
bar1.addClass('quota_high');
}
else if(quota >= limit_mid) {
main.addClass(' quota_text_mid');
bar1.addClass('quota_mid');
}
else {
main.addClass(' quota_text_low');
bar1.addClass('quota_low');
}
// replace quota image
$(obj).html('').append(bar1).append(bar2).append(main);
// update #quotaimg title
$('#quotaimg').attr('title', data.title);
};
// Optional parameters used by TinyMCE
var rcmail_editor_settings = {
skin: "default", // "default", "o2k7"
skin_variant: "" // "", "silver", "black"
};
var rcmail_ui;
function rcube_init_mail_ui()
{
rcmail_ui = new rcube_mail_ui();
rcube_event.add_listener({ object:rcmail_ui, method:'body_mouseup', event:'mouseup' });
rcube_event.add_listener({ object:rcmail_ui, method:'body_keydown', event:'keydown' });
rcmail.addEventListener('init', function() {
if (rcmail.env.quota_content)
update_quota(rcmail.env.quota_content);
rcmail.addEventListener('setquota', update_quota);
$('iframe').load(iframe_events)
.contents().mouseup(function(e){rcmail_ui.body_mouseup(e)});
if (rcmail.env.task == 'mail') {
rcmail.addEventListener('enable-command', 'enable_command', rcmail_ui);
rcmail.addEventListener('menu-open', 'menu_open', rcmail_ui);
rcmail.addEventListener('menu-save', 'menu_save', rcmail_ui);
rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui);
rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui);
rcmail.gui_object('dragmenu', 'dragmenu');
if (rcmail.gui_objects.mailboxlist) {
rcmail.treelist.addEventListener('expand', rcube_render_mailboxlist);
rcmail.addEventListener('responseaftermark', rcube_render_mailboxlist);
rcmail.addEventListener('responseaftergetunread', rcube_render_mailboxlist);
rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist);
rcmail.addEventListener('responseafterrefresh', rcube_render_mailboxlist);
rcmail.addEventListener('afterimport-messages', function(){ rcmail_ui.show_popup('uploadform', false); });
-
- new rcmail_scroller('#mailboxlist-content', '#mailboxlist-title', '#mailboxlist-footer');
}
if (rcmail.env.action == 'compose')
rcmail_ui.init_compose_form();
else if (rcmail.env.action == 'show' || rcmail.env.action == 'preview')
// add menu link for each attachment
$('#attachment-list > li[id^="attach"]').each(function() {
$(this).append($('<a class="drop"></a>').click(function() { rcmail_ui.show_attachmentmenu(this); }));
});
}
else if (rcmail.env.task == 'addressbook') {
rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); });
- if (rcmail.gui_objects.folderlist)
- new rcmail_scroller('#directorylist-content', '#directorylist-title', '#directorylist-footer');
-
rcmail.gui_object('dragmenu', 'dragmenu');
}
else if (rcmail.env.task == 'settings') {
if (rcmail.gui_objects.subscriptionlist)
new rcmail_scroller('#folderlist-content', '#folderlist-title', '#folderlist-footer');
}
});
}
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index d3b09c087..8e6e78e77 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -1,1582 +1,1576 @@
/**
* Roundcube webmail styles for the Email section
*
* Copyright (c) 2012, The Roundcube Dev Team
* Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original autors in the README file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
#mailview-left {
position: absolute;
top: 0;
left: 0;
width: 220px;
bottom: 0;
z-index: 2;
}
#mailview-right {
position: absolute;
top: 0;
left: 232px;
right: 0;
bottom: 0;
z-index: 3;
}
#mailview-right.fullwidth {
left: 0;
}
#mailview-top {
position: absolute;
top: 42px;
left: 0;
right: 0;
bottom: 0px;
}
#mailview-bottom {
display: none;
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 0;
border-radius: 4px;
border-top: none;
}
#composeview-right #mailview-bottom {
border-radius: 0 0 4px 4px;
}
-#folderlist-header {
- width: 100%;
- height: 12px;
- top: 32px;
-}
-
#mailboxcontainer,
#messagelistcontainer {
position: absolute;
top: 42px;
left: 0;
width: 100%;
bottom: 0;
}
#messagelistcontainer {
top: 0;
bottom: 30px;
overflow: auto;
}
/* Real browsers accept this (not IE) */
html>/**/body #messagelist {
overflow: auto;
overflow-x: hidden;
}
#messagelistfooter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 22px;
padding: 4px 6px;
border-top: 1px solid #ddd;
background: #ebebeb;
background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6));
background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
border-radius: 0 0 4px 4px;
}
#messagelistfooter.rightalign {
text-align: right;
}
#messagelistfooter #countcontrols {
display: inline-block;
}
#messagelistfooter #listcontrols,
#messagelistfooter #listselectors {
display: inline-block;
margin-right: 2em;
vertical-align: middle;
}
#messagelistfooter #listselectors .menuselector {
margin-top: -2px;
}
a.iconbutton.listmode {
width: 26px;
height: 20px;
background-position: 0 -477px;
}
a.iconbutton.threadmode {
width: 26px;
height: 20px;
background-position: 0 -497px;
}
a.iconbutton.listmode.selected {
background-position: -26px -477px;
}
a.iconbutton.threadmode.selected {
background-position: -26px -497px;
}
#mailboxlist li.mailbox {
position: relative;
background-repeat: no-repeat;
background-position: 6px 2px;
}
#mailboxlist > li:first-child {
border-radius: 4px 4px 0 0;
border-top: 0;
}
#mailboxlist li.mailbox a {
padding-left: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-image: url(images/listicons.png);
background-repeat: no-repeat;
background-position: 6px 3px;
}
#mailboxlist li.mailbox.unread > a {
padding-right: 36px;
}
#mailboxlist li.mailbox.selected > a {
background-position: 6px -21px;
}
#mailboxlist li.mailbox.inbox > a {
background-position: 6px -189px;
}
#mailboxlist li.mailbox.inbox.selected > a {
background-position: 6px -213px;
}
#mailboxlist li.mailbox.drafts > a {
background-position: 6px -238px;
}
#mailboxlist li.mailbox.drafts.selected > a {
background-position: 6px -262px;
}
#mailboxlist li.mailbox.sent > a {
background-position: 6px -286px;
}
#mailboxlist li.mailbox.sent.selected > a {
background-position: 6px -310px;
}
#mailboxlist li.mailbox.junk > a {
background-position: 6px -334px;
}
#mailboxlist li.mailbox.junk.selected > a {
background-position: 6px -358px;
}
#mailboxlist li.mailbox.trash > a {
background-position: 6px -382px;
}
#mailboxlist li.mailbox.trash.selected > a {
background-position: 6px -406px;
}
#mailboxlist li.mailbox.archive > a {
background-position: 6px -1699px;
}
#mailboxlist li.mailbox.archive.selected > a {
background-position: 6px -1723px;
}
#mailboxlist li.mailbox ul li.drafts > a {
background-position: 23px -238px;
}
#mailboxlist li.mailbox ul li.drafts.selected > a {
background-position: 23px -262px;
}
#mailboxlist li.mailbox ul li.sent > a {
background-position: 23px -286px;
}
#mailboxlist li.mailbox ul li.sent.selected > a {
background-position: 23px -310px;
}
#mailboxlist li.mailbox ul li.junk > a {
background-position: 23px -334px;
}
#mailboxlist li.mailbox ul li.junk.selected > a {
background-position: 23px -358px;
}
#mailboxlist li.mailbox ul li.trash > a {
background-position: 23px -382px;
}
#mailboxlist li.mailbox ul li.trash.selected > a {
background-position: 23px -406px;
}
#mailboxlist li.mailbox ul li.archive > a {
background-position: 23px -1699px;
}
#mailboxlist li.mailbox ul li.archive.selected > a {
background-position: 23px -1723px;
}
#mailboxlist li.unread {
font-weight: bold;
}
#mailboxlist li.virtual > a {
color: #aaa;
}
#mailboxlist li.recent > a {
color: #017cb4;
}
#mailboxlist li.mailbox div.treetoggle {
top: 13px;
left: 19px;
}
#mailboxlist li.mailbox ul li:last-child {
border-bottom: 0;
}
/* nested mailboxes */
#mailboxlist li.mailbox ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #bbd3da;
}
#mailboxlist li.mailbox ul li a {
padding-left: 52px; /* 36 + 1 x 16 */
background-position: 22px -93px; /* 6 + 1 x 16 */
}
#mailboxlist li.mailbox ul li.selected > a {
background-position: 22px -117px;
}
#mailboxlist li.mailbox ul li div.treetoggle {
left: 33px;
top: 14px;
}
#mailboxlist li.mailbox ul ul li.mailbox a {
padding-left: 68px; /* 2x */
background-position: 38px -93px;
}
#mailboxlist li.mailbox ul ul li.selected > a {
background-position: 38px -117px;
}
#mailboxlist li.mailbox ul ul li div.treetoggle {
left: 48px;
}
#mailboxlist li.mailbox ul ul ul li.mailbox a {
padding-left: 84px; /* 3x */
background-position: 54px -93px;
}
#mailboxlist li.mailbox ul ul ul li.selected > a {
background-position: 54px -117px;
}
#mailboxlist li.mailbox ul ul ul li div.treetoggle {
left: 64px;
}
#mailboxlist li.mailbox ul ul ul ul li.mailbox a {
padding-left: 100px; /* 4x */
background-position: 70px -93px;
}
#mailboxlist li.mailbox ul ul ul ul li.selected > a {
background-position: 70px -117px;
}
#mailboxlist li.mailbox ul ul ul ul li div.treetoggle {
left: 80px;
}
/* indent folders on levels > 4 */
#mailboxlist li.mailbox ul ul ul ul ul li {
padding-left: 16px;
}
#mailboxlist li.mailbox ul ul ul ul ul li div.treetoggle {
left: 96px;
}
#mailboxlist li.mailbox .unreadcount {
position: absolute;
top: 3px;
right: 6px;
min-width: 1.8em;
padding: 2px 4px;
background: #82acb5;
background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
background: -o-linear-gradient(top, #82acb5 0%, #6a939f 100%);
background: -ms-linear-gradient(top, #82acb5 0%, #6a939f 100%);
background: linear-gradient(top, #82acb5 0%, #6a939f 100%);
box-shadow: inset 0 1px 1px 0 #536d72;
-o-box-shadow: inset 0 1px 1px 0 #536d72;
-webkit-box-shadow: inset 0 1px 1px 0 #536d72;
-moz-box-shadow: inset 0 1px 1px 0 #536d72;
border-radius: 9px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: none;
}
#mailboxlist li.mailbox.selected > a .unreadcount {
background: #005d76;
background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
background: linear-gradient(top, #005d76 0%, #004558 100%);
box-shadow: inset 0 1px 1px 0 #003645;
-o-box-shadow: inset 0 1px 1px 0 #003645;
-webkit-box-shadow: inset 0 1px 1px 0 #003645;
-moz-box-shadow: inset 0 1px 1px 0 #003645;
}
#mailboxlist li.mailbox.recent > a .unreadcount {
background: #017cb4;
background: -moz-linear-gradient(top, #017cb4 0%, #006ca4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#017cb4), color-stop(100%,#006ca4));
background: -o-linear-gradient(top, #017cb4 0%, #006ca4 100%);
background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%);
background: linear-gradient(top, #017cb4 0%, #006ca4 100%);
box-shadow: inset 0 1px 1px 0 #005080;
-o-box-shadow: inset 0 1px 1px 0 #005080;
-webkit-box-shadow: inset 0 1px 1px 0 #005080;
-moz-box-shadow: inset 0 1px 1px 0 #005080;
}
#searchfilter {
position: absolute;
right: 256px;
width: auto;
top: 2px;
}
#searchfilter select {
height: 26px;
}
#mailview-left select.mailboxlist {
position: relative;
top: 10px;
width: 100%;
}
#messagetoolbar {
position: absolute;
top: -6px;
left: 0;
height: 40px;
white-space: nowrap;
z-index: 10;
}
#messagetoolbar.fullwidth {
right: 0;
}
#messagesearchtools {
position: absolute;
right: 0;
top: 0;
}
#mailpreviewtoggle {
display: block;
position: absolute;
top: 6px;
right: 4px;
width: 20px;
height: 18px;
background: url(images/buttons.png) -3px -458px no-repeat;
}
#mailpreviewtoggle.enabled {
background-position: -28px -458px;
}
/*** message list ***/
table.messagelist {
z-index: 1;
}
table.messagelist.fixedcopy {
z-index: 2;
}
.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 {
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 {
width: 26px;
}
.messagelist tr td.threads {
width: 26px;
}
.webkit .messagelist tr td.threads {
width: 30px;
}
.messagelist tr td.threads,
.messagelist tr td.threads + td {
border-left: 0;
}
.messagelist tr td.size {
width: 60px;
text-align: right;
}
.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 {
width: 200px;
}
.messagelist tr td.date {
width: 155px;
}
.messagelist tr.message {
/* background-color: #fff; */
}
.messagelist tr.thread.expanded td {
background-color: #ededed;
}
.messagelist tr.unread {
font-weight: bold;
/* background-color: #fff; */
}
.messagelist tr.flagged td,
.messagelist tr.flagged td a {
color: #f30;
}
.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 {
background-position: right -944px;
}
.messagelist td img {
vertical-align: middle;
display: inline-block;
}
.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 {
cursor: pointer;
}
.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 {
display: inline-block;
vertical-align: middle;
height: 18px;
width: 20px;
padding: 0;
background: url(images/listicons.png) -100px 0 no-repeat;
}
.messagelist tbody tr td.attachment span.attachment {
background-position: 0 -996px;
}
.messagelist thead tr td.attachment span.attachment {
background-position: -24px -997px;
}
.messagelist tbody tr td.attachment span.report {
background-position: -24px -1116px;
}
.messagelist thead tr td.priority span.priority {
background-position: -24px -1845px;
}
.messagelist tr td.priority span.prio5 {
background-position: 0 -1905px;
}
.messagelist tr td.priority span.prio4 {
background-position: 0 -1885px;
}
.messagelist tr td.priority span.prio2 {
background-position: 0 -1865px;
}
.messagelist tr td.priority span.prio1 {
background-position: 0 -1845px;
}
.messagelist tbody tr td.flag span.flagged {
background-position: 0 -1036px;
}
.messagelist thead tr td.flag span.flagged {
background-position: -22px -1036px;
}
.messagelist tr td.status span.msgicon:hover {
background-position: -23px -1056px;
}
.messagelist tr td.flag span.unflagged:hover {
background-position: -23px -1076px;
}
.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 {
background-position: 0 -1076px;
}
.messagelist tr td.subject span.forwarded {
background-position: 0 -1096px;
}
.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 {
background-position: 0 1056px; /* no icon */
}
/*
.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 {
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 {
background-position: 0 -1016px;
}
.messagelist thead tr td.status span.status {
background-position: -23px -1017px;
}
.messagelist tr td div.collapsed {
background-position: 0 -1137px;
cursor: pointer;
}
.messagelist tr td div.expanded {
background-position: 0 -1157px;
cursor: pointer;
}
.messagelist tr td.threads div.listmenu {
background-position: 0 -976px;
cursor: pointer;
width: 26px;
}
.messagelist thead tr td.subject,
.messagelist tbody tr td.subject {
width: 99%;
white-space: nowrap;
}
.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 {
text-decoration: underline;
}
/**** tree indicators ****/
.messagelist tbody tr td span.branch div {
display: inline-block;
}
.messagelist tbody tr td span.branch div.tree {
width: 15px;
}
#listoptions ul.proplist {
min-width: 16em;
}
/**** message view ****/
#mailpreviewframe {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0px;
}
#messagecontframe {
border: 0;
border-radius: 4px 4px 0 0;
}
#messagecontent {
position: absolute;
top: 110px;
left: 0;
width: 100%;
bottom: 1px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#messageheader,
#composeheaders {
position: relative;
padding: 3px 0;
background: #f9f9f9;
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(top, #fff 0%, #f0f0f0 100%);
border-bottom: 1px solid #dfdfdf;
}
#mailview-right #messageheader {
border-radius: 4px 4px 0 0;
padding-left: 78px;
/* avoid headers eating up all the vertical space */
max-height: 50%;
overflow: auto;
}
h2.subject {
font-size: 15px;
margin: 0 15em 0 0;
padding: 4px 8px 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#mailview-right #messageheader h2.subject {
margin-left: -56px;
}
h3.subject {
font-size: 14px;
margin: 0 12em 0 0;
padding: 8px 8px 4px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.headers-table td {
color: #666;
padding: 2px 8px;
}
.headers-table td.header,
.ui-dialog-content.popup span.adr {
font-weight: bold;
}
.headers-table td.header-title {
white-space: nowrap;
}
.headers-table td.header a,
.ui-dialog-content.popup span.adr a {
color: #666;
text-decoration: none;
}
.headers-table td.header a:hover,
.ui-dialog-content.popup span.adr a:hover {
text-decoration: underline;
}
.headers-table td.subject {
color: #333;
font-size: 110%;
font-weight: bold;
}
.headers-table td.header span,
.ui-dialog-content.popup span.adr {
white-space: nowrap;
}
.headers-table td.header a.morelink {
color: #0069a6;
white-space: nowrap;
font-weight: normal;
}
.rcmaddcontact {
position: relative;
top: 1px;
margin-left: 0.5em;
}
.rcmaddcontact imp {
width: 20px;
height: 13px;
}
#preview-allheaders {
display: none;
}
#preview-allheaders td.header-title,
#preview-shortheaders td.header-title {
padding-left: 0;
}
#preview-shortheaders td.header {
padding-right: 18px;
}
.moreheaderstoggle {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 18px;
padding: 0;
outline: none;
background: #f2f2f2;
background: -moz-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0,#fbfbfb), color-stop(100%,#e9e9e9));
background: -o-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
border-right: 1px solid #dfdfdf;
border-radius: 3px 0 0 0; /* for Opera */
}
.moreheaderstoggle .iconlink {
display: inline-block;
position: absolute;
top: 8px;
left: 0;
width: 18px;
height: 16px;
background: url(images/buttons.png) -27px -242px no-repeat;
}
.moreheaderstoggle.remove .iconlink {
top: auto;
bottom: 5px;
background-position: -5px -242px;
}
#full-headers {
position: relative;
}
div.more-headers {
position: absolute;
top: -12px;
right: 10px;
width: 12px;
height: 10px;
cursor: pointer;
background: url(images/buttons.png) center -1579px no-repeat;
}
div.hide-headers {
background-position: center -1590px;
}
#all-headers {
position: relative;
margin: 4px 10px;
padding: 0;
height: 180px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fdfdfd;
-moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
-webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
-o-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
}
#headers-source {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 3px 6px;
overflow: auto;
text-align: left;
color: #333;
}
#messageheader.previewheader #all-headers {
margin-left: 0;
}
#messageheader.previewheader {
position: relative;
height: auto;
min-height: 52px;
padding: 0 0 3px 72px;
}
#messageheader.previewheader h3.subject {
padding: 8px 8px 2px 0;
}
#messageheader.previewheader #contactphoto {
display: block;
position: absolute;
top: 11px;
left: 30px;
width: 32px;
height: 32px;
overflow: hidden;
background: url(images/contactpic_32px.png) center center no-repeat #fff;
border-radius: 3px;
}
#messageheader.previewheader #contactphoto img {
width: 32px;
height: auto;
border-radius: 3px;
}
#messageheader .message-headers {
min-height: 60px;
}
#messageheader #contactphoto {
display: block;
position: absolute;
top: 34px;
left: 30px;
width: 48px;
height: 48px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #e6e6e6;
background: url(images/contactpic_48px.png) center center no-repeat #fff;
}
#messageheader #contactphoto img {
width: 48px;
height: auto;
border-radius: 4px;
}
#messageheader #countcontrols,
#messageheader #formatcontrols {
position: absolute;
top: 8px;
right: 8px;
text-align: right;
white-space: nowrap;
}
#messageheader #formatcontrols {
top: 38px;
right: 8px;
}
#messageheader .pagenav .countdisplay {
min-width: 0;
padding-right: 0.5em;
white-space: nowrap;
}
#messagecontent .leftcol,
#messagepreview .leftcol {
margin-right: 252px;
overflow-x: auto;
}
#messagecontent .rightcol,
#messagepreview .rightcol {
float: right;
/*
position: absolute;
top: 10px;
right: 10px;
height: 90%;
*/
width: 230px;
margin: 8px;
min-height: 200px;
background: #f0f0f0;
padding: 8px;
border-radius: 4px;
}
#messagebody {
position: relative;
margin: 8px;
}
#message-objects div,
#messagebody span.part-notice {
margin: 8px;
}
#message-objects div.notice,
#message-buttons div.notice {
display: block;
color: #960;
border: 1px solid #ffdf0e;
background-color: #fef893;
background-position: 5px -83px;
padding: 6px 12px 4px 30px;
white-space: normal;
}
#message-objects div a.button,
#messagebody span.part-notice a.button {
margin-left: 10px;
}
div.message-part,
div.message-htmlpart,
div.message-partheaders {
padding: 10px 2px;
border-top: 1px solid #ccc;
}
#messagebody div:first-child {
padding-top: 0;
border-top: 0;
}
div.message-part pre,
div.message-htmlpart pre,
div.message-part div.pre {
margin: 0;
padding: 0;
font-family: monospace;
font-size: 12px;
white-space: -moz-pre-wrap !important;
white-space: pre-wrap !important;
white-space: pre;
}
div.message-part span.sig {
color: #666;
}
div.message-part blockquote {
color: blue;
border-left: 2px solid blue;
border-right: 2px solid blue;
background-color: #F6F6F6;
margin: 2px 0 2px 0;
padding: 1px 8px 1px 10px;
}
div.message-part blockquote blockquote {
color: green;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.message-part blockquote blockquote blockquote {
color: #900;
border-left: 2px solid #b00;
border-right: 2px solid #b00;
}
div.message-partheaders {
margin-top: 8px;
padding: 8px 0;
}
div.message-partheaders .headers-table {
width: 100%;
}
div.message-partheaders .headers-table td.header-title {
width: auto;
padding-left: 0;
}
div.message-partheaders .headers-table td.header {
width: 88%;
}
#messagebody > hr {
color: #fff;
background: #fff;
border: 0;
border-bottom: 2px solid #f0f0f0;
}
#messagebody fieldset.image-attachment {
border: 0;
border-top: 1px solid #ccc;
margin-top: 1em;
}
#messagebody fieldset.image-attachment p > img {
max-width: 80%;
}
#messagebody legend.image-filename {
color: #999;
font-size: 0.9em;
margin: 0 1em;
}
#messagebody p.image-attachment {
position: relative;
padding: 1em;
border-top: 1px solid #ccc;
}
#messagebody p.image-attachment a.image-link {
float: left;
display: block;
margin-right: 2em;
min-width: 160px;
min-height: 60px;
text-align: center;
}
#messagebody p.image-attachment .image-filename {
display: block;
font-weight: bold;
line-height: 1.6em;
}
#messagebody p.image-attachment .image-filesize {
padding-right: 1em;
}
#messagebody p.image-attachment .attachment-links a {
margin-right: 0.6em;
}
#messagepartcontainer {
position: absolute;
top: 42px;
left: 232px;
right: 0;
bottom: 0;
}
#messagepartframe {
border: 0;
width: 100%;
height: 100%;
}
#messagepartheader {
position: absolute;
top: 42px;
left: 0;
width: 220px;
bottom: 0;
}
#messagepartheader table {
table-layout: fixed;
overflow: hidden;
}
#messagepartheader table td {
text-overflow: ellipsis;
overflow: hidden;
}
#messagepartheader table td.title {
width: 60px;
padding-right: 0;
}
/*** message composition ***/
#composeview-left {
position: absolute;
top: 0;
left: 0;
width: 250px;
bottom: 0;
}
#composeview-right {
position: absolute;
top: 0;
left: 262px;
right: 0;
bottom: 0;
}
#compose-contacts {
position: absolute;
top: 42px;
left: 0;
width: 100%;
bottom: 0;
}
#composequicksearch {
position: relative;
padding: 4px;
background: #c7e3ef;
}
#composequicksearch .searchbox input {
width: 100%;
height: 26px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#composequicksearch #searchmenulink {
width: 15px;
}
#compose-contacts #directorylist {
border-bottom: 4px solid #c7e3ef;
}
#compose-contacts .scroller {
top: 65px;
border-top: 1px solid #fff;
}
#contacts-table {
table-layout: fixed;
}
#contacts-table td {
width: 100%;
}
#contacts-table td span {
display: block;
}
#contacts-table td span.email {
display: inline;
color: #69939e;
font-style: italic;
margin-left: 0.5em;
}
#compose-contacts li a, #contacts-table td {
background: url(images/listicons.png) -100px 0 no-repeat;
overflow: hidden;
padding-left: 36px;
text-overflow: ellipsis;
}
#contacts-table td.contactgroup a {
color: #376572;
text-decoration: none;
}
#contacts-table td.contactgroup a span {
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: 11px;
margin-left: 0.3em;
}
#contacts-table tr:first-child td {
border-top: 0;
}
#compose-contacts li.addressbook a {
background-position: 6px -766px;
}
#compose-contacts li.addressbook.selected a {
background-position: 6px -791px;
}
#contacts-table td.contactgroup {
background-position: 6px -1555px;
}
#contacts-table tr.unfocused td.contactgroup,
#contacts-table tr.selected td.contactgroup {
background-position: 6px -1579px;
}
#contacts-table td.contact {
background-position: 6px -1603px;
}
#contacts-table tr.unfocused td.contact,
#contacts-table tr.selected td.contact {
background-position: 6px -1627px;
}
#compose-content {
position: absolute;
top: 42px;
left: 0;
right: 0;
bottom: 0px;
overflow: hidden;
}
#composeheaders {
border-radius: 4px 4px 0 0;
padding-left: 19px;
}
#composebuttons {
position: absolute;
top: 6px;
right: 6px;
width: auto;
white-space: nowrap;
z-index: 100;
}
#composebuttons a.button.extwin {
padding: 2px 3px;
}
.compose-headers {
width: 99%;
margin-bottom: 2px;
}
.compose-headers td {
padding: 2px 4px;
}
.compose-headers td.title {
width: 11%;
white-space: nowrap;
padding-left: 6px;
}
.compose-headers td.title label {
float: left;
}
.compose-headers td.title a.iconbutton {
float: right;
position: relative;
top: -2px;
width: 15px;
}
.compose-headers td.editfield {
width: 90%;
padding-left: 4px;
}
.compose-headers td.editfield a.iconlink {
margin-left: 0.5em;
}
.compose-headers td.formlinks {
padding: 0 4px;
}
.compose-headers td.top {
vertical-align: top;
padding-top: 10px;
}
.compose-headers td textarea,
.compose-headers td input {
width: 100%;
resize: none;
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#compose-cc, #compose-bcc, #compose-replyto, #compose-followupto {
display: none;
}
#composeoptions {
display: none;
padding: 2px 0 0 8px;
white-space: normal;
border-top: 1px solid #dfdfdf;
box-shadow: inset 0 1px 0 0 #fff;
-o-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
}
.composeoption {
color: #666;
padding-right: 22px;
white-space: nowrap;
}
#composeoptions .composeoption {
display: inline-block;
padding: 4px 22px 4px 0;
}
#composeoptions .composeoption:last-child {
padding-right: 4px;
}
.mozilla .composeoption input {
vertical-align: -3px;
}
#composeview-bottom {
position: relative;
width: 100%;
height: 200px;
}
#composebodycontainer {
position: absolute;
top: 0;
left: 0;
right: 260px;
bottom: 0;
border-radius: 0 0 0 4px;
}
#composebodycontainer.buttons {
bottom: 42px;
}
#composebody {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 99%;
border: 0;
border-radius: 0 0 0 4px;
padding: 8px 0 8px 8px;
resize: none;
font-family: monospace;
font-size: 9pt;
outline: none;
box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
-moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
-webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
-o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
}
#composebody:active,
#composebody:focus {
box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
-moz-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
-webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
-o-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
}
#compose-attachments {
position: absolute;
right: 0;
top: 1px;
bottom: 0;
width: 240px;
background: #f0f0f0;
border-style: solid;
border-color: #f0f0f0 #f0f0f0 #f0f0f0 #ddd;
border-width: 1px;
padding: 8px;
overflow: auto;
}
#compose-attachments.droptarget {
background-image: url(images/filedrop.png);
background-position: center bottom;
background-repeat: no-repeat;
}
#compose-attachments.droptarget.hover,
#compose-attachments.droptarget.active {
border-color: #019bc6;
box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
}
#compose-attachments.droptarget.hover {
background-color: #d9ecf4;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}
#composeview-bottom .formbuttons.floating {
position: absolute;
width: auto;
right: 260px;
z-index: 200;
padding-bottom: 8px;
}
.defaultSkin table.mceLayout,
.defaultSkin table.mceLayout tr.mceLast td {
border: 0 !important;
}
.defaultSkin td.mceToolbar {
border: 0 !important;
}
.defaultSkin table.mceLayout tr.mceFirst td {
background: #f0f0f0;
}
#composebody_toolbargroup {
border-bottom: 1px solid #ddd;
}
#uploadform a.iconlink {
margin-left: 1em;
text-indent: -5000px;
}
#uploadform form div {
margin: 4px 0;
}
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 8f19b9f7f..ff5f7549c 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -1,239 +1,238 @@
<roundcube:object name="doctype" value="html5" />
<html>
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
<style type="text/css">
<roundcube:if condition="config:preview_pane == true" />
#mailview-top { height: 276px; }
#mailview-bottom { top: 330px; height: auto; display: block; }
#mailpreviewframe { display: block; }
<roundcube:endif />
</style>
</head>
<body>
<div class="minwidth">
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
<!-- toolbar -->
<div id="messagetoolbar" class="toolbar">
<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" />
<roundcube:include file="/includes/mailtoolbar.html" />
</div>
<div id="mailview-left">
<!-- folders list -->
-<div id="folderlist-header"></div>
<div id="mailboxcontainer" class="uibox listbox">
<div id="folderlist-content" class="scroller withfooter">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
<div id="folderlist-footer" class="boxfooter">
<roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="⚙" />
<roundcube:if condition="env:quota" />
<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
<roundcube:endif />
</div>
</div>
</div>
<div id="mailview-right">
<div id="messagesearchtools">
<!-- search filter -->
<div id="searchfilter">
<roundcube:object name="searchfilter" class="searchfilter decorated" />
</div>
<!-- search box -->
<div id="quicksearchbar" class="searchbox">
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
</div>
<roundcube:if condition="config:preview_pane == true" />
<div id="mailview-top" class="uibox">
<roundcube:else />
<div id="mailview-top" class="uibox fullheight">
<roundcube:endif />
<!-- messagelist -->
<div id="messagelistcontainer" class="boxlistcontent">
<roundcube:object name="messages"
id="messagelist"
class="records-table messagelist sortheader fixedheader"
optionsmenuIcon="true" />
</div>
<!-- list footer -->
<div id="messagelistfooter">
<div id="listcontrols">
<roundcube:if condition="env:threads" />
<a href="#list" class="iconbutton listmode" id="maillistmode" title="<roundcube:label name='list' />">List</a>
<a href="#threads" class="iconbutton threadmode" id="mailthreadmode" title="<roundcube:label name='threads' />">Threads</a>
<roundcube:else />
<a href="#list" class="iconbutton listmode selected" title="<roundcube:label name='list' />" onclick="return false">List</a>
<a href="#threads" class="iconbutton threadmode disabled" title="<roundcube:label name='threads' />" onclick="return false">Threads</a>
<roundcube:endif />
</div>
<div id="listselectors">
<a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.show_popup('listselectmenu');return false"><span class="handle"><roundcube:label name="select" /></span></a>
<roundcube:if condition="env:threads" />
<a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.show_popup('threadselectmenu');return false"><span class="handle"><roundcube:label name="threads" /></span></a>
<roundcube:endif />
</div>
<div id="countcontrols" class="pagenav dark">
<roundcube:object name="messageCountDisplay" class="countdisplay" />
<span class="pagenavbuttons">
<roundcube:button command="firstpage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstpage" content="|&lt;" />
<roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" content="&lt;" />
<roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" content="&gt;" />
<roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" content="&gt;|" />
</span>
</div>
<roundcube:container name="listcontrols" id="listcontrols" />
<a href="#preview" id="mailpreviewtoggle" title="<roundcube:label name='previewpane' />"></a>
</div>
</div><!-- end mailview-top -->
<div id="mailview-bottom" class="uibox">
<div id="mailpreviewframe" class="iframebox">
<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
</div>
</div><!-- end mailview-bottom -->
</div><!-- end mailview-right -->
</div><!-- end mainscreen -->
</div><!-- end minwidth -->
<div id="searchmenu" class="popupmenu">
<ul class="toolbarmenu">
<li><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
</ul>
</div>
<div id="dragmessagemenu" class="popupmenu">
<ul class="toolbarmenu">
<li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
<li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
</ul>
</div>
<div id="mailboxmenu" class="popupmenu">
<ul class="toolbarmenu" id="mailboxoptionsmenu">
<li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
<li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
<li><roundcube:button name="messageimport" type="link" class="active" label="importmessages" onclick="UI.show_uploadform()" /></li>
<li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
<roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
</ul>
</div>
<div id="listselectmenu" class="popupmenu dropdown">
<ul class="toolbarmenu iconized">
<li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
<li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
<li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
<li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
<li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
<li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
</ul>
</div>
<div id="threadselectmenu" class="popupmenu dropdown">
<ul class="toolbarmenu">
<li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
<li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
<li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
</ul>
</div>
<div id="listoptions" class="propform popupdialog">
<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listcolumns" /></legend>
<ul class="proplist">
<li><label class="disabled"><input type="checkbox" name="list_col[]" value="threads" checked="checked" disabled="disabled" /> <span><roundcube:label name="threads" /></span></label></li>
<li><label class="disabled"><input type="checkbox" name="list_col[]" value="subject" checked="checked" disabled="disabled" /> <span><roundcube:label name="subject" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="fromto" /> <span><roundcube:label name="fromto" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="from" /> <span><roundcube:label name="from" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="to" /> <span><roundcube:label name="to" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="replyto" /> <span><roundcube:label name="replyto" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="cc" /> <span><roundcube:label name="cc" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="date" /> <span><roundcube:label name="date" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="size" /> <span><roundcube:label name="size" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="status" /> <span><roundcube:label name="readstatus" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="attachment" /> <span><roundcube:label name="attachment" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="flag" /> <span><roundcube:label name="flag" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="priority" /> <span><roundcube:label name="priority" /></span></label></li>
</ul>
</fieldset>
<roundcube:endif />
<roundcube:if condition="!in_array('message_sort_col', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listsorting" /></legend>
<ul class="proplist">
<li><label><input type="radio" name="sort_col" value="" /> <span><roundcube:label name="nonesort" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="arrival" /> <span><roundcube:label name="arrival" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="date" /> <span><roundcube:label name="sentdate" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="subject" /> <span><roundcube:label name="subject" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="fromto" /> <span><roundcube:label name="fromto" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="from" /> <span><roundcube:label name="from" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="to" /> <span><roundcube:label name="to" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="cc" /> <span><roundcube:label name="cc" /></span></label></li>
<li><label><input type="radio" name="sort_col" value="size" /> <span><roundcube:label name="size" /></span></label></li>
</ul>
</fieldset>
<roundcube:endif />
<roundcube:if condition="!in_array('message_sort_order', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listorder" /></legend>
<ul class="proplist">
<li><label><input type="radio" name="sort_ord" value="ASC" /> <span><roundcube:label name="asc" /></span></label></li>
<li><label><input type="radio" name="sort_ord" value="DESC" /> <span><roundcube:label name="desc" /></span></label></li>
</ul>
</fieldset>
<roundcube:endif />
<br style="clear:both" />
<div class="formbuttons">
<roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" />
<roundcube:button command="menu-open" id="listmenucancel" type="input" class="button" label="cancel" />
</div>
</div>
<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />">
<roundcube:object name="messageimportform" id="uploadform" buttons="no" />
<div class="formbuttons">
<roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" />
<roundcube:button name="close" type="input" class="button" label="cancel" onclick="UI.show_uploadform()" />
</div>
</div>
<roundcube:include file="/includes/footer.html" />
</body>
</html>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index add691054..44fc727f6 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -1,1437 +1,1433 @@
/**
* Roundcube functions for default skin interface
*
* Copyright (c) 2013, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original autors in the README file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
function rcube_mail_ui()
{
var env = {};
var popups = {};
var popupconfig = {
forwardmenu: { editable:1 },
searchmenu: { editable:1, callback:searchmenu },
attachmentmenu: { },
listoptions: { editable:1 },
dragmenu: { sticky:1 },
groupmenu: { above:1 },
mailboxmenu: { above:1 },
spellmenu: { callback: spellmenu },
// toggle: #1486823, #1486930
'attachment-form': { editable:1, above:1, toggle:!bw.ie&&!bw.linux },
'upload-form': { editable:1, toggle:!bw.ie&&!bw.linux }
};
var me = this;
var mailviewsplit;
var compose_headers = {};
var prefs;
// export public methods
this.set = setenv;
this.init = init;
this.init_tabs = init_tabs;
this.show_about = show_about;
this.show_popup = show_popup;
this.add_popup = add_popup;
this.set_searchmod = set_searchmod;
this.show_uploadform = show_uploadform;
this.show_header_row = show_header_row;
this.hide_header_row = hide_header_row;
this.update_quota = update_quota;
this.get_pref = get_pref;
this.save_pref = save_pref;
// set minimal mode on small screens (don't wait for document.ready)
if (window.$ && document.body) {
var minmode = get_pref('minimalmode');
if (parseInt(minmode) || (minmode === null && $(window).height() < 850)) {
$(document.body).addClass('minimal');
}
if (bw.tablet) {
$('#viewport').attr('content', "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
}
}
/**
*
*/
function setenv(key, val)
{
env[key] = val;
}
/**
* Get preference stored in browser
*/
function get_pref(key)
{
if (!prefs) {
prefs = window.localStorage ? rcmail.local_storage_get_item('prefs.larry', {}) : {};
}
// fall-back to cookies
if (prefs[key] == null) {
var cookie = rcmail.get_cookie(key);
if (cookie != null) {
prefs[key] = cookie;
// copy value to local storage and remove cookie
if (window.localStorage) {
rcmail.local_storage_set_item('prefs.larry', prefs);
rcmail.set_cookie(key, cookie, new Date()); // expire cookie
}
}
}
return prefs[key];
}
/**
* Saves preference value to browser storage
*/
function save_pref(key, val)
{
prefs[key] = val;
// write prefs to local storage
if (window.localStorage) {
rcmail.local_storage_set_item('prefs.larry', prefs);
}
else {
// store value in cookie
var exp = new Date();
exp.setYear(exp.getFullYear() + 1);
rcmail.set_cookie(key, val, exp);
}
}
/**
* Initialize UI
* Called on document.ready
*/
function init()
{
rcmail.addEventListener('message', message_displayed);
/*** prepare minmode functions ***/
$('#taskbar a').each(function(i,elem){
$(elem).append('<span class="tooltip">' + $('.button-inner', this).html() + '</span>')
});
$('#taskbar .minmodetoggle').click(function(e){
var ismin = $(document.body).toggleClass('minimal').hasClass('minimal');
save_pref('minimalmode', ismin?1:0);
$(window).resize();
});
/*** mail task ***/
if (rcmail.env.task == 'mail') {
rcmail.addEventListener('menu-open', menu_open)
.addEventListener('menu-save', menu_save)
.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') });
var dragmenu = $('#dragmessagemenu');
if (dragmenu.length) {
rcmail.gui_object('dragmenu', 'dragmessagemenu');
popups.dragmenu = dragmenu;
}
if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
rcmail.addEventListener('enable-command', enable_command)
.addEventListener('aftershow-headers', function() { layout_messageview(); })
.addEventListener('afterhide-headers', function() { layout_messageview(); });
$('#previewheaderstoggle').click(function(e){ toggle_preview_headers(); return false });
// add menu link for each attachment
$('#attachment-list > li').each(function() {
$(this).append($('<a class="drop"></a>').click(function() { attachmentmenu(this); }));
});
if (get_pref('previewheaders') == '1') {
toggle_preview_headers();
}
}
else if (rcmail.env.action == 'compose') {
rcmail.addEventListener('aftersend-attachment', show_uploadform)
.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); })
.addEventListener('aftertoggle-editor', function(e){
window.setTimeout(function(){ layout_composeview() }, 200);
if (e && e.mode)
$("select[name='editorSelector']").val(e.mode);
});
// Show input elements with non-empty value
var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto'];
for (f=0; f < fields.length; f++) {
v = fields[f]; field = $('#_'+v);
if (field.length) {
field.on('change', {v: v}, function(e) { if (this.value) show_header_row(e.data.v, true); });
if (field.val() != '')
show_header_row(v, true);
}
}
$('#composeoptionstoggle').click(function(){
$('#composeoptionstoggle').toggleClass('remove');
$('#composeoptions').toggle();
layout_composeview();
save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0');
return false;
}).css('cursor', 'pointer');
if (get_pref('composeoptions') !== '0') {
$('#composeoptionstoggle').click();
}
// adjust hight when textarea starts to scroll
$("textarea[name='_to'], textarea[name='_cc'], textarea[name='_bcc']").change(function(e){ adjust_compose_editfields(this); }).change();
rcmail.addEventListener('autocomplete_insert', function(p){ adjust_compose_editfields(p.field); });
// toggle compose options if opened in new window and they were visible before
var opener_rc = rcmail.opener();
if (opener_rc && opener_rc.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove'))
$('#composeoptionstoggle').click();
new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right',
orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init();
}
else if (rcmail.env.action == 'list' || !rcmail.env.action) {
var previewframe = $('#mailpreviewframe').is(':visible');
$('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
$('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
$('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });
mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
orientation:'h', relative:true, start:310, min:150, size:12, offset:4 });
if (previewframe)
mailviewsplit.init();
- new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer');
-
rcmail.addEventListener('setquota', update_quota)
.addEventListener('enable-command', enable_command)
.addEventListener('afterimport-messages', show_uploadform);
}
else if (rcmail.env.action == 'get') {
new rcube_splitter({ id:'mailpartsplitterv', p1:'#messagepartheader', p2:'#messagepartcontainer',
orientation:'v', relative:true, start:226, min:150, size:12}).init();
}
if ($('#mailview-left').length) {
new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right',
orientation:'v', relative:true, start:226, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init();
}
}
/*** settings task ***/
else if (rcmail.env.task == 'settings') {
rcmail.addEventListener('init', function(){
var tab = '#settingstabpreferences';
if (rcmail.env.action)
tab = '#settingstab' + (rcmail.env.action.indexOf('identity')>0 ? 'identities' : rcmail.env.action.replace(/\./g, ''));
$(tab).addClass('selected')
.children().first().removeAttr('onclick').click(function() { return false; });
});
if (rcmail.env.action == 'folders') {
new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details',
orientation:'v', relative:true, start:266, min:180, size:12 }).init();
new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer');
rcmail.addEventListener('setquota', update_quota);
}
else if (rcmail.env.action == 'identities') {
new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details',
orientation:'v', relative:true, start:266, min:180, size:12 }).init();
}
else if (rcmail.env.action == 'preferences' || !rcmail.env.action) {
new rcube_splitter({ id:'prefviewsplitter', p1:'#sectionslist', p2:'#preferences-box',
orientation:'v', relative:true, start:266, min:180, size:12 }).init();
}
else if (rcmail.env.action == 'edit-prefs') {
$('<a href="#toggle">▼</a>')
.addClass('advanced-toggle')
.appendTo('#preferences-details fieldset.advanced legend');
$('#preferences-details fieldset.advanced legend').click(function(e){
var collapsed = $(this).hasClass('collapsed'),
toggle = $('.advanced-toggle', this).html(collapsed ? '▲' : '▼');
$(this)
.toggleClass('collapsed')
.closest('fieldset').children('.propform').toggle()
}).addClass('collapsed')
}
}
/*** addressbook task ***/
else if (rcmail.env.task == 'addressbook') {
rcmail.addEventListener('afterupload-photo', show_uploadform)
.addEventListener('beforepushgroup', push_contactgroup)
.addEventListener('beforepopgroup', pop_contactgroup);
if (rcmail.env.action == '') {
new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init();
new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
orientation:'v', relative:true, start:286, min:270, size:12 }).init();
-
- new rcube_scroller('#directorylist-content', '#directorylist-header', '#directorylist-footer');
}
var dragmenu = $('#dragcontactmenu');
if (dragmenu.length) {
rcmail.gui_object('dragmenu', 'dragcontactmenu');
popups.dragmenu = dragmenu;
}
}
// turn a group of fieldsets into tabs
$('.tabbed').each(function(idx, elem){ init_tabs(elem); })
// decorate select elements
$('select.decorated').each(function(){
if (bw.opera) {
$(this).removeClass('decorated');
return;
}
var select = $(this),
parent = select.parent(),
height = Math.max(select.height(), 26) - 2,
width = select.width() - 22,
title = $('option', this).first().text();
if ($('option:selected', this).val() != '')
title = $('option:selected', this).text();
var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>')
.css('position', 'absolute')
.offset(select.position())
.insertAfter(select);
overlay.children().width(width).height(height).css('line-height', (height - 1) + 'px');
if (parent.css('position') != 'absolute')
parent.css('position', 'relative');
// re-set original select width to fix click action and options width in some browsers
select.width(overlay.width())
.change(function() {
var val = $('option:selected', this).text();
$(this).next().children().text(val);
});
});
// set min-width to show all toolbar buttons
var screen = $('body > div.minwidth');
if (screen.length) {
screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
}
$(document.body)
.bind('mouseup', body_mouseup)
.bind('keyup', function(e){
if (e.keyCode == 27) {
for (var id in popups) {
if (popups[id].is(':visible'))
show_popup(id, false);
}
}
});
$('iframe').load(function(e){
// this = iframe
try {
var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null;
$(doc).mouseup(body_mouseup);
}
catch (e) {
// catch possible "Permission denied" error in IE
};
})
.contents().mouseup(body_mouseup);
// don't use $(window).resize() due to some unwanted side-effects
window.onresize = resize;
resize();
}
/**
* Handler for mouse-up events on the document body.
* This will close all open popup menus
*/
function body_mouseup(e)
{
var config, obj, target = e.target;
if (target.className == 'inner')
target = e.target.parentNode;
for (var id in popups) {
obj = popups[id];
config = popupconfig[id];
if (obj.is(':visible')
&& target.id != id+'link'
&& !config.toggle
&& (!config.editable || !target_overlaps(target, obj.get(0)))
&& (!config.sticky || !rcube_mouse_is_over(e, obj.get(0)))
&& !$(target).is('.folder-selector-link')
) {
var myid = id+'';
window.setTimeout(function() { show_popupmenu(myid, false); }, 10);
}
}
}
/**
* Update UI on window resize
*/
function resize(e)
{
// resize in intervals to prevent lags and double onresize calls in Chrome (#1489005)
var interval = e ? 10 : 0;
if (rcmail.resize_timeout)
window.clearTimeout(rcmail.resize_timeout);
rcmail.resize_timeout = window.setTimeout(function() {
if (rcmail.env.task == 'mail') {
if (rcmail.env.action == 'show' || rcmail.env.action == 'preview')
layout_messageview();
else if (rcmail.env.action == 'compose')
layout_composeview();
}
// make iframe footer buttons float if scrolling is active
$('body.iframe .footerleft').each(function(){
var footer = $(this),
body = $(document.body),
floating = footer.hasClass('floating'),
overflow = body.outerHeight(true) > $(window).height();
if (overflow != floating) {
var action = overflow ? 'addClass' : 'removeClass';
footer[action]('floating');
body[action]('floatingbuttons');
}
});
}, interval);
}
/**
* Triggered when a new user message is displayed
*/
function message_displayed(p)
{
var siblings = $(p.object).siblings('div');
if (siblings.length)
$(p.object).insertBefore(siblings.first());
// show a popup dialog on errors
if (p.type == 'error' && rcmail.env.task != 'login') {
// hide original message object, we don't want both
rcmail.hide_message(p.object);
if (me.message_timer) {
window.clearTimeout(me.message_timer);
}
if (!me.messagedialog) {
me.messagedialog = $('<div>').addClass('popupdialog').hide();
}
var msg = p.message,
dialog_close = function() {
// check if dialog is still displayed, to prevent from js error
me.messagedialog.is(':visible') && me.messagedialog.dialog('destroy').hide();
};
if (me.messagedialog.is(':visible'))
msg = me.messagedialog.html() + '<p>' + p.message + '</p>';
me.messagedialog.html(msg)
.dialog({
resizable: false,
closeOnEscape: true,
dialogClass: 'popupmessage ' + p.type,
title: env.errortitle,
close: dialog_close,
position: ['center', 'center'],
hide: {effect: 'fadeOut'},
width: 420,
minHeight: 90
}).show();
me.message_timer = window.setTimeout(dialog_close, p.timeout);
}
}
/**
* Adjust UI objects of the mail view screen
*/
function layout_messageview()
{
$('#messagecontent').css('top', ($('#messageheader').outerHeight() + 1) + 'px');
$('#message-objects div a').addClass('button');
if (!$('#attachment-list li').length) {
$('div.rightcol').hide();
$('div.leftcol').css('margin-right', '0');
}
}
function render_mailboxlist(splitter)
{
// TODO: implement smart shortening of long folder names
}
function resize_leftcol(splitter)
{
// STUB
}
function adjust_compose_editfields(elem)
{
if (elem.nodeName == 'TEXTAREA') {
var $elem = $(elem), line_height = 14, // hard-coded because some browsers only provide the outer height in elem.clientHeight
content_height = elem.scrollHeight,
rows = elem.value.length > 80 && content_height > line_height*1.5 ? 2 : 1;
$elem.css('height', (line_height*rows) + 'px');
layout_composeview();
}
}
function layout_composeview()
{
var body = $('#composebody'),
form = $('#compose-content'),
bottom = $('#composeview-bottom'),
w, h, bh, ovflw, btns = 0,
minheight = 300,
bh = (form.height() - bottom.position().top);
ovflw = minheight - bh;
btns = ovflw > -100 ? 0 : 40;
bottom.css('height', Math.max(minheight, bh) + 'px');
form.css('overflow', ovflw > 0 ? 'auto' : 'hidden');
w = body.parent().width() - 5;
h = body.parent().height() - 16;
body.width(w).height(h);
$('#composebody_tbl').width((w+8)+'px').height('').css('margin-top', '1px');
$('#composebody_ifr').width((w+8)+'px').height((h-40)+'px');
$('#googie_edit_layer').height(h+'px');
// $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons');
// $('#composeformbuttons')[(btns ? 'show' : 'hide')]();
var abooks = $('#directorylist');
$('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
}
function update_quota(p)
{
var step = 24, step_count = 20,
y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0;
// never show full-circle if quota is close to 100% but below.
if (p.total && y == step * step_count && p.percent < 100)
y -= step;
$('#quotadisplay').css('background-position', '0 -'+y+'px');
}
function enable_command(p)
{
if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) {
var label = rcmail.gettext(p.status ? 'replylist' : 'replyall');
if (rcmail.env.action == 'preview')
$('a.button.replyall').attr('title', label);
else
$('a.button.reply-all').text(label).attr('title', label);
}
}
/**
* Register a popup menu
*/
function add_popup(popup, config)
{
var obj = popups[popup] = $('#'+popup);
obj.appendTo(document.body); // move it to top for proper absolute positioning
if (obj.length)
popupconfig[popup] = $.extend(popupconfig[popup] || {}, config || {});
}
/**
* Trigger for popup menus
*/
function show_popup(popup, show, config)
{
// auto-register menu object
if (config || !popupconfig[popup])
add_popup(popup, config);
var visible = show_popupmenu(popup, show),
config = popupconfig[popup];
if (typeof config.callback == 'function')
config.callback(visible);
}
/**
* Show/hide a specific popup menu
*/
function show_popupmenu(popup, show)
{
var obj = popups[popup],
config = popupconfig[popup],
ref = $(config.link ? config.link : '#'+popup+'link'),
above = config.above;
if (!obj) {
obj = popups[popup] = $('#'+popup);
obj.appendTo(document.body); // move them to top for proper absolute positioning
}
if (!obj || !obj.length)
return false;
if (typeof show == 'undefined')
show = obj.is(':visible') ? false : true;
else if (config.toggle && show && obj.is(':visible'))
show = false;
if (show && ref.length) {
var parent = ref.parent(),
win = $(window),
pos;
if (parent.hasClass('dropbutton'))
ref = parent;
pos = ref.offset();
ref.offsetHeight = ref.outerHeight();
if (!above && pos.top + ref.offsetHeight + obj.height() > win.height())
above = true;
if (pos.left + obj.width() > win.width())
pos.left = win.width() - obj.width() - 12;
obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
}
obj[show?'show':'hide']();
// hide drop-down elements on buggy browsers
if (bw.ie6 && config.overlap) {
$('select').css('visibility', show?'hidden':'inherit');
$('select', obj).css('visibility', 'inherit');
}
return show;
}
/**
*
*/
function target_overlaps(target, elem)
{
while (target.parentNode) {
if (target.parentNode == elem)
return true;
target = target.parentNode;
}
return false;
}
/**
* Show/hide the preview pane
*/
function toggle_preview_pane(e)
{
var button = $(e.target),
frame = $('#mailpreviewframe'),
visible = !frame.is(':visible'),
splitter = mailviewsplit.pos || parseInt(get_pref('mailviewsplitter') || 320),
topstyles, bottomstyles, uid;
frame.toggle();
button.removeClass().addClass(visible ? 'enabled' : 'closed');
if (visible) {
$('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
$('#mailview-bottom').css({ height:'auto' }).show();
rcmail.env.contentframe = 'messagecontframe';
if (uid = rcmail.message_list.get_single_selection())
rcmail.show_message(uid, false, true);
// let the splitter set the correct size and position
if (mailviewsplit.handle) {
mailviewsplit.handle.show();
mailviewsplit.resize();
}
else
mailviewsplit.init();
}
else {
rcmail.env.contentframe = null;
rcmail.show_contentframe(false);
$('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'0px' });
$('#mailview-bottom').css({ top:'auto', height:'0px' }).hide();
if (mailviewsplit.handle)
mailviewsplit.handle.hide();
}
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) });
}
/**
* Switch between short and full headers display in message preview
*/
function toggle_preview_headers()
{
$('#preview-shortheaders').toggle();
var full = $('#preview-allheaders').toggle(),
button = $('a#previewheaderstoggle');
// add toggle button to full headers table
if (full.is(':visible'))
button.attr('href', '#hide').removeClass('add').addClass('remove')
else
button.attr('href', '#details').removeClass('remove').addClass('add')
save_pref('previewheaders', full.is(':visible') ? '1' : '0');
}
/**
*
*/
function switch_view_mode(mode)
{
if (rcmail.env.threading != (mode == 'thread'))
rcmail.set_list_options(null, undefined, undefined, mode == 'thread' ? 1 : 0);
$('#maillistmode, #mailthreadmode').removeClass('selected');
$('#mail'+mode+'mode').addClass('selected');
}
/**** popup callbacks ****/
function menu_open(p)
{
if (p && p.props && p.props.menu == 'attachmentmenu')
show_popupmenu('attachmentmenu');
else
show_listoptions();
}
function menu_save(prop)
{
save_listoptions();
}
function searchmenu(show)
{
if (show && rcmail.env.search_mods) {
var n, all,
obj = popups['searchmenu'],
list = $('input:checkbox[name="s_mods[]"]', obj),
mbox = rcmail.env.mailbox,
mods = rcmail.env.search_mods;
if (rcmail.env.task == 'mail') {
mods = mods[mbox] ? mods[mbox] : mods['*'];
all = 'text';
}
else {
all = '*';
}
if (mods[all])
list.map(function() {
this.checked = true;
this.disabled = this.value != all;
});
else {
list.prop('disabled', false).prop('checked', false);
for (n in mods)
$('#s_mod_' + n).prop('checked', true);
}
}
}
function attachmentmenu(elem)
{
var id = elem.parentNode.id.replace(/^attach/, '');
$('#attachmenuopen').unbind('click').attr('onclick', '').click(function(e) {
return rcmail.command('open-attachment', id, this);
});
$('#attachmenudownload').unbind('click').attr('onclick', '').click(function() {
rcmail.command('download-attachment', id, this);
});
popupconfig.attachmentmenu.link = elem;
rcmail.command('menu-open', {menu: 'attachmentmenu', id: id});
}
function spellmenu(show)
{
var link, li,
lang = rcmail.spellcheck_lang(),
menu = popups.spellmenu,
ul = $('ul', menu);
if (!ul.length) {
ul = $('<ul class="toolbarmenu selectable">');
for (i in rcmail.env.spell_langs) {
li = $('<li>');
link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i])
.addClass('active').data('lang', i)
.click(function() {
rcmail.spellcheck_lang_set($(this).data('lang'));
});
link.appendTo(li);
li.appendTo(ul);
}
ul.appendTo(menu);
}
// select current language
$('li', ul).each(function() {
var el = $('a', this);
if (el.data('lang') == lang)
el.addClass('selected');
else if (el.hasClass('selected'))
el.removeClass('selected');
});
}
/**
*
*/
function show_listoptions()
{
var $dialog = $('#listoptions');
// close the dialog
if ($dialog.is(':visible')) {
$dialog.dialog('close');
return;
}
// set form values
$('input[name="sort_col"][value="'+rcmail.env.sort_col+'"]').prop('checked', true);
$('input[name="sort_ord"][value="DESC"]').prop('checked', rcmail.env.sort_order == 'DESC');
$('input[name="sort_ord"][value="ASC"]').prop('checked', rcmail.env.sort_order != 'DESC');
// set checkboxes
$('input[name="list_col[]"]').each(function() {
$(this).prop('checked', $.inArray(this.value, rcmail.env.coltypes) != -1);
});
$dialog.dialog({
modal: true,
resizable: false,
closeOnEscape: true,
title: null,
close: function() {
$dialog.dialog('destroy').hide();
},
minWidth: 500,
width: $dialog.width()+25
}).show();
}
/**
*
*/
function save_listoptions()
{
$('#listoptions').dialog('close');
var sort = $('input[name="sort_col"]:checked').val(),
ord = $('input[name="sort_ord"]:checked').val(),
cols = $('input[name="list_col[]"]:checked')
.map(function(){ return this.value; }).get();
rcmail.set_list_options(cols, sort, ord, rcmail.env.threading);
}
/**
*
*/
function set_searchmod(elem)
{
var all, m, task = rcmail.env.task,
mods = rcmail.env.search_mods,
mbox = rcmail.env.mailbox;
if (!mods)
mods = {};
if (task == 'mail') {
if (!mods[mbox])
mods[mbox] = rcube_clone_object(mods['*']);
m = mods[mbox];
all = 'text';
}
else { //addressbook
m = mods;
all = '*';
}
if (!elem.checked)
delete(m[elem.value]);
else
m[elem.value] = 1;
// mark all fields
if (elem.value != all)
return;
$('input:checkbox[name="s_mods[]"]').map(function() {
if (this == elem)
return;
this.checked = true;
if (elem.checked) {
this.disabled = true;
delete m[this.value];
}
else {
this.disabled = false;
m[this.value] = 1;
}
});
}
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()
{
var $dialog = $('#upload-dialog');
// close the dialog
if ($dialog.is(':visible')) {
$dialog.dialog('close');
return;
}
// add icons to clone file input field
if (rcmail.env.action == 'compose' && !$dialog.data('extended')) {
$('<a>')
.addClass('iconlink add')
.attr('href', '#add')
.html('Add')
.appendTo($('input[type="file"]', $dialog).parent())
.click(add_uploadfile);
$dialog.data('extended', true);
}
$dialog.dialog({
modal: true,
resizable: false,
closeOnEscape: true,
title: $dialog.attr('title'),
close: function() {
try { $('#upload-dialog form').get(0).reset(); }
catch(e){ } // ignore errors
$dialog.dialog('destroy').hide();
$('div.addline', $dialog).remove();
},
width: 480
}).show();
if (!document.all)
$('input[type=file]', $dialog).first().click();
}
function add_uploadfile(e)
{
var div = $(this).parent();
var clone = div.clone().addClass('addline').insertAfter(div);
clone.children('.iconlink').click(add_uploadfile);
clone.children('input').val('');
if (!document.all)
$('input[type=file]', clone).click();
}
/**
*
*/
function show_header_row(which, updated)
{
var row = $('#compose-' + which);
if (row.is(':visible'))
return; // nothing to be done here
if (compose_headers[which] && !updated)
$('#_' + which).val(compose_headers[which]);
row.show();
$('#' + which + '-link').hide();
layout_composeview();
return false;
}
/**
*
*/
function hide_header_row(which)
{
// copy and clear field value
var field = $('#_' + which);
compose_headers[which] = field.val();
field.val('');
$('#compose-' + which).hide();
$('#' + which + '-link').show();
layout_composeview();
return false;
}
/**
* Fieldsets-to-tabs converter
*/
function init_tabs(elem, current)
{
var content = $(elem),
id = content.get(0).id,
fs = content.children('fieldset');
if (!fs.length)
return;
if (!id) {
id = 'rcmtabcontainer';
content.attr('id', id);
}
// first hide not selected tabs
current = current || 0;
fs.each(function(idx) { if (idx != current) $(this).hide(); });
// create tabs container
var tabs = $('<div>').addClass('tabsbar').prependTo(content);
// convert fildsets into tabs
fs.each(function(idx) {
var tab, a, elm = $(this), legend = elm.children('legend');
// create a tab
a = $('<a>').text(legend.text()).attr('href', '#');
tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'})
.click(function() { show_tab(id, idx); return false })
// remove legend
legend.remove();
// style fieldset
elm.addClass('tab');
// style selected tab
if (idx == current)
tab.addClass('selected');
// add the tab to container
tab.append(a).appendTo(tabs);
});
}
function show_tab(id, index)
{
var fs = $('#'+id).children('fieldset');
fs.each(function(idx) {
// Show/hide fieldset (tab content)
$(this)[index==idx ? 'show' : 'hide']();
// Select/unselect tab
$('#tab'+idx).toggleClass('selected', idx==index);
});
resize();
}
/**
* Show about page as jquery UI dialog
*/
function show_about(elem)
{
var frame = $('<iframe>').attr('id', 'aboutframe')
.attr('src', rcmail.url('settings/about'))
.attr('frameborder', '0')
.appendTo(document.body);
var h = Math.floor($(window).height() * 0.75);
var buttons = {};
var supportln = $('#supportlink');
if (supportln.length && (env.supporturl = supportln.attr('href')))
buttons[supportln.html()] = function(e){ env.supporturl.indexOf('mailto:') < 0 ? window.open(env.supporturl) : location.href = env.supporturl };
frame.dialog({
modal: true,
resizable: false,
closeOnEscape: true,
title: elem ? elem.title || elem.innerHTML : null,
close: function() {
frame.dialog('destroy').remove();
},
buttons: buttons,
width: 640,
height: h
}).width(640);
}
}
/**
* Roundcube Scroller class
*/
function rcube_scroller(list, top, bottom)
{
var ref = this;
this.list = $(list);
this.top = $(top);
this.bottom = $(bottom);
this.step_size = 6;
this.step_time = 20;
this.delay = 500;
this.top
.mouseenter(function() { if (rcmail.drag_active) ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); })
.mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });
this.bottom
.mouseenter(function() { if (rcmail.drag_active) ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); })
.mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });
this.scroll = function(dir)
{
var ref = this, size = this.step_size;
if (!rcmail.drag_active)
return;
if (dir == 'down')
size *= -1;
this.list.get(0).scrollTop += size;
this.ts = window.setTimeout(function() { ref.scroll(dir); }, this.step_time);
};
};
/**
* Roundcube UI splitter class
*
* @constructor
*/
function rcube_splitter(p)
{
this.p = p;
this.id = p.id;
this.horizontal = (p.orientation == 'horizontal' || p.orientation == 'h');
this.halfsize = (p.size !== undefined ? p.size : 10) / 2;
this.pos = p.start || 0;
this.min = p.min || 20;
this.offset = p.offset || 0;
this.relative = p.relative ? true : false;
this.drag_active = false;
this.render = p.render;
this.callback = p.callback;
var me = this;
rcube_splitter._instances[this.id] = me;
this.init = function()
{
this.p1 = $(this.p.p1);
this.p2 = $(this.p.p2);
// check if referenced elements exist, otherwise abort
if (!this.p1.length || !this.p2.length)
return;
// create and position the handle for this splitter
this.p1pos = this.relative ? this.p1.position() : this.p1.offset();
this.p2pos = this.relative ? this.p2.position() : this.p2.offset();
this.handle = $('<div>')
.attr('id', this.id)
.attr('unselectable', 'on')
.addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v'))
.appendTo(this.p1.parent())
.bind('mousedown', onDragStart);
if (this.horizontal) {
var top = this.p1pos.top + this.p1.outerHeight();
this.handle.css({ left:'0px', top:top+'px' });
}
else {
var left = this.p1pos.left + this.p1.outerWidth();
this.handle.css({ left:left+'px', top:'0px' });
}
// listen to window resize on IE
if (bw.ie)
$(window).resize(onResize);
// read saved position from cookie
var cookie = this.get_cookie();
if (cookie && !isNaN(cookie)) {
this.pos = parseFloat(cookie);
this.resize();
}
else if (this.pos) {
this.resize();
this.set_cookie();
}
};
/**
* Set size and position of all DOM objects
* according to the saved splitter position
*/
this.resize = function()
{
if (this.horizontal) {
this.p1.css('height', Math.floor(this.pos - this.p1pos.top - this.halfsize) + 'px');
this.p2.css('top', Math.ceil(this.pos + this.halfsize + 2) + 'px');
this.handle.css('top', Math.round(this.pos - this.halfsize + this.offset)+'px');
if (bw.ie) {
var new_height = parseInt(this.p2.parent().outerHeight(), 10) - parseInt(this.p2.css('top'), 10) - (bw.ie8 ? 2 : 0);
this.p2.css('height', (new_height > 0 ? new_height : 0) + 'px');
}
}
else {
this.p1.css('width', Math.floor(this.pos - this.p1pos.left - this.halfsize) + 'px');
this.p2.css('left', Math.ceil(this.pos + this.halfsize) + 'px');
this.handle.css('left', Math.round(this.pos - this.halfsize + this.offset + 3)+'px');
if (bw.ie) {
var new_width = parseInt(this.p2.parent().outerWidth(), 10) - parseInt(this.p2.css('left'), 10) ;
this.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
}
}
this.p2.resize();
this.p1.resize();
// also resize iframe covers
if (this.drag_active) {
$('iframe').each(function(i, elem) {
var pos = $(this).offset();
$('#iframe-splitter-fix-'+i).css({ top: pos.top+'px', left: pos.left+'px', width:elem.offsetWidth+'px', height: elem.offsetHeight+'px' });
});
}
if (typeof this.render == 'function')
this.render(this);
};
/**
* Handler for mousedown events
*/
function onDragStart(e)
{
// disable text selection while dragging the splitter
if (bw.konq || bw.chrome || bw.safari)
document.body.style.webkitUserSelect = 'none';
me.p1pos = me.relative ? me.p1.position() : me.p1.offset();
me.p2pos = me.relative ? me.p2.position() : me.p2.offset();
me.drag_active = true;
// start listening to mousemove events
$(document).bind('mousemove.'+this.id, onDrag).bind('mouseup.'+this.id, onDragStop);
// enable dragging above iframes
$('iframe').each(function(i, elem) {
$('<div>')
.attr('id', 'iframe-splitter-fix-'+i)
.addClass('iframe-splitter-fix')
.css({ background: '#fff',
width: elem.offsetWidth+'px', height: elem.offsetHeight+'px',
position: 'absolute', opacity: '0.001', zIndex: 1000
})
.css($(this).offset())
.appendTo('body');
});
};
/**
* Handler for mousemove events
*/
function onDrag(e)
{
if (!me.drag_active)
return false;
// with timing events dragging action is more responsive
window.clearTimeout(me.ts);
me.ts = window.setTimeout(function() { onDragAction(e); }, 1);
return false;
};
/**
* Dragging action (see onDrag())
*/
function onDragAction(e)
{
var pos = rcube_event.get_mouse_pos(e);
if (me.relative) {
var parent = me.p1.parent().offset();
pos.x -= parent.left;
pos.y -= parent.top;
}
if (me.horizontal) {
if (((pos.y - me.halfsize) > me.p1pos.top) && ((pos.y + me.halfsize) < (me.p2pos.top + me.p2.outerHeight()))) {
me.pos = Math.max(me.min, pos.y - me.offset);
me.resize();
}
}
else {
if (((pos.x - me.halfsize) > me.p1pos.left) && ((pos.x + me.halfsize) < (me.p2pos.left + me.p2.outerWidth()))) {
me.pos = Math.max(me.min, pos.x - me.offset);
me.resize();
}
}
me.p1pos = me.relative ? me.p1.position() : me.p1.offset();
me.p2pos = me.relative ? me.p2.position() : me.p2.offset();
};
/**
* Handler for mouseup events
*/
function onDragStop(e)
{
// resume the ability to highlight text
if (bw.konq || bw.chrome || bw.safari)
document.body.style.webkitUserSelect = 'auto';
// cancel the listening for drag events
$(document).unbind('.'+me.id);
me.drag_active = false;
// remove temp divs
$('div.iframe-splitter-fix').remove();
me.set_cookie();
if (typeof me.callback == 'function')
me.callback(me);
return bw.safari ? true : rcube_event.cancel(e);
};
/**
* Handler for window resize events
*/
function onResize(e)
{
if (me.horizontal) {
var new_height = parseInt(me.p2.parent().outerHeight(), 10) - parseInt(me.p2[0].style.top, 10) - (bw.ie8 ? 2 : 0);
me.p2.css('height', (new_height > 0 ? new_height : 0) +'px');
}
else {
var new_width = parseInt(me.p2.parent().outerWidth(), 10) - parseInt(me.p2[0].style.left, 10);
me.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
}
};
/**
* Get saved splitter position from cookie
*/
this.get_cookie = function()
{
return window.UI ? UI.get_pref(this.id) : null;
};
/**
* Saves splitter position in cookie
*/
this.set_cookie = function()
{
if (window.UI)
UI.save_pref(this.id, this.pos);
};
} // end class rcube_splitter
// static getter for splitter instances
rcube_splitter._instances = {};
rcube_splitter.get_instance = function(id)
{
return rcube_splitter._instances[id];
};
File Metadata
Details
Attached
Mime Type
text/x-diff
Expires
Mon, Aug 17, 11:31 PM (1 d, 18 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1261705
Default Alt Text
(133 KB)
Attached To
Mode
R3 roundcubemail
Attached
Detach File
Event Timeline
Log In to Comment