<roundcube:object name="pagetitle" />

Date: Fri, 25 Jan 2013 14:24:30 +0100 Subject: Define generic .searchbox styles --- skins/larry/ie7hacks.css | 2 +- skins/larry/styles.css | 14 ++++++++++---- skins/larry/templates/addressbook.html | 2 +- skins/larry/templates/mail.html | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) (limited to 'skins/larry/templates') diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index bca39e92d..6d7af4787 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -138,7 +138,7 @@ ul.toolbarmenu li label { padding: 3px 8px; } -#quicksearchbar input { +.searchbox input { padding-top: 4px; padding-bottom: 2px; } diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 60f874a23..f098c68cb 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -1516,17 +1516,21 @@ ul.proplist li { /*** quicksearch **/ +.searchbox { + position: relative; +} + #quicksearchbar { position: absolute; right: 1px; - top: -5px; + top: 2px; width: 240px; } +.searchbox input, #quicksearchbar input { width: 176px; margin: 0; - margin-top: 7px; padding: 3px 30px 3px 34px; height: 18px; background: #f1f1f1; @@ -1535,15 +1539,17 @@ ul.proplist li { font-size: 11px; } +.searchbox #searchmenulink, #quicksearchbar #searchmenulink { position: absolute; - top: 12px; + top: 5px; left: 6px; } +.searchbox #searchreset, #quicksearchbar #searchreset { position: absolute; - top: 11px; + top: 4px; right: 1px; } diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 7904f6f3a..390f8d83b 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -42,7 +42,7 @@

+ -

-- cgit v1.2.3 From 6c27c3b55e7516ae1d2b99ecd1188203d022de78 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Fri, 25 Jan 2013 14:27:25 +0100 Subject: Add search box to compose address book widget (#1488381) --- CHANGELOG | 1 + program/js/app.js | 22 +++-- program/steps/mail/list_contacts.inc | 153 +++++++++++++++++++++------------ program/steps/mail/search_contacts.inc | 112 ++++++++++++++++++++++++ skins/larry/mail.css | 21 +++++ skins/larry/templates/compose.html | 7 ++ 6 files changed, 254 insertions(+), 62 deletions(-) create mode 100644 program/steps/mail/search_contacts.inc (limited to 'skins/larry/templates') diff --git a/CHANGELOG b/CHANGELOG index bd0e7c8df..58b395f3e 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,6 +1,7 @@ CHANGELOG Roundcube Webmail =========================== +- Add search box to compose address book widget (#1488381) - Fix login in case when default_host is an array with one element (#1488928) - Use LDAP fallback hosts on connect + bind instead of ldap_connect() only. - Add config option for LDAP bind timeout (sets LDAP_OPT_NETWORK_TIMEOUT option) diff --git a/program/js/app.js b/program/js/app.js index ce17245e1..4841be05a 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -3,8 +3,8 @@ | Roundcube Webmail Client Script | | | | This file is part of the Roundcube Webmail client | - | Copyright (C) 2005-2012, The Roundcube Dev Team | - | Copyright (C) 2011, Kolab Systems AG | + | Copyright (C) 2005-2013, The Roundcube Dev Team | + | Copyright (C) 2011-2012, Kolab Systems AG | | | | Licensed under the GNU General Public License version 3 or | | any later version with exceptions for skins & plugins. | @@ -219,7 +219,7 @@ function rcube_webmail() if (this.gui_objects.qsearchbox) { if (this.env.search_text != null) this.gui_objects.qsearchbox.value = this.env.search_text; - $(this.gui_objects.qsearchbox).focusin(function() { rcmail.message_list.blur(); }); + $(this.gui_objects.qsearchbox).focusin(function() { rcmail.message_list && rcmail.message_list.blur(); }); } this.set_button_titles(); @@ -251,7 +251,7 @@ function rcube_webmail() } } else if (this.env.action == 'compose') { - this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel', 'toggle-editor', 'list-adresses', 'extwin']; + this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel', 'toggle-editor', 'list-adresses', 'search', 'reset-search', 'extwin']; if (this.env.drafts_mailbox) this.env.compose_commands.push('savedraft') @@ -1050,8 +1050,13 @@ function rcube_webmail() this.reset_qsearch(); this.select_all_mode = false; - if (s && this.env.mailbox) + if (s && this.env.action == 'compose') { + if (this.contact_list) + this.list_contacts_clear(); + } + else if (s && this.env.mailbox) { this.list_mailbox(this.env.mailbox, 1); + } else if (s && this.task == 'addressbook') { if (this.env.source == '') { for (n in this.env.address_sources) break; @@ -3652,7 +3657,8 @@ function rcube_webmail() // reset vars this.env.current_page = 1; - r = this.http_request('search', url, lock); + var action = this.env.action == 'compose' && this.contact_list ? 'search-contacts' : 'search'; + r = this.http_request(action, url, lock); this.env.qsearch = {lock: lock, request: r}; } @@ -4147,7 +4153,7 @@ function rcube_webmail() if (this.env.search_id) folder = 'S'+this.env.search_id; - else + else if (!this.env.search_request) folder = group ? 'G'+src+group : src; this.select_folder(folder); @@ -4200,7 +4206,7 @@ function rcube_webmail() this.env.source = src; this.env.group = group; - // also send search request to get the right messages + // also send search request to get the right records if (this.env.search_request) url._search = this.env.search_request; diff --git a/program/steps/mail/list_contacts.inc b/program/steps/mail/list_contacts.inc index 9347190da..7e3b349cd 100644 --- a/program/steps/mail/list_contacts.inc +++ b/program/steps/mail/list_contacts.inc @@ -5,7 +5,7 @@ | program/steps/mail/list_contacts.inc | | | | This file is part of the Roundcube Webmail client | - | Copyright (C) 2012, The Roundcube Dev Team | + | Copyright (C) 2012-2013, The Roundcube Dev Team | | | | Licensed under the GNU General Public License version 3 or | | any later version with exceptions for skins & plugins. | @@ -19,72 +19,117 @@ +-----------------------------------------------------------------------+ */ -$jsenv = array(); -$source = get_input_value('_source', RCUBE_INPUT_GPC); -$CONTACTS = $RCMAIL->get_address_book($source); -$PAGE_SIZE = $RCMAIL->config->get('addressbook_pagesize', $RCMAIL->config->get('pagesize', 50)); - -if ($CONTACTS && $CONTACTS->ready) { - // set list properties - $CONTACTS->set_pagesize($PAGE_SIZE); - $CONTACTS->set_page(max(1, intval($_GET['_page']))); - - // list groups of this source (on page one) - if ($CONTACTS->groups && $CONTACTS->list_page == 1) { - foreach ($CONTACTS->list_groups() as $group) { - $CONTACTS->reset(); - $CONTACTS->set_group($group['ID']); - $group_prop = $CONTACTS->get_group($group['ID']); - - // group (distribution list) with email address(es) - if ($group_prop['email']) { - foreach ((array)$group_prop['email'] as $email) { - $row_id = 'G'.$group['ID']; - $jsresult[$row_id] = format_email_recipient($email, $group['name']); +$afields = $RCMAIL->config->get('contactlist_fields'); +$sort_col = $RCMAIL->config->get('addressbook_sort_col', 'name'); +$page_size = $RCMAIL->config->get('addressbook_pagesize', $RCMAIL->config->get('pagesize', 50)); +$page = max(1, intval($_GET['_page'])); + +// Use search result +if (!empty($_REQUEST['_search']) && isset($_SESSION['search'][$_REQUEST['_search']])) { + $search = (array)$_SESSION['search'][$_REQUEST['_search']]; + + // get records from all sources + foreach ($search as $s => $set) { + $CONTACTS = $RCMAIL->get_address_book($s); + + // reset page + $CONTACTS->set_page(1); + $CONTACTS->set_pagesize(9999); + $CONTACTS->set_search_set($set); + + // get records + $result = $CONTACTS->list_records($afields); + + while ($row = $result->next()) { + $row['sourceid'] = $s; + $key = rcube_addressbook::compose_contact_key($row, $sort_col); + $records[$key] = $row; + } + unset($result); + } + + // sort the records + ksort($records, SORT_LOCALE_STRING); + + // create resultset object + $count = count($records); + $first = ($page-1) * $page_size; + $result = new rcube_result_set($count, $first); + + // we need only records for current page + if ($page_size < $count) { + $records = array_slice($records, $first, $page_size); + } + + $result->records = array_values($records); +} +// list contacts from selected source +else { + $source = get_input_value('_source', RCUBE_INPUT_GPC); + $CONTACTS = $RCMAIL->get_address_book($source); + + if ($CONTACTS && $CONTACTS->ready) { + // set list properties + $CONTACTS->set_pagesize($page_size); + $CONTACTS->set_page($page); + + // list groups of this source (on page one) + if ($CONTACTS->groups && $CONTACTS->list_page == 1) { + foreach ($CONTACTS->list_groups() as $group) { + $CONTACTS->reset(); + $CONTACTS->set_group($group['ID']); + $group_prop = $CONTACTS->get_group($group['ID']); + + // group (distribution list) with email address(es) + if ($group_prop['email']) { + foreach ((array)$group_prop['email'] as $email) { + $row_id = 'G'.$group['ID']; + $jsresult[$row_id] = format_email_recipient($email, $group['name']); + $OUTPUT->command('add_contact_row', $row_id, array( + 'contactgroup' => html::span(array('title' => $email), Q($group['name']))), 'group'); + } + } + // show group with count + else if (($result = $CONTACTS->count()) && $result->count) { + $row_id = 'E'.$group['ID']; + $jsresult[$row_id] = $group['name']; $OUTPUT->command('add_contact_row', $row_id, array( - 'contactgroup' => html::span(array('title' => $email), Q($group['name']))), 'group'); + 'contactgroup' => Q($group['name'] . ' (' . intval($result->count) . ')')), 'group'); } } - // show group with count - else if (($result = $CONTACTS->count()) && $result->count) { - $row_id = 'E'.$group['ID']; - $jsresult[$row_id] = $group['name']; - $OUTPUT->command('add_contact_row', $row_id, array( - 'contactgroup' => Q($group['name'] . ' (' . intval($result->count) . ')')), 'group'); - } } + + // get contacts for this user + $CONTACTS->set_group(0); + $result = $CONTACTS->list_records($afields); } +} - // get contacts for this user - $CONTACTS->set_group(0); - $afields = $RCMAIL->config->get('contactlist_fields'); - $result = $CONTACTS->list_records($afields); +if (!empty($result) && !$result->count && $result->searchonly) { + $OUTPUT->show_message('contactsearchonly', 'notice'); +} +else if (!empty($result) && $result->count > 0) { + // create javascript list + while ($row = $result->next()) { + $name = rcube_addressbook::compose_list_name($row); - if (!$result->count && $result->searchonly) { - $OUTPUT->show_message('contactsearchonly', 'notice'); - } - else if (!empty($result) && $result->count > 0) { - // create javascript list - while ($row = $result->next()) { - $name = rcube_addressbook::compose_list_name($row); - - // add record for every email address of the contact - $emails = $CONTACTS->get_col_values('email', $row, true); - foreach ($emails as $i => $email) { - $row_id = $row['ID'].$i; - $jsresult[$row_id] = format_email_recipient($email, $name); - $OUTPUT->command('add_contact_row', $row_id, array( - 'contact' => html::span(array('title' => $email), Q($name ? $name : $email) . - ($name && count($emails) > 1 ? ' ' . html::span('email', Q($email)) : '') - )), 'person'); - } + // add record for every email address of the contact + $emails = $CONTACTS->get_col_values('email', $row, true); + foreach ($emails as $i => $email) { + $row_id = $row['ID'].$i; + $jsresult[$row_id] = format_email_recipient($email, $name); + $OUTPUT->command('add_contact_row', $row_id, array( + 'contact' => html::span(array('title' => $email), Q($name ? $name : $email) . + ($name && count($emails) > 1 ? ' ' . html::span('email', Q($email)) : '') + )), 'person'); } } } + // update env $OUTPUT->set_env('contactdata', $jsresult); -$OUTPUT->set_env('pagecount', ceil($result->count / $PAGE_SIZE)); +$OUTPUT->set_env('pagecount', ceil($result->count / $page_size)); $OUTPUT->command('set_page_buttons'); // send response diff --git a/program/steps/mail/search_contacts.inc b/program/steps/mail/search_contacts.inc new file mode 100644 index 000000000..2e6bb12f8 --- /dev/null +++ b/program/steps/mail/search_contacts.inc @@ -0,0 +1,112 @@ + | + +-----------------------------------------------------------------------+ +*/ + +$search = get_input_value('_q', RCUBE_INPUT_GPC, true); +$sources = $RCMAIL->get_address_sources(); +$search_mode = (int) $RCMAIL->config->get('addressbook_search_mode'); +$sort_col = $RCMAIL->config->get('addressbook_sort_col', 'name'); +$afields = $RCMAIL->config->get('contactlist_fields'); + +$page = 1; +$page_size = $RCMAIL->config->get('addressbook_pagesize', $RCMAIL->config->get('pagesize', 50)); + +$records = $search_set = array(); +foreach ($sources as $s) { + $source = $RCMAIL->get_address_book($s['id']); + $source->set_page(1); + $source->set_pagesize(9999); + + // get contacts count + $result = $source->search($afields, $search, $search_mode, true, true, 'email'); + + if (!$result->count) { + continue; + } + + // get records + $result = $source->list_records($afields); + + while ($row = $result->next()) { + $row['sourceid'] = $s['id']; + $key = rcube_addressbook::compose_contact_key($row, $sort_col); + $records[$key] = $row; + } + + $search_set[$s['id']] = $source->get_search_set(); + unset($result); +} + +// sort the records +ksort($records, SORT_LOCALE_STRING); + +// create resultset object +$count = count($records); +$result = new rcube_result_set($count); + +// select the requested page +if ($page_size < $count) { + $records = array_slice($records, $result->first, $page_size); +} + +$result->records = array_values($records); + +if (!empty($result) && $result->count > 0) { + // create javascript list + while ($row = $result->next()) { + $name = rcube_addressbook::compose_list_name($row); + + // add record for every email address of the contact + // (same as in list_contacts.inc) + $emails = $source->get_col_values('email', $row, true); + foreach ($emails as $i => $email) { + $row_id = $row['ID'].$i; + $jsresult[$row_id] = format_email_recipient($email, $name); + $OUTPUT->command('add_contact_row', $row_id, array( + 'contact' => html::span(array('title' => $email), Q($name ? $name : $email) . + ($name && count($emails) > 1 ? ' ' . html::span('email', Q($email)) : '') + )), 'person'); + } + } + + // search request ID + $search_request = md5('composeaddr' . $search); + + // save search settings in session + $_SESSION['search'][$search_request] = $search_set; + $_SESSION['search_params'] = array('id' => $search_request, 'data' => array($afields, $search)); + + $OUTPUT->show_message('contactsearchsuccessful', 'confirmation', array('nr' => $result->count)); + + $OUTPUT->command('set_env', 'search_request', $search_request); + $OUTPUT->command('set_env', 'source', ''); + $OUTPUT->command('unselect_directory'); +} +else { + $OUTPUT->show_message('nocontactsfound', 'notice'); +} + +// update env +$OUTPUT->set_env('contactdata', $jsresult); +$OUTPUT->set_env('pagecount', ceil($result->count / $page_size)); +$OUTPUT->command('set_page_buttons'); + +// send response +$OUTPUT->send(); diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 33e66d10e..6ad1f7ad1 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -1156,6 +1156,27 @@ div.message-partheaders .headers-table td.header { bottom: 0; } +#composequicksearch { + position: relative; + padding: 4px; + background: #c7e3ef; +} + +#composequicksearch .searchbox { + height: 26px; +} + +#composequicksearch .searchbox input { + width: auto; + position: absolute; + left: 0px; + right: 0px; +} + +#composequicksearch #searchmenulink { + width: 15px; +} + #compose-contacts #directorylist { border-bottom: 4px solid #c7e3ef; } diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index de3b5bfff..9cfe7fe4c 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -39,6 +39,13 @@

+ +

-- cgit v1.2.3 From 00b9c25f24c5dda9f02619196bf07d2e8e37e402 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Tue, 29 Jan 2013 11:40:04 +0100 Subject: Improve contacts import interface, add #message object --- skins/larry/addressbook.css | 10 ++++++++++ skins/larry/templates/importcontacts.html | 9 ++++----- 2 files changed, 14 insertions(+), 5 deletions(-) (limited to 'skins/larry/templates') diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index 54fabfa8b..a1c453885 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -317,3 +317,13 @@ a.deletebutton { text-indent: -5000px; background: url(images/buttons.png) -7px -377px no-repeat; } + +#import-box { + position: absolute; + bottom: 28px; + top: 34px; + left: 0; + right: 0; + overflow: auto; + padding: 10px; +} diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html index 89aea0a2e..d3d0f2b93 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -14,20 +14,19 @@

-
-

+ +

-- cgit v1.2.3 From b7ea947844b97fe4cb0e2bd37b84d79fff8014f4 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 31 Jan 2013 13:48:56 +0100 Subject: Define a global style for tree lists --- skins/classic/common.css | 22 ++++++++++++++++++++++ skins/classic/mail.css | 26 -------------------------- skins/classic/templates/mail.html | 2 +- skins/larry/mail.css | 26 +++----------------------- skins/larry/styles.css | 26 ++++++++++++++++++++++++++ skins/larry/templates/mail.html | 2 +- 6 files changed, 53 insertions(+), 51 deletions(-) (limited to 'skins/larry/templates') diff --git a/skins/classic/common.css b/skins/classic/common.css index b4adc58a7..16edeedf6 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -622,6 +622,27 @@ table.records-table tr.unfocused td background-color: #929292; } +ul.treelist li div.treetoggle +{ + position: absolute; + left: 8px !important; + left: -16px; + top: 1px; + width: 14px; + height: 16px; + cursor: pointer; +} + +ul.treelist li div.collapsed +{ + background: url(images/icons/collapsed.png) bottom right no-repeat; +} + +ul.treelist li div.expanded +{ + background: url(images/icons/expanded.png) bottom right no-repeat; +} + /***** mac-style quicksearch field *****/ @@ -666,6 +687,7 @@ table.records-table tr.unfocused td font-size: 11px; padding: 0px; border: none; + outline: none; } /***** roundcube webmail pre-defined classes *****/ diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 54673fe64..8be35aaa6 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -393,32 +393,6 @@ border-bottom: none; } -#mailboxlist li div -{ - position: absolute; - left: 8px !important; - left: -16px; - top: 1px; - width: 14px; - height: 16px; -} - -#mailboxlist li div.collapsed, -#mailboxlist li div.expanded -{ - cursor: pointer; -} - -#mailboxlist li div.collapsed -{ - background: url(images/icons/collapsed.png) bottom right no-repeat; -} - -#mailboxlist li div.expanded -{ - background: url(images/icons/expanded.png) bottom right no-repeat; -} - #mailboxlist li.inbox { background-position: 5px -18px; diff --git a/skins/classic/templates/mail.html b/skins/classic/templates/mail.html index 75a112ff5..c7010e87c 100644 --- a/skins/classic/templates/mail.html +++ b/skins/classic/templates/mail.html @@ -28,7 +28,7 @@

- +

diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b98a89c8b..898e4e932 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -141,7 +141,7 @@ a.iconbutton.threadmode.selected { background-position: 6px 2px; } -#mailboxlist li:first-child { +#mailboxlist > li:first-child { border-radius: 4px 4px 0 0; border-top: 0; } @@ -247,32 +247,12 @@ a.iconbutton.threadmode.selected { border-bottom: 0; } -#mailboxlist li.mailbox div.collapsed, -#mailboxlist li.mailbox div.expanded { - position: absolute; +#mailboxlist li.mailbox div.treetoggle { top: 13px; left: 19px; - width: 13px; - height: 13px; - background: url(images/listicons.png) -3px -144px no-repeat; - cursor: pointer; -} - -#mailboxlist li.mailbox div.expanded { - background-position: -3px -168px; } -#mailboxlist li.mailbox.selected > div.collapsed { - background-position: -23px -144px; -} - -#mailboxlist li.mailbox.selected > div.expanded { - background-position: -23px -168px; -} - - -#mailboxlist li.mailbox ul li div.collapsed, -#mailboxlist li.mailbox ul li div.expanded { +#mailboxlist li.mailbox ul li div.treetoggle { left: 43px; top: 14px; } diff --git a/skins/larry/styles.css b/skins/larry/styles.css index f7adeba38..7458ebba9 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -986,6 +986,10 @@ ul.listing li { background-color: #d9ecf4; } +ul.listing li ul { + border-top: 1px solid #bbd3da; +} + ul.listing li.droptarget, table.listing tr.droptarget td { background-color: #e8e798; @@ -1002,6 +1006,28 @@ table.layout td { vertical-align: top; } +ul.treelist li div.treetoggle { + position: absolute; + top: 13px; + left: 19px; + width: 13px; + height: 13px; + background: url(images/listicons.png) -3px -144px no-repeat; + cursor: pointer; +} + +ul.treelist li div.treetoggle.expanded { + background-position: -3px -168px; +} + +ul.treelist li.selected > div.collapsed { + background-position: -23px -144px; +} + +ul.treelist li.selected > div.expanded { + background-position: -23px -168px; +} + .listbox .boxfooter { position: absolute; bottom: 0; diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index e145ddff8..85cd5203b 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -30,7 +30,7 @@

- +

-- cgit v1.2.3 From 3c309af0663f1673f921682c6ae3f673426e1397 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 31 Jan 2013 13:49:35 +0100 Subject: - Refactored the hierarchical mailboxlist control into a separate widget class - Build address book directories list as hierarchical list - Make address book groups collapsible using the new new treelist widget - Use encoded identifiers for address book directory list items --- program/include/rcmail.php | 16 +- program/js/app.js | 206 +++++---------- program/js/treelist.js | 425 +++++++++++++++++++++++++++++++ program/steps/addressbook/func.inc | 28 +- skins/classic/addressbook.css | 35 ++- skins/classic/templates/addressbook.html | 3 +- skins/larry/addressbook.css | 21 +- skins/larry/templates/addressbook.html | 2 +- 8 files changed, 566 insertions(+), 170 deletions(-) create mode 100644 program/js/treelist.js (limited to 'skins/larry/templates') diff --git a/program/include/rcmail.php b/program/include/rcmail.php index 5f2a2177b..70dba4192 100644 --- a/program/include/rcmail.php +++ b/program/include/rcmail.php @@ -1406,6 +1406,7 @@ class rcmail extends rcube $js_mailboxlist = array(); $out = html::tag('ul', $attrib, $rcmail->render_folder_tree_html($a_mailboxes, $mbox_name, $js_mailboxlist, $attrib), html::$common_attrib); + $rcmail->output->include_script('treelist.js'); $rcmail->output->add_gui_object('mailboxlist', $attrib['id']); $rcmail->output->set_env('mailboxes', $js_mailboxlist); $rcmail->output->set_env('unreadwrap', $attrib['unreadwrap']); @@ -1584,14 +1585,13 @@ class rcmail extends rcube 'id' => "rcmli".$folder_id, 'class' => join(' ', $classes), 'noclose' => true), - html::a($link_attrib, $html_name) . - (!empty($folder['folders']) ? html::div(array( - 'class' => ($is_collapsed ? 'collapsed' : 'expanded'), - 'style' => "position:absolute", - 'onclick' => sprintf("%s.command('collapse-folder', '%s')", rcmail_output::JS_OBJECT_NAME, $js_name) - ), ' ') : '')); - - $jslist[$folder_id] = array( + html::a($link_attrib, $html_name)); + + if (!empty($folder['folders'])) { + $out .= html::div('treetoggle ' . ($is_collapsed ? 'collapsed' : 'expanded'), ' '); + } + + $jslist[$folder['id']] = array( 'id' => $folder['id'], 'name' => $foldername, 'virtual' => $folder['virtual'] diff --git a/program/js/app.js b/program/js/app.js index 6d5bdfe74..dbb65eea4 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -4,7 +4,7 @@ | | | This file is part of the Roundcube Webmail client | | Copyright (C) 2005-2013, The Roundcube Dev Team | - | Copyright (C) 2011-2012, Kolab Systems AG | + | Copyright (C) 2011-2013, Kolab Systems AG | | | | Licensed under the GNU General Public License version 3 or | | any later version with exceptions for skins & plugins. | @@ -459,9 +459,22 @@ function rcube_webmail() this.display_message(this.pending_message[0], this.pending_message[1], this.pending_message[2]); // map implicit containers - if (this.gui_objects.folderlist) + if (this.gui_objects.folderlist) { this.gui_containers.foldertray = $(this.gui_objects.folderlist); + // init treelist widget + if (window.rcube_treelist_widget) { + this.treelist = new rcube_treelist_widget(this.gui_objects.folderlist, { + id_prefix: 'rcmli', + id_encode: this.html_identifier_encode, + id_decode: this.html_identifier_decode, + check_droptarget: function(node){ return !node.virtual && ref.check_droptarget(node.id) } + }); + this.treelist.addEventListener('collapse', function(node){ ref.folder_collapsed(node) }); + this.treelist.addEventListener('expand', function(node){ ref.folder_collapsed(node) }); + } + } + // activate html5 file drop feature (if browser supports it and if configured) if (this.gui_objects.filedrop && this.env.filedrop && ((window.XMLHttpRequest && XMLHttpRequest.prototype && XMLHttpRequest.prototype.sendAsBinary) || window.FormData)) { $(document.body).bind('dragover dragleave drop', function(e){ return ref.document_drag_hover(e, e.type == 'dragover'); }); @@ -1263,11 +1276,12 @@ function rcube_webmail() this.html_identifier = function(str, encode) { - str = String(str); - if (encode) - return Base64.encode(str).replace(/=+$/, '').replace(/\+/g, '-').replace(/\//g, '_'); - else - return str.replace(this.identifier_expr, '_'); + return encode ? this.html_identifier_encode(str) : String(str).replace(this.identifier_expr, '_'); + }; + + this.html_identifier_encode = function(str) + { + return Base64.encode(String(str)).replace(/=+$/, '').replace(/\+/g, '-').replace(/\//g, '_'); }; this.html_identifier_decode = function(str) @@ -1320,29 +1334,9 @@ function rcube_webmail() if (this.preview_read_timer) clearTimeout(this.preview_read_timer); - // save folderlist and folders location/sizes for droptarget calculation in drag_move() - if (this.gui_objects.folderlist && model) { - this.initialBodyScrollTop = bw.ie ? 0 : window.pageYOffset; - this.initialListScrollTop = this.gui_objects.folderlist.parentNode.scrollTop; - - var k, li, height, - list = $(this.gui_objects.folderlist); - pos = list.offset(); - - this.env.folderlist_coords = { x1:pos.left, y1:pos.top, x2:pos.left + list.width(), y2:pos.top + list.height() }; - - this.env.folder_coords = []; - for (k in model) { - if (li = this.get_folder_li(k)) { - // only visible folders - if (height = li.firstChild.offsetHeight) { - pos = $(li.firstChild).offset(); - this.env.folder_coords[k] = { x1:pos.left, y1:pos.top, - x2:pos.left + li.firstChild.offsetWidth, y2:pos.top + height, on:0 }; - } - } - } - } + // prepare treelist widget for dragging interactions + if (this.treelist) + this.treelist.drag_start(); }; this.drag_end = function(e) @@ -1350,87 +1344,28 @@ function rcube_webmail() this.drag_active = false; this.env.last_folder_target = null; - if (this.folder_auto_timer) { - clearTimeout(this.folder_auto_timer); - this.folder_auto_timer = null; - this.folder_auto_expand = null; - } - - // over the folders - if (this.gui_objects.folderlist && this.env.folder_coords) { - for (var k in this.env.folder_coords) { - if (this.env.folder_coords[k].on) - $(this.get_folder_li(k)).removeClass('droptarget'); - } - } + if (this.treelist) + this.treelist.drag_end(); }; this.drag_move = function(e) { - if (this.gui_objects.folderlist && this.env.folder_coords) { - var k, li, div, check, oldclass, + if (this.gui_objects.folderlist) { + var drag_target, oldclass, layerclass = 'draglayernormal', - mouse = rcube_event.get_mouse_pos(e), - pos = this.env.folderlist_coords, - // offsets to compensate for scrolling while dragging a message - boffset = bw.ie ? -document.documentElement.scrollTop : this.initialBodyScrollTop, - moffset = this.initialListScrollTop-this.gui_objects.folderlist.parentNode.scrollTop; + mouse = rcube_event.get_mouse_pos(e); if (this.contact_list && this.contact_list.draglayer) oldclass = this.contact_list.draglayer.attr('class'); - mouse.y += -moffset-boffset; - - // if mouse pointer is outside of folderlist - if (mouse.x < pos.x1 || mouse.x >= pos.x2 || mouse.y < pos.y1 || mouse.y >= pos.y2) { - if (this.env.last_folder_target) { - $(this.get_folder_li(this.env.last_folder_target)).removeClass('droptarget'); - this.env.folder_coords[this.env.last_folder_target].on = 0; - this.env.last_folder_target = null; - } - if (layerclass != oldclass && this.contact_list && this.contact_list.draglayer) - this.contact_list.draglayer.attr('class', layerclass); - return; + // mouse intersects a valid drop target on the treelist + if (this.treelist && (drag_target = this.treelist.intersects(mouse, true))) { + this.env.last_folder_target = drag_target; + layerclass = 'draglayer' + (this.check_droptarget(drag_target) > 1 ? 'copy' : 'normal'); } - - // over the folders - for (k in this.env.folder_coords) { - pos = this.env.folder_coords[k]; - if (mouse.x >= pos.x1 && mouse.x < pos.x2 && mouse.y >= pos.y1 && mouse.y < pos.y2) { - if (check = this.check_droptarget(k)) { - li = this.get_folder_li(k); - div = $(li.getElementsByTagName('div')[0]); - - // if the folder is collapsed, expand it after 1sec and restart the drag & drop process. - if (div.hasClass('collapsed')) { - if (this.folder_auto_timer) - clearTimeout(this.folder_auto_timer); - - this.folder_auto_expand = this.env.mailboxes[k].id; - this.folder_auto_timer = setTimeout(function() { - rcmail.command('collapse-folder', rcmail.folder_auto_expand); - rcmail.drag_start(null); - }, 1000); - } - else if (this.folder_auto_timer) { - clearTimeout(this.folder_auto_timer); - this.folder_auto_timer = null; - this.folder_auto_expand = null; - } - - $(li).addClass('droptarget'); - this.env.folder_coords[k].on = 1; - this.env.last_folder_target = k; - layerclass = 'draglayer' + (check > 1 ? 'copy' : 'normal'); - } - // Clear target, otherwise drag end will trigger move into last valid droptarget - else - this.env.last_folder_target = null; - } - else if (pos.on) { - $(this.get_folder_li(k)).removeClass('droptarget'); - this.env.folder_coords[k].on = 0; - } + else { + // Clear target, otherwise drag end will trigger move into last valid droptarget + this.env.last_folder_target = null; } if (layerclass != oldclass && this.contact_list && this.contact_list.draglayer) @@ -1440,40 +1375,33 @@ function rcube_webmail() this.collapse_folder = function(name) { - var li = this.get_folder_li(name, '', true), - div = $('div:first', li), - ul = $('ul:first', li); + if (this.treelist) + this.treelist.toggle(name); + }; + + this.folder_collapsed = function(node) + { + var prefname = this.env.task == 'addressbook' ? 'collapsed_abooks' : 'collapsed_folders'; - if (div.hasClass('collapsed')) { - ul.show(); - div.removeClass('collapsed').addClass('expanded'); - var reg = new RegExp('&'+urlencode(name)+'&'); - this.env.collapsed_folders = this.env.collapsed_folders.replace(reg, ''); - } - else if (div.hasClass('expanded')) { - ul.hide(); - div.removeClass('expanded').addClass('collapsed'); - this.env.collapsed_folders = this.env.collapsed_folders+'&'+urlencode(name)+'&'; + if (node.collapsed) { + this.env[prefname] = this.env[prefname] + '&'+urlencode(node.id)+'&'; // select the folder if one of its childs is currently selected // don't select if it's virtual (#1488346) - if (this.env.mailbox.indexOf(name + this.env.delimiter) == 0 && !$(li).hasClass('virtual')) + if (this.env.mailbox && this.env.mailbox.indexOf(name + this.env.delimiter) == 0 && !node.virtual) this.command('list', name); } - else - return; - - // Work around a bug in IE6 and IE7, see #1485309 - if (bw.ie6 || bw.ie7) { - var siblings = li.nextSibling ? li.nextSibling.getElementsByTagName('ul') : null; - if (siblings && siblings.length && (li = siblings[0]) && li.style && li.style.display != 'none') { - li.style.display = 'none'; - li.style.display = ''; - } + else { + var reg = new RegExp('&'+urlencode(node.id)+'&'); + this.env[prefname] = this.env[prefname].replace(reg, ''); } - this.command('save-pref', { name: 'collapsed_folders', value: this.env.collapsed_folders }); - this.set_unread_count_display(name, false); + if (!this.drag_active) { + this.command('save-pref', { name: prefname, value: this.env[prefname] }); + + if (this.env.unread_counts) + this.set_unread_count_display(node.id, false); + } }; this.doc_mouse_up = function(e) @@ -1498,9 +1426,9 @@ function rcube_webmail() if (this.drag_active && model && this.env.last_folder_target) { var target = model[this.env.last_folder_target]; - $(this.get_folder_li(this.env.last_folder_target)).removeClass('droptarget'); this.env.last_folder_target = null; list.draglayer.hide(); + this.drag_end(e); if (!this.drag_menu(e, target)) this.command('moveto', target); @@ -4164,7 +4092,7 @@ function rcube_webmail() else if (!this.env.search_request) folder = group ? 'G'+src+group : src; - this.select_folder(folder); + this.select_folder(folder, '', true); this.env.source = src; this.env.group = group; @@ -4468,7 +4396,7 @@ function rcube_webmail() this.name_input.bind('keydown', function(e){ return rcmail.add_input_keydown(e); }); this.env.group_renaming = true; - var link, li = this.get_folder_li(this.env.source+this.env.group, 'rcmliG'); + var link, li = this.get_folder_li('G'+this.env.source+this.env.group,'',true); if (li && (link = li.firstChild)) { $(link).hide().before(this.name_input); } @@ -4489,7 +4417,7 @@ function rcube_webmail() this.remove_group_item = function(prop) { var li, key = 'G'+prop.source+prop.id; - if ((li = this.get_folder_li(key))) { + if ((li = this.get_folder_li(key,'',true))) { this.triggerEvent('group_delete', { source:prop.source, id:prop.id, li:li }); li.parentNode.removeChild(li); @@ -4511,7 +4439,7 @@ function rcube_webmail() this.name_input.bind('keydown', function(e){ return rcmail.add_input_keydown(e); }); this.name_input_li = $('

').addClass(type).append(this.name_input); - var li = type == 'contactsearch' ? $('li:last', this.gui_objects.folderlist) : this.get_folder_li(this.env.source); + var li = type == 'contactsearch' ? $('li:last', this.gui_objects.folderlist) : $('ul.groups li:last', this.get_folder_li(this.env.source,'',true)); this.name_input_li.insertAfter(li); } @@ -4612,7 +4540,7 @@ function rcube_webmail() this.reset_add_input(); var key = 'G'+prop.source+prop.id, - li = this.get_folder_li(key), + li = this.get_folder_li(key,'',true), link; // group ID has changed, replace link node and identifiers @@ -4651,8 +4579,8 @@ function rcube_webmail() this.add_contact_group_row = function(prop, li, reloc) { var row, name = prop.name.toUpperCase(), - sibling = this.get_folder_li(prop.source), - prefix = 'rcmliG' + this.html_identifier(prop.source); + sibling = this.get_folder_li(prop.source,'',true), + prefix = 'rcmli' + this.html_identifier('G'+prop.source, true); // When renaming groups, we need to remove it from DOM and insert it in the proper place if (reloc) { @@ -4901,12 +4829,12 @@ function rcube_webmail() .attr('rel', id) .click(function() { return rcmail.command('listsearch', id, this); }) .html(name), - li = $('

').attr({id: 'rcmli' + this.html_identifier(key), 'class': 'contactsearch'}) + li = $('

').attr({ id:'rcmli' + this.html_identifier(key,true), 'class':'contactsearch' }) .append(link), prop = {name:name, id:id, li:li[0]}; this.add_saved_search_row(prop, li); - this.select_folder('S'+id); + this.select_folder(key,'',true); this.enable_command('search-delete', true); this.env.search_id = id; @@ -4960,7 +4888,7 @@ function rcube_webmail() this.remove_search_item = function(id) { var li, key = 'S'+id; - if ((li = this.get_folder_li(key))) { + if ((li = this.get_folder_li(key,'',true))) { this.triggerEvent('search_delete', { id:id, li:li }); li.parentNode.removeChild(li); @@ -4982,7 +4910,7 @@ function rcube_webmail() } this.reset_qsearch(); - this.select_folder('S'+id); + this.select_folder('S'+id, '', true); // reset vars this.env.current_page = 1; diff --git a/program/js/treelist.js b/program/js/treelist.js new file mode 100644 index 000000000..47ac0c1a0 --- /dev/null +++ b/program/js/treelist.js @@ -0,0 +1,425 @@ +/* + +-----------------------------------------------------------------------+ + | 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 | + +-----------------------------------------------------------------------+ + | 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, + check_droptarget: function(node){ return !node.virtual } + }, p || {}); + + var container = $(node); + var data = p.data || []; + var indexbyid = {}; + var selection = null; + var drag_active = false; + var box_coords = {}; + var item_coords = []; + var autoexpand_timer; + var autoexpand_item; + var body_scroll_top = 0; + var list_scroll_top = 0; + var 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; + + + /////// startup code (constructor) + + // abort if node not found + if (!container.length) + return; + + if (p.data) { + index_data({ children:data }); + } + // load data from DOM + else { + data = walk_list(container); + // console.log(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); + } + + /** + * 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) + { + var li = $('

' + node.html + '

') + .attr('id', p.id_prefix + node.id) + .addClass((node.classes || []).join(' ')) + .appendTo(parent); + + 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) { + $('

').appendTo(li); + var ul = $('

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(); + scroller.scrollTop(li.offset().top - scroller.offset().top + scroller.scrollTop()); + } + + ///// 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(); + + 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(); + item_coords[id] = { + x1: pos.left, + y1: pos.top, + x2: pos.left + item.offsetWidth, + y2: pos.top + height, + on: id == autoexpand_item + }; + } + } + } + + /** + * Signal that dragging has stopped + */ + function drag_end() + { + drag_active = false; + + if (autoexpand_timer) { + clearTimeout(autoexpand_timer); + autoexpand_timer = null; + autoexpand_item = null; + } + + $('li.droptarget', container).removeClass('droptarget'); + } + + /** + * 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(), + result = null; + + 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/program/steps/addressbook/func.inc b/program/steps/addressbook/func.inc index 7fb862d5e..80631cd61 100644 --- a/program/steps/addressbook/func.inc +++ b/program/steps/addressbook/func.inc @@ -187,7 +187,7 @@ function rcmail_directory_list($attrib) $jsdata = array(); $line_templ = html::tag('li', array( - 'id' => 'rcmli%s', 'class' => '%s'), + 'id' => 'rcmli%s', 'class' => '%s', 'noclose' => true), html::a(array('href' => '%s', 'rel' => '%s', 'onclick' => "return ".JS_OBJECT_NAME.".command('list','%s',this)"), '%s')); @@ -213,7 +213,7 @@ function rcmail_directory_list($attrib) $name = !empty($source['name']) ? $source['name'] : $id; $out .= sprintf($line_templ, - html_identifier($id), + rcube_utils::html_identifier($id, true), $class_name, Q(rcmail_url(null, array('_source' => $id))), $source['id'], @@ -224,10 +224,11 @@ function rcmail_directory_list($attrib) $groupdata = rcmail_contact_groups($groupdata); $jsdata = $groupdata['jsdata']; $out = $groupdata['out']; + $out .= '

- - +

diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index a1c453885..ff3951497 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -83,10 +83,23 @@ background-position: 6px -766px; } -#directorylist li.addressbook.selected a { +#directorylist li.addressbook.selected > a { background-position: 6px -791px; } +#directorylist li.addressbook ul li:last-child { + border-bottom: 0; +} + +#directorylist li.addressbook ul.groups { + margin: 0; + padding: 0; +} + +#directorylist li.addressbook ul.groups li { + width: 100%; +} + #directorylist li.contactgroup a { padding-left: 62px; background-position: 32px -1555px; @@ -112,6 +125,12 @@ margin-left: 8px; } +#directorylist li.addressbook div.collapsed, +#directorylist li.addressbook div.expanded { + top: 15px; + left: 20px; +} + #contacts-table .contact td.name { background-position: 6px -1603px; } diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 390f8d83b..401640f1f 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -30,7 +30,7 @@

- +

-- cgit v1.2.3 From 18de07e86f44ccfa27fd6783da4a2398d53ba72a Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 31 Jan 2013 15:19:58 +0100 Subject: Set the new treelist class to all mailboxlist objects --- skins/classic/templates/message.html | 2 +- skins/classic/templates/messageerror.html | 2 +- skins/larry/templates/message.html | 2 +- skins/larry/templates/messageerror.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) (limited to 'skins/larry/templates') diff --git a/skins/classic/templates/message.html b/skins/classic/templates/message.html index b9c928f8f..d1594ea28 100644 --- a/skins/classic/templates/message.html +++ b/skins/classic/templates/message.html @@ -30,7 +30,7 @@

- +

diff --git a/skins/classic/templates/messageerror.html b/skins/classic/templates/messageerror.html index 918e3092a..d02508942 100644 --- a/skins/classic/templates/messageerror.html +++ b/skins/classic/templates/messageerror.html @@ -42,7 +42,7 @@

- +

diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index ae77c0dc0..b4ceb6a6c 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -28,7 +28,7 @@

- +

diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index 3c3c9acdb..a735d47f2 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -28,7 +28,7 @@

- +

-- cgit v1.2.3 From d30460ad2fc0f78ce44d474fa2c466d660596d27 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Sun, 10 Feb 2013 15:31:39 +0100 Subject: Let some env variables survive reset(); don't show taskbar and top line in framed error pages (#1488938) --- program/include/rcmail_output_html.php | 8 +++++++- skins/larry/includes/header.html | 6 +++--- skins/larry/styles.css | 4 ++++ skins/larry/templates/error.html | 7 +++++-- 4 files changed, 19 insertions(+), 6 deletions(-) (limited to 'skins/larry/templates') diff --git a/program/include/rcmail_output_html.php b/program/include/rcmail_output_html.php index f6c5d919d..2babe1cbb 100644 --- a/program/include/rcmail_output_html.php +++ b/program/include/rcmail_output_html.php @@ -80,6 +80,8 @@ class rcmail_output_html extends rcmail_output if (!empty($_REQUEST['_extwin'])) $this->set_env('extwin', 1); + if ($this->framed || !empty($_REQUEST['_framed'])) + $this->set_env('framed', 1); // add common javascripts $this->add_script('var '.self::JS_OBJECT_NAME.' = new rcube_webmail();', 'head_top'); @@ -308,8 +310,12 @@ class rcmail_output_html extends rcmail_output */ public function reset() { + $env = array_intersect_key($this->env, array('extwin'=>1, 'framed'=>1)); + parent::reset(); - $this->js_env = array(); + + // let some env variables survive + $this->env = $this->js_env = $env; $this->js_labels = array(); $this->js_commands = array(); $this->script_files = array(); diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html index 5a30020f3..f2efb8e06 100644 --- a/skins/larry/includes/header.html +++ b/skins/larry/includes/header.html @@ -10,16 +10,16 @@

- + - +

- +

diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 613a08aa1..044a09e05 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -1276,6 +1276,10 @@ body.iframe { margin: 38px 0 10px 0; } +body.iframe.error { + background: #ededed; +} + body.iframe.floatingbuttons { margin-bottom: 40px; } diff --git a/skins/larry/templates/error.html b/skins/larry/templates/error.html index cd0fc9656..a65733eb0 100644 --- a/skins/larry/templates/error.html +++ b/skins/larry/templates/error.html @@ -4,9 +4,12 @@ <roundcube:object name="pagetitle" /> - - + + + + +

$__page_content -- cgit v1.2.3 From bc2c4380b5b754a3b13cc7d6663b2b81d2577e2e Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Wed, 6 Mar 2013 11:11:37 +0100 Subject: Add attachment menu with Open and Download options (#1488975) --- CHANGELOG | 1 + program/include/rcmail_output_html.php | 4 +++ program/js/app.js | 21 +++++++---- program/localization/en_US/labels.inc | 1 + program/steps/mail/show.inc | 23 ++++++------ skins/classic/functions.js | 53 +++++++++++++++++++++++----- skins/classic/mail.css | 20 +++++++++-- skins/classic/templates/message.html | 8 +++++ skins/classic/templates/messagepreview.html | 12 ++++++- skins/larry/images/buttons.gif | Bin 13054 -> 14997 bytes skins/larry/images/buttons.png | Bin 36693 -> 48308 bytes skins/larry/mail.css | 2 +- skins/larry/styles.css | 13 ++++++- skins/larry/templates/message.html | 8 +++++ skins/larry/templates/messagepreview.html | 8 +++++ skins/larry/ui.js | 42 +++++++++++++++++++--- 16 files changed, 181 insertions(+), 35 deletions(-) (limited to 'skins/larry/templates') diff --git a/CHANGELOG b/CHANGELOG index c5d8c7687..fa5fb8e24 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,6 +1,7 @@ CHANGELOG Roundcube Webmail =========================== +- Add attachment menu with Open and Download options (#1488975) - Fix thumbnail size when GD extension is used for image resize (#1488985) - Display user-friendly message on IMAP "over quota" errors (#1484164) - Display notice that message is encrypted also for application/pkcs7-mime messages (#1488526) diff --git a/program/include/rcmail_output_html.php b/program/include/rcmail_output_html.php index 2babe1cbb..ade2bd4a4 100644 --- a/program/include/rcmail_output_html.php +++ b/program/include/rcmail_output_html.php @@ -1175,6 +1175,10 @@ class rcmail_output_html extends rcmail_output $out = sprintf('%s', $attrib_str, $btn_content); } + if ($attrib['wrapper']) { + $out = html::tag($attrib['wrapper'], null, $out); + } + return $out; } diff --git a/program/js/app.js b/program/js/app.js index 4011fa593..55c71d776 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -179,7 +179,8 @@ function rcube_webmail() } // enable general commands - this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref', 'compose', 'undo', 'about', 'switch-task', true); + this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref', + 'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-save', true); if (this.env.permaurl) this.enable_command('permaurl', 'extwin', true); @@ -211,7 +212,7 @@ function rcube_webmail() this.gui_objects.messagelist.parentNode.onmousedown = function(e){ return p.click_on_list(e); }; this.message_list.init(); - this.enable_command('toggle_status', 'toggle_flag', 'menu-open', 'menu-save', 'sort', true); + this.enable_command('toggle_status', 'toggle_flag', 'sort', true); // load messages this.command('list'); @@ -227,7 +228,7 @@ function rcube_webmail() this.env.message_commands = ['show', 'reply', 'reply-all', 'reply-list', 'moveto', 'copy', 'delete', 'open', 'mark', 'edit', 'viewsource', - 'print', 'load-attachment', 'show-headers', 'hide-headers', 'download', + 'print', 'load-attachment', 'download-attachment', 'show-headers', 'hide-headers', 'download', 'forward', 'forward-inline', 'forward-attachment']; if (this.env.action == 'show' || this.env.action == 'preview') { @@ -608,6 +609,11 @@ function rcube_webmail() break; case 'menu-open': + if (props && props.menu == 'attachmentmenu') { + var mimetype = this.env.attachments[props.id]; + this.enable_command('open-attachment', mimetype && this.env.mimetypes && $.inArray(mimetype, this.env.mimetypes) >= 0); + } + case 'menu-save': this.triggerEvent(command, {props:props}); return false; @@ -833,11 +839,14 @@ function rcube_webmail() break; case 'load-attachment': - var qstring = '_mbox='+urlencode(this.env.mailbox)+'&_uid='+this.env.uid+'&_part='+props.part; + case 'open-attachment': + case 'download-attachment': + var qstring = '_mbox='+urlencode(this.env.mailbox)+'&_uid='+this.env.uid+'&_part='+props, + mimetype = this.env.attachments[props]; // open attachment in frame if it's of a supported mimetype - if (this.env.uid && props.mimetype && this.env.mimetypes && $.inArray(props.mimetype, this.env.mimetypes) >= 0) { - var attachment_win = window.open(this.env.comm_path+'&_action=get&'+qstring+'&_frame=1', 'rcubemailattachment'+this.env.uid+props.part); + if (command != 'download-attachment' && mimetype && this.env.mimetypes && $.inArray(mimetype, this.env.mimetypes) >= 0) { + var attachment_win = window.open(this.env.comm_path+'&_action=get&'+qstring+'&_frame=1', 'rcubemailattachment'+this.env.uid+props); if (attachment_win) { setTimeout(function(){ attachment_win.focus(); }, 10); break; diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc index 0750e7848..61a13e9ab 100644 --- a/program/localization/en_US/labels.inc +++ b/program/localization/en_US/labels.inc @@ -64,6 +64,7 @@ $labels['copy'] = 'Copy'; $labels['move'] = 'Move'; $labels['moveto'] = 'Move to...'; $labels['download'] = 'Download'; +$labels['open'] = 'Open'; $labels['showattachment'] = 'Show'; $labels['showanyway'] = 'Show it anyway'; diff --git a/program/steps/mail/show.inc b/program/steps/mail/show.inc index 437dbaafa..87555cbbe 100644 --- a/program/steps/mail/show.inc +++ b/program/steps/mail/show.inc @@ -147,6 +147,7 @@ function rcmail_message_attachments($attrib) global $PRINT_MODE, $MESSAGE, $RCMAIL; $out = $ol = ''; + $attachments = array(); if (sizeof($MESSAGE->attachments)) { foreach ($MESSAGE->attachments as $attach_prop) { @@ -165,21 +166,23 @@ function rcmail_message_attachments($attrib) $title = ''; } - $ol .= html::tag('li', rcmail_filetype2classname($attach_prop->mimetype, $filename), - html::a(array( + $mimetype = rcmail_fix_mimetype($attach_prop->mimetype); + $class = rcmail_filetype2classname($mimetype, $filename); + $id = 'attach' . $attach_prop->mime_id; + $link = html::a(array( 'href' => $MESSAGE->get_part_url($attach_prop->mime_id, false), - 'onclick' => sprintf( - 'return %s.command(\'load-attachment\',{part:\'%s\', mimetype:\'%s\'},this)', - JS_OBJECT_NAME, - $attach_prop->mime_id, - rcmail_fix_mimetype($attach_prop->mimetype)), - 'title' => Q($title), - ), - Q($filename))); + 'onclick' => sprintf('return %s.command(\'load-attachment\',\'%s\',this)', + JS_OBJECT_NAME, $attach_prop->mime_id), + 'title' => Q($title), + ), Q($filename)); + $ol .= html::tag('li', array('class' => $class, 'id' => $id), $link); + + $attachments[$attach_prop->mime_id] = $mimetype; } } $out = html::tag('ul', $attrib, $ol, html::$common_attrib); + $RCMAIL->output->set_env('attachments', $attachments); } return $out; diff --git a/skins/classic/functions.js b/skins/classic/functions.js index c59ea9bf8..499783b3f 100644 --- a/skins/classic/functions.js +++ b/skins/classic/functions.js @@ -92,6 +92,7 @@ function rcube_mail_ui() forwardmenu: {id:'forwardmenu', editable:1}, searchmenu: {id:'searchmenu', editable:1}, messagemenu: {id:'messagemenu'}, + attachmentmenu: {id:'attachmentmenu'}, listmenu: {id:'listmenu', editable:1}, dragmessagemenu:{id:'dragmessagemenu', sticky:1}, groupmenu: {id:'groupoptionsmenu', above:1}, @@ -133,24 +134,24 @@ show_popupmenu: function(popup, show) { var obj = this.popups[popup].obj, above = this.popups[popup].above, - ref = rcube_find_object(popup+'link'); + 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) { - var parent = $(ref).parent(), + if (show && ref.length) { + var parent = ref.parent(), win = $(window), - pos = parent.hasClass('dropbutton') ? parent.offset() : $(ref).offset(); + pos = parent.hasClass('dropbutton') ? parent.offset() : ref.offset(); - if (!above && pos.top + ref.offsetHeight + obj.height() > win.height()) + 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.offsetHeight)) }); + obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.height())) }); } obj[show?'show':'hide'](); @@ -325,7 +326,7 @@ listmenu: function(show) }; }, -open_listmenu: function(e) +open_listmenu: function() { this.listmenu(); }, @@ -380,6 +381,35 @@ spellmenu: function(show) 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); @@ -800,8 +830,8 @@ function rcube_init_mail_ui() .contents().mouseup(function(e){rcmail_ui.body_mouseup(e)}); if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui); - rcmail.addEventListener('menu-save', 'save_listmenu', 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('message_dragmenu', 'dragmessagemenu'); @@ -817,6 +847,11 @@ function rcube_init_mail_ui() 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($('').click(function() { rcmail_ui.show_attachmentmenu(this); })); + }); } else if (rcmail.env.task == 'addressbook') { rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); }); diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 8be35aaa6..4d42d98ff 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -173,13 +173,15 @@ } #messagemenu li a.active:hover, +#attachmentmenu li a.active:hover, #markmessagemenu li a.active:hover { color: #fff; background-color: #c00; } -#messagemenu li a +#messagemenu li a, +#attachmentmenu li a { background: url(images/messageactions.png) no-repeat 7px 0; background-position: 7px 20px; @@ -190,7 +192,8 @@ background-position: 7px 1px; } -#messagemenu li a.downloadlink +#messagemenu li a.downloadlink, +#attachmentmenu li a.downloadlink { background-position: 7px -17px; } @@ -200,7 +203,8 @@ background-position: 7px -35px; } -#messagemenu li a.openlink +#messagemenu li a.openlink, +#attachmentmenu li a.openlink { background-position: 7px -53px; } @@ -1135,6 +1139,16 @@ table.headers-table tr td.header span text-decoration: underline; } +#attachment-list li a.drop { + background: url(images/icons/down_small.gif) no-repeat center 6px; + width: 12px; + height: 7px; + cursor: pointer; + padding: 5px 0 0; + margin-left: 3px; + display: inline-block; +} + #messagebody { position:relative; diff --git a/skins/classic/templates/message.html b/skins/classic/templates/message.html index d1594ea28..73dfcb976 100644 --- a/skins/classic/templates/message.html +++ b/skins/classic/templates/message.html @@ -65,5 +65,13 @@ +

+ diff --git a/skins/classic/templates/messagepreview.html b/skins/classic/templates/messagepreview.html index 78b2306f6..935238edf 100644 --- a/skins/classic/templates/messagepreview.html +++ b/skins/classic/templates/messagepreview.html @@ -3,8 +3,10 @@ <roundcube:object name="pagetitle" /> + + - +

@@ -16,5 +18,13 @@ +

+ diff --git a/skins/larry/images/buttons.gif b/skins/larry/images/buttons.gif index d8a33d6b2..8a4a78ee4 100644 Binary files a/skins/larry/images/buttons.gif and b/skins/larry/images/buttons.gif differ diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png index 4438d9cbc..0ec061a78 100644 Binary files a/skins/larry/images/buttons.png and b/skins/larry/images/buttons.png differ diff --git a/skins/larry/mail.css b/skins/larry/mail.css index c99370830..e6529d118 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -868,7 +868,7 @@ div.more-headers { } div.hide-headers { - background-position: center -1589px; + background-position: center -1600px; } #all-headers { diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 044a09e05..1e3e6f7d5 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -2219,7 +2219,7 @@ ul.toolbarmenu li span.conversation { display: block; color: #333; font-weight: bold; - padding: 8px 4px 3px 30px; + padding: 8px 15px 3px 30px; text-shadow: 0px 1px 1px #fff; text-decoration: none; white-space: nowrap; @@ -2227,6 +2227,17 @@ ul.toolbarmenu li span.conversation { text-overflow: ellipsis; } +.attachmentslist li a.drop { + background: url(images/buttons.png) no-repeat scroll center -1570px; + width: 14px; + height: 26px; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + padding: 0; +} + #compose-attachments ul li { padding-right: 28px; } diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index b4ceb6a6c..36e0efa0a 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -73,6 +73,14 @@

+ + diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index aef282ac9..dbfe2dc7b 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -51,6 +51,14 @@

+ + diff --git a/skins/larry/ui.js b/skins/larry/ui.js index d2638bbca..6b2a5c7d0 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -17,6 +17,7 @@ function rcube_mail_ui() var popupconfig = { forwardmenu: { editable:1 }, searchmenu: { editable:1, callback:searchmenu }, + attachmentmenu: { }, listoptions: { editable:1 }, dragmessagemenu: { sticky:1 }, groupmenu: { above:1 }, @@ -81,8 +82,8 @@ function rcube_mail_ui() /*** mail task ***/ if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', show_listoptions); - rcmail.addEventListener('menu-save', save_listoptions); + rcmail.addEventListener('menu-open', menu_open); + rcmail.addEventListener('menu-save', menu_save); rcmail.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') }); var dragmenu = $('#dragmessagemenu'); @@ -95,6 +96,11 @@ function rcube_mail_ui() rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); }); rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); }); $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false }); + + // add menu link for each attachment + $('#attachment-list > li').each(function() { + $(this).append($('').click(function() { attachmentmenu(this); })); + }); } else if (rcmail.env.action == 'compose') { rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); }); @@ -436,7 +442,7 @@ function rcube_mail_ui() { var obj = popups[popup], config = popupconfig[popup], - ref = $('#'+popup+'link'), + ref = $(config.link ? config.link : '#'+popup+'link'), above = config.above; if (!obj) { @@ -452,7 +458,7 @@ function rcube_mail_ui() else if (config.toggle && show && obj.is(':visible')) show = false; - if (show && ref) { + if (show && ref.length) { var parent = ref.parent(), win = $(window), pos; @@ -575,6 +581,19 @@ function rcube_mail_ui() /**** 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) { @@ -605,6 +624,21 @@ function rcube_mail_ui() } } + 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) { -- cgit v1.2.3 From 6996dee8567b32144c10aea5bf8db7feb07c2ce6 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 21 Mar 2013 11:56:21 +0100 Subject: Add switch for text/html alternative part view (#1486939) --- skins/larry/iehacks.css | 7 +++- skins/larry/images/buttons.png | Bin 48308 -> 37956 bytes skins/larry/mail.css | 8 +++- skins/larry/styles.css | 66 +++++++++++++++++++++++++++++- skins/larry/svggradients.css | 7 +++- skins/larry/templates/message.html | 15 +++++++ skins/larry/templates/messagepreview.html | 11 +++++ 7 files changed, 109 insertions(+), 5 deletions(-) (limited to 'skins/larry/templates') diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 871cce4fd..960ce7648 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -29,7 +29,8 @@ input.button.mainaction:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2e31', endColorstr='#505050', GradientType=0); } -a.button { +a.button, +.buttongroup { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0); } @@ -47,6 +48,10 @@ input.button:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#d8d8d8', GradientType=0); } +.buttongroup a.button.selected { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#909090', endColorstr='#858585', GradientType=0); +} + #message.statusbar { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c8c8c8', GradientType=0); } diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png index 0ec061a78..54bee0156 100644 Binary files a/skins/larry/images/buttons.png and b/skins/larry/images/buttons.png differ diff --git a/skins/larry/mail.css b/skins/larry/mail.css index e6529d118..71ff78598 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -950,7 +950,8 @@ div.hide-headers { border-radius: 4px; } -#messageheader #countcontrols { +#messageheader #countcontrols, +#messageheader #formatcontrols { position: absolute; top: 8px; right: 8px; @@ -958,6 +959,11 @@ div.hide-headers { white-space: nowrap; } +#messageheader #formatcontrols { + top: 38px; + right: 8px; +} + #messageheader .pagenav .countdisplay { min-width: 0; padding-right: 0.5em; diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 1e3e6f7d5..ddfe8ef5e 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -177,7 +177,8 @@ input.mainaction { /** link buttons **/ -a.button { +a.button, +.buttongroup { display: inline-block; margin: 0 2px; padding: 2px 5px; @@ -198,6 +199,11 @@ a.button { text-decoration: none; } +.buttongroup { + padding: 0; + white-space: nowrap; +} + a.button:focus, input.button:focus { border-color: #4fadd5; @@ -231,6 +237,29 @@ a.button.disabled span.inner { filter: alpha(opacity=40); } +.buttongroup a.button { + margin: 0; + border-width: 0 1px 0 0; + border-radius: 0; + background: none; + box-shadow: none; + -o-box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} + +.buttongroup a.button.first, +.buttongroup a.button:first-child { + border-radius: 4px 0 0 4px; + border-left: 0; +} + +.buttongroup a.button.last, +.buttongroup a.button:last-child { + border-radius: 0 4px 4px 0; + border-right: 0; +} + a.button.pressed, a.button:active, input.button:active { @@ -266,6 +295,20 @@ input.button:active { background: linear-gradient(top, #bababa 0%, #d8d8d8 100%); } +.buttongroup a.button.selected { + background: #8a8a8a; + background: -moz-linear-gradient(top, #909090 0%, #858585 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#909090), color-stop(100%,#858585)); + background: -o-linear-gradient(top, #909090 0%, #858585 100%); + background: -ms-linear-gradient(top, #909090 0%, #858585 100%); + background: linear-gradient(top, #909090 0%, #858585 100%); + -webkit-box-shadow: inset 0 1px 2px 0 #555; + -moz-box-shadow: inset 0 1px 2px 0 #555; + box-shadow: inset 0 1px 2px 0 #555; + border-right-color: #555; + border-left-color: #555; +} + .pagenav a.button { padding: 1px 3px; height: 16px; @@ -273,6 +316,11 @@ input.button:active { margin-bottom: 1px; } +.pagenav .buttongroup a.button { + padding: 1px 5px; + margin-bottom: 0; +} + .pagenav a.button span.inner { display: inline-block; width: 16px; @@ -318,6 +366,20 @@ input.button:active { background-position: -29px -271px; } +.pagenav a.changeformat.html span.inner { + background-position: -7px -1859px; +} +.pagenav a.changeformat.html.selected span.inner { + background-position: -29px -1859px; +} + +.pagenav a.changeformat.text span.inner { + background-position: -7px -1874px; +} +.pagenav a.changeformat.text.selected span.inner { + background-position: -29px -1874px; +} + .pagenav .countdisplay { display: inline-block; padding: 3px 1em 0 1em; @@ -2230,7 +2292,7 @@ ul.toolbarmenu li span.conversation { .attachmentslist li a.drop { background: url(images/buttons.png) no-repeat scroll center -1570px; width: 14px; - height: 26px; + height: 20px; cursor: pointer; position: absolute; right: 0; diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index 2172ac31a..c40d44f4b 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -29,7 +29,8 @@ input.button.mainaction:active { background-image: url(svggradient.php?c=2a2e31;505050); } -a.button { +a.button, +.buttongroup { background-image: url(svggradient.php?c=f9f9f9;e6e6e6); } @@ -47,6 +48,10 @@ input.button:active { background-image: url(svggradient.php?c=bababa;d8d8d8); } +.buttongroup a.button.selected { + background-image: url(svggradient.php?c=909090;858585); +} + #message.statusbar { background-image: url(svggradient.php?c=eaeaea;c8c8c8); } diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 36e0efa0a..0e19afa40 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -54,6 +54,21 @@

+ +

diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index dbfe2dc7b..12a9f2dbd 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -30,6 +30,17 @@

+ + + + + + + + + + + -- cgit v1.2.3 From 90e41a7cc08d7171ba4a2c1acf1f0560ee2503a6 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 21 Mar 2013 13:43:49 +0100 Subject: Small improvements to text/html switch --- skins/larry/styles.css | 8 +++++--- skins/larry/templates/messagepreview.html | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'skins/larry/templates') diff --git a/skins/larry/styles.css b/skins/larry/styles.css index ddfe8ef5e..8870d9fd3 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -295,7 +295,8 @@ input.button:active { background: linear-gradient(top, #bababa 0%, #d8d8d8 100%); } -.buttongroup a.button.selected { +.buttongroup a.button.selected, +.buttongroup a.button.selected:hover { background: #8a8a8a; background: -moz-linear-gradient(top, #909090 0%, #858585 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#909090), color-stop(100%,#858585)); @@ -316,7 +317,8 @@ input.button:active { margin-bottom: 1px; } -.pagenav .buttongroup a.button { +.pagenav .buttongroup a.button, +.pagenav .buttongroup a.button:hover { padding: 1px 5px; margin-bottom: 0; } @@ -366,7 +368,7 @@ input.button:active { background-position: -29px -271px; } -.pagenav a.changeformat.html span.inner { +.pagenav a.changeformat.text span.inner { background-position: -7px -1859px; } .pagenav a.changeformat.html.selected span.inner { diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index 12a9f2dbd..b2af03485 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -32,12 +32,12 @@

- + - + -- cgit v1.2.3