Page MenuHomePhorge
Files F2527917

No OneTemporary
Actions

Size
589 KB
Referenced Files
None
Subscribers
None

View Options

This file is larger than 256 KB, so syntax highlighting was skipped.
diff --git a/jsdeps.json b/jsdeps.json
index ba486deba..c1d3179f4 100644
--- a/jsdeps.json
+++ b/jsdeps.json
@@ -1,115 +1,113 @@
{
"dependencies": [
{
"lib": "jquery",
"name": "jQuery",
"version": "3.5.1",
"url": "https://code.jquery.com/jquery-$v.min.js",
"dest": "program/js/jquery.min.js",
"sha1": "c8e1c8b386dc5b7a9184c763c88d19a346eb3342",
"license": "MIT",
"copyright": "Copyright JS Foundation and other contributors",
"source": "https://github.com/jquery/jquery/tree/$v"
},
{
"lib": "jstz",
"name": "jsTimezoneDetect",
"version": "1.0.6",
"url": "https://bitbucket.org/pellepim/jstimezonedetect/raw/6c427658686c664da52c6a87cd62ec910baab276/dist/jstz.min.js",
"dest": "program/js/jstz.min.js",
"sha1": "4291cd3b259d2060460c2a6ab99f428d3c0c9537",
"license": "MIT",
"copyright": "Copyright (c) Jon Nylander",
"source": "https://bitbucket.org/pellepim/jstimezonedetect/raw/6c427658686c664da52c6a87cd62ec910baab276/dist/jstz.js"
},
{
"lib": "publickey",
"name": "PublicKey.js",
"version": "0e011cb1",
"url": "https://raw.githubusercontent.com/diafygi/publickeyjs/$v/publickey.js",
"api_url": "https://api.github.com/repos/diafygi/publickeyjs/contents/publickey.js?ref=$v",
"dest": "program/js/publickey.js",
"sha1": "d0920e190754e024c4be76ad5bbc7e76b2e37a4d",
"license": "GPLv3",
"copyright": "Copyright (c) 2015 Daniel Roesler",
"source": "https://github.com/diafygi/publickeyjs/blob/master/publickey.js"
},
{
"lib": "tinymce",
- "version": "4.8.2",
+ "version": "5.4.1",
"url": "https://download.tiny.cloud/tinymce/community/tinymce_$v.zip",
"dest": "program/js",
- "sha1": "d7fced05acdeeb78299585ea9909b0de2b3d759d",
+ "sha1": "1266dcbbc6d13fa789b3443a63acff4b75f5a911",
"license": "LGPL",
- "copyright": "Copyright (c) 1999-2015 Ephox Corp. All rights reserved",
+ "copyright": "Copyright (c) Tiny Technologies, Inc. All rights reserved",
"rm": "program/js/tinymce",
"map": {
"js/tinymce": "tinymce"
},
"omit": [
"tinymce/license.txt",
- "tinymce/jquery.tinymce.min.js"
- ],
- "addlicense": [
- "tinymce/tinymce.min.js"
+ "tinymce/jquery.tinymce.min.js",
+ "tinymce/themes/mobile"
]
},
{
"lib": "tinymce-langs",
- "version": "4.8.2",
- "url": "https://www.tiny.cloud/docs-4x/language/tinymce4x_languages.zip",
+ "version": "5.4.1",
+ "url": "https://www.tiny.cloud/tinymce-services-azure/1/i18n/download?langs=ar,hy,az,eu,be,bs,bg_BG,ca,zh_CN,zh_TW,hr,cs,cs_CZ,da,nl,en_CA,en_GB,eo,et,fo,fi,fr_FR,fr_CH,gd,gl,ka_GE,de,de_AT,el,he_IL,hi_IN,hu_HU,is_IS,id,ga,it,ja,kab,km_KH,ko_KR,ku,ku_IQ,lv,lt,lb,mk_MK,ml_IN,nb_NO,oc,fa,fa_IR,pl,pt_BR,pt_PT,ro,ru,sk,sl_SI,es,es_MX,sv_SE,tg,ta,ta_IN,tt,th_TH,tr,tr_TR,ug,uk,uk_UA,vi,vi_VN,cy&v=$v&extension=.zip",
"dest": "program/js/tinymce"
},
{
"lib": "openpgp",
"name": "OpenPGP.js",
"version": "4.4.6",
"url": "https://raw.githubusercontent.com/openpgpjs/openpgpjs/v$v/dist/openpgp.min.js",
"api_url": "https://api.github.com/repos/openpgpjs/openpgpjs/contents/dist/openpgp.min.js?ref=v$v",
"dest": "plugins/enigma/openpgp.min.js",
"sha1": "e142168db8e666a40fcb4c48ef89c9d774134f8b",
"license": "LGPL",
"copyright": "Copyright (c) OpenPGP Development Team",
"source": "https://github.com/openpgpjs/openpgpjs/blob/v$v/dist/openpgp.js"
},
{
"lib": "codemirror",
"version": "5.46.0",
"url": "https://codemirror.net/codemirror-$v.zip",
"dest": "plugins/managesieve/codemirror",
"sha1": "c11fcb9b63cee2b276e3b9f24a8ad6d7c374c624",
"license": "MIT",
"map": {
"lib": "lib",
"addon/selection": "addon/selection",
"mode/sieve": "mode/sieve"
}
},
{
"lib": "bootstrap",
"name": "Bootstrap",
"version": "4.3.1",
"url": "https://github.com/twbs/bootstrap/releases/download/v$v/bootstrap-$v-dist.zip",
"dest": "skins/elastic/deps",
"sha1": "ee9e9d6bbbb6181dc519778af2b38804a6aa62a4",
"license": "MIT",
"flat": true,
"sourcemap": false,
"map": {
"bootstrap.bundle.min.js": "bootstrap.bundle.min.js",
"bootstrap.min.css": "bootstrap.min.css"
}
},
{
"lib": "less",
"name": "LessJS",
"version": "2.7.3",
"url": "https://raw.githubusercontent.com/less/less.js/v$v/dist/less.min.js",
"api_url": "https://api.github.com/repos/less/less.js/contents/dist/less.min.js?ref=v$v",
"dest": "skins/elastic/deps/less.min.js",
"sha1": "45ea4f9fed6c0568ec11faba048c3e3cb7612e9e",
"license": "Apache-2.0",
"source": "https://raw.githubusercontent.com/less/less.js/v$v/dist/less.js"
}
]
}
\ No newline at end of file
diff --git a/plugins/emoticons/composer.json b/plugins/emoticons/composer.json
index 30dd3928e..fa0f41ea5 100644
--- a/plugins/emoticons/composer.json
+++ b/plugins/emoticons/composer.json
@@ -1,29 +1,29 @@
{
"name": "roundcube/emoticons",
"type": "roundcube-plugin",
"description": "Plugin that adds emoticons support.",
"license": "GPLv3+",
- "version": "2.0",
+ "version": "3.0",
"authors": [
{
"name": "Thomas Bruederli",
"email": "roundcube@gmail.com",
"role": "Lead"
},
{
"name": "Aleksander Machniak",
"email": "alec@alec.pl",
"role": "Developer"
}
],
"repositories": [
{
"type": "composer",
"url": "https://plugins.roundcube.net"
}
],
"require": {
"php": ">=5.3.0",
"roundcube/plugin-installer": ">=0.1.3"
}
}
diff --git a/plugins/emoticons/emoticons.php b/plugins/emoticons/emoticons.php
index 4eefed873..bc76017eb 100644
--- a/plugins/emoticons/emoticons.php
+++ b/plugins/emoticons/emoticons.php
@@ -1,185 +1,167 @@
<?php
/**
- * Emoticons
+ * Emoticons.
*
- * Plugin to replace emoticons in plain text message body with real icons.
+ * Plugin to replace emoticons in plain text message body with real emoji.
* Also it enables emoticons in HTML compose editor. Both features are optional.
*
* @license GNU GPLv3+
* @author Thomas Bruederli
* @author Aleksander Machniak
- * @website http://roundcube.net
+ * @website https://roundcube.net
*/
class emoticons extends rcube_plugin
{
public $task = 'mail|settings|utils';
/**
* Plugin initilization.
*/
function init()
{
$rcube = rcube::get_instance();
$this->add_hook('message_part_after', array($this, 'message_part_after'));
- $this->add_hook('message_outgoing_body', array($this, 'message_outgoing_body'));
- $this->add_hook('html2text', array($this, 'html2text'));
$this->add_hook('html_editor', array($this, 'html_editor'));
if ($rcube->task == 'settings') {
$this->add_hook('preferences_list', array($this, 'preferences_list'));
$this->add_hook('preferences_save', array($this, 'preferences_save'));
}
}
/**
- * 'message_part_after' hook handler to replace common plain text emoticons
- * with emoticon images (<img>)
+ * 'message_part_after' hook handler to replace common
+ * plain text emoticons with emoji
*/
function message_part_after($args)
{
if ($args['type'] == 'plain') {
$this->load_config();
$rcube = rcube::get_instance();
if (!$rcube->config->get('emoticons_display', false)) {
return $args;
}
- require_once __DIR__ . '/emoticons_engine.php';
-
- $args['body'] = emoticons_engine::text2icons($args['body']);
- }
-
- return $args;
- }
-
- /**
- * 'message_outgoing_body' hook handler to replace image emoticons from TinyMCE
- * editor with image attachments.
- */
- function message_outgoing_body($args)
- {
- if ($args['type'] == 'html') {
- $this->load_config();
-
- $rcube = rcube::get_instance();
- if (!$rcube->config->get('emoticons_compose', true)) {
- return $args;
- }
-
- require_once __DIR__ . '/emoticons_engine.php';
-
- // look for "emoticon" images from TinyMCE and change their src paths to
- // be file paths on the server instead of URL paths.
- $images = emoticons_engine::replace($args['body']);
-
- // add these images as attachments to the MIME message
- foreach ($images as $img_name => $img_file) {
- $args['message']->addHTMLImage($img_file, 'image/gif', '', true, $img_name);
- }
- }
-
- return $args;
- }
-
- /**
- * 'html2text' hook handler to replace image emoticons from TinyMCE
- * editor with plain text emoticons.
- *
- * This is executed on html2text action, i.e. when switching from HTML to text
- * in compose window (or similar place). Also when generating alternative
- * text/plain part.
- */
- function html2text($args)
- {
- $rcube = rcube::get_instance();
-
- if ($rcube->action == 'html2text' || $rcube->action == 'send') {
- $this->load_config();
-
- if (!$rcube->config->get('emoticons_compose', true)) {
- return $args;
- }
-
- require_once __DIR__ . '/emoticons_engine.php';
-
- $args['body'] = emoticons_engine::icons2text($args['body']);
+ $args['body'] = self::text2icons($args['body']);
}
return $args;
}
/**
* 'html_editor' hook handler, where we enable emoticons in TinyMCE
*/
function html_editor($args)
{
$rcube = rcube::get_instance();
$this->load_config();
if ($rcube->config->get('emoticons_compose', true)) {
$args['extra_plugins'][] = 'emoticons';
$args['extra_buttons'][] = 'emoticons';
}
return $args;
}
/**
* 'preferences_list' hook handler
*/
function preferences_list($args)
{
$rcube = rcube::get_instance();
$dont_override = $rcube->config->get('dont_override', array());
if ($args['section'] == 'mailview' && !in_array('emoticons_display', $dont_override)) {
$this->load_config();
$this->add_texts('localization');
$field_id = 'emoticons_display';
$checkbox = new html_checkbox(array('name' => '_' . $field_id, 'id' => $field_id, 'value' => 1));
$args['blocks']['main']['options']['emoticons_display'] = array(
'title' => html::label($field_id, $this->gettext('emoticonsdisplay')),
'content' => $checkbox->show(intval($rcube->config->get('emoticons_display', false)))
);
}
else if ($args['section'] == 'compose' && !in_array('emoticons_compose', $dont_override)) {
$this->load_config();
$this->add_texts('localization');
$field_id = 'emoticons_compose';
$checkbox = new html_checkbox(array('name' => '_' . $field_id, 'id' => $field_id, 'value' => 1));
$args['blocks']['main']['options']['emoticons_compose'] = array(
'title' => html::label($field_id, $this->gettext('emoticonscompose')),
'content' => $checkbox->show(intval($rcube->config->get('emoticons_compose', true)))
);
}
return $args;
}
/**
* 'preferences_save' hook handler
*/
function preferences_save($args)
{
- $rcube = rcube::get_instance();
- $dont_override = $rcube->config->get('dont_override', array());
-
- if ($args['section'] == 'mailview' && !in_array('emoticons_display', $dont_override)) {
- $args['prefs']['emoticons_display'] = rcube_utils::get_input_value('_emoticons_display', rcube_utils::INPUT_POST) ? true : false;
+ if ($args['section'] == 'mailview') {
+ $args['prefs']['emoticons_display'] = !empty(rcube_utils::get_input_value('_emoticons_display', rcube_utils::INPUT_POST));
}
- else if ($args['section'] == 'compose' && !in_array('emoticons_compose', $dont_override)) {
- $args['prefs']['emoticons_compose'] = rcube_utils::get_input_value('_emoticons_compose', rcube_utils::INPUT_POST) ? true : false;
+ else if ($args['section'] == 'compose') {
+ $args['prefs']['emoticons_compose'] = !empty(rcube_utils::get_input_value('_emoticons_compose', rcube_utils::INPUT_POST));
}
return $args;
}
+
+ /**
+ * Replace common plain text emoticons with emoji
+ *
+ * @param string $text Text
+ *
+ * @return string Converted text
+ */
+ protected static function text2icons($text)
+ {
+ // This is a lookbehind assertion which will exclude html entities
+ // E.g. situation when ";)" in "&quot;)" shouldn't be replaced by the icon
+ // It's so long because of assertion format restrictions
+ $entity = '(?<!&'
+ . '[a-zA-Z0-9]{2}' . '|' . '#[0-9]{2}' . '|'
+ . '[a-zA-Z0-9]{3}' . '|' . '#[0-9]{3}' . '|'
+ . '[a-zA-Z0-9]{4}' . '|' . '#[0-9]{4}' . '|'
+ . '[a-zA-Z0-9]{5}' . '|'
+ . '[a-zA-Z0-9]{6}' . '|'
+ . '[a-zA-Z0-9]{7}'
+ . ')';
+
+ // map of emoticon replacements
+ $map = array(
+ '/(?<!mailto):-?D/' => self::ico_tag('1f603', ':D' ), // laugh
+ '/:-?\(/' => self::ico_tag('1f626', ':(' ), // frown
+ '/'.$entity.';-?\)/' => self::ico_tag('1f609', ';)' ), // wink
+ '/8-?\)/' => self::ico_tag('1f60e', '8)' ), // cool
+ '/(?<!mailto):-?O/i' => self::ico_tag('1f62e', ':O' ), // surprised
+ '/(?<!mailto):-?P/i' => self::ico_tag('1f61b', ':P' ), // tongue out
+ '/(?<!mailto):-?@/i' => self::ico_tag('1f631', ':-@' ), // yell
+ '/O:-?\)/i' => self::ico_tag('1f607', 'O:-)' ), // innocent
+ '/(?<!O):-?\)/' => self::ico_tag('1f60a', ':-)' ), // smile
+ '/(?<!mailto):-?\$/' => self::ico_tag('1f633', ':-$' ), // embarrassed
+ '/(?<!mailto):-?\*/i' => self::ico_tag('1f48b', ':-*' ), // kiss
+ '/(?<!mailto):-?S/i' => self::ico_tag('1f615', ':-S' ), // undecided
+ );
+
+ return preg_replace(array_keys($map), array_values($map), $text);
+ }
+
+ protected static function ico_tag($ico, $title)
+ {
+ return html::span(array('title' => $title), "&#x{$ico};");
+ }
}
diff --git a/plugins/emoticons/emoticons_engine.php b/plugins/emoticons/emoticons_engine.php
deleted file mode 100644
index 4d534cdc1..000000000
--- a/plugins/emoticons/emoticons_engine.php
+++ /dev/null
@@ -1,152 +0,0 @@
-<?php
-
-/**
- * @license GNU GPLv3+
- * @author Thomas Bruederli
- * @author Aleksander Machniak
- */
-class emoticons_engine
-{
- const IMG_PATH = 'program/js/tinymce/plugins/emoticons/img/';
-
- /**
- * Replaces TinyMCE's emoticon images with plain-text representation
- *
- * @param string $html HTML content
- *
- * @return string HTML content
- */
- public static function icons2text($html)
- {
- $emoticons = array(
- '8-)' => 'smiley-cool',
- ':-#' => 'smiley-foot-in-mouth',
- ':-*' => 'smiley-kiss',
- ':-X' => 'smiley-sealed',
- ':-P' => 'smiley-tongue-out',
- ':-@' => 'smiley-yell',
- ":'(" => 'smiley-cry',
- ':-(' => 'smiley-frown',
- ':-D' => 'smiley-laughing',
- ':-)' => 'smiley-smile',
- ':-S' => 'smiley-undecided',
- ':-$' => 'smiley-embarassed',
- 'O:-)' => 'smiley-innocent',
- ':-|' => 'smiley-money-mouth',
- ':-O' => 'smiley-surprised',
- ';-)' => 'smiley-wink',
- );
-
- foreach ($emoticons as $idx => $file) {
- // <img title="Cry" src="http://.../program/js/tinymce/plugins/emoticons/img/smiley-cry.gif" border="0" alt="Cry" />
- $file = preg_quote(self::IMG_PATH . $file . '.gif', '/');
- $search[] = '/<img (title="[a-z ]+" )?src="[^"]+' . $file . '"[^>]+\/>/i';
- $replace[] = $idx;
- }
-
- return preg_replace($search, $replace, $html);
- }
-
- /**
- * Replace common plain text emoticons with empticon <img> tags
- *
- * @param string $text Text
- *
- * @return string Converted text
- */
- public static function text2icons($text)
- {
- // This is a lookbehind assertion which will exclude html entities
- // E.g. situation when ";)" in "&quot;)" shouldn't be replaced by the icon
- // It's so long because of assertion format restrictions
- $entity = '(?<!&'
- . '[a-zA-Z0-9]{2}' . '|' . '#[0-9]{2}' . '|'
- . '[a-zA-Z0-9]{3}' . '|' . '#[0-9]{3}' . '|'
- . '[a-zA-Z0-9]{4}' . '|' . '#[0-9]{4}' . '|'
- . '[a-zA-Z0-9]{5}' . '|'
- . '[a-zA-Z0-9]{6}' . '|'
- . '[a-zA-Z0-9]{7}'
- . ')';
-
- // map of emoticon replacements
- $map = array(
- '/(?<!mailto):D/' => self::img_tag('smiley-laughing.gif', ':D' ),
- '/:-D/' => self::img_tag('smiley-laughing.gif', ':-D' ),
- '/:\(/' => self::img_tag('smiley-frown.gif', ':(' ),
- '/:-\(/' => self::img_tag('smiley-frown.gif', ':-(' ),
- '/'.$entity.';\)/' => self::img_tag('smiley-wink.gif', ';)' ),
- '/'.$entity.';-\)/' => self::img_tag('smiley-wink.gif', ';-)' ),
- '/8\)/' => self::img_tag('smiley-cool.gif', '8)' ),
- '/8-\)/' => self::img_tag('smiley-cool.gif', '8-)' ),
- '/(?<!mailto):O/i' => self::img_tag('smiley-surprised.gif', ':O' ),
- '/(?<!mailto):-O/i' => self::img_tag('smiley-surprised.gif', ':-O' ),
- '/(?<!mailto):P/i' => self::img_tag('smiley-tongue-out.gif', ':P' ),
- '/(?<!mailto):-P/i' => self::img_tag('smiley-tongue-out.gif', ':-P' ),
- '/(?<!mailto):@/i' => self::img_tag('smiley-yell.gif', ':@' ),
- '/(?<!mailto):-@/i' => self::img_tag('smiley-yell.gif', ':-@' ),
- '/O:\)/i' => self::img_tag('smiley-innocent.gif', 'O:)' ),
- '/O:-\)/i' => self::img_tag('smiley-innocent.gif', 'O:-)' ),
- '/(?<!O):\)/' => self::img_tag('smiley-smile.gif', ':)' ),
- '/(?<!O):-\)/' => self::img_tag('smiley-smile.gif', ':-)' ),
- '/(?<!mailto):\$/' => self::img_tag('smiley-embarassed.gif', ':$' ),
- '/(?<!mailto):-\$/' => self::img_tag('smiley-embarassed.gif', ':-$' ),
- '/(?<!mailto):\*/i' => self::img_tag('smiley-kiss.gif', ':*' ),
- '/(?<!mailto):-\*/i' => self::img_tag('smiley-kiss.gif', ':-*' ),
- '/(?<!mailto):S/i' => self::img_tag('smiley-undecided.gif', ':S' ),
- '/(?<!mailto):-S/i' => self::img_tag('smiley-undecided.gif', ':-S' ),
- );
-
- return preg_replace(array_keys($map), array_values($map), $text);
- }
-
- protected static function img_tag($ico, $title)
- {
- return html::img(array('src' => './' . self::IMG_PATH . $ico, 'title' => $title));
- }
-
- /**
- * Replace emoticon icons <img> 'src' attribute, so it can
- * be replaced with real file by Mail_Mime.
- *
- * @param string &$html HTML content
- *
- * @return array List of image files
- */
- public static function replace(&$html)
- {
- // Replace this:
- // <img src="http[s]://.../tinymce/plugins/emoticons/img/smiley-cool.gif" ... />
- // with this:
- // <img src="/path/on/server/.../tinymce/plugins/emoticons/img/smiley-cool.gif" ... />
-
- $rcube = rcube::get_instance();
- $assets_dir = $rcube->config->get('assets_dir');
- $path = unslashify($assets_dir ?: INSTALL_PATH) . '/' . self::IMG_PATH;
- $offset = 0;
- $images = array();
-
- // remove any null-byte characters before parsing
- $html = preg_replace('/\x00/', '', $html);
-
- if (preg_match_all('# src=[\'"]([^\'"]+)#', $html, $matches, PREG_OFFSET_CAPTURE)) {
- foreach ($matches[1] as $m) {
- // find emoticon image tags
- if (preg_match('#'. self::IMG_PATH . '(.*)$#', $m[0], $imatches)) {
- $image_name = $imatches[1];
-
- // sanitize image name so resulting attachment doesn't leave images dir
- $image_name = preg_replace('/[^a-zA-Z0-9_\.\-]/i', '', $image_name);
- $image_file = $path . $image_name;
-
- // Add the same image only once
- $images[$image_name] = $image_file;
-
- $html = substr_replace($html, $image_file, $m[1] + $offset, strlen($m[0]));
- $offset += strlen($image_file) - strlen($m[0]);
- }
- }
- }
-
- return $images;
- }
-}
diff --git a/plugins/emoticons/localization/en_US.inc b/plugins/emoticons/localization/en_US.inc
index c1ab1dab8..c1f65d566 100644
--- a/plugins/emoticons/localization/en_US.inc
+++ b/plugins/emoticons/localization/en_US.inc
@@ -1,21 +1,19 @@
<?php
/*
+-----------------------------------------------------------------------+
| Localization file of the Roundcube Webmail Emoticons plugin |
| |
| Copyright (C) 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. |
+-----------------------------------------------------------------------+
For translation see https://www.transifex.com/projects/p/roundcube-webmail/resource/plugin-emoticons/
*/
$labels = array();
$labels['emoticonsdisplay'] = 'Display emoticons in plain text messages';
$labels['emoticonscompose'] = 'Enable emoticons';
-
-?>
diff --git a/plugins/emoticons/tests/EmoticonsEngine.php b/plugins/emoticons/tests/EmoticonsEngine.php
deleted file mode 100644
index 58ad0668c..000000000
--- a/plugins/emoticons/tests/EmoticonsEngine.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-class EmoticonsEngine extends PHPUnit\Framework\TestCase
-{
-
- function setUp()
- {
- include_once __DIR__ . '/../emoticons_engine.php';
- }
-
- /**
- * text2icons() method tests
- */
- function test_text2icons()
- {
- $map = array(
- ':D' => array('smiley-laughing.gif', ':D' ),
- ':-D' => array('smiley-laughing.gif', ':-D' ),
- ':(' => array('smiley-frown.gif', ':(' ),
- ':-(' => array('smiley-frown.gif', ':-(' ),
- '8)' => array('smiley-cool.gif', '8)' ),
- '8-)' => array('smiley-cool.gif', '8-)' ),
- ':O' => array('smiley-surprised.gif', ':O' ),
- ':-O' => array('smiley-surprised.gif', ':-O' ),
- ':P' => array('smiley-tongue-out.gif', ':P' ),
- ':-P' => array('smiley-tongue-out.gif', ':-P' ),
- ':@' => array('smiley-yell.gif', ':@' ),
- ':-@' => array('smiley-yell.gif', ':-@' ),
- 'O:)' => array('smiley-innocent.gif', 'O:)' ),
- 'O:-)' => array('smiley-innocent.gif', 'O:-)' ),
- ':)' => array('smiley-smile.gif', ':)' ),
- ':-)' => array('smiley-smile.gif', ':-)' ),
- ':$' => array('smiley-embarassed.gif', ':$' ),
- ':-$' => array('smiley-embarassed.gif', ':-$' ),
- ':*' => array('smiley-kiss.gif', ':*' ),
- ':-*' => array('smiley-kiss.gif', ':-*' ),
- ':S' => array('smiley-undecided.gif', ':S' ),
- ':-S' => array('smiley-undecided.gif', ':-S' ),
- );
-
- foreach ($map as $body => $expected) {
- $result = emoticons_engine::text2icons($body);
-
- $this->assertRegExp('/' . preg_quote($expected[0], '/') . '/', $result);
- $this->assertRegExp('/title="' . preg_quote($expected[1], '/') . '"/', $result);
- }
- }
-}
diff --git a/program/include/rcmail.php b/program/include/rcmail.php
index 2d5ee594e..09fcd3aef 100644
--- a/program/include/rcmail.php
+++ b/program/include/rcmail.php
@@ -1,2655 +1,2669 @@
<?php
/**
+-----------------------------------------------------------------------+
| This file is part of the Roundcube Webmail client |
| |
| Copyright (C) The Roundcube Dev Team |
| Copyright (C) Kolab Systems AG |
| |
| 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. |
| |
| PURPOSE: |
| Application class providing core functions and holding |
| instances of all 'global' objects like db- and imap-connections |
+-----------------------------------------------------------------------+
| Author: Thomas Bruederli <roundcube@gmail.com> |
| Author: Aleksander Machniak <alec@alec.pl> |
+-----------------------------------------------------------------------+
*/
/**
* Application class of Roundcube Webmail
* implemented as singleton
*
* @package Webmail
*/
class rcmail extends rcube
{
/**
* Main tasks.
*
* @var array
*/
static public $main_tasks = array('mail','settings','addressbook','login','logout','utils','dummy');
/**
* Current task.
*
* @var string
*/
public $task;
/**
* Current action.
*
* @var string
*/
public $action = '';
public $comm_path = './';
public $filename = '';
public $default_skin;
public $login_error;
private $address_books = array();
private $action_map = array();
const ERROR_STORAGE = -2;
const ERROR_INVALID_REQUEST = 1;
const ERROR_INVALID_HOST = 2;
const ERROR_COOKIES_DISABLED = 3;
const ERROR_RATE_LIMIT = 4;
/**
* This implements the 'singleton' design pattern
*
* @param integer $mode Ignored rcube::get_instance() argument
* @param string $env Environment name to run (e.g. live, dev, test)
*
* @return rcmail The one and only instance
*/
static function get_instance($mode = 0, $env = '')
{
if (!self::$instance || !is_a(self::$instance, 'rcmail')) {
// In cli-server mode env=test
if ($env === null && php_sapi_name() == 'cli-server') {
$env = 'test';
}
self::$instance = new rcmail($env);
// init AFTER object was linked with self::$instance
self::$instance->startup();
}
return self::$instance;
}
/**
* Initial startup function
* to register session, create database and imap connections
*/
protected function startup()
{
$this->init(self::INIT_WITH_DB | self::INIT_WITH_PLUGINS);
// set filename if not index.php
if (($basename = basename($_SERVER['SCRIPT_FILENAME'])) && $basename != 'index.php') {
$this->filename = $basename;
}
// load all configured plugins
$plugins = (array) $this->config->get('plugins', array());
$required_plugins = array('filesystem_attachments', 'jqueryui');
$this->plugins->load_plugins($plugins, $required_plugins);
// start session
$this->session_init();
// Remember default skin, before it's replaced by user prefs
$this->default_skin = $this->config->get('skin');
// create user object
$this->set_user(new rcube_user($_SESSION['user_id']));
// set task and action properties
$this->set_task(rcube_utils::get_input_value('_task', rcube_utils::INPUT_GPC));
$this->action = asciiwords(rcube_utils::get_input_value('_action', rcube_utils::INPUT_GPC));
// reset some session parameters when changing task
if ($this->task != 'utils') {
// we reset list page when switching to another task
// but only to the main task interface - empty action (#1489076, #1490116)
// this will prevent from unintentional page reset on cross-task requests
if ($this->session && $_SESSION['task'] != $this->task && empty($this->action)) {
$this->session->remove('page');
// set current task to session
$_SESSION['task'] = $this->task;
}
}
// init output class (not in CLI mode)
if (!empty($_REQUEST['_remote'])) {
$GLOBALS['OUTPUT'] = $this->json_init();
}
else if ($_SERVER['REMOTE_ADDR']) {
$GLOBALS['OUTPUT'] = $this->load_gui(!empty($_REQUEST['_framed']));
}
// run init method on all the plugins
$this->plugins->init($this, $this->task);
}
/**
* Setter for application task
*
* @param string $task Task to set
*/
public function set_task($task)
{
if (php_sapi_name() == 'cli') {
$task = 'cli';
}
else if (!$this->user || !$this->user->ID) {
$task = 'login';
}
else {
$task = asciiwords($task, true) ?: 'mail';
}
// Re-initialize plugins if task is changing
if (!empty($this->task) && $this->task != $task) {
$this->plugins->init($this, $task);
}
$this->task = $task;
$this->comm_path = $this->url(array('task' => $this->task));
if (!empty($_REQUEST['_framed'])) {
$this->comm_path .= '&_framed=1';
}
if ($this->output) {
$this->output->set_env('task', $this->task);
$this->output->set_env('comm_path', $this->comm_path);
}
}
/**
* Setter for system user object
*
* @param rcube_user $user Current user instance
*/
public function set_user($user)
{
parent::set_user($user);
$lang = $this->language_prop($this->config->get('language', $_SESSION['language']));
$_SESSION['language'] = $this->user->language = $lang;
// set localization
setlocale(LC_ALL, $lang . '.utf8', $lang . '.UTF-8', 'en_US.utf8', 'en_US.UTF-8');
// Workaround for http://bugs.php.net/bug.php?id=18556
// Also strtoupper/strtolower and other methods are locale-aware
// for these locales it is problematic (#1490519)
if (in_array($lang, array('tr_TR', 'ku', 'az_AZ'))) {
setlocale(LC_CTYPE, 'en_US.utf8', 'en_US.UTF-8', 'C');
}
}
/**
* Return instance of the internal address book class
*
* @param string $id Address book identifier (-1 for default addressbook)
* @param boolean $writeable True if the address book needs to be writeable
*
* @return rcube_contacts Address book object
*/
public function get_address_book($id, $writeable = false)
{
$contacts = null;
$ldap_config = (array)$this->config->get('ldap_public');
$default = false;
// 'sql' is the alias for '0' used by autocomplete
if ($id == 'sql') {
$id = '0';
}
else if ($id == -1) {
$id = $this->config->get('default_addressbook');
$default = true;
}
// use existing instance
if (isset($this->address_books[$id]) && ($this->address_books[$id] instanceof rcube_addressbook)) {
$contacts = $this->address_books[$id];
}
else if ($id && $ldap_config[$id]) {
$domain = $this->config->mail_domain($_SESSION['storage_host']);
$contacts = new rcube_ldap($ldap_config[$id], $this->config->get('ldap_debug'), $domain);
}
else if ($id === '0') {
$contacts = new rcube_contacts($this->db, $this->get_user_id());
}
else {
$plugin = $this->plugins->exec_hook('addressbook_get', array('id' => $id, 'writeable' => $writeable));
// plugin returned instance of a rcube_addressbook
if ($plugin['instance'] instanceof rcube_addressbook) {
$contacts = $plugin['instance'];
}
}
// when user requested default writeable addressbook
// we need to check if default is writeable, if not we
// will return first writeable book (if any exist)
if ($contacts && $default && $contacts->readonly && $writeable) {
$contacts = null;
}
// Get first addressbook from the list if configured default doesn't exist
// This can happen when user deleted the addressbook (e.g. Kolab folder)
if (!$contacts && (!$id || $default)) {
$source = reset($this->get_address_sources($writeable, !$default));
if (!empty($source)) {
$contacts = $this->get_address_book($source['id']);
if ($contacts) {
$id = $source['id'];
}
}
}
if (!$contacts) {
// there's no default, just return
if ($default) {
return null;
}
self::raise_error(array(
'code' => 700,
'file' => __FILE__,
'line' => __LINE__,
'message' => "Addressbook source ($id) not found!"
),
true, true);
}
// add to the 'books' array for shutdown function
$this->address_books[$id] = $contacts;
if ($writeable && $contacts->readonly) {
return null;
}
// set configured sort order
if ($sort_col = $this->config->get('addressbook_sort_col')) {
$contacts->set_sort_order($sort_col);
}
return $contacts;
}
/**
* Return identifier of the address book object
*
* @param rcube_addressbook $object Addressbook source object
*
* @return string Source identifier
*/
public function get_address_book_id($object)
{
foreach ($this->address_books as $index => $book) {
if ($book === $object) {
return $index;
}
}
}
/**
* Return address books list
*
* @param boolean $writeable True if the address book needs to be writeable
* @param boolean $skip_hidden True if the address book needs to be not hidden
*
* @return array Address books array
*/
public function get_address_sources($writeable = false, $skip_hidden = false)
{
$abook_type = strtolower((string) $this->config->get('address_book_type', 'sql'));
$ldap_config = (array) $this->config->get('ldap_public');
$autocomplete = (array) $this->config->get('autocomplete_addressbooks');
$list = array();
// SQL-based (built-in) address book
if ($abook_type === 'sql') {
if (!isset($this->address_books['0'])) {
$this->address_books['0'] = new rcube_contacts($this->db, $this->get_user_id());
}
$list['0'] = array(
'id' => '0',
'name' => $this->gettext('personaladrbook'),
'groups' => $this->address_books['0']->groups,
'readonly' => $this->address_books['0']->readonly,
'undelete' => $this->address_books['0']->undelete && $this->config->get('undo_timeout'),
'autocomplete' => in_array_nocase('sql', $autocomplete),
);
}
// LDAP address book(s)
if (!empty($ldap_config)) {
foreach ($ldap_config as $id => $prop) {
// handle misconfiguration
if (empty($prop) || !is_array($prop)) {
continue;
}
$list[$id] = array(
'id' => $id,
'name' => html::quote($prop['name']),
'groups' => !empty($prop['groups']) || !empty($prop['group_filters']),
'readonly' => !$prop['writable'],
'hidden' => $prop['hidden'],
'autocomplete' => in_array($id, $autocomplete)
);
}
}
// Plugins can also add address books, or re-order the list
$plugin = $this->plugins->exec_hook('addressbooks_list', array('sources' => $list));
$list = $plugin['sources'];
foreach ($list as $idx => $item) {
// register source for shutdown function
if (!is_object($this->address_books[$item['id']])) {
$this->address_books[$item['id']] = $item;
}
// remove from list if not writeable as requested
if ($writeable && $item['readonly']) {
unset($list[$idx]);
}
// remove from list if hidden as requested
else if ($skip_hidden && $item['hidden']) {
unset($list[$idx]);
}
}
return $list;
}
/**
* Getter for compose responses.
* These are stored in local config and user preferences.
*
* @param boolean $sorted True to sort the list alphabetically
* @param boolean $user_only True if only this user's responses shall be listed
*
* @return array List of the current user's stored responses
*/
public function get_compose_responses($sorted = false, $user_only = false)
{
$responses = array();
if (!$user_only) {
foreach ($this->config->get('compose_responses_static', array()) as $response) {
if (empty($response['key'])) {
$response['key'] = substr(md5($response['name']), 0, 16);
}
$response['static'] = true;
$response['class'] = 'readonly';
$k = $sorted ? '0000-' . mb_strtolower($response['name']) : $response['key'];
$responses[$k] = $response;
}
}
foreach ($this->config->get('compose_responses', array()) as $response) {
if (empty($response['key'])) {
$response['key'] = substr(md5($response['name']), 0, 16);
}
$k = $sorted ? mb_strtolower($response['name']) : $response['key'];
$responses[$k] = $response;
}
// sort list by name
if ($sorted) {
ksort($responses, SORT_LOCALE_STRING);
}
$responses = array_values($responses);
$hook = $this->plugins->exec_hook('get_compose_responses', array(
'list' => $responses,
'sorted' => $sorted,
'user_only' => $user_only,
));
return $hook['list'];
}
/**
* Init output object for GUI and add common scripts.
* This will instantiate a rcmail_output_html object and set
* environment vars according to the current session and configuration
*
* @param boolean $framed True if this request is loaded in a (i)frame
*
* @return rcube_output Reference to HTML output object
*/
public function load_gui($framed = false)
{
// init output page
if (!($this->output instanceof rcmail_output_html)) {
$this->output = new rcmail_output_html($this->task, $framed);
}
// set refresh interval
$this->output->set_env('refresh_interval', $this->config->get('refresh_interval', 0));
$this->output->set_env('session_lifetime', $this->config->get('session_lifetime', 0) * 60);
if ($framed) {
$this->comm_path .= '&_framed=1';
$this->output->set_env('framed', true);
}
$this->output->set_env('task', $this->task);
$this->output->set_env('action', $this->action);
$this->output->set_env('comm_path', $this->comm_path);
$this->output->set_charset(RCUBE_CHARSET);
if ($this->user && $this->user->ID) {
$this->output->set_env('user_id', $this->user->get_hash());
}
// set compose mode for all tasks (message compose step can be triggered from everywhere)
$this->output->set_env('compose_extwin', $this->config->get('compose_extwin',false));
// add some basic labels to client
$this->output->add_label('loading', 'servererror', 'connerror', 'requesttimedout',
'refreshing', 'windowopenerror', 'uploadingmany', 'uploading', 'close', 'save', 'cancel',
'alerttitle', 'confirmationtitle', 'delete', 'continue', 'ok');
return $this->output;
}
/**
* Create an output object for JSON responses
*
* @return rcube_output Reference to JSON output object
*/
public function json_init()
{
if (!($this->output instanceof rcmail_output_json)) {
$this->output = new rcmail_output_json($this->task);
}
return $this->output;
}
/**
* Create session object and start the session.
*/
public function session_init()
{
parent::session_init();
// set initial session vars
if (!$_SESSION['user_id']) {
$_SESSION['temp'] = true;
}
}
/**
* Perform login to the mail server and to the webmail service.
* This will also create a new user entry if auto_create_user is configured.
*
* @param string $username Mail storage (IMAP) user name
* @param string $password Mail storage (IMAP) password
* @param string $host Mail storage (IMAP) host
* @param bool $cookiecheck Enables cookie check
*
* @return boolean True on success, False on failure
*/
function login($username, $password, $host = null, $cookiecheck = false)
{
$this->login_error = null;
if (empty($username)) {
return false;
}
if ($cookiecheck && empty($_COOKIE)) {
$this->login_error = self::ERROR_COOKIES_DISABLED;
return false;
}
$default_host = $this->config->get('default_host');
$default_port = $this->config->get('default_port');
$username_domain = $this->config->get('username_domain');
$login_lc = $this->config->get('login_lc', 2);
// check username input validity
if (!$this->login_input_checks($username, $password)) {
$this->login_error = self::ERROR_INVALID_REQUEST;
return false;
}
// host is validated in rcmail::autoselect_host(), so here
// we'll only handle unset host (if possible)
if (!$host && !empty($default_host)) {
if (is_array($default_host)) {
$key = key($default_host);
$host = is_numeric($key) ? $default_host[$key] : $key;
}
else {
$host = $default_host;
}
$host = rcube_utils::parse_host($host);
}
if (!$host) {
$this->login_error = self::ERROR_INVALID_HOST;
return false;
}
// parse $host URL
$a_host = parse_url($host);
$ssl = false;
if (!empty($a_host['host'])) {
$host = $a_host['host'];
$ssl = (isset($a_host['scheme']) && in_array($a_host['scheme'], array('ssl','imaps','tls'))) ? $a_host['scheme'] : null;
if (!empty($a_host['port'])) {
$port = $a_host['port'];
}
else if ($ssl && $ssl != 'tls' && (!$default_port || $default_port == 143)) {
$port = 993;
}
}
if (empty($port)) {
$port = $default_port;
}
// Check if we need to add/force domain to username
if (!empty($username_domain)) {
$domain = is_array($username_domain) ? $username_domain[$host] : $username_domain;
if ($domain = rcube_utils::parse_host((string)$domain, $host)) {
$pos = strpos($username, '@');
// force configured domains
if ($pos !== false && $this->config->get('username_domain_forced')) {
$username = substr($username, 0, $pos) . '@' . $domain;
}
// just add domain if not specified
else if ($pos === false) {
$username .= '@' . $domain;
}
}
}
// Convert username to lowercase. If storage backend
// is case-insensitive we need to store always the same username (#1487113)
if ($login_lc) {
if ($login_lc == 2 || $login_lc === true) {
$username = mb_strtolower($username);
}
else if (strpos($username, '@')) {
// lowercase domain name
list($local, $domain) = explode('@', $username);
$username = $local . '@' . mb_strtolower($domain);
}
}
// try to resolve email address from virtuser table
if (strpos($username, '@') && ($virtuser = rcube_user::email2user($username))) {
$username = $virtuser;
}
// Here we need IDNA ASCII
// Only rcube_contacts class is using domain names in Unicode
$host = rcube_utils::idn_to_ascii($host);
if (strpos($username, '@')) {
$username = rcube_utils::idn_to_ascii($username);
}
// user already registered -> overwrite username
if ($user = rcube_user::query($username, $host)) {
$username = $user->data['username'];
// Brute-force prevention
if ($user->is_locked()) {
$this->login_error = self::ERROR_RATE_LIMIT;
return false;
}
}
$storage = $this->get_storage();
// try to log in
if (!$storage->connect($host, $username, $password, $port, $ssl)) {
if ($user) {
$user->failed_login();
}
// Wait a second to slow down brute-force attacks (#1490549)
sleep(1);
return false;
}
// user already registered -> update user's record
if (is_object($user)) {
// update last login timestamp
$user->touch();
}
// create new system user
else if ($this->config->get('auto_create_user')) {
if ($created = rcube_user::create($username, $host)) {
$user = $created;
}
else {
self::raise_error(array(
'code' => 620,
'file' => __FILE__,
'line' => __LINE__,
'message' => "Failed to create a user record. Maybe aborted by a plugin?"
),
true, false);
}
}
else {
self::raise_error(array(
'code' => 621,
'file' => __FILE__,
'line' => __LINE__,
'message' => "Access denied for new user $username. 'auto_create_user' is disabled"
),
true, false);
}
// login succeeded
if (is_object($user) && $user->ID) {
// Configure environment
$this->set_user($user);
$this->set_storage_prop();
// set session vars
$_SESSION['user_id'] = $user->ID;
$_SESSION['username'] = $user->data['username'];
$_SESSION['storage_host'] = $host;
$_SESSION['storage_port'] = $port;
$_SESSION['storage_ssl'] = $ssl;
$_SESSION['password'] = $this->encrypt($password);
$_SESSION['login_time'] = time();
$timezone = rcube_utils::get_input_value('_timezone', rcube_utils::INPUT_GPC);
if ($timezone && is_string($timezone) && $timezone != '_default_') {
$_SESSION['timezone'] = $timezone;
}
// fix some old settings according to namespace prefix
$this->fix_namespace_settings($user);
// set/create special folders
$this->set_special_folders();
// clear all mailboxes related cache(s)
$storage->clear_cache('mailboxes', true);
return true;
}
return false;
}
/**
* Returns error code of last login operation
*
* @return int Error code
*/
public function login_error()
{
if ($this->login_error) {
return $this->login_error;
}
if ($this->storage && $this->storage->get_error_code() < -1) {
return self::ERROR_STORAGE;
}
}
/**
* Validate username input
*
* @param string $username User name
* @param string $password User password
*
* @return bool True if valid, False otherwise
*/
private function login_input_checks($username, $password)
{
$username_filter = $this->config->get('login_username_filter');
$username_maxlen = $this->config->get('login_username_maxlen', 1024);
$password_maxlen = $this->config->get('login_password_maxlen', 1024);
if ($username_maxlen && strlen($username) > $username_maxlen) {
return false;
}
if ($password_maxlen && strlen($password) > $password_maxlen) {
return false;
}
if ($username_filter) {
$is_email = strtolower($username_filter) == 'email';
if ($is_email && !rcube_utils::check_email($username, false)) {
return false;
}
if (!$is_email && !preg_match($username_filter, $username)) {
return false;
}
}
return true;
}
/**
* Detects session errors
*
* @return string Error label
*/
public function session_error()
{
// log session failures
$task = rcube_utils::get_input_value('_task', rcube_utils::INPUT_GPC);
if ($task && !in_array($task, array('login', 'logout')) && ($sess_id = $_COOKIE[ini_get('session.name')])) {
$log = "Aborted session $sess_id; no valid session data found";
$error = 'sessionerror';
// In rare cases web browser might end up with multiple cookies of the same name
// but different params, e.g. domain (webmail.domain.tld and .webmail.domain.tld).
// In such case browser will send both cookies in the request header
// problem is that PHP session handler can use only one and if that one session
// does not exist we'll end up here
$cookie = rcube_utils::request_header('Cookie');
$cookie_sessid = $this->config->get('session_name') ?: 'roundcube_sessid';
$cookie_sessauth = $this->config->get('session_auth_name') ?: 'roundcube_sessauth';
if (substr_count($cookie, $cookie_sessid.'=') > 1 || substr_count($cookie, $cookie_sessauth.'=') > 1) {
$log .= ". Cookies mismatch";
$error = 'cookiesmismatch';
}
$this->session->log($log);
return $error;
}
}
/**
* Auto-select IMAP host based on the posted login information
*
* @return string Selected IMAP host
*/
public function autoselect_host()
{
$default_host = $this->config->get('default_host');
$host = null;
if (is_array($default_host)) {
$post_host = rcube_utils::get_input_value('_host', rcube_utils::INPUT_POST);
$post_user = rcube_utils::get_input_value('_user', rcube_utils::INPUT_POST);
list(, $domain) = explode('@', $post_user);
// direct match in default_host array
if ($default_host[$post_host] || in_array($post_host, array_values($default_host))) {
$host = $post_host;
}
// try to select host by mail domain
else if (!empty($domain)) {
foreach ($default_host as $storage_host => $mail_domains) {
if (is_array($mail_domains) && in_array_nocase($domain, $mail_domains)) {
$host = $storage_host;
break;
}
else if (stripos($storage_host, $domain) !== false || stripos(strval($mail_domains), $domain) !== false) {
$host = is_numeric($storage_host) ? $mail_domains : $storage_host;
break;
}
}
}
// take the first entry if $host is still not set
if (empty($host)) {
$key = key($default_host);
$host = is_numeric($key) ? $default_host[$key] : $key;
}
}
else if (empty($default_host)) {
$host = rcube_utils::get_input_value('_host', rcube_utils::INPUT_POST);
}
else {
$host = rcube_utils::parse_host($default_host);
}
return $host;
}
/**
* Destroy session data and remove cookie
*/
public function kill_session()
{
$this->plugins->exec_hook('session_destroy');
$this->session->kill();
$_SESSION = array('language' => $this->user->language, 'temp' => true);
$this->user->reset();
if ($this->config->get('skin') != $this->default_skin && method_exists($this->output, 'set_skin')) {
$this->output->set_skin($this->default_skin);
}
}
/**
* Do server side actions on logout
*/
public function logout_actions()
{
$storage = $this->get_storage();
$logout_expunge = $this->config->get('logout_expunge');
$logout_purge = $this->config->get('logout_purge');
$trash_mbox = $this->config->get('trash_mbox');
if ($logout_purge && !empty($trash_mbox)) {
$storage->clear_folder($trash_mbox);
}
if ($logout_expunge) {
$storage->expunge_folder('INBOX');
}
// Try to save unsaved user preferences
if (!empty($_SESSION['preferences'])) {
$this->user->save_prefs(unserialize($_SESSION['preferences']));
}
}
/**
* Build a valid URL to this instance of Roundcube
*
* @param mixed $p Either a string with the action or
* url parameters as key-value pairs
* @param boolean $absolute Build a URL absolute to document root
* @param boolean $full Create fully qualified URL including http(s):// and hostname
* @param bool $secure Return absolute URL in secure location
*
* @return string Valid application URL
*/
public function url($p, $absolute = false, $full = false, $secure = false)
{
if (!is_array($p)) {
if (strpos($p, 'http') === 0) {
return $p;
}
$p = array('_action' => @func_get_arg(0));
}
$pre = array();
$task = $p['_task'] ?: ($p['task'] ?: $this->task);
$pre['_task'] = $task;
unset($p['task'], $p['_task']);
$url = $this->filename;
$delm = '?';
foreach (array_merge($pre, $p) as $key => $val) {
if ($val !== '' && $val !== null) {
$par = $key[0] == '_' ? $key : '_'.$key;
$url .= $delm.urlencode($par).'='.urlencode($val);
$delm = '&';
}
}
$base_path = strval($_SERVER['REDIRECT_SCRIPT_URL'] ?: $_SERVER['SCRIPT_NAME']);
$base_path = preg_replace('![^/]+$!', '', $base_path);
if ($secure && ($token = $this->get_secure_url_token(true))) {
// add token to the url
$url = $token . '/' . $url;
// remove old token from the path
$base_path = rtrim($base_path, '/');
$base_path = preg_replace('/\/[a-zA-Z0-9]{' . strlen($token) . '}$/', '', $base_path);
// this need to be full url to make redirects work
$absolute = true;
}
else if ($secure && ($token = $this->get_request_token()))
$url .= $delm . '_token=' . urlencode($token);
if ($absolute || $full) {
// add base path to this Roundcube installation
if ($base_path == '') $base_path = '/';
$prefix = $base_path;
// prepend protocol://hostname:port
if ($full) {
$prefix = rcube_utils::resolve_url($prefix);
}
$prefix = rtrim($prefix, '/') . '/';
}
else {
$prefix = './';
}
return $prefix . $url;
}
/**
* Function to be executed in script shutdown
*/
public function shutdown()
{
parent::shutdown();
foreach ($this->address_books as $book) {
if (is_object($book) && is_a($book, 'rcube_addressbook')) {
$book->close();
}
}
// write performance stats to logs/console
if ($this->config->get('devel_mode') || $this->config->get('performance_stats')) {
// we have to disable per_user_logging to make sure stats end up in the main console log
$this->config->set('per_user_logging', false);
// make sure logged numbers use unified format
setlocale(LC_NUMERIC, 'en_US.utf8', 'en_US.UTF-8', 'en_US', 'C');
if (function_exists('memory_get_usage')) {
$mem = round(memory_get_usage() / 1024 /1024, 1);
if (function_exists('memory_get_peak_usage')) {
$mem .= '/'. round(memory_get_peak_usage() / 1024 / 1024, 1);
}
}
$log = $this->task . ($this->action ? '/'.$this->action : '') . (isset($mem) ? " [$mem]" : '');
if (defined('RCMAIL_START')) {
self::print_timer(RCMAIL_START, $log);
}
else {
self::console($log);
}
}
}
/**
* CSRF attack prevention code. Raises error when check fails.
*
* @param int $mode Request mode
*/
public function request_security_check($mode = rcube_utils::INPUT_POST)
{
// check request token
if (!$this->check_request($mode)) {
$error = array('code' => 403, 'message' => "Request security check failed");
self::raise_error($error, false, true);
}
}
/**
* Registers action aliases for current task
*
* @param array $map Alias-to-filename hash array
*/
public function register_action_map($map)
{
if (is_array($map)) {
foreach ($map as $idx => $val) {
$this->action_map[$idx] = $val;
}
}
}
/**
* Returns current action filename
*
* @param array $map Alias-to-filename hash array
*/
public function get_action_file()
{
if (!empty($this->action_map[$this->action])) {
return $this->action_map[$this->action];
}
return strtr($this->action, '-', '_') . '.inc';
}
/**
* Fixes some user preferences according to namespace handling change.
* Old Roundcube versions were using folder names with removed namespace prefix.
* Now we need to add the prefix on servers where personal namespace has prefix.
*
* @param rcube_user $user User object
*/
private function fix_namespace_settings($user)
{
$prefix = $this->storage->get_namespace('prefix');
$prefix_len = strlen($prefix);
if (!$prefix_len) {
return;
}
if ($this->config->get('namespace_fixed')) {
return;
}
$prefs = array();
// Build namespace prefix regexp
$ns = $this->storage->get_namespace();
$regexp = array();
foreach ($ns as $entry) {
if (!empty($entry)) {
foreach ($entry as $item) {
if (strlen($item[0])) {
$regexp[] = preg_quote($item[0], '/');
}
}
}
}
$regexp = '/^('. implode('|', $regexp).')/';
// Fix preferences
$opts = array('drafts_mbox', 'junk_mbox', 'sent_mbox', 'trash_mbox', 'archive_mbox');
foreach ($opts as $opt) {
if ($value = $this->config->get($opt)) {
if ($value != 'INBOX' && !preg_match($regexp, $value)) {
$prefs[$opt] = $prefix.$value;
}
}
}
if (($search_mods = $this->config->get('search_mods')) && !empty($search_mods)) {
$folders = array();
foreach ($search_mods as $idx => $value) {
if ($idx != 'INBOX' && $idx != '*' && !preg_match($regexp, $idx)) {
$idx = $prefix.$idx;
}
$folders[$idx] = $value;
}
$prefs['search_mods'] = $folders;
}
if (($threading = $this->config->get('message_threading')) && !empty($threading)) {
$folders = array();
foreach ($threading as $idx => $value) {
if ($idx != 'INBOX' && !preg_match($regexp, $idx)) {
$idx = $prefix.$idx;
}
$folders[$prefix.$idx] = $value;
}
$prefs['message_threading'] = $folders;
}
if ($collapsed = $this->config->get('collapsed_folders')) {
$folders = explode('&&', $collapsed);
$count = count($folders);
$folders_str = '';
if ($count) {
$folders[0] = substr($folders[0], 1);
$folders[$count-1] = substr($folders[$count-1], 0, -1);
}
foreach ($folders as $value) {
if ($value != 'INBOX' && !preg_match($regexp, $value)) {
$value = $prefix.$value;
}
$folders_str .= '&'.$value.'&';
}
$prefs['collapsed_folders'] = $folders_str;
}
$prefs['namespace_fixed'] = true;
// save updated preferences and reset imap settings (default folders)
$user->save_prefs($prefs);
$this->set_storage_prop();
}
/**
* Overwrite action variable
*
* @param string $action New action value
*/
public function overwrite_action($action)
{
$this->action = $action;
$this->output->set_env('action', $action);
}
/**
* Set environment variables for specified config options
*
* @param array $options List of configuration option names
*/
public function set_env_config($options)
{
foreach ((array) $options as $option) {
if ($this->config->get($option)) {
$this->output->set_env($option, true);
}
}
}
/**
* Returns RFC2822 formatted current date in user's timezone
*
* @return string Date
*/
public function user_date()
{
// get user's timezone
try {
$tz = new DateTimeZone($this->config->get('timezone'));
$date = new DateTime('now', $tz);
}
catch (Exception $e) {
$date = new DateTime();
}
return $date->format('r');
}
/**
* Write login data (name, ID, IP address) to the 'userlogins' log file.
*/
public function log_login($user = null, $failed_login = false, $error_code = 0)
{
if (!$this->config->get('log_logins')) {
return;
}
// don't log full session id for security reasons
$session_id = session_id();
$session_id = $session_id ? substr($session_id, 0, 16) : 'no-session';
// failed login
if ($failed_login) {
// don't fill the log with complete input, which could
// have been prepared by a hacker
if (strlen($user) > 256) {
$user = substr($user, 0, 256) . '...';
}
$message = sprintf('Failed login for %s from %s in session %s (error: %d)',
$user, rcube_utils::remote_ip(), $session_id, $error_code);
}
// successful login
else {
$user_name = $this->get_user_name();
$user_id = $this->get_user_id();
if (!$user_id) {
return;
}
$message = sprintf('Successful login for %s (ID: %d) from %s in session %s',
$user_name, $user_id, rcube_utils::remote_ip(), $session_id);
}
// log login
self::write_log('userlogins', $message);
}
/**
* Check if specified asset file exists
*
* @param string $path Asset path
* @param bool $minified Fallback to minified version of the file
*
* @return string Asset path if found (modified if minified file found)
*/
public function find_asset($path, $minified = true)
{
if (empty($path)) {
return;
}
$assets_dir = $this->config->get('assets_dir');
$root_path = unslashify($assets_dir ?: INSTALL_PATH) . '/';
$full_path = $root_path . trim($path, '/');
if (file_exists($full_path)) {
return $path;
}
if ($minified && preg_match('/(?<!\.min)\.(js|css)$/', $path)) {
$path = preg_replace('/\.(js|css)$/', '.min.\\1', $path);
$full_path = $root_path . trim($path, '/');
if (file_exists($full_path)) {
return $path;
}
}
}
/**
* Create a HTML table based on the given data
*
* @param array $attrib Named table attributes
* @param mixed $table_data Table row data. Either a two-dimensional array
* or a valid SQL result set
* @param array $show_cols List of cols to show
* @param string $id_col Name of the identifier col
*
* @return string HTML table code
*/
public function table_output($attrib, $table_data, $show_cols, $id_col)
{
$table = new html_table($attrib);
// add table header
if (!$attrib['noheader']) {
foreach ($show_cols as $col) {
$table->add_header($col, $this->Q($this->gettext($col)));
}
}
if (!is_array($table_data)) {
$db = $this->get_dbh();
while ($table_data && ($sql_arr = $db->fetch_assoc($table_data))) {
$table->add_row(array('id' => 'rcmrow' . rcube_utils::html_identifier($sql_arr[$id_col])));
// format each col
foreach ($show_cols as $col) {
$table->add($col, $this->Q($sql_arr[$col]));
}
}
}
else {
foreach ($table_data as $row_data) {
$class = !empty($row_data['class']) ? $row_data['class'] : null;
if (!empty($attrib['rowclass']))
$class = trim($class . ' ' . $attrib['rowclass']);
$rowid = 'rcmrow' . rcube_utils::html_identifier($row_data[$id_col]);
$table->add_row(array('id' => $rowid, 'class' => $class));
// format each col
foreach ($show_cols as $col) {
$val = is_array($row_data[$col]) ? $row_data[$col][0] : $row_data[$col];
$table->add($col, empty($attrib['ishtml']) ? $this->Q($val) : $val);
}
}
}
return $table->show($attrib);
}
/**
* Convert the given date to a human readable form
* This uses the date formatting properties from config
*
* @param mixed $date Date representation (string, timestamp or DateTime object)
* @param string $format Date format to use
* @param bool $convert Enables date conversion according to user timezone
*
* @return string Formatted date string
*/
public function format_date($date, $format = null, $convert = true)
{
if (is_object($date) && is_a($date, 'DateTime')) {
$timestamp = $date->format('U');
}
else {
if (!empty($date)) {
$timestamp = rcube_utils::strtotime($date);
}
if (empty($timestamp)) {
return '';
}
try {
$date = new DateTime("@".$timestamp);
}
catch (Exception $e) {
return '';
}
}
if ($convert) {
try {
// convert to the right timezone
$stz = date_default_timezone_get();
$tz = new DateTimeZone($this->config->get('timezone'));
$date->setTimezone($tz);
date_default_timezone_set($tz->getName());
$timestamp = $date->format('U');
}
catch (Exception $e) {
}
}
// define date format depending on current time
if (!$format) {
$now = time();
$now_date = getdate($now);
$today_limit = mktime(0, 0, 0, $now_date['mon'], $now_date['mday'], $now_date['year']);
$week_limit = mktime(0, 0, 0, $now_date['mon'], $now_date['mday']-6, $now_date['year']);
$pretty_date = $this->config->get('prettydate');
if ($pretty_date && $timestamp > $today_limit && $timestamp <= $now) {
$format = $this->config->get('date_today', $this->config->get('time_format', 'H:i'));
$today = true;
}
else if ($pretty_date && $timestamp > $week_limit && $timestamp <= $now) {
$format = $this->config->get('date_short', 'D H:i');
}
else {
$format = $this->config->get('date_long', 'Y-m-d H:i');
}
}
// strftime() format
if (preg_match('/%[a-z]+/i', $format)) {
$format = strftime($format, $timestamp);
if (isset($stz)) {
date_default_timezone_set($stz);
}
return !empty($today) ? ($this->gettext('today') . ' ' . $format) : $format;
}
// parse format string manually in order to provide localized weekday and month names
// an alternative would be to convert the date() format string to fit with strftime()
$out = '';
for ($i=0; $i<strlen($format); $i++) {
if ($format[$i] == "\\") { // skip escape chars
continue;
}
// write char "as-is"
if ($format[$i] == ' ' || $format[$i-1] == "\\") {
$out .= $format[$i];
}
// weekday (short)
else if ($format[$i] == 'D') {
$out .= $this->gettext(strtolower(date('D', $timestamp)));
}
// weekday long
else if ($format[$i] == 'l') {
$out .= $this->gettext(strtolower(date('l', $timestamp)));
}
// month name (short)
else if ($format[$i] == 'M') {
$out .= $this->gettext(strtolower(date('M', $timestamp)));
}
// month name (long)
else if ($format[$i] == 'F') {
$out .= $this->gettext('long'.strtolower(date('M', $timestamp)));
}
else if ($format[$i] == 'x') {
$out .= strftime('%x %X', $timestamp);
}
else {
$out .= date($format[$i], $timestamp);
}
}
if (!empty($today)) {
$label = $this->gettext('today');
// replcae $ character with "Today" label (#1486120)
if (strpos($out, '$') !== false) {
$out = preg_replace('/\$/', $label, $out, 1);
}
else {
$out = $label . ' ' . $out;
}
}
if (isset($stz)) {
date_default_timezone_set($stz);
}
return $out;
}
/**
* Return folders list in HTML
*
* @param array $attrib Named parameters
*
* @return string HTML code for the gui object
*/
public function folder_list($attrib)
{
static $a_mailboxes;
$attrib += array('maxlength' => 100, 'realnames' => false, 'unreadwrap' => ' (%s)');
$type = $attrib['type'] ? $attrib['type'] : 'ul';
unset($attrib['type']);
if ($type == 'ul' && !$attrib['id']) {
$attrib['id'] = 'rcmboxlist';
}
if (empty($attrib['folder_name'])) {
$attrib['folder_name'] = '*';
}
// get current folder
$storage = $this->get_storage();
$mbox_name = $storage->get_folder();
$delimiter = $storage->get_hierarchy_delimiter();
// build the folders tree
if (empty($a_mailboxes)) {
// get mailbox list
$a_folders = $storage->list_folders_subscribed(
'', $attrib['folder_name'], $attrib['folder_filter']);
$a_mailboxes = array();
foreach ($a_folders as $folder) {
$this->build_folder_tree($a_mailboxes, $folder, $delimiter);
}
}
// allow plugins to alter the folder tree or to localize folder names
$hook = $this->plugins->exec_hook('render_mailboxlist', array(
'list' => $a_mailboxes,
'delimiter' => $delimiter,
'type' => $type,
'attribs' => $attrib,
));
$a_mailboxes = $hook['list'];
$attrib = $hook['attribs'];
if ($type == 'select') {
$attrib['is_escaped'] = true;
$select = new html_select($attrib);
// add no-selection option
if ($attrib['noselection']) {
$select->add(html::quote($this->gettext($attrib['noselection'])), '');
}
$this->render_folder_tree_select($a_mailboxes, $mbox_name, $attrib['maxlength'], $select, $attrib['realnames']);
$out = $select->show($attrib['default']);
}
else {
$out = '';
$js_mailboxlist = array();
$tree = $this->render_folder_tree_html($a_mailboxes, $mbox_name, $js_mailboxlist, $attrib);
if ($type != 'js') {
$out = html::tag('ul', $attrib, $tree, html::$common_attrib);
$this->output->include_script('treelist.js');
$this->output->add_gui_object('mailboxlist', $attrib['id']);
$this->output->set_env('unreadwrap', $attrib['unreadwrap']);
$this->output->set_env('collapsed_folders', (string) $this->config->get('collapsed_folders'));
}
$this->output->set_env('mailboxes', $js_mailboxlist);
// we can't use object keys in javascript because they are unordered
// we need sorted folders list for folder-selector widget
$this->output->set_env('mailboxes_list', array_keys($js_mailboxlist));
}
// add some labels to client
$this->output->add_label('purgefolderconfirm', 'deletemessagesconfirm');
return $out;
}
/**
* Return folders list as html_select object
*
* @param array $p Named parameters
*
* @return html_select HTML drop-down object
*/
public function folder_selector($p = array())
{
$realnames = $this->config->get('show_real_foldernames');
$p += array('maxlength' => 100, 'realnames' => $realnames, 'is_escaped' => true);
$a_mailboxes = array();
$storage = $this->get_storage();
if (empty($p['folder_name'])) {
$p['folder_name'] = '*';
}
if ($p['unsubscribed']) {
$list = $storage->list_folders('', $p['folder_name'], $p['folder_filter'], $p['folder_rights']);
}
else {
$list = $storage->list_folders_subscribed('', $p['folder_name'], $p['folder_filter'], $p['folder_rights']);
}
$delimiter = $storage->get_hierarchy_delimiter();
if (!empty($p['exceptions'])) {
$list = array_diff($list, (array) $p['exceptions']);
}
if (!empty($p['additional'])) {
foreach ($p['additional'] as $add_folder) {
$add_items = explode($delimiter, $add_folder);
$folder = '';
while (count($add_items)) {
$folder .= array_shift($add_items);
// @TODO: sorting
if (!in_array($folder, $list)) {
$list[] = $folder;
}
$folder .= $delimiter;
}
}
}
foreach ($list as $folder) {
$this->build_folder_tree($a_mailboxes, $folder, $delimiter);
}
// allow plugins to alter the folder tree or to localize folder names
$hook = $this->plugins->exec_hook('render_folder_selector', array(
'list' => $a_mailboxes,
'delimiter' => $delimiter,
'attribs' => $p,
));
$a_mailboxes = $hook['list'];
$p = $hook['attribs'];
$select = new html_select($p);
if ($p['noselection']) {
$select->add(html::quote($p['noselection']), '');
}
$this->render_folder_tree_select($a_mailboxes, $mbox, $p['maxlength'], $select, $p['realnames'], 0, $p);
return $select;
}
/**
* Create a hierarchical array of the mailbox list
*/
public function build_folder_tree(&$arrFolders, $folder, $delm = '/', $path = '')
{
// Handle namespace prefix
$prefix = '';
if (!$path) {
$n_folder = $folder;
$folder = $this->storage->mod_folder($folder);
if ($n_folder != $folder) {
$prefix = substr($n_folder, 0, -strlen($folder));
}
}
$pos = strpos($folder, $delm);
if ($pos !== false) {
$subFolders = substr($folder, $pos+1);
$currentFolder = substr($folder, 0, $pos);
// sometimes folder has a delimiter as the last character
if (!strlen($subFolders)) {
$virtual = false;
}
else if (!isset($arrFolders[$currentFolder])) {
$virtual = true;
}
else {
$virtual = $arrFolders[$currentFolder]['virtual'];
}
}
else {
$subFolders = false;
$currentFolder = $folder;
$virtual = false;
}
$path .= $prefix . $currentFolder;
if (!isset($arrFolders[$currentFolder])) {
$arrFolders[$currentFolder] = array(
'id' => $path,
'name' => rcube_charset::convert($currentFolder, 'UTF7-IMAP'),
'virtual' => $virtual,
'folders' => array()
);
}
else {
$arrFolders[$currentFolder]['virtual'] = $virtual;
}
if (strlen($subFolders)) {
$this->build_folder_tree($arrFolders[$currentFolder]['folders'], $subFolders, $delm, $path.$delm);
}
}
/**
* Return html for a structured list &lt;ul&gt; for the mailbox tree
*/
public function render_folder_tree_html(&$arrFolders, &$mbox_name, &$jslist, $attrib, $nestLevel = 0)
{
$maxlength = intval($attrib['maxlength']);
$realnames = (bool)$attrib['realnames'];
$msgcounts = $this->storage->get_cache('messagecount');
$collapsed = $this->config->get('collapsed_folders');
$realnames = $this->config->get('show_real_foldernames');
$out = '';
foreach ($arrFolders as $folder) {
$title = null;
$folder_class = $this->folder_classname($folder['id']);
$is_collapsed = strpos($collapsed, '&'.rawurlencode($folder['id']).'&') !== false;
$unread = $msgcounts ? intval($msgcounts[$folder['id']]['UNSEEN']) : 0;
if ($folder_class && !$realnames && $this->text_exists($folder_class)) {
$foldername = $this->gettext($folder_class);
}
else {
$foldername = $folder['name'];
// shorten the folder name to a given length
if ($maxlength && $maxlength > 1) {
$fname = abbreviate_string($foldername, $maxlength);
if ($fname != $foldername) {
$title = $foldername;
}
$foldername = $fname;
}
}
// make folder name safe for ids and class names
$folder_id = rcube_utils::html_identifier($folder['id'], true);
$classes = array('mailbox');
// set special class for Sent, Drafts, Trash and Junk
if ($folder_class) {
$classes[] = $folder_class;
}
if ($folder['id'] == $mbox_name) {
$classes[] = 'selected';
}
if ($folder['virtual']) {
$classes[] = 'virtual';
}
else if ($unread) {
$classes[] = 'unread';
}
$js_name = $this->JQ($folder['id']);
$html_name = $this->Q($foldername) . ($unread ? html::span('unreadcount skip-content', sprintf($attrib['unreadwrap'], $unread)) : '');
$link_attrib = $folder['virtual'] ? array() : array(
'href' => $this->url(array('_mbox' => $folder['id'])),
'onclick' => sprintf("return %s.command('list','%s',this,event)", rcmail_output::JS_OBJECT_NAME, $js_name),
'rel' => $folder['id'],
'title' => $title,
);
$out .= html::tag('li', array(
'id' => "rcmli" . $folder_id,
'class' => implode(' ', $classes),
'noclose' => true
),
html::a($link_attrib, $html_name));
if (!empty($folder['folders'])) {
$out .= html::div('treetoggle ' . ($is_collapsed ? 'collapsed' : 'expanded'), '&nbsp;');
}
$jslist[$folder['id']] = array(
'id' => $folder['id'],
'name' => $foldername,
'virtual' => $folder['virtual'],
);
if (!empty($folder_class)) {
$jslist[$folder['id']]['class'] = $folder_class;
}
if (!empty($folder['folders'])) {
$out .= html::tag('ul', array('style' => ($is_collapsed ? "display:none;" : null)),
$this->render_folder_tree_html($folder['folders'], $mbox_name, $jslist, $attrib, $nestLevel+1));
}
$out .= "</li>\n";
}
return $out;
}
/**
* Return html for a flat list <select> for the mailbox tree
*/
public function render_folder_tree_select(&$arrFolders, &$mbox_name, $maxlength, &$select, $realnames = false, $nestLevel = 0, $opts = array())
{
$out = '';
foreach ($arrFolders as $folder) {
// skip exceptions (and its subfolders)
if (!empty($opts['exceptions']) && in_array($folder['id'], $opts['exceptions'])) {
continue;
}
// skip folders in which it isn't possible to create subfolders
if (!empty($opts['skip_noinferiors'])) {
$attrs = $this->storage->folder_attributes($folder['id']);
if ($attrs && in_array_nocase('\\Noinferiors', $attrs)) {
continue;
}
}
if (!$realnames && ($folder_class = $this->folder_classname($folder['id'])) && $this->text_exists($folder_class)) {
$foldername = $this->gettext($folder_class);
}
else {
$foldername = $folder['name'];
// shorten the folder name to a given length
if ($maxlength && $maxlength > 1) {
$foldername = abbreviate_string($foldername, $maxlength);
}
}
$select->add(str_repeat('&nbsp;', $nestLevel*4) . html::quote($foldername), $folder['id']);
if (!empty($folder['folders'])) {
$out .= $this->render_folder_tree_select($folder['folders'], $mbox_name, $maxlength,
$select, $realnames, $nestLevel+1, $opts);
}
}
return $out;
}
/**
* Returns class name for the given folder if it is a special folder
* (including shared/other users namespace roots).
*
* @param string $folder_id IMAP Folder name
*
* @return string|null CSS class name
*/
public function folder_classname($folder_id)
{
static $classes;
if ($classes === null) {
$classes = array('INBOX' => 'inbox');
// for these mailboxes we have css classes
foreach (array('sent', 'drafts', 'trash', 'junk') as $type) {
if (($mbox = $this->config->get($type . '_mbox')) && !isset($classes[$mbox])) {
$classes[$mbox] = $type;
}
}
$storage = $this->get_storage();
// add classes for shared/other user namespace roots
foreach (array('other', 'shared') as $ns_name) {
if ($ns = $storage->get_namespace($ns_name)) {
foreach ($ns as $root) {
$root = substr($root[0], 0, -1);
if (strlen($root) && !isset($classes[$root])) {
$classes[$root] = "ns-$ns_name";
}
}
}
}
}
return $classes[$folder_id];
}
/**
* Try to localize the given IMAP folder name.
* UTF-7 decode it in case no localized text was found
*
* @param string $name Folder name
* @param bool $with_path Enable path localization
* @param bool $path_remove Remove the path
*
* @return string Localized folder name in UTF-8 encoding
*/
public function localize_foldername($name, $with_path = false, $path_remove = false)
{
$realnames = $this->config->get('show_real_foldernames');
if (!$realnames && ($folder_class = $this->folder_classname($name)) && $this->text_exists($folder_class)) {
return $this->gettext($folder_class);
}
$storage = $this->get_storage();
$delimiter = $storage->get_hierarchy_delimiter();
// Remove the path
if ($path_remove) {
if (strpos($name, $delimiter)) {
$path = explode($delimiter, $name);
$name = array_pop($path);
}
}
// try to localize path of the folder
else if ($with_path && !$realnames) {
$path = explode($delimiter, $name);
$count = count($path);
if ($count > 1) {
for ($i = 1; $i < $count; $i++) {
$folder = implode($delimiter, array_slice($path, 0, -$i));
$folder_class = $this->folder_classname($folder);
if ($folder_class && $this->text_exists($folder_class)) {
$name = implode($delimiter, array_slice($path, $count - $i));
$name = rcube_charset::convert($name, 'UTF7-IMAP');
return $this->gettext($folder_class) . $delimiter . $name;
}
}
}
}
return rcube_charset::convert($name, 'UTF7-IMAP');
}
/**
* Localize folder path
*/
public function localize_folderpath($path)
{
$protect_folders = $this->config->get('protect_default_folders');
$delimiter = $this->storage->get_hierarchy_delimiter();
$path = explode($delimiter, $path);
$result = array();
foreach ($path as $idx => $dir) {
$directory = implode($delimiter, array_slice($path, 0, $idx+1));
if ($protect_folders && $this->storage->is_special_folder($directory)) {
unset($result);
$result[] = $this->localize_foldername($directory);
}
else {
$result[] = rcube_charset::convert($dir, 'UTF7-IMAP');
}
}
return implode($delimiter, $result);
}
/**
* Return HTML for quota indicator object
*
* @param array $attrib Named parameters
*
* @return string HTML code for the quota indicator object
*/
public static function quota_display($attrib)
{
$rcmail = rcmail::get_instance();
if (!$attrib['id']) {
$attrib['id'] = 'rcmquotadisplay';
}
$_SESSION['quota_display'] = !empty($attrib['display']) ? $attrib['display'] : 'text';
$rcmail->output->add_gui_object('quotadisplay', $attrib['id']);
$quota = $rcmail->quota_content($attrib);
$rcmail->output->add_script('rcmail.set_quota('.rcube_output::json_serialize($quota).');', 'docready');
return html::span($attrib, '&nbsp;');
}
/**
* Return (parsed) quota information
*
* @param array $attrib Named parameters
* @param array $folder Current folder
*
* @return array Quota information
*/
public function quota_content($attrib = null, $folder = null)
{
$quota = $this->storage->get_quota($folder);
$quota = $this->plugins->exec_hook('quota', $quota);
$quota_result = (array) $quota;
$quota_result['type'] = isset($_SESSION['quota_display']) ? $_SESSION['quota_display'] : '';
$quota_result['folder'] = $folder !== null && $folder !== '' ? $folder : 'INBOX';
if ($quota['total'] > 0) {
if (!isset($quota['percent'])) {
$quota_result['percent'] = min(100, round(($quota['used']/max(1,$quota['total']))*100));
}
$title = $this->gettext('quota') . ': ' . sprintf('%s / %s (%.0f%%)',
$this->show_bytes($quota['used'] * 1024),
$this->show_bytes($quota['total'] * 1024),
$quota_result['percent']
);
$quota_result['title'] = $title;
if ($attrib['width']) {
$quota_result['width'] = $attrib['width'];
}
if ($attrib['height']) {
$quota_result['height'] = $attrib['height'];
}
// build a table of quota types/roots info
if (($root_cnt = count($quota_result['all'])) > 1 || count($quota_result['all'][key($quota_result['all'])]) > 1) {
$table = new html_table(array('cols' => 3, 'class' => 'quota-info'));
$table->add_header(null, self::Q($this->gettext('quotatype')));
$table->add_header(null, self::Q($this->gettext('quotatotal')));
$table->add_header(null, self::Q($this->gettext('quotaused')));
foreach ($quota_result['all'] as $root => $data) {
if ($root_cnt > 1 && $root) {
$table->add(array('colspan' => 3, 'class' => 'root'), self::Q($root));
}
if ($storage = $data['storage']) {
$percent = min(100, round(($storage['used']/max(1,$storage['total']))*100));
$table->add('name', self::Q($this->gettext('quotastorage')));
$table->add(null, $this->show_bytes($storage['total'] * 1024));
$table->add(null, sprintf('%s (%.0f%%)', $this->show_bytes($storage['used'] * 1024), $percent));
}
if ($message = $data['message']) {
$percent = min(100, round(($message['used']/max(1,$message['total']))*100));
$table->add('name', self::Q($this->gettext('quotamessage')));
$table->add(null, intval($message['total']));
$table->add(null, sprintf('%d (%.0f%%)', $message['used'], $percent));
}
}
$quota_result['table'] = $table->show();
}
}
else {
$unlimited = $this->config->get('quota_zero_as_unlimited');
$quota_result['title'] = $this->gettext($unlimited ? 'unlimited' : 'unknown');
$quota_result['percent'] = 0;
}
// cleanup
unset($quota_result['abort']);
if (empty($quota_result['table'])) {
unset($quota_result['all']);
}
return $quota_result;
}
/**
* Outputs error message according to server error/response codes
*
* @param string $fallback Fallback message label
* @param array $fallback_args Fallback message label arguments
* @param string $suffix Message label suffix
* @param array $params Additional parameters (type, prefix)
*/
public function display_server_error($fallback = null, $fallback_args = null, $suffix = '', $params = array())
{
$err_code = $this->storage->get_error_code();
$res_code = $this->storage->get_response_code();
$args = array();
if ($res_code == rcube_storage::NOPERM) {
$error = 'errornoperm';
}
else if ($res_code == rcube_storage::READONLY) {
$error = 'errorreadonly';
}
else if ($res_code == rcube_storage::OVERQUOTA) {
$error = 'erroroverquota';
}
else if ($err_code && ($err_str = $this->storage->get_error_str())) {
// try to detect access rights problem and display appropriate message
if (stripos($err_str, 'Permission denied') !== false) {
$error = 'errornoperm';
}
// try to detect full mailbox problem and display appropriate message
// there can be e.g. "Quota exceeded" / "quotum would exceed" / "Over quota"
else if (stripos($err_str, 'quot') !== false && preg_match('/exceed|over/i', $err_str)) {
$error = 'erroroverquota';
}
else {
$error = 'servererrormsg';
$args = array('msg' => rcube::Q($err_str));
}
}
else if ($err_code < 0) {
$error = 'storageerror';
}
else if ($fallback) {
$error = $fallback;
$args = $fallback_args;
$params['prefix'] = false;
}
if (!empty($error)) {
if ($suffix && $this->text_exists($error . $suffix)) {
$error .= $suffix;
}
$msg = $this->gettext(array('name' => $error, 'vars' => $args));
if ($params['prefix'] && $fallback) {
$msg = $this->gettext(array('name' => $fallback, 'vars' => $fallback_args)) . ' ' . $msg;
}
$this->output->show_message($msg, $params['type'] ?: 'error');
}
}
/**
* Displays an error message on storage fatal errors
*/
public function storage_fatal_error()
{
$err_code = $this->storage->get_error_code();
switch ($err_code) {
// Not all are really fatal, but these should catch
// connection/authentication errors the best we can
case rcube_imap_generic::ERROR_NO:
case rcube_imap_generic::ERROR_BAD:
case rcube_imap_generic::ERROR_BYE:
$this->display_server_error();
}
}
/**
* Output HTML editor scripts
*
* @param string $mode Editor mode
*/
public function html_editor($mode = '')
{
$spellcheck = intval($this->config->get('enable_spellcheck'));
$spelldict = intval($this->config->get('spellcheck_dictionary'));
$disabled_plugins = array();
$disabled_buttons = array();
$extra_plugins = array();
$extra_buttons = array();
if (!$spellcheck) {
$disabled_plugins[] = 'spellchecker';
}
$hook = $this->plugins->exec_hook('html_editor', array(
'mode' => $mode,
'disabled_plugins' => $disabled_plugins,
'disabled_buttons' => $disabled_buttons,
'extra_plugins' => $extra_plugins,
'extra_buttons' => $extra_buttons,
));
if ($hook['abort']) {
return;
}
$lang_codes = array($_SESSION['language']);
$assets_dir = $this->config->get('assets_dir') ?: INSTALL_PATH;
$skin_path = $this->output->get_skin_path();
if ($pos = strpos($_SESSION['language'], '_')) {
$lang_codes[] = substr($_SESSION['language'], 0, $pos);
}
foreach ($lang_codes as $code) {
if (file_exists("$assets_dir/program/js/tinymce/langs/$code.js")) {
$lang = $code;
break;
}
}
if (empty($lang)) {
$lang = 'en';
}
$config = array(
'mode' => $mode,
'lang' => $lang,
'skin_path' => $skin_path,
'spellcheck' => $spellcheck, // deprecated
'spelldict' => $spelldict,
'content_css' => 'program/resources/tinymce/content.css',
'disabled_plugins' => $hook['disabled_plugins'],
'disabled_buttons' => $hook['disabled_buttons'],
'extra_plugins' => $hook['extra_plugins'],
'extra_buttons' => $hook['extra_buttons'],
);
if ($path = $this->config->get('editor_css_location')) {
if ($path = $this->find_asset($skin_path . $path)) {
$config['content_css'] = $path;
}
}
- $this->output->add_label('selectimage', 'addimage', 'selectmedia', 'addmedia', 'close');
+ $font_family = $this->output->get_env('default_font');
+ $font_size = $this->output->get_env('default_font_size');
+ $style = array();
+
+ if ($font_family) {
+ $style[] = "font-family: $font_family;";
+ }
+ if ($font_size) {
+ $style[] = "font-size: $font_size;";
+ }
+ if (!empty($style)) {
+ $config['content_style'] = "body {" . implode(' ', $style) . "}";
+ }
+
$this->output->set_env('editor_config', $config);
+ $this->output->add_label('selectimage', 'addimage', 'selectmedia', 'addmedia', 'close');
if ($path = $this->config->get('media_browser_css_location', 'program/resources/tinymce/browser.css')) {
if ($path != 'none' && ($path = $this->find_asset($path))) {
$this->output->include_css($path);
}
}
$this->output->include_script('tinymce/tinymce.min.js');
$this->output->include_script('editor.js');
}
/**
* File upload progress handler.
*
* @deprecated We're using HTML5 upload progress
*/
public function upload_progress()
{
// NOOP
$this->output->send();
}
/**
* Initializes file uploading interface.
*
* @param int $max_size Optional maximum file size in bytes
*
* @return string Human-readable file size limit
*/
public function upload_init($max_size = null)
{
// find max filesize value
$max_filesize = rcube_utils::max_upload_size();
if ($max_size && $max_size < $max_filesize) {
$max_filesize = $max_size;
}
$max_filesize_txt = $this->show_bytes($max_filesize);
$this->output->set_env('max_filesize', $max_filesize);
$this->output->set_env('filesizeerror', $this->gettext(array(
'name' => 'filesizeerror', 'vars' => array('size' => $max_filesize_txt))));
if ($max_filecount = ini_get('max_file_uploads')) {
$this->output->set_env('max_filecount', $max_filecount);
$this->output->set_env('filecounterror', $this->gettext(array(
'name' => 'filecounterror', 'vars' => array('count' => $max_filecount))));
}
$this->output->add_label('uploadprogress', 'GB', 'MB', 'KB', 'B');
return $max_filesize_txt;
}
/**
* Upload form object
*
* @param array $attrib Object attributes
* @param string $name Form object name
* @param string $action Form action name
* @param array $input_attr File input attributes
* @param int $max_size Maximum upload size
*
* @return string HTML output
*/
public function upload_form($attrib, $name, $action, $input_attr = array(), $max_size = null)
{
// Get filesize, enable upload progress bar
$max_filesize = $this->upload_init($max_size);
$hint = html::div('hint', $this->gettext(array('name' => 'maxuploadsize', 'vars' => array('size' => $max_filesize))));
if ($attrib['mode'] == 'hint') {
return $hint;
}
// set defaults
$attrib += array('id' => 'rcmUploadbox', 'buttons' => 'yes');
$event = rcmail_output::JS_OBJECT_NAME . ".command('$action', this.form)";
$form_id = $attrib['id'] . 'Frm';
// Default attributes of file input and form
$input_attr += array(
'id' => $attrib['id'] . 'Input',
'type' => 'file',
'name' => '_attachments[]',
'class' => 'form-control',
);
$form_attr = array(
'id' => $form_id,
'name' => $name,
'method' => 'post',
'enctype' => 'multipart/form-data'
);
if ($attrib['mode'] == 'smart') {
unset($attrib['buttons']);
$form_attr['class'] = 'smart-upload';
$input_attr = array_merge($input_attr, array(
// #5854: Chrome does not execute onchange when selecting the same file.
// To fix this we reset the input using null value.
'onchange' => "$event; this.value=null",
'class' => 'smart-upload',
'tabindex' => '-1',
));
}
$input = new html_inputfield($input_attr);
$content = $attrib['prefix'] . $input->show();
if ($attrib['mode'] != 'smart') {
$content = html::div(null, $content . $hint);
}
if (rcube_utils::get_boolean($attrib['buttons'])) {
$button = new html_inputfield(array('type' => 'button'));
$content .= html::div('buttons',
$button->show($this->gettext('close'), array('class' => 'button', 'onclick' => "$('#{$attrib['id']}').hide()")) . ' ' .
$button->show($this->gettext('upload'), array('class' => 'button mainaction', 'onclick' => $event))
);
}
$this->output->add_gui_object($name, $form_id);
return html::div($attrib, $this->output->form_tag($form_attr, $content));
}
/**
* Outputs uploaded file content (with image thumbnails support
*
* @param array $file Upload file data
*/
public function display_uploaded_file($file)
{
if (empty($file)) {
return;
}
$file = $this->plugins->exec_hook('attachment_display', $file);
if ($file['status']) {
if (empty($file['size'])) {
$file['size'] = $file['data'] ? strlen($file['data']) : @filesize($file['path']);
}
// generate image thumbnail for file browser in HTML editor
if (!empty($_GET['_thumbnail'])) {
$thumbnail_size = 80;
$mimetype = $file['mimetype'];
$file_ident = $file['id'] . ':' . $file['mimetype'] . ':' . $file['size'];
$thumb_name = 'thumb' . md5($file_ident . ':' . $this->user->ID . ':' . $thumbnail_size);
$cache_file = rcube_utils::temp_filename($thumb_name, false, false);
// render thumbnail image if not done yet
if (!is_file($cache_file)) {
if (!$file['path']) {
$orig_name = $filename = $cache_file . '.tmp';
file_put_contents($orig_name, $file['data']);
}
else {
$filename = $file['path'];
}
$image = new rcube_image($filename);
if ($imgtype = $image->resize($thumbnail_size, $cache_file, true)) {
$mimetype = 'image/' . $imgtype;
if (!empty($orig_name)) {
unlink($orig_name);
}
}
}
if (is_file($cache_file)) {
// cache for 1h
$this->output->future_expire_header(3600);
header('Content-Type: ' . $mimetype);
header('Content-Length: ' . filesize($cache_file));
readfile($cache_file);
exit;
}
}
header('Content-Type: ' . $file['mimetype']);
header('Content-Length: ' . $file['size']);
if ($file['data']) {
echo $file['data'];
}
else if ($file['path']) {
readfile($file['path']);
}
}
}
/**
* Initializes client-side autocompletion.
*/
public function autocomplete_init()
{
static $init;
if ($init) {
return;
}
$init = 1;
if (($threads = (int)$this->config->get('autocomplete_threads')) > 0) {
$book_types = (array) $this->config->get('autocomplete_addressbooks', 'sql');
if (count($book_types) > 1) {
$this->output->set_env('autocomplete_threads', $threads);
$this->output->set_env('autocomplete_sources', $book_types);
}
}
$this->output->set_env('autocomplete_max', (int)$this->config->get('autocomplete_max', 15));
$this->output->set_env('autocomplete_min_length', $this->config->get('autocomplete_min_length'));
$this->output->add_label('autocompletechars', 'autocompletemore');
}
/**
* Returns supported font-family specifications
*
* @param string $font Font name
*
* @param string|array Font-family specification array or string (if $font is used)
*/
public static function font_defs($font = null)
{
$fonts = array(
'Andale Mono' => '"Andale Mono",Times,monospace',
'Arial' => 'Arial,Helvetica,sans-serif',
'Arial Black' => '"Arial Black","Avant Garde",sans-serif',
'Book Antiqua' => '"Book Antiqua",Palatino,serif',
'Courier New' => '"Courier New",Courier,monospace',
'Georgia' => 'Georgia,Palatino,serif',
'Helvetica' => 'Helvetica,Arial,sans-serif',
'Impact' => 'Impact,Chicago,sans-serif',
'Tahoma' => 'Tahoma,Arial,Helvetica,sans-serif',
'Terminal' => 'Terminal,Monaco,monospace',
'Times New Roman' => '"Times New Roman",Times,serif',
'Trebuchet MS' => '"Trebuchet MS",Geneva,sans-serif',
'Verdana' => 'Verdana,Geneva,sans-serif',
);
if ($font) {
return $fonts[$font];
}
return $fonts;
}
/**
* Create a human readable string for a number of bytes
*
* @param int $bytes Number of bytes
* @param string &$unit Size unit
*
* @return string Byte string
*/
public function show_bytes($bytes, &$unit = null)
{
// Plugins may want to display different units
$plugin = $this->plugins->exec_hook('show_bytes', array('bytes' => $bytes));
$unit = $plugin['unit'];
if ($plugin['result'] !== null) {
return $plugin['result'];
}
if ($bytes >= 1073741824) {
$unit = 'GB';
$gb = $bytes/1073741824;
$str = sprintf($gb >= 10 ? "%d " : "%.1f ", $gb) . $this->gettext($unit);
}
else if ($bytes >= 1048576) {
$unit = 'MB';
$mb = $bytes/1048576;
$str = sprintf($mb >= 10 ? "%d " : "%.1f ", $mb) . $this->gettext($unit);
}
else if ($bytes >= 1024) {
$unit = 'KB';
$str = sprintf("%d ", round($bytes/1024)) . $this->gettext($unit);
}
else {
$unit = 'B';
$str = sprintf('%d ', $bytes) . $this->gettext($unit);
}
return $str;
}
/**
* Returns real size (calculated) of the message part
*
* @param rcube_message_part $part Message part
*
* @return string Part size (and unit)
*/
public function message_part_size($part)
{
if (isset($part->d_parameters['size'])) {
$size = $this->show_bytes((int)$part->d_parameters['size']);
}
else {
$size = $part->size;
if ($size === 0) {
$part->exact_size = true;
}
if ($part->encoding == 'base64') {
$size = $size / 1.33;
}
$size = $this->show_bytes($size);
}
if (!$part->exact_size) {
$size = '~' . $size;
}
return $size;
}
/**
* Returns message UID(s) and IMAP folder(s) from GET/POST data
*
* @param string $uids UID value to decode
* @param string $mbox Default mailbox value (if not encoded in UIDs)
* @param bool $is_multifolder Will be set to True if multi-folder request
* @param int $mode Request mode. Default: rcube_utils::INPUT_GPC.
*
* @return array List of message UIDs per folder
*/
public static function get_uids($uids = null, $mbox = null, &$is_multifolder = false, $mode = null)
{
// message UID (or comma-separated list of IDs) is provided in
// the form of <ID>-<MBOX>[,<ID>-<MBOX>]*
$_uid = $uids ?: rcube_utils::get_input_value('_uid', $mode ?: rcube_utils::INPUT_GPC);
$_mbox = $mbox ?: (string) rcube_utils::get_input_value('_mbox', $mode ?: rcube_utils::INPUT_GPC);
// already a hash array
if (is_array($_uid) && !isset($_uid[0])) {
return $_uid;
}
$result = array();
// special case: *
if ($_uid == '*' && is_object($_SESSION['search'][1]) && $_SESSION['search'][1]->multi) {
$is_multifolder = true;
// extract the full list of UIDs per folder from the search set
foreach ($_SESSION['search'][1]->sets as $subset) {
$mbox = $subset->get_parameters('MAILBOX');
$result[$mbox] = $subset->get();
}
}
else {
if (is_string($_uid)) {
$_uid = explode(',', $_uid);
}
// create a per-folder UIDs array
foreach ((array)$_uid as $uid) {
list($uid, $mbox) = explode('-', $uid, 2);
if (!strlen($mbox)) {
$mbox = $_mbox;
}
else {
$is_multifolder = true;
}
if ($uid == '*') {
$result[$mbox] = $uid;
}
else if (preg_match('/^[0-9:.]+$/', $uid)) {
$result[$mbox][] = $uid;
}
}
}
return $result;
}
/**
* Get resource file content (with assets_dir support)
*
* @param string $name File name
*
* @return string File content
*/
public function get_resource_content($name)
{
if (!strpos($name, '/')) {
$name = "program/resources/$name";
}
$assets_dir = $this->config->get('assets_dir');
if ($assets_dir) {
$path = slashify($assets_dir) . $name;
if (@file_exists($path)) {
$name = $path;
}
}
return file_get_contents($name, false);
}
/**
* Converts HTML content into plain text
*
* @param string $html HTML content
* @param array $options Conversion parameters (width, links, charset)
*
* @return string Plain text
*/
public function html2text($html, $options = array())
{
$default_options = array(
'links' => true,
'width' => 75,
'body' => $html,
'charset' => RCUBE_CHARSET,
);
$options = array_merge($default_options, (array) $options);
// Plugins may want to modify HTML in another/additional way
$options = $this->plugins->exec_hook('html2text', $options);
// Convert to text
if (!$options['abort']) {
$converter = new rcube_html2text($options['body'],
false, $options['links'], $options['width'], $options['charset']);
$options['body'] = rtrim($converter->get_text());
}
return $options['body'];
}
/**
* Connect to the mail storage server with stored session data
*
* @return bool True on success, False on error
*/
public function storage_connect()
{
$storage = $this->get_storage();
if ($_SESSION['storage_host'] && !$storage->is_connected()) {
$host = $_SESSION['storage_host'];
$user = $_SESSION['username'];
$port = $_SESSION['storage_port'];
$ssl = $_SESSION['storage_ssl'];
$pass = $this->decrypt($_SESSION['password']);
if (!$storage->connect($host, $user, $pass, $port, $ssl)) {
if (is_object($this->output)) {
$this->output->show_message('storageerror', 'error');
}
}
else {
$this->set_storage_prop();
}
}
return $storage->is_connected();
}
}
diff --git a/program/js/editor.js b/program/js/editor.js
index bc504c474..891ad7ddb 100644
--- a/program/js/editor.js
+++ b/program/js/editor.js
@@ -1,851 +1,851 @@
/**
* Roundcube editor js library
*
* This file is part of the Roundcube Webmail client
*
* @licstart The following is the entire license notice for the
* JavaScript code in this file.
*
* Copyright (c) The Roundcube Dev Team
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this file.
*
* @author Eric Stadtherr <estadtherr@gmail.com>
* @author Aleksander Machniak <alec@alec.pl>
*/
/**
* Roundcube Text Editor Widget class
* @constructor
*/
function rcube_text_editor(config, id)
{
var ref = this,
abs_url = location.href.replace(/[?#].*$/, '').replace(/\/$/, ''),
conf = {
selector: '#' + ($('#' + id).is('.mce_editor') ? id : 'fake-editor-id'),
- cache_suffix: 's=4080200',
- theme: 'modern',
+ cache_suffix: 's=5040100',
+ theme: 'silver',
language: config.lang,
content_css: rcmail.assets_path(config.content_css),
+ content_style: config.content_style,
menubar: false,
statusbar: false,
- toolbar_items_size: 'small',
+ // toolbar_sticky: true, // does not work in scrollable element: https://github.com/tinymce/tinymce/issues/5227
+ toolbar_drawer: 'sliding',
+ toolbar: 'bold italic underline | alignleft aligncenter alignright alignjustify'
+ + ' | fontselect fontsizeselect | forecolor backcolor',
extended_valid_elements: 'font[face|size|color|style],span[id|class|align|style]',
fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 36pt',
// Allow style tag, have to be allowed inside body/div/blockquote (#7088)
valid_children: '+body[style],+blockquote[style],+div[style]',
relative_urls: false,
remove_script_host: false,
convert_urls: false, // #1486944
image_description: false,
paste_webkit_style: "color font-size font-family",
+ automatic_uploads: false, // allows to paste images
paste_data_images: true,
+ // Note: We disable contextmenu options specifically for browser_spellcheck:true.
+ // Otherwise user would have to use Right-Click with CTRL to get to
+ // the browser's spellchecker options. Should you disable browser_spellcheck
+ // you can enable other contextmenu options (by removing these options below).
browser_spellcheck: true,
+ contextmenu: 'spellchecker',
anchor_bottom: false,
- anchor_top: false
+ anchor_top: false,
+ file_picker_types: 'image media',
+ file_picker_callback: function(callback, value, meta) { ref.file_picker_callback(callback, value, meta); }
};
// register spellchecker for plain text editor
this.spellcheck_observer = function() {};
if (config.spellchecker) {
this.spellchecker = config.spellchecker;
if (config.spellcheck_observer) {
this.spellchecker.spelling_state_observer = this.spellcheck_observer = config.spellcheck_observer;
}
}
// Note: must be registered only once (#1490311)
if (!tinymce.registered_request_token) {
tinymce.registered_request_token = true;
tinymce.util.XHR.on('beforeSend', function(e) {
// secure spellchecker requests with Roundcube token
e.xhr.setRequestHeader('X-Roundcube-Request', rcmail.env.request_token);
// A hacky way of setting spellchecker language (there's no API for this in Tiny)
if (e.settings && e.settings.data)
e.settings.data = e.settings.data.replace(/^(method=[a-zA-Z]+&lang=)([^&]+)/, '$1' + rcmail.env.spell_lang);
});
}
// minimal editor
if (config.mode == 'identity') {
+ conf.toolbar += ' | charmap hr link unlink image code $extra';
$.extend(conf, {
- plugins: 'autolink charmap code colorpicker hr image link paste tabfocus textcolor',
- toolbar: 'bold italic underline alignleft aligncenter alignright alignjustify'
- + ' | outdent indent charmap hr link unlink image code forecolor'
- + ' | fontselect fontsizeselect',
- file_browser_callback: function(name, url, type, win) { ref.file_browser_callback(name, url, type); },
- file_browser_callback_types: 'image'
+ plugins: 'autolink charmap code hr image link paste tabfocus',
+ file_picker_types: 'image'
});
}
// full-featured editor
else {
- $.extend(conf, {
- plugins: 'autolink charmap code colorpicker directionality link lists image media nonbreaking'
- + ' paste table tabfocus textcolor searchreplace spellchecker',
- toolbar: 'bold italic underline | alignleft aligncenter alignright alignjustify'
- + ' | bullist numlist outdent indent ltr rtl blockquote | forecolor backcolor | fontselect fontsizeselect'
+ conf.toolbar += ' | bullist numlist outdent indent ltr rtl blockquote'
+ ' | link unlink table | $extra charmap image media | code searchreplace undo redo',
+ $.extend(conf, {
+ plugins: 'autolink charmap code directionality link lists image media nonbreaking'
+ + ' paste table tabfocus searchreplace spellchecker',
spellchecker_rpc_url: abs_url + '/?_task=utils&_action=spell_html&_remote=1',
spellchecker_language: rcmail.env.spell_lang,
- accessibility_focus: false,
- file_browser_callback: function(name, url, type, win) { ref.file_browser_callback(name, url, type); },
- // @todo: support more than image (types: file, image, media)
- file_browser_callback_types: 'image media'
+ min_height: 400,
});
}
// add TinyMCE plugins/buttons from Roundcube plugin
$.each(config.extra_plugins || [], function() {
if (conf.plugins.indexOf(this) < 0)
conf.plugins = conf.plugins + ' ' + this;
});
$.each(config.extra_buttons || [], function() {
if (conf.toolbar.indexOf(this) < 0)
conf.toolbar = conf.toolbar.replace('$extra', '$extra ' + this);
});
// disable TinyMCE plugins/buttons from Roundcube plugin
$.each(config.disabled_plugins || [], function() {
conf.plugins = conf.plugins.replace(this, '');
});
$.each(config.disabled_buttons || [], function() {
conf.toolbar = conf.toolbar.replace(this, '');
});
conf.toolbar = conf.toolbar.replace('$extra', '').replace(/\|\s+\|/g, '|');
// support external configuration settings e.g. from skin
if (window.rcmail_editor_settings)
$.extend(conf, window.rcmail_editor_settings);
conf.setup = function(ed) {
ed.on('init', function() { ref.init_callback(ed); });
// add handler for spellcheck button state update
ed.on('SpellcheckStart SpellcheckEnd', function(args) {
ref.spellcheck_active = args.type == 'spellcheckstart';
ref.spellcheck_observer();
});
ed.on('keypress', function() {
rcmail.compose_type_activity++;
});
// make links open on shift-click
ed.on('click', function(e) {
var link = $(e.target).closest('a');
if (link.length && e.shiftKey) {
window.open(link.get(0).href, '_blank');
return false;
}
});
ed.on('focus blur', function(e) {
$(ed.getContainer()).toggleClass('focused');
});
if (conf.setup_callback)
conf.setup_callback(ed);
};
rcmail.triggerEvent('editor-init', {config: conf, ref: ref, id: id});
// textarea identifier
this.id = id;
// reference to active editor (if in HTML mode)
this.editor = null;
tinymce.init(conf);
// react to real individual tinyMCE editor init
this.init_callback = function(editor)
{
this.editor = editor;
if (rcmail.env.action == 'compose') {
var area = $('#' + this.id),
- height = $('div.mce-toolbar-grp', area.parent()).first().height();
+ height = $('div.tox-toolbar__group', area.parent()).first().height();
// the editor might be still not fully loaded, making the editing area
// inaccessible, wait and try again (#1490310)
if (height > 200 || height > area.height()) {
return setTimeout(function () { ref.init_callback(editor); }, 300);
}
- var css = {},
- elem = rcube_find_object('_from'),
+ var elem = rcube_find_object('_from'),
fe = rcmail.env.compose_focus_elem;
- if (rcmail.env.default_font)
- css['font-family'] = rcmail.env.default_font;
-
- if (rcmail.env.default_font_size)
- css['font-size'] = rcmail.env.default_font_size;
-
- if (css['font-family'] || css['font-size'])
- $(this.editor.getBody()).css(css);
-
if (elem && elem.type == 'select-one') {
// insert signature (only for the first time)
if (!rcmail.env.identities_initialized)
rcmail.change_identity(elem);
// Focus previously focused element
if (fe && fe.id != this.id && fe.nodeName != 'BODY') {
window.focus(); // for WebKit (#1486674)
fe.focus();
rcmail.env.compose_focus_elem = null;
}
}
}
rcmail.triggerEvent('editor-load', {config: conf, ref: ref});
// set tabIndex and set focus to element that was focused before
ref.tabindex(ref.force_focus || (fe && fe.id == ref.id));
// Trigger resize (needed for proper editor resizing in some browsers)
$(window).resize();
};
// set tabIndex on tinymce editor
this.tabindex = function(focus)
{
if (rcmail.env.task == 'mail' && this.editor) {
var textarea = this.editor.getElement(),
node = this.editor.getContentAreaContainer().childNodes[0];
if (textarea && node)
node.tabIndex = textarea.tabIndex;
// find :prev and :next elements to get focus when tabbing away
if (textarea.tabIndex > 0) {
var x = null,
tabfocus_elements = [':prev',':next'],
el = tinymce.DOM.select('*[tabindex='+textarea.tabIndex+']:not(iframe)');
tinymce.each(el, function(e, i) { if (e.id == ref.id) { x = i; return false; } });
if (x !== null) {
if (el[x-1] && el[x-1].id) {
tabfocus_elements[0] = el[x-1].id;
}
if (el[x+1] && el[x+1].id) {
tabfocus_elements[1] = el[x+1].id;
}
this.editor.settings.tabfocus_elements = tabfocus_elements.join(',');
}
}
// ContentEditable reset fixes invisible cursor issue in Firefox < 25
if (bw.mz && bw.vendver < 25)
$(this.editor.getBody()).prop('contenteditable', false).prop('contenteditable', true);
}
if (focus)
this.focus();
};
// focus the editor
this.focus = function()
{
$(this.editor || ('#' + this.id)).focus();
this.force_focus = false;
};
// switch html/plain mode
this.toggle = function(ishtml, noconvert)
{
var curr, content, result,
// these non-printable chars are not removed on text2html and html2text
// we can use them as temp signature replacement
sig_mark = "\u0002\u0003",
input = $('#' + this.id),
signature = rcmail.env.identity ? rcmail.env.signatures[rcmail.env.identity] : null,
is_sig = signature && signature.text && signature.text.length > 1;
// apply spellcheck changes if spell checker is active
this.spellcheck_stop();
if (ishtml) {
content = input.val();
// replace current text signature with temp mark
if (is_sig) {
content = content.replace(/\r\n/, "\n");
content = content.replace(signature.text.replace(/\r\n/, "\n"), sig_mark);
}
var init_editor = function(data) {
// replace signature mark with html version of the signature
if (is_sig)
data = data.replace(sig_mark, '<div id="_rc_sig">' + signature.html + '</div>');
ref.force_focus = true;
input.val(data);
tinymce.execCommand('mceAddEditor', false, ref.id);
};
// convert to html
if (!noconvert) {
result = rcmail.plain2html(content, init_editor);
}
else {
init_editor(content);
result = true;
}
}
else if (this.editor) {
if (is_sig) {
// get current version of signature, we'll need it in
// case of html2text conversion abort
if (curr = this.editor.dom.get('_rc_sig'))
curr = curr.innerHTML;
// replace current signature with some non-printable characters
// we use non-printable characters, because this replacement
// is visible to the user
// doing this after getContent() would be hard
this.editor.dom.setHTML('_rc_sig', sig_mark);
}
// get html content
content = this.editor.getContent();
var init_plaintext = function(data) {
tinymce.execCommand('mceRemoveEditor', false, ref.id);
ref.editor = null;
// replace signture mark with text version of the signature
if (is_sig)
data = data.replace(sig_mark, "\n" + signature.text);
input.val(data).focus().trigger('input');
rcmail.set_caret_pos(input.get(0), 0);
};
// convert html to text
if (!noconvert) {
result = rcmail.html2plain(content, init_plaintext);
}
else {
init_plaintext(input.val());
result = true;
}
// bring back current signature
if (!result && curr)
this.editor.dom.setHTML('_rc_sig', curr);
}
return result;
};
// start spellchecker
this.spellcheck_start = function()
{
if (this.editor) {
tinymce.execCommand('mceSpellCheck', true);
this.spellcheck_observer();
}
else if (this.spellchecker && this.spellchecker.spellCheck) {
this.spellchecker.spellCheck();
}
};
// stop spellchecker
this.spellcheck_stop = function()
{
var ed = this.editor;
if (ed) {
if (ed.plugins && ed.plugins.spellchecker && this.spellcheck_active) {
ed.execCommand('mceSpellCheck', false);
this.spellcheck_observer();
}
}
else if (ed = this.spellchecker) {
if (ed.state && ed.state != 'ready' && ed.state != 'no_error_found')
$(ed.spell_span).trigger('click');
}
};
// spellchecker state
this.spellcheck_state = function()
{
var ed;
if (this.editor)
return this.spellcheck_active;
else if ((ed = this.spellchecker) && ed.state)
return ed.state != 'ready' && ed.state != 'no_error_found';
};
// resume spellchecking, highlight provided mispellings without a new ajax request
this.spellcheck_resume = function(data)
{
var ed = this.editor;
if (ed) {
ed.plugins.spellchecker.markErrors(data);
}
else if (ed = this.spellchecker) {
ed.prepare(false, true);
ed.processData(data);
}
};
// get selected (spellchecker) language
this.get_language = function()
{
return rcmail.env.spell_lang;
};
// set language for spellchecking
this.set_language = function(lang)
{
var ed = this.editor;
if (ed) {
// TODO: this has no effect in recent Tiny versions
ed.settings.spellchecker_language = lang;
}
if (ed = this.spellchecker) {
ed.setCurrentLanguage(lang);
}
rcmail.env.spell_lang = lang;
};
// replace selection with text snippet
// input can be a string or object with 'text' and 'html' properties
this.replace = function(input)
{
var format, ed = this.editor;
if (!input)
return false;
// insert into tinymce editor
if (ed) {
ed.getWin().focus(); // correct focus in IE & Chrome
if ($.type(input) == 'object' && ('html' in input)) {
input = input.html;
format = 'html';
}
else {
if ($.type(input) == 'object')
input = input.text || '';
input = rcmail.quote_html(input).replace(/\r?\n/g, '<br/>');
format = 'text';
}
ed.selection.setContent(input, {format: format});
}
// replace selection in compose textarea
else if (ed = rcube_find_object(this.id)) {
var selection = rcmail.get_input_selection(ed),
value = ed.value,
pre = value.substring(0, selection.start),
end = value.substring(selection.end, value.length);
if ($.type(input) == 'object')
input = input.text || '';
// insert response text
ed.value = pre + input + end;
// set caret after inserted text
rcmail.set_caret_pos(ed, selection.start + input.length);
ed.focus();
}
};
// Fill the editor with specified content
// TODO: support format conversion
this.set_content = function(content)
{
if (this.editor) {
this.editor.setContent(content);
this.editor.getWin().focus();
}
else if (ed = rcube_find_object(this.id)) {
$(ed).val(content).focus();
}
};
// get selected text (if no selection returns all text) from the editor
this.get_content = function(args)
{
var sigstart, ed = this.editor, text = '', strip = false,
defaults = {refresh: true, selection: false, nosig: false, format: 'html'};
if (!args)
args = defaults;
else
args = $.extend(defaults, args);
// apply spellcheck changes if spell checker is active
if (args.refresh) {
this.spellcheck_stop();
}
// get selected text from tinymce editor
if (ed) {
if (args.selection)
text = ed.selection.getContent({format: args.format});
if (!text) {
text = ed.getContent({format: args.format});
// @todo: strip signature in html mode
strip = args.format == 'text';
}
}
// get selected text from compose textarea
else if (ed = rcube_find_object(this.id)) {
if (args.selection) {
text = rcmail.get_input_selection(ed).text;
}
if (!text) {
text = ed.value;
strip = true;
}
}
// strip off signature
// @todo: make this optional
if (strip && args.nosig) {
sigstart = text.indexOf('-- \n');
if (sigstart > 0) {
text = text.substring(0, sigstart);
}
}
return text;
};
// change user signature text
this.change_signature = function(id, show_sig)
{
var position_element, cursor_pos, p = -1,
input_message = $('#' + this.id),
message = input_message.val(),
sig = rcmail.env.identity;
if (!this.editor) { // plain text mode
// remove the 'old' signature
if (show_sig && sig && rcmail.env.signatures && rcmail.env.signatures[sig]) {
sig = rcmail.env.signatures[sig].text;
sig = sig.replace(/\r\n/g, '\n');
p = rcmail.env.top_posting ? message.indexOf(sig) : message.lastIndexOf(sig);
if (p >= 0)
message = message.substring(0, p) + message.substring(p+sig.length, message.length);
}
// add the new signature string
if (show_sig && rcmail.env.signatures && rcmail.env.signatures[id]) {
sig = rcmail.env.signatures[id].text;
sig = sig.replace(/\r\n/g, '\n');
// in place of removed signature
if (p >= 0) {
message = message.substring(0, p) + sig + message.substring(p, message.length);
cursor_pos = p - 1;
}
// empty message or new-message mode
else if (!message || !rcmail.env.compose_mode) {
cursor_pos = message.length;
message += '\n\n' + sig;
}
else if (rcmail.env.top_posting && !rcmail.env.sig_below) {
// at cursor position
if (pos = rcmail.get_caret_pos(input_message.get(0))) {
message = message.substring(0, pos) + '\n' + sig + '\n\n' + message.substring(pos, message.length);
cursor_pos = pos;
}
// on top
else {
message = '\n\n' + sig + '\n\n' + message.replace(/^[\r\n]+/, '');
cursor_pos = 0;
}
}
else {
message = message.replace(/[\r\n]+$/, '');
cursor_pos = !rcmail.env.top_posting && message.length ? message.length + 1 : 0;
message += '\n\n' + sig;
}
}
else {
cursor_pos = rcmail.env.top_posting ? 0 : message.length;
}
input_message.val(message);
// move cursor before the signature
rcmail.set_caret_pos(input_message.get(0), cursor_pos);
}
else if (show_sig && rcmail.env.signatures) { // html
var sigElem = this.editor.dom.get('_rc_sig');
// Append the signature as a div within the body
if (!sigElem) {
var body = this.editor.getBody();
sigElem = $('<div id="_rc_sig"></div>').get(0);
// insert at start or at cursor position in top-posting mode
// (but not if the content is empty and not in new-message mode)
if (rcmail.env.top_posting && !rcmail.env.sig_below
&& rcmail.env.compose_mode && (body.childNodes.length > 1 || $(body).text())
) {
this.editor.getWin().focus(); // correct focus in IE & Chrome
var node = this.editor.selection.getNode();
$(sigElem).insertBefore(node.nodeName == 'BODY' ? body.firstChild : node.nextSibling);
$('<p>').append($('<br>')).insertBefore(sigElem);
}
else {
body.appendChild(sigElem);
position_element = rcmail.env.top_posting && rcmail.env.compose_mode ? body.firstChild : $(sigElem).prev();
}
}
sigElem.innerHTML = rcmail.env.signatures[id] ? rcmail.env.signatures[id].html : '';
}
else if (!rcmail.env.top_posting) {
position_element = $(this.editor.getBody()).children().last();
}
// put cursor before signature and scroll the window
if (this.editor && position_element && position_element.length) {
this.editor.selection.setCursorLocation(position_element.get(0));
this.editor.getWin().scroll(0, position_element.offset().top);
}
};
// trigger content save
this.save = function()
{
if (this.editor) {
this.editor.save();
}
};
// focus the editing area
this.focus = function()
{
(this.editor || rcube_find_object(this.id)).focus();
};
// image selector
- this.file_browser_callback = function(field_name, url, type)
+ this.file_picker_callback = function(callback, value, meta)
{
var i, button, elem, cancel, dialog, fn, hint, list = [],
+ type = meta.filetype,
form = $('.upload-form').clone();
// open image selector dialog
this.editor.windowManager.open({
title: rcmail.get_label('select' + type),
- width: 500,
- html: '<div id="image-selector" class="image-selector file-upload"><ul id="image-selector-list" class="attachmentslist"></ul></div>',
- buttons: [{text: rcmail.get_label('close'), onclick: function() { ref.file_browser_close(); }}]
+ body: {
+ type: 'panel',
+ items: [{
+ type: 'htmlpanel',
+ html: '<div id="image-selector" class="image-selector file-upload"><ul id="image-selector-list" class="attachmentslist"></ul></div>',
+ }]
+ },
+ buttons: [{type: 'cancel', text: rcmail.get_label('close'), onclick: function() { ref.file_picker_close(); }}]
});
- rcmail.env.file_browser_field = field_name;
- rcmail.env.file_browser_type = type;
+ rcmail.env.file_picker_callback = callback;
+ rcmail.env.file_picker_type = type;
dialog = $('#image-selector');
if (!form.length)
form = this.file_upload_form(rcmail.gui_objects.uploadform);
else
form.find('button,a.button').slice(1).remove(); // need only the first button
button = dialog.prepend(form).find('button,a.button')
.text(rcmail.get_label('add' + type))
.focus();
+ if (!button.is('.btn'))
+ button.addClass('tox-button');
+
// fill images list with available images
for (i in rcmail.env.attachments) {
- if (elem = ref.file_browser_entry(i, rcmail.env.attachments[i])) {
+ if (elem = ref.file_picker_entry(i, rcmail.env.attachments[i])) {
list.push(elem);
}
}
- cancel = dialog.parent().parent().find('button').last().parent();
+ cancel = dialog.parents('.tox-dialog').find('button').last();
// Add custom Tab key handlers, tabindex does not work
list = $('#image-selector-list').append(list).on('keydown', 'li', function(e) {
if (e.which == 9) {
if (rcube_event.get_modifier(e) == SHIFT_KEY) {
if (!$(this).prev().focus().length) {
button.focus();
}
}
else if (!$(this).next().focus().length) {
cancel.focus();
}
return false;
}
});
button.keydown(function(e) {
if (e.which == 9) { // Tab
if (rcube_event.get_modifier(e) == SHIFT_KEY || !list.find('li').first().focus().length) {
cancel.focus();
}
return false;
}
if (e.which == 13) { // Enter
this.click();
}
});
cancel.keydown(function(e) {
if (e.which == 9) {
if (rcube_event.get_modifier(e) != SHIFT_KEY || !list.find('li').last().focus().length) {
button.focus();
}
return false;
}
});
// enable drag-n-drop area
if (window.FormData) {
if (!rcmail.env.filedrop) {
rcmail.env.filedrop = {};
}
if (rcmail.gui_objects.filedrop) {
rcmail.env.old_file_drop = rcmail.gui_objects.filedrop;
}
rcmail.gui_objects.filedrop = $('#image-selector');
rcmail.gui_objects.filedrop.addClass('droptarget')
.on('dragover dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
$(this)[(e.type == 'dragover' ? 'addClass' : 'removeClass')]('hover');
})
.get(0).addEventListener('drop', function(e) { return rcmail.file_dropped(e); }, false);
}
// register handler for successful file upload
if (!rcmail.env['file_dialog_event_' + type]) {
rcmail.env['file_dialog_event+' + type] = true;
rcmail.addEventListener('fileuploaded', function(attr) {
var elem;
- if (elem = ref.file_browser_entry(attr.name, attr.attachment)) {
+ if (elem = ref.file_picker_entry(attr.name, attr.attachment)) {
list.prepend(elem);
elem.focus();
}
});
}
// @todo: upload progress indicator
};
// close file browser window
- this.file_browser_close = function(url)
+ this.file_picker_close = function(url)
{
- var input = $('#' + rcmail.env.file_browser_field);
-
- if (url)
- input.val(url);
-
this.editor.windowManager.close();
- input.focus();
+ if (url)
+ rcmail.env.file_picker_callback(url);
if (rcmail.env.old_file_drop)
rcmail.gui_objects.filedrop = rcmail.env.old_file_drop;
};
// creates file browser entry
- this.file_browser_entry = function(file_id, file)
+ this.file_picker_entry = function(file_id, file)
{
if (!file.complete || !file.mimetype) {
return;
}
if (rcmail.file_upload_id) {
rcmail.set_busy(false, null, rcmail.file_upload_id);
}
var rx, img_src;
- switch (rcmail.env.file_browser_type) {
+ switch (rcmail.env.file_picker_type) {
case 'image':
rx = /^image\//i;
break;
case 'media':
rx = /^video\//i;
img_src = rcmail.assets_path('program/resources/tinymce/video.png');
break;
default:
return;
}
if (rx.test(file.mimetype)) {
var path = rcmail.env.comm_path + '&_from=' + rcmail.env.action,
action = rcmail.env.compose_id ? '&_id=' + rcmail.env.compose_id + '&_action=display-attachment' : '&_action=upload-display',
href = path + action + '&_file=' + file_id,
img = $('<img>').attr({title: file.name, src: img_src ? img_src : href + '&_thumbnail=1'});
return $('<li>').attr({tabindex: 0})
.data('url', href)
.append($('<span class="img">').append(img))
.append($('<span class="name">').text(file.name))
- .click(function() { ref.file_browser_close($(this).data('url')); })
+ .click(function() { ref.file_picker_close($(this).data('url')); })
.keydown(function(e) {
if (e.which == 13) {
- ref.file_browser_close($(this).data('url'));
+ ref.file_picker_close($(this).data('url'));
}
});
}
};
this.file_upload_form = function(clone_form)
{
var hint = clone_form ? $(clone_form).find('.hint').text() : '',
form = $('<form id="imageuploadform">').attr({method: 'post', enctype: 'multipart/form-data'});
file = $('<input>').attr({name: '_file[]', type: 'file', multiple: true, style: 'opacity:0;height:1px;width:1px'})
.change(function() { rcmail.upload_file(form, 'upload'); }),
wrapper = $('<div class="upload-form">')
.append($('<button>').attr({'class': 'btn btn-secondary attach', href: '#', onclick: "rcmail.upload_input('imageuploadform')"}));
if (hint)
wrapper.prepend($('<div class="hint">').text(hint));
// clone existing upload form
if (clone_form) {
file.attr('name', $('input[type="file"]', clone_form).attr('name'));
form.attr('action', $(clone_form).attr('action'));
}
form.append(file).append($('<input>').attr({type: 'hidden', name: '_token', value: rcmail.env.request_token}));
return wrapper.append(form);
};
}
diff --git a/program/resources/tinymce/browser.css b/program/resources/tinymce/browser.css
index 320028783..1afb99174 100644
--- a/program/resources/tinymce/browser.css
+++ b/program/resources/tinymce/browser.css
@@ -1,87 +1,82 @@
/* This file contains the CSS data for media file selector of TinyMCE */
#image-selector {
- margin: 10px;
- margin-bottom: 30px;
padding-bottom: 85px;
+ border: 1px solid transparent;
}
#image-selector.droptarget.hover,
#image-selector.droptarget.active {
border: 1px solid #019bc6;
- box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
}
#image-selector.droptarget.hover {
background-color: #d9ecf4;
- box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}
#image-selector form {
position: absolute;
top: 0;
}
#image-selector .hint {
line-height: 25px;
color: #666;
font-size: 11px;
text-align: center;
}
-#image-selector a.button {
- color: #525252;
- text-decoration: none;
- font-size: 11px;
-}
-
#image-selector .upload-form {
text-align: center;
margin-bottom: 1rem;
}
-#image-selector .upload-form button {
- padding: 4px 8px;
- border: 1px solid #c0c0c0;
-}
-
#image-selector-list {
overflow-x: hidden;
overflow-y: auto;
- margin-left: 0;
+ padding: 0;
height: 250px;
}
#image-selector-list li {
line-height: 80px;
- padding: 2px;
+ padding: 3px;
+ padding-left: 5px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
background: none;
+ display:flex;
+ align-items: center;
+ margin-bottom: 1px;
}
#image-selector-list li:hover,
#image-selector-list li:focus {
background-color: #F0F0F0;
}
#image-selector-list li img {
vertical-align: middle;
max-height: 80px;
}
#image-selector-list li span.name {
- vertical-align: middle;
font-weight: bold;
padding-left: 10px;
}
#image-selector-list li span.img {
height: 80px;
width: 80px;
+ min-width: 80px;
text-align: center;
- display: inline-block;
overflow: hidden;
line-height: 80px;
+ border-radius: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #fff;
+ border: 1px solid #ddd;
}
diff --git a/skins/classic/common.css b/skins/classic/common.css
index 2c0eb97ba..7a01b0645 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -1,1661 +1,1652 @@
/***** Roundcube|Mail basic styles *****/
body
{
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
margin: 8px;
background-color: #F6F6F6;
color: #000;
font-size: 12px;
}
body.iframe
{
margin: 20px 0 0 0;
background-color: #FFF;
}
body.extwin
{
margin: 10px;
}
select, input, textarea, button
{
font-size: inherit;
font-family: inherit;
}
th
{
font-weight: normal;
}
h3
{
font-size: 18px;
}
a, a:active, a:visited
{
color: #000;
outline: none;
}
a.button, a.button:visited, a.tab, a.tab:visited, a.axislist
{
color: #000;
text-decoration: none;
}
a.tab
{
width: 80px;
display: block;
text-align: center;
}
a.disabled
{
color: #999;
text-decoration: none;
cursor: default;
}
hr
{
height: 1px;
background-color: #666;
border-style: none;
}
input[type="text"],
input[type="email"],
input[type="button"],
input[type="password"],
button,
textarea
{
border: 1px solid #666;
color: #333;
background-color: #FFF;
}
button, input, textarea
{
color: black;
padding: 1px 3px;
}
input.placeholder,
textarea.placeholder,
input:-moz-placeholder,
textarea:-moz-placeholder
{
color: #aaa;
}
button,
input.button
{
height: 20px;
color: #333333;
font-size: 12px;
padding-left: 8px;
padding-right: 8px;
background: url(images/buttons/bg.gif) repeat-x #f0f0f0;
border: 1px solid #a4a4a4;
}
button:hover,
input.button:hover
{
color: black;
}
button[disabled],
button[disabled]:hover,
input.button[disabled],
input.button[disabled]:hover
{
color: #aaa;
border-color: #ccc;
}
button.mainaction,
input.mainaction
{
font-weight: bold;
border: 1px solid #999;
}
img
{
border: 0;
}
.alttext
{
font-size: 11px;
}
.hint
{
color: #666;
font-size: 11px;
}
.formlinks a,
.formlinks a:visited
{
color: #CC0000;
font-size: 11px;
text-decoration: none;
}
.formlinks a.disabled,
.formlinks a.disabled:visited
{
color: #999999;
}
.voice
{
display: none;
}
.noselect
{
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
/* fixes vertical alignment of checkboxes and labels */
label input,
label span
{
vertical-align: middle;
}
ul.proplist
{
padding: 0;
margin: 0;
list-style: none;
}
/** common user interface objects */
#mainscreen
{
position: absolute;
top: 85px;
right: 20px;
bottom: 20px;
left: 20px;
}
.extwin #mainscreen
{
top: 43px;
}
body > #logo
{
margin-left: 12px;
cursor: pointer;
}
#taskbar
{
position: absolute;
top: 0px;
right: 0px;
height: 24px;
left: 250px;
background: url(images/taskbar.png) top right no-repeat;
padding: 10px 6px 5px 0px;
text-align: right;
white-space: nowrap;
z-index: 2;
}
#taskbar a
{
font-size: 11px;
color: #666666;
text-decoration: none;
padding: 6px 12px 6px 26px;
background: url(images/taskicons.gif) no-repeat;
}
#taskbar a:hover
{
color: #333333;
}
#taskbar a.button-mail
{
background-position: 0 0;
}
#taskbar a.button-addressbook
{
background-position: 0 -25px;
}
#taskbar a.button-settings
{
background-position: 0 -50px;
}
#taskbar a.button-logout
{
background-position: 0 -75px;
}
body > #message
{
position: absolute;
display: none;
top: -1px;
margin-left: -225px;
left: 50%;
z-index: 5000;
opacity: 0.85;
}
body > #message div
{
width: 400px;
margin: 0px;
min-height: 22px;
padding: 8px 10px 8px 46px;
}
body > #message div.notice,
body > #messagebody .part-notice,
body > #mainscreen #messagebody .part-notice,
#message-objects div.notice
{
background: url(images/display/icons.png) 6px 3px no-repeat;
background-color: #F7FDCB;
border: 1px solid #C2D071;
}
body > #message div.error,
body > #message div.warning,
#message-objects div.warning,
#message-objects div.error
{
background: url(images/display/icons.png) 6px -97px no-repeat;
background-color: #EF9398;
border: 1px solid #DC5757;
}
body > #message div.confirmation,
#message-objects div.confirmation
{
background: url(images/display/icons.png) 6px -47px no-repeat;
background-color: #A6EF7B;
border: 1px solid #76C83F;
}
body > #message div.loading,
body > #message div.uploading,
#message-objects div.loading
{
background: url(images/display/loading.gif) 6px 3px no-repeat;
background-color: #EBEBEB;
border: 1px solid #CCCCCC;
}
body > #message div.voice
{
position: absolute;
top: -1000px;
clip: rect(0 0 0 0);
}
body > #message a
{
cursor: pointer;
text-decoration: underline;
}
body.extwin #closelink
{
position: absolute;
top: 5px;
right: 20px;
text-align: right;
z-index:100;
}
.box
{
border: 1px solid #999;
}
.boxtitle
{
height: 12px !important;
padding: 3px 10px 4px 5px;
border-bottom: 1px solid #999;
color: #333;
font-size: 11px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
background: url(images/listheader.gif) top left repeat-x #CCC;
}
.boxtitle .rightalign
{
float: right;
}
body.iframe .boxtitle
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.boxcontent
{
padding: 15px 10px 10px 10px;
background-color: #F2F2F2;
}
.boxcontent .boxwarning
{
margin: 0 0 10px;
display: block;
min-height: 22px;
background: url(images/display/icons.png) #EF9398 6px -95px no-repeat;
border: 1px solid #DC5757;
padding: 8px 10px 8px 46px;
}
.boxcontent table td.title
{
color: #666;
padding-right: 10px;
}
.boxlistcontent
{
position: absolute;
top: 20px;
bottom: 22px;
left: 0;
right: 0;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.boxsubject
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
overflow: hidden;
height: 22px;
border-bottom: 1px solid #999;
background: url(images/listheader.gif) top left repeat-x #CCC;
}
.boxfooter
{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
height: 22px;
border-top: 1px solid #999;
background: url(images/listheader.gif) top left repeat-x #CCC;
}
.boxfooter a.button,
.boxfooter a.buttonPas
{
display: block;
float: left;
width: 34px;
height: 22px;
padding: 0px;
margin: 0;
overflow: hidden;
background: url(images/icons/groupactions.png) 0 0 no-repeat transparent;
opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}
.boxfooter a.groupactions
{
background-position: 0 -26px;
}
.boxfooter a.delgroup {
background-position: 0 -49px;
}
.boxfooter a.buttonPas
{
opacity: 0.35;
}
.pagenav span
{
color: #444;
font-size: 11px;
text-shadow: white 1px 1px;
white-space: nowrap;
}
.pagenav a.button,
.pagenav a.buttonPas
{
display: block;
float: left;
width: 11px;
height: 11px;
padding: 0;
margin: 1px;
overflow: hidden;
background: url(images/pagenav.gif) 0 0 no-repeat transparent;
opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}
.pagenav a.buttonPas {
opacity: 0.35;
}
.pagenav a.firstpageSel {
background-position: 0 -11px;
}
.pagenav a.prevpage {
background-position: -11px 0;
}
.pagenav a.prevpageSel {
background-position: -11px -11px;
}
.pagenav a.nextpage {
background-position: -22px 0;
}
.pagenav a.nextpageSel {
background-position: -22px -11px;
}
.pagenav a.lastpage {
background-position: -33px 0;
}
.pagenav a.lastpageSel {
background-position: -33px -11px;
}
#rcmcountdisplay
{
float: left;
margin-right: 10px;
}
#countcontrols #pagejumper
{
margin: 0 5px;
float: right;
text-align: center;
padding: 0;
cursor: default;
font-size: 10px;
}
.toolbarseparator {
display: block;
float: left;
width: 5px;
height: 32px;
padding: 0;
margin: 0 5px;
overflow: hidden;
background: url(images/abook_toolbar.png) -162px 0 no-repeat transparent;
opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}
.splitter
{
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
position: absolute;
background: url(images/dimple.png) center no-repeat;
}
.splitter-h
{
cursor: n-resize; cursor: row-resize;
background-position: center 2px;
}
.splitter-v
{
cursor: e-resize; cursor: col-resize;
background-position: 2px center;
}
.popupmenu
{
position: absolute;
top: 32px;
left: 90px;
width: auto;
max-height: 70%;
overflow: -moz-scrollbars-vertical;
overflow-y: auto;
display: none;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid #999;
padding: 4px;
z-index: 240;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 1px 1px 12px #999;
-moz-box-shadow: 1px 1px 12px #999;
-webkit-box-shadow: #999 1px 1px 12px;
}
.popupmenu ul
{
margin: -4px 0;
padding: 0;
list-style: none;
}
.popupmenu ul li
{
font-size: 11px;
white-space: nowrap;
min-width: 100px;
margin: 3px -4px;
}
.popupmenu li a,
.popupmenu li label
{
display: block;
color: #a0a0a0;
padding: 3px 16px 3px 10px;
text-decoration: none;
min-height: 14px;
line-height: 14px;
background: transparent;
}
.popupmenu li label.comment
{
color: #999;
font-style: italic;
padding-top: 4px;
padding-bottom: 3px;
}
.popupmenu li a.active,
.popupmenu li a.active:active,
.popupmenu li a.active:visited
{
color: #333;
cursor: pointer;
}
.popupmenu li a.active:hover,
.popupmenu.selectable li a.selected:hover
{
color: #fff;
background-color: #c00;
}
.popupmenu li.block input
{
float: left;
}
.popupmenu.selectable li a.selected
{
background: url(images/messageicons.png) 2px -372px no-repeat;
}
.popupmenu.selectable li a
{
padding-left: 20px;
}
.darkbg
{
background-color: #F2F2F2 !important;
}
.dropbutton,
.dropbutton span
{
float: left;
height: 32px;
}
.dropbutton:hover
{
/* background: url(images/dbutton.png) 0 0 no-repeat transparent; */
}
.dropbutton span
{
width: 9px;
background: url(images/dbutton.png) -53px 0 no-repeat transparent;
}
.dropbutton span:hover
{
cursor: pointer;
background-position: -74px 0;
}
img.uploading
{
width: 16px;
height: 16px;
}
.popup label > input {
margin-left: 10px;
}
.ui-dialog iframe {
width: 100%;
height: 100%;
border: 0;
}
.ui-dialog-content.iframe {
padding: 0 !important;
overflow: hidden !important;
}
/***** common table settings ******/
table.records-table thead tr th,
table.records-table thead tr td
{
height: 20px;
padding: 0px 4px 0px 4px;
vertical-align: middle;
border-bottom: 1px solid #999999;
color: #333333;
background: url(images/listheader.gif) top left repeat-x #CCC;
font-size: 11px;
font-weight: bold;
text-align: left;
}
table.records-table tbody tr td
{
height: 16px;
padding: 2px 4px 2px 4px;
font-size: 11px;
white-space: nowrap;
border-bottom: 1px solid #EBEBEB;
overflow: hidden;
text-align: left;
outline: none;
}
table.records-table tr
{
background-color: #FFFFFF;
}
table.records-table tr.selected td
{
color: #FFFFFF;
background-color: #CC3333;
}
table.records-table tr.selected td a
{
color: #FFFFFF;
}
table.records-table tr.focused td
{
}
table.records-table tr.unfocused td
{
color: #FFFFFF;
background-color: #929292;
}
ul.treelist li
{
position: relative;
}
ul.treelist li div.treetoggle
{
position: absolute;
left: 8px;
top: 2px;
width: 14px;
height: 16px;
cursor: pointer;
}
ul.treelist ul li div.treetoggle
{
left: 25px;
}
ul.treelist ul ul li div.treetoggle
{
left: 42px;
}
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;
}
ul.treelist,
ul.treelist li ul
{
list-style: none;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
ul.treelist li ul
{
border-top: 1px solid #EBEBEB;
}
ul.treelist li
{
display: block;
font-size: 11px;
border-bottom: 1px solid #EBEBEB;
white-space: nowrap;
overflow: hidden;
}
ul.treelist li a
{
cursor: default;
display: block;
padding-left: 25px;
padding-top: 2px;
padding-bottom: 2px;
height: 16px;
line-height: 16px;
text-decoration: none;
white-space: nowrap;
}
ul.treelist li ul li a
{
padding-left: 45px;
}
ul.treelist ul ul li a
{
padding-left: 65px;
}
ul.treelist li ul li:last-child
{
border-bottom: 0;
}
ul.treelist li.selected > a,
ul.treelist li.selected > div a
{
color: #FFF;
font-weight: bold;
background-color: #929292;
}
ul.treelist li.droptarget
{
background-color: #FFFFA6;
}
/***** folders list *****/
.folderlist li ul li:last-child
{
border-bottom: 0 none;
}
.folderlist li.inbox a
{
background-position: 5px -18px;
}
.folderlist li.drafts a
{
background-position: 5px -36px;
}
.folderlist li.sent a
{
background-position: 5px -53px;
}
.folderlist li.junk a
{
background-position: 5px -72px;
}
.folderlist li.trash a
{
background-position: 5px -180px;
}
.folderlist li.trash.empty a
{
background-position: 5px -90px;
}
.folderlist li a
{
cursor: default;
display: block;
position: relative;
padding-left: 25px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
height: 15px;
background: url(images/icons/folders.png) 5px 1px no-repeat;
}
.folderlist li.virtual > a
{
color: #666;
}
.folderlist li.selected,
.folderlist li.droptarget li.selected
{
background-color: #929292;
}
.folderlist li.selected > a,
.folderlist li.droptarget li.selected a
{
color: #FFF;
font-weight: bold;
}
.folderlist li.droptarget
{
background-color: #FFFFA6;
}
/* styles for nested folders */
.folderlist ul {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #EBEBEB;
background-color: #FFF;
font-weight: normal;
}
.folderlist li.mailbox ul li a {
padding-left: 40px; /* 24 + 1 x 16 */
background-position: 20px 1px; /* 4 + 1 x 16 */
}
.folderlist li.mailbox ul li div.treetoggle {
left: 23px !important;
}
.folderlist li.mailbox ul ul li.mailbox a {
padding-left: 56px; /* 2x */
background-position: 36px 1px;
}
.folderlist li.mailbox ul ul li div.treetoggle {
left: 39px !important;
}
.folderlist li.mailbox ul ul ul li.mailbox a {
padding-left: 72px; /* 3x */
background-position: 52px 1px;
}
.folderlist li.mailbox ul ul ul li div.treetoggle {
left: 55px !important;
}
.folderlist li.mailbox ul ul ul ul li.mailbox a {
padding-left: 88px; /* 4x */
background-position: 68px 1px;
}
.folderlist li.mailbox ul ul ul ul li div.treetoggle {
left: 71px !important;
}
/* indent folders on levels > 4 */
.folderlist li.mailbox ul ul ul ul ul li {
padding-left: 16px;
}
.folderlist li.mailbox ul ul ul ul ul li div.treetoggle {
left: 87px !important;
}
.folderlist li.mailbox ul li.drafts a
{
background-position: 21px -36px;
}
.folderlist li.mailbox ul li.sent a
{
background-position: 21px -53px;
}
.folderlist li.mailbox ul li.junk a
{
background-position: 21px -72px;
}
.folderlist li.mailbox ul li.trash a
{
background-position: 21px -180px;
}
.folderlist li.mailbox ul li.trash.empty a
{
background-position: 21px -90px;
}
/***** mac-style quicksearch field *****/
div.searchbox,
#quicksearchbar
{
position: relative;
width: 190px;
height: 20px;
text-align: right;
background: url(images/searchfield.gif) top left no-repeat;
}
#quicksearchbar
{
position: absolute;
top: 55px;
right: 10px;
}
#searchreset,
div.searchbox a.searchreset
{
position: absolute;
top: 3px;
right: 12px;
text-decoration: none;
}
#searchmenulink,
div.searchbox a.searchmenu,
div.searchbox a.searchicon
{
position: absolute;
top: 3px;
right: 168px;
}
div.searchbox a.searchreset
{
display: block;
width: 14px;
height: 14px;
overflow: hidden;
white-space: nowrap;
text-indent: 50000px;
background: url(images/icons/reset.gif) top left no-repeat;
}
div.searchbox a.searchicon
{
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
background: url(images/icons/glass.png) top left no-repeat;
}
#quicksearchbar img
{
vertical-align: middle;
}
#quicksearchbox,
div.searchbox > input
{
position: absolute;
top: 2px;
left: 24px;
width: 140px;
height: 15px;
font-size: 11px;
padding: 0px;
border: none;
outline: none;
}
.propform div.prop
{
margin-bottom: 0.5em;
}
.propform div.prop.block label
{
display: block;
margin-bottom: 2px;
}
.propform div.prop.block input,
.propform div.prop.block textarea
{
width: 97%;
}
.formcontainer
{
background-color: #f2f2f2;
}
.formcontent table {
width: 100%;
}
.formcontent input,
.formcontent textarea {
width: 95%;
}
.listsearchbox
{
border-bottom: solid 1px #ddd;
padding: 2px 4px 1px;
display: none;
background-color: #f2f2f2;
}
.listsearchbox a.iconbutton.reset
{
background: url(images/icons/reset.gif) no-repeat 0 0;
width: 13px;
height: 13px;
text-indent: 50000px;
position: absolute;
top: 3px;
left: 165px;
overflow: hidden;
}
/***** roundcube webmail pre-defined classes *****/
#rcmversion
{
position: absolute;
bottom: 10px;
right: 20px;
text-align: right;
white-space: nowrap;
font-size: 8pt;
color: #999;
}
#rcmdraglayer
{
min-width: 300px;
width: auto !important;
width: 300px;
border: 1px solid #999999;
background-color: #fff;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
white-space: nowrap;
opacity: 0.82;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 1px 1px 12px #999;
-moz-box-shadow: 1px 1px 12px #999;
-webkit-box-shadow: #999 1px 1px 12px;
}
.draglayercopy:before
{
position: absolute;
bottom: -5px;
left: -6px;
content: " ";
width: 14px;
height: 14px;
background: url(images/messageactions.png) -2px -128px no-repeat;
}
a.rcmContactAddress
{
text-decoration: none;
}
a.rcmContactAddress:hover
{
text-decoration: underline;
}
#rcmKSearchpane
{
background-color: #F9F9F9;
border: 1px solid #CCCCCC;
}
#rcmKSearchpane ul
{
margin: 0px;
padding: 2px;
list-style-image: none;
list-style-type: none;
}
#rcmKSearchpane ul li
{
display: block;
height: 16px;
font-size: 11px;
padding-left: 6px;
padding-top: 2px;
padding-right: 6px;
white-space: nowrap;
cursor: pointer;
}
#rcmKSearchpane ul li.selected,
#pagejump-selector ul li.selected
{
color: #ffffff;
background-color: #CC3333;
}
#login-form
{
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 400px;
border: 1px solid #999;
}
#login-form table td.title
{
text-align: right;
white-space: nowrap;
}
#login-form table
{
width: 1%;
margin: auto;
}
#login-form table td.input input
{
width: 200px;
}
#login-bottomline
{
width: 400px;
margin: 5em auto;
font-size: 85%;
text-align: center;
color: #666;
}
#login-noscriptwarning
{
margin: 2em auto 0 auto;
width: 400px;
color: #cf2734;
font-weight: bold;
}
.disabled,
a.disabled
{
color: #999;
}
font.bold
{
font-weight: bold;
}
#login-form .formbuttons
{
text-align: center;
}
/***** onclick menu list *****/
ul.toolbarmenu
{
margin: -4px 0 -4px 0;
padding: 0;
list-style: none;
}
ul.toolbarmenu li
{
font-size: 11px;
white-space: nowrap;
min-width: 130px;
margin: 2px -4px;
}
ul.toolbarmenu li a
{
display: block;
color: #a0a0a0;
padding: 3px 12px 3px 28px;
text-decoration: none;
min-height: 14px;
line-height: 14px;
}
ul.toolbarmenu li a.active,
ul.toolbarmenu li a.active:active,
ul.toolbarmenu li a.active:visited
{
color: #333;
}
ul.toolbarmenu li input
{
vertical-align: middle;
}
ul.toolbarmenu li hr
{
color: #ccc;
width: 130px;
height: 1px;
margin: 2px 1px 2px 1px;
}
ul.toolbarmenu li img
{
float: left;
margin: 0 2px;
}
div.popupmenu ul li.separator_below,
ul.toolbarmenu li.separator_below
{
border-bottom: 1px solid #ccc;
margin-bottom: 2px;
padding-bottom: 2px;
}
div.popupmenu ul li.separator_above,
ul.toolbarmenu li.separator_above
{
border-top: 1px solid #ccc;
margin-top: 2px;
padding-top: 2px;
}
#searchmenu
{
width: 160px;
}
#searchmenu ul.toolbarmenu
{
margin: 0;
}
#searchmenu ul.toolbarmenu li
{
margin: 1px 4px 1px;
}
#searchmenu ul.toolbarmenu li label
{
padding: 2px 0;
color: black;
}
#searchmenu ul.toolbarmenu li label.comment
{
color: #999;
}
#searchmenu select
{
width: 100%;
}
#pagejump-selector
{
max-height: 250px;
overflow-x: hidden;
}
#pagejump-selector ul li
{
min-width: 45px;
padding: 2px 5px;
cursor: default;
}
/*** folder selector ***/
#folder-selector li a
{
padding: 0;
}
#folder-selector li span
{
background: url(images/icons/folders.png) no-repeat 6px 0;
display: block;
height: 15px;
min-height: 14px;
padding: 2px 4px 2px 28px;
overflow: hidden;
max-width: 120px;
text-overflow: ellipsis;
}
#folder-selector li a.virtual
{
color: #A0A0A0;
}
#folder-selector li a.active:hover span
{
color: white;
}
#folder-selector li.inbox span
{
background-position: 6px -18px;
}
#folder-selector li.drafts span
{
background-position: 6px -37px;
}
#folder-selector li.sent span
{
background-position: 6px -54px;
}
#folder-selector li.trash span
{
background-position: 6px -91px;
}
#folder-selector li.junk span
{
background-position: 6px -73px;
}
/***** tabbed interface elements *****/
div.tabsbar,
#tabsbar
{
position: absolute;
top: 50px;
left: 220px;
right: 20px;
height: 22px;
border-bottom: 1px solid #999999;
white-space: nowrap;
}
div.tabsbar
{
top: 35px;
left: 12px;
right: 12px;
}
span.tablink,
span.tablink-selected
{
float: left;
height: 23px !important;
height: 22px;
overflow: hidden;
background: url(images/tabs-left.gif) top left no-repeat;
}
span.tablink
{
cursor: pointer;
}
span.tablink-selected
{
cursor: default;
background-position: 0px -23px;
}
span.tablink a,
span.tablink-selected a
{
display: inline-block;
padding: 5px 10px 0 5px;
margin-left: 5px;
height: 23px;
color: #555555;
max-width: 185px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
background: url(images/tabs-right.gif) top right no-repeat;
}
span.tablink-selected a
{
cursor: inherit;
color: #000000;
background-position: right -23px;
}
fieldset
{
margin-bottom: 1em;
border: 1px solid #999999;
padding: 4px 8px 9px 8px;
}
legend
{
color: #999999;
}
fieldset.tabbed
{
margin-top: 22px;
padding-top: 12px;
}
.quota_text {
text-align: center;
font-size: 10px;
color: #666;
border: 1px solid #999;
cursor: default;
}
.quota_bg { background-color: white; }
.quota_high { background: url(images/quota-colors.png) repeat-x 0 -28px #f90509; }
.quota_mid { background: url(images/quota-colors.png) repeat-x 0 -14px #e3e909; }
.quota_low { background: url(images/quota-colors.png) repeat-x 0 0px #05f905; }
.quota_text_high { color: white; }
.quota_text_mid { color: #666; }
.quota_text_low { color: #666; }
table.quota-info {
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
margin: 2px;
}
table.quota-info td,
table.quota-info th {
border: 1px solid #999;
padding: 2px 3px;
text-align: center;
min-width: 80px;
color: #333;
font-size: 11px;
}
table.quota-info th {
font-weight: bold;
background-color: #ddd;
}
table.quota-info td.name {
text-align: left;
}
table.quota-info td.root {
font-style: italic;
}
/********** TinyMCE styles **********/
-.mce-btn-small button
-{
- height: 22px;
-}
-.mce-btn-small i
-{
- line-height: 16px !important;
- vertical-align: text-top !important;
+div.tox .tox-toolbar,
+div.tox .tox-toolbar__overflow,
+div.tox .tox-toolbar__primary {
+ background-color: #f0f0f0;
}
-.mce-combobox button
-{
- padding: 6px 8px !important;
+div.tox .tox-toolbar__primary {
+ border: 0;
}
-.mce-tinymce
-{
- border-radius: 0 !important;
-{
+div.tox div.tox-dialog-wrap__backdrop {
+ background: #aaa;
+ opacity: .3;
+}
-.mce-panel.mce-toolbar-grp
-{
- border: 0 !important;
+div.tox div.tox-dialog {
+ box-shadow: 1px 1px 18px #666;
+ border-width: 0;
}
-#image-selector-form.droptarget {
+#image-selector.droptarget {
background: url(images/filedrop.png) center bottom no-repeat;
}
-#image-selector-form.droptarget.hover
-{
+#image-selector.droptarget.hover {
background-color: #F0F0EE;
- box-shadow: 0 0 5px 0 #999;
- -moz-box-shadow: 0 0 5px 0 #999;
- -o-box-shadow: 0 0 5px 0 #999;
}
/** PGP key import dialog **/
.pgpkeyimport div.key {
position: relative;
margin-bottom: 2px;
padding: 1em 1em 5px;
background-color: #ebebeb;
}
.pgpkeyimport div.key.revoked,
.pgpkeyimport div.key.disabled {
color: #a0a0a0;
}
.pgpkeyimport div.key label {
display: inline-block;
margin-right: 0.5em;
}
.pgpkeyimport div.key label:after {
content: ":";
}
.pgpkeyimport div.key label + a,
.pgpkeyimport div.key label + span {
display: inline-block;
margin-right: 2em;
white-space: nowrap;
}
.pgpkeyimport div.key label + a {
font-weight: bold;
}
.pgpkeyimport ul.uids {
margin: 5px 1em 0 1em;
padding: 0;
}
.pgpkeyimport li.uid {
border: 0;
padding: 2px;
}
.pgpkeyimport div.key button.importkey {
position: absolute;
top: 0.8em;
right: 0.8em;
padding: 2px 6px;
}
.pgpkeyimport div.key button[disabled] {
display: none;
}
diff --git a/skins/classic/functions.js b/skins/classic/functions.js
index 1b5bed403..a6a5b0ae3 100644
--- a/skins/classic/functions.js
+++ b/skins/classic/functions.js
@@ -1,1127 +1,1127 @@
/**
* Roundcube functions for default skin interface
*
* @licstart The following is the entire license notice for the
* JavaScript code in this file.
*
* Copyright (c) The Roundcube Dev Team
*
* The JavaScript code in this page is free software: you can redistribute it
* and/or modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation, either version 3 of
* the License, or (at your option) any later version.
*
* @licend The above is the entire license notice
* for the JavaScript code in this file.
*/
/**
* Settings
*/
function rcube_init_settings_tabs()
{
var el, cl, container = $('#tabsbar'),
last_tab = $('span', container).last(),
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;
// create tabs container (if not exists)
var tabs = content.find('.tabsbar');
if (!tabs.length)
tabs = $('<div>').addClass('tabsbar').appendTo(content);
// convert fildsets into tabs
fs.each(function(idx) {
var tab, a, elm = $(this), legend = elm.children('legend');
// skip invisible or already initialized fieldsets
if (!elm.is(':visible') || elm.hasClass('tabbed'))
return;
// 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);
});
// hide not selected tabs
fs.each(function(idx) { if (idx != current) $(this).hide(); });
}
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'},
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'},
responsesmenu: {id:'responsesmenu'},
// 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']();
},
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
}
if (rcmail.mailvelope_editor)
return;
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,
scope = rcmail.env.search_scope || 'base';
if (rcmail.env.task == 'mail') {
mods = mods[mbox] ? mods[mbox] : mods['*'];
all = 'text';
$('input:radio[name="s_scope"]').prop('checked', false).filter('#s_scope_'+scope).prop('checked', true);
}
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,
scope = $('input[name="s_scope"]:checked').val();
if (scope == 'all')
mbox = '*';
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) {
$('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;
}
});
}
rcmail.set_searchmods(m);
},
show_listmenu: function(p)
{
var self = this, buttons = {}, $dialog = $('#listmenu');
// close the dialog
if ($dialog.is(':visible')) {
$dialog.dialog('close', p.originalEvent);
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');
$('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', $.inArray(this.value, rcmail.env.listcols) != -1);
});
$.each(['widescreen', 'desktop', 'list'], function() {
$('input[name="layout"][value="' + this + '"]').prop('checked', rcmail.env.layout == this);
});
$('#listoptions-columns', $dialog)[rcmail.env.layout == 'widescreen' ? 'hide' : 'show']();
buttons[rcmail.gettext('save')] = function(e) {
$dialog.dialog('close', e);
self.save_listmenu();
};
$dialog.dialog({
modal: true,
resizable: false,
closeOnEscape: true,
title: null,
open: function(e) {
var maxheight = 0;
$('#listmenu fieldset').each(function() {
var height = $(this).height();
if (height > maxheight) {
maxheight = height;
}
}).css("min-height", maxheight+"px").height(maxheight);
setTimeout(function() { $dialog.find('a, input:not(:disabled)').not('[aria-disabled=true]').first().focus(); }, 100);
},
close: function(e) {
$dialog.dialog('destroy').hide();
if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent))
$('#listmenulink').focus();
},
buttons: buttons,
minWidth: 500,
width: $dialog.width()+20
}).show();
},
save_listmenu: function()
{
var sort = $('input[name="sort_col"]:checked').val(),
ord = $('input[name="sort_ord"]:checked').val(),
thread = $('input[name="view"]:checked').val(),
layout = $('input[name="layout"]: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, layout);
},
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, event)
{
var id = elem.parentNode.id.replace(/^attach/, '');
$.each(['open', 'download', 'rename'], function() {
var action = this;
$('#attachmenu' + action).off('click').attr('onclick', '').click(function(e) {
return rcmail.command(action + '-attachment', id, this);
});
});
this.popups.attachmentmenu.link = elem;
rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event);
},
menu_open: function(p)
{
if (p && p.name == 'messagelistmenu')
this.show_listmenu();
},
body_mouseup: function(e)
{
var target = e.target; ref = this;
$.each(this.popups, function(i, popup) {
if (popup.obj.is(':visible') && target != rcube_find_object(i + 'link')
&& !popup.toggle
&& target != popup.obj.get(0) // check if scroll bar was clicked (#1489832)
&& (!popup.editable || !ref.target_overlaps(target, popup.id))
&& (!popup.sticky || !rcube_mouse_is_over(e, rcube_find_object(popup.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(e)
{
if (e.keyCode == 27) {
for (var k in this.popups) {
if (this.popups[k].obj.is(':visible'))
this.show_popup(k, false);
}
}
},
// Mail view layout initialization and change handler
set_layout: function(p)
{
var layout = p ? p.new_layout : rcmail.env.layout,
top = $('#mailcontframe'),
bottom = $('#mailpreviewframe');
if (p)
$('#mailrightcontainer').removeClass().addClass(layout);
if (!this.mailviewsplitv) {
this.mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer',
orientation: 'v', relative: true, start: 165, callback: rcube_render_mailboxlist });
this.mailviewsplitv.init();
}
$('#mailviewsplitter')[layout == 'desktop' ? 'show' : 'hide']();
$('#mailviewsplitter2')[layout == 'widescreen' ? 'show' : 'hide']();
$('#mailpreviewframe')[layout != 'list' ? 'show' : 'hide']();
rcmail.env.contentframe = layout == 'list' ? null : 'messagecontframe';
if (layout == 'widescreen') {
$('#countcontrols').detach().appendTo($('#messagelistheader'));
top.css({height: 'auto', width: 400});
bottom.css({top: 0, left: 410, height: 'auto'}).show();
if (!this.mailviewsplit2) {
this.mailviewsplit2 = new rcube_splitter({id:'mailviewsplitter2', p1: 'mailcontframe', p2: 'mailpreviewframe',
orientation: 'v', relative: true, start: 405});
this.mailviewsplit2.init();
}
else
this.mailviewsplit2.resize();
}
else if (layout == 'desktop') {
top.css({height: 200, width: '100%'});
bottom.css({left: 0, top: 210, height: 'auto'}).show();
if (!this.mailviewsplit) {
this.mailviewsplit = new rcube_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe',
orientation: 'h', relative: true, start: 205});
this.mailviewsplit.init();
}
else
this.mailviewsplit.resize();
}
else { // layout == 'list'
top.css({height: 'auto', width: '100%'});
bottom.hide();
}
if (p && p.old_layout == 'widescreen') {
$('#countcontrols').detach().appendTo($('#messagelistfooter'));
}
},
/* 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() - 6,
h = div.height() - 2,
x = bw.ie || bw.opera ? 4 : 0;
- $('#compose-body_ifr').width(w + 6).height(h - 1 - $('div.mce-toolbar').height());
+ $('#compose-body_ifr').width(w + 6).height(h - 1 - $('div.tox-toolbar').height());
$('#compose-body').width(w-x).height(h);
$('#googie_edit_layer').width(w).height(h);
},
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);
}
else if (p.command == 'compose-encrypted') {
// show the toolbar button for Mailvelope
$('#messagetoolbar a.encrypt').parent().show();
}
else if (p.command == 'compose-encrypted-signed') {
// enable selector for encrypt and sign
$('#encryptionmenulink').show();
}
},
folder_search_init: function(container)
{
// animation to unfold list search box
$('.boxtitle a.search', container).click(function(e) {
var title = $('.boxtitle', container),
box = $('.listsearchbox', container),
dir = box.is(':visible') ? -1 : 1,
height = 24 + ($('select', box).length ? 24 : 0);
box.slideToggle({
duration: 160,
progress: function(animation, progress) {
if (dir < 0) progress = 1 - progress;
$('.boxlistcontent', container).css('top', (title.outerHeight() + height * progress) + 'px');
},
complete: function() {
box.toggleClass('expanded');
if (box.is(':visible')) {
box.find('input[type=text]').focus();
}
else {
$('a.reset', box).click();
}
// TODO: save state in cookie
}
});
return false;
});
}
};
/**
* 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
*
* @deprecated Use treelist widget
*/
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);
};
};
// 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
if (list.length > 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);
if (data.table) {
var menu = $('#quotamenu');
if (!menu.length)
menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body'));
menu.html(data.table);
$('#quotaimg').css('cursor', 'pointer').off('click').on('click', function(e) {
return rcmail.command('menu-open', 'quotamenu', e.target, e);
});
}
};
// 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);
};
function attachment_menu_append(item)
{
if ($(item).is('.no-menu'))
return;
$(item).append(
$('<a class="drop"></a>').on('click keypress', function(e) {
if (e.type != 'keypress' || e.which == 13) {
rcmail_ui.show_attachmentmenu(this, e);
return false;
}
})
);
};
// Optional parameters used by TinyMCE
var rcmail_editor_settings = {};
var rcmail_ui;
function rcube_init_mail_ui()
{
rcmail_ui = new rcube_mail_ui();
$(document.body).mouseup(function(e) { rcmail_ui.body_mouseup(e); })
.mousedown(function(e) { rcmail_ui.body_keydown(e); });
rcmail.addEventListener('init', function() {
if (rcmail.env.quota_content)
update_quota(rcmail.env.quota_content);
rcmail.addEventListener('setquota', update_quota);
rcube_webmail.set_iframe_events({mouseup: function(e) { return rcmail_ui.body_mouseup(e); }});
if (rcmail.env.task == 'mail') {
rcmail.addEventListener('enable-command', 'enable_command', rcmail_ui)
.addEventListener('menu-open', 'menu_open', rcmail_ui)
.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui)
.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui)
.addEventListener('afterbounce', function(){ rcmail_ui.show_popup('forwardmenu', false); })
.gui_object('dragmenu', 'dragmenu');
if (rcmail.gui_objects.mailboxlist) {
rcmail.treelist.addEventListener('expand', rcube_render_mailboxlist);
rcmail.addEventListener('responseaftermark', rcube_render_mailboxlist)
.addEventListener('responseaftergetunread', rcube_render_mailboxlist)
.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist)
.addEventListener('responseafterrefresh', rcube_render_mailboxlist)
.addEventListener('afterimport-messages', function(){ rcmail_ui.show_popup('uploadform', false); });
}
rcmail.init_pagejumper('#pagejumper');
// fix message list header on window resize (#1490213)
if (bw.ie && rcmail.message_list)
$(window).resize(function() {
setTimeout(function() { rcmail.message_list.resize(); }, 10);
});
if (rcmail.env.action == 'list' || !rcmail.env.action) {
rcmail.addEventListener('layout-change', 'set_layout', rcmail_ui);
rcmail_ui.set_layout();
}
else if (rcmail.env.action == 'compose') {
rcmail_ui.init_compose_form();
rcmail.addEventListener('compose-encrypted', function(e) {
$("a.button.encrypt")[(e.active ? 'addClass' : 'removeClass')]('selected');
$("select[name='editorSelector']").prop('disabled', e.active);
$('a.button.attach, a.button.responses, a.button.attach, #uploadmenulink')[(e.active ? 'addClass' : 'removeClass')]('buttonPas disabled');
$('#responseslist a.insertresponse')[(e.active ? 'removeClass' : 'addClass')]('active');
});
rcmail.addEventListener('fileappended', function(e) {
if (e.attachment.complete)
attachment_menu_append(e.item);
});
// add menu link for each attachment
$('#attachmentslist > li').each(function() {
attachment_menu_append(this);
});
}
else if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
// add menu link for each attachment
$('#attachment-list > li[id^="attach"]').each(function() {
attachment_menu_append(this);
});
$(window).resize(function() {
if (!$('#attachment-list > li[id^="attach"]').length)
$('#attachment-list').hide();
var mvlpe = $('#messagebody.mailvelope');
if (mvlpe.length) {
var content = $('#messageframe'),
h = (content.length ? content.height() + content.offset().top - 25 : $(this).height()) - mvlpe.offset().top - 20;
mvlpe.height(h);
}
});
}
}
else if (rcmail.env.task == 'addressbook') {
rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); })
.gui_object('dragmenu', 'dragmenu');
}
else if (rcmail.env.task == 'settings') {
if (rcmail.env.action == 'folders') {
rcmail_ui.folder_search_init($('#folder-manager'));
}
$('#mainscreen > #prefs-title').detach().prependTo($('#mainscreen > .box'));
}
});
}
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 3ea340692..b11166427 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -1,1905 +1,1897 @@
/***** Roundcube|Mail mail task styles *****/
#messagetoolbar
{
position: absolute;
top: 47px;
left: 205px;
right: 10px;
height: 35px;
min-width: 650px;
white-space: nowrap;
/* border: 1px solid #cccccc; */
}
.extwin #messagetoolbar
{
top: 5px;
left: 20px;
}
#messagetoolbar a,
#messagetoolbar select
{
display: block;
float: left;
padding-right: 10px;
}
#messagetoolbar a.button,
#messagetoolbar a.buttonPas {
display: block;
float: left;
width: 32px;
height: 32px;
padding: 0;
margin: 0 5px;
overflow: hidden;
background: url(images/mail_toolbar.png) 0 0 no-repeat transparent;
opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}
#messagetoolbar a.buttonPas {
opacity: 0.35;
}
#messagetoolbar a.button.selected {
background-color: #ddd;
margin-left: 4px;
margin-right: 4px;
margin-top: -1px;
border: 1px solid #ccc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#messagetoolbar a.checkmailSel {
background-position: 0 -32px;
}
#messagetoolbar a.back {
background-position: -32px 0;
}
#messagetoolbar a.backSel {
background-position: -32px -32px;
}
#messagetoolbar a.compose {
background-position: -64px 0;
}
#messagetoolbar a.composeSel {
background-position: -64px -32px;
}
#messagetoolbar a.reply {
background-position: -96px 0;
}
#messagetoolbar a.replySel {
background-position: -96px -32px;
}
#messagetoolbar a.replyAll {
background-position: -128px 0;
}
#messagetoolbar a.replyAllSel {
background-position: -128px -32px;
}
#messagetoolbar a.forward {
background-position: -160px 0;
}
#messagetoolbar a.forwardSel {
background-position: -160px -32px;
}
#messagetoolbar a.delete {
background-position: -192px 0;
}
#messagetoolbar a.deleteSel {
background-position: -192px -32px;
}
#messagetoolbar a.print {
background-position: -256px 0;
}
#messagetoolbar a.printSel {
background-position: -256px -32px;
}
#messagetoolbar a.markmessage {
background-position: -288px 0;
}
#messagetoolbar a.messagemenu {
background-position: -320px 0;
width: 34px;
}
#messagetoolbar a.spellcheck {
background-position: -418px 0;
}
#messagetoolbar a.spellcheckSel {
background-position: -418px -32px;
}
#messagetoolbar a.attach {
background-position: -386px 0;
}
#messagetoolbar a.attachSel {
background-position: -386px -32px;
}
#messagetoolbar a.insertsig {
background-position: -482px 0;
}
#messagetoolbar a.insertsigSel {
background-position: -482px -32px;
}
#messagetoolbar a.savedraft {
background-position: -354px 0;
}
#messagetoolbar a.savedraftSel {
background-position: -354px -32px;
}
#messagetoolbar a.send {
background-position: -450px 0;
}
#messagetoolbar a.sendSel {
background-position: -450px -32px;
}
#messagetoolbar a.move {
background-position: -580px 0;
}
#messagetoolbar a.moveSel {
background-position: -580px -32px;
}
#messagetoolbar a.download {
background-position: -514px 0;
}
#messagetoolbar a.downloadSel {
background-position: -514px -32px;
}
#messagetoolbar a.responses {
background-position: -548px 0;
}
#messagetoolbar a.encrypt {
background-position: -612px 0;
}
#messagetoolbar a.encryptSel {
background-position: -612px -32px;
}
#messagemenu li a.active:hover,
#attachmentmenu li a.active:hover,
#markmessagemenu li a.active:hover
{
color: #fff;
background-color: #c00;
}
#messagemenu li a,
#attachmentmenu li a
{
background: url(images/messageactions.png) no-repeat 7px 0;
background-position: 7px 20px;
}
#messagemenu li a.printlink
{
background-position: 7px 1px;
}
#messagemenu li a.downloadlink,
#attachmentmenu li a.downloadlink
{
background-position: 7px -17px;
}
#attachmentmenu li a.renamelink
{
background-position: 6px -69px;
}
#messagemenu li a.sourcelink
{
background-position: 7px -34px;
}
#messagemenu li a.openlink,
#attachmentmenu li a.openlink
{
background-position: 7px -52px;
}
#messagemenu li a.editlink
{
background-position: 6px -70px;
}
#messagemenu li a.movelink
{
background-position: 6px -160px;
}
#messagemenu li a.copylink
{
background-position: 6px -142px;
}
#markmessagemenu li a,
#compose-attachments li a.delete,
#compose-attachments li a.cancelupload
{
background: url(images/messageicons.png) no-repeat;
}
#markmessagemenu li a.readlink
{
background-position: 7px -51px;
}
#markmessagemenu li a.unreadlink
{
background-position: 7px -119px;
}
#markmessagemenu li a.flaggedlink
{
background-position: 7px -153px;
}
#markmessagemenu li a.unflaggedlink
{
background-position: 7px -136px;
}
#searchfilter
{
white-space: nowrap;
position: absolute;
right: 198px;
vertical-align: middle;
}
#searchfilter label
{
font-size: 11px;
}
#mailleftcontainer
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 160px;
}
#mailrightcontainer
{
position: absolute;
top: 0;
left: 170px;
bottom: 0;
right: 0;
min-width: 600px;
}
#mailrightcontent
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#messagepartcontainer
{
position: absolute;
top: 0;
left: 170px;
right: 0;
bottom: 0;
}
#messagepartheader
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 160px;
border: 1px solid #999999;
background-color: #F9F9F9;
overflow: hidden;
}
#messagepartheader table
{
width: 100%;
table-layout: fixed;
}
#messagepartheader table td
{
text-overflow: ellipsis;
}
#messagepartheader table td.title
{
width: 60px;
}
#mailcontframe
{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
border: 1px solid #999999;
background-color: #F9F9F9;
overflow: hidden;
}
#mailpreviewframe
{
position: absolute;
right: 0;
left: 0;
top: 205px;
bottom: 0px;
border: 1px solid #999999;
background-color: #F9F9F9;
display: none;
}
#messagecontframe
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
min-height: 100%; /* Chrome 14 bug */
}
#messagepartframe
{
width: 100%;
height: 100%;
min-height: 100%; /* Chrome 14 bug */
border: 1px solid #999999;
background-color: #fff;
}
/** mailbox list styles */
#mailboxlist-container
{
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
border: 1px solid #999;
background-color: #F9F9F9;
}
#mailboxlist
{
position:relative;
height: auto;
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
overflow: hidden;
white-space: nowrap;
background-color: #FFF;
}
#mailboxlist li.unread
{
font-weight: bold;
}
#mailboxlist li.recent > a
{
color: #0066FF;
}
#listcontrols
{
position: relative;
white-space: nowrap;
line-height: 22px;
padding: 0 4px;
width: auto;
min-width: 300px;
}
#listcontrols a,
#listcontrols span
{
display: block;
float: left;
font-size: 11px;
}
#listcontrols span input
{
vertical-align: middle;
}
#listcontrols a.button,
#listcontrols a.buttonPas
{
display: block;
float: left;
width: 15px;
height: 15px;
padding: 0;
margin-top: 4px;
margin-right: 2px;
overflow: hidden;
background: url(images/mail_footer.png) 0 0 no-repeat transparent;
opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}
#listcontrols a.buttonPas
{
opacity: 0.35;
}
#listcontrols a.all {
background-position: -30px 0;
}
#listcontrols a.allsel {
background-position: -30px -15px;
}
#listcontrols a.page {
background-position: -135px 0;
}
#listcontrols a.pagesel {
background-position: -135px -15px;
}
#listcontrols a.unread {
background-position: -45px 0;
}
#listcontrols a.unreadsel {
background-position: -45px -15px;
}
#listcontrols a.invert {
background-position: -60px 0;
}
#listcontrols a.invertsel {
background-position: -60px -15px;
}
#listcontrols a.none {
background-position: -75px 0;
}
#listcontrols a.nonesel {
background-position: -75px -15px;
}
#listcontrols a.expand-all {
background-position: -90px 0;
}
#listcontrols a.expand-allsel {
background-position: -90px -15px;
}
#listcontrols a.collapse-all {
background-position: -105px 0;
}
#listcontrols a.collapse-allsel {
background-position: -105px -15px;
}
#listcontrols a.expand-unread {
background-position: -120px 0;
}
#listcontrols a.expand-unreadsel {
background-position: -120px -15px;
}
#countcontrols
{
position: absolute;
top: 4px;
right: 4px;
white-space: nowrap;
font-size: 11px;
line-height: 14px;
}
#countcontrols a.button,
#countcontrols a.buttonPas
{
float: right;
}
/** message list styles */
body.messagelist
{
margin: 0px;
background-color: #F9F9F9;
}
table.messagelist
{
width: 100%;
display: table;
table-layout: fixed;
border-spacing: 0;
z-index: 1;
}
table.messagelist.fixedcopy
{
z-index: 2;
}
.messagelist thead tr th,
.messagelist thead tr td
{
height: 20px;
padding: 0 4px 0 2px;
vertical-align: middle;
border-bottom: 1px solid #999999;
color: #333333;
background: url(images/listheader.gif) top left repeat-x #CCC;
font-size: 11px;
font-weight: bold;
text-align: left;
}
.messagelist thead tr > .sortedASC,
.messagelist thead tr > .sortedDESC
{
background-position: 0 -26px;
}
.messagelist thead tr > .sortedASC a
{
background: url(images/icons/sort.gif) right 0 no-repeat;
}
.messagelist thead tr > .sortedDESC a
{
background: url(images/icons/sort.gif) right -14px no-repeat;
}
.messagelist thead tr a
{
display: block;
width: auto !important;
width: 100%;
color: #333333;
text-decoration: none;
}
.messagelist thead tr > .size.sortedASC a,
.messagelist thead tr > .size.sortedDESC a
{
padding-right: 18px;
}
.messagelist thead tr > .subject
{
padding-left: 18px;
width: 99%;
}
.messagelist tbody tr th,
.messagelist tbody tr td
{
height: 20px;
padding: 0;
font-size: 11px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
border-bottom: 1px solid #EBEBEB;
cursor: default;
outline: none;
}
.messagelist tbody tr td a
{
color: #000;
text-decoration: none;
white-space: nowrap;
cursor: inherit;
}
.messagelist td img
{
vertical-align: middle;
display: inline-block;
}
.messagelist tbody tr td.flag,
.messagelist tbody tr td.status,
.messagelist tbody tr td.subject span.status
{
cursor: pointer;
}
.messagelist tr .flag span,
.messagelist tr .status span,
.messagelist tr .attachment span,
.messagelist tr .priority span
{
display: block;
width: 15px;
text-indent: -5000px;
overflow: hidden;
}
.messagelist tr td div.collapsed,
.messagelist tr td div.expanded,
.messagelist tr > .threads .listmenu,
.messagelist tr .attachment span.attachment,
.messagelist tr .attachment span.report,
.messagelist tr .attachment span.encrypted,
.messagelist tr > .priority span.priority,
.messagelist tr > .priority span.prio1,
.messagelist tr > .priority span.prio2,
.messagelist tr > .priority span.prio3,
.messagelist tr > .priority span.prio4,
.messagelist tr > .priority span.prio5,
.messagelist tr .flag span.flagged,
.messagelist tr .flag span.unflagged,
.messagelist tr:hover .flag span.unflagged,
.messagelist tr > .status span.status,
.messagelist tr > .status span.msgicon,
.messagelist tr > .status span.deleted,
.messagelist tr > .status span.unread,
.messagelist tr > .status span.unreadchildren,
.messagelist tr > .subject span.msgicon,
.messagelist tr > .subject span.deleted,
.messagelist tr > .subject span.unread,
.messagelist tr > .subject span.replied,
.messagelist tr > .subject span.forwarded,
.messagelist tr > .subject span.unreadchildren
{
display: inline-block;
vertical-align: middle;
height: 17px;
width: 15px;
background: url(images/messageicons.png) center no-repeat;
}
.messagelist tr .attachment span.attachment
{
background-position: 0 -170px;
}
.messagelist tr .attachment span.report
{
background-position: 0 -255px;
}
.messagelist tr .attachment span.encrypted
{
background-position: 0 -418px;
}
.messagelist tr > .priority span.priority
{
background-position: 0 -309px;
}
.messagelist tr > .priority span.prio5
{
background-position: 0 -358px;
}
.messagelist tr > .priority span.prio4
{
background-position: 0 -340px;
}
.messagelist tr > .priority span.prio3
{
background-position: 0 -324px;
}
.messagelist tr > .priority span.prio2
{
background-position: 0 -309px;
}
.messagelist tr > .priority span.prio1
{
background-position: 0 -290px;
}
.messagelist tr .flag span.flagged
{
background-position: 0 -153px;
}
.messagelist tr:hover .flag span.unflagged
{
background-position: 0 -136px;
}
.messagelist tr.flaggedroot .flag span,
.messagelist tr.flaggedroot .flag span.unflagged
{
background-position: 0 -136px;
}
.messagelist tr > .subject span.msgicon,
.messagelist tr > .subject span.unreadchildren
{
background-position: 0 -51px;
margin: 0 2px;
}
.messagelist tr > .subject span.replied
{
background-position: 0 -85px;
}
.messagelist tr > .subject span.forwarded
{
background-position: 0 -68px;
}
.messagelist tr > .subject span.replied.forwarded
{
background-position: 0 -102px;
}
.messagelist tr > .status span.msgicon,
.messagelist tr .flag span.unflagged,
.messagelist tr > .status span.unreadchildren
{
background-position: 0 18px; /* no icon */
}
.messagelist tr > .status span.msgicon:hover
{
background-position: 0 -272px;
}
.messagelist tr > .status span.deleted,
.messagelist tr > .subject span.deleted
{
background-position: 0 -187px;
}
.messagelist tr > .status span.status,
.messagelist tr > .status span.unread,
.messagelist tr > .subject span.unread
{
background-position: 0 -119px;
}
.messagelist tr td div.collapsed
{
background-position: 0 -221px;
cursor: pointer;
}
.messagelist tr td div.expanded
{
background-position: 0 -204px;
cursor: pointer;
}
.messagelist tr > .threads .listmenu
{
background-position: 0 -238px;
cursor: pointer;
overflow: hidden;
text-indent: -5000px;
display: block;
}
.messagelist tbody tr td.subject
{
width: 99%;
}
.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;
}
.messagelist tr > .attachment,
.messagelist tr > .threads,
.messagelist tr > .status,
.messagelist tr > .flag,
.messagelist tr > .priority
{
width: 17px;
padding: 0 0 0 2px;
}
.messagelist tr > .size
{
width: 60px;
text-align: right;
padding: 0 2px;
}
.messagelist tr > .fromto,
.messagelist tr > .from,
.messagelist tr > .to,
.messagelist tr > .cc,
.messagelist tr > .replyto
{
width: 180px;
padding: 0 2px;
}
.messagelist tr > .date
{
width: 135px;
padding: 0 2px;
}
.messagelist tr > .folder
{
width: 135px;
}
.messagelist tr > .hidden
{
display: none;
}
.messagelist tr.message
{
background-color: #FFF;
}
.messagelist tr.unread
{
font-weight: bold;
background-color: #FFFFFF;
}
.messagelist tr.flagged td,
.messagelist tr.flagged td a
{
color: #CC0000;
}
/* This padding-left minus the focused padding left should be half of the focused border-left */
.messagelist thead tr th:first-child,
.messagelist thead tr td:first-child,
.messagelist tbody tr td:first-child {
border-left: 0;
padding-left: 6px;
}
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.messagelist tbody tr.focused > td:first-child {
border-left: 2px solid #d4d4d4;
padding-left: 4px;
}
.messagelist tbody tr.selected.focused > td:first-child {
border-left: 2px solid #ccc;
padding-left: 5px;
}
.messagelist tr.selected td
{
color: #FFFFFF;
background-color: #929292;
}
.messagelist.focus tr.selected td
{
background-color: #CC3333;
}
.messagelist tr.selected td a
{
color: #FFFFFF;
}
.messagelist tr.deleted td,
.messagelist tr.deleted td a
{
color: #CCCCCC;
}
#listmenu
{
padding: 6px;
max-height: none;
}
#listmenu legend
{
color: #999999;
}
#listmenu fieldset
{
border: 1px solid #999999;
margin: 0 5px;
float: left;
}
#listmenu div
{
padding: 8px 0 3px 0;
text-align: center;
clear: both;
}
/***** tree indicators *****/
td span.branch div
{
float: left;
height: 16px;
}
td span.branch div.tree
{
height: 17px;
width: 15px;
background: url(images/tree.gif) 0px 0px no-repeat;
}
td span.branch div.l1
{
background-position: 0px 0px; /* L */
}
td span.branch div.l2
{
background-position: -30px 0px; /* | */
}
td span.branch div.l3
{
background-position: -15px 0px; /* |- */
}
/** message view styles */
#messageframe
{
position: absolute;
top: 0;
left: 180px;
right: 0;
bottom: 0;
border: 1px solid #999;
background-color: #FFF;
overflow: auto;
z-index: 1;
}
.extwin #messageframe
{
left: 0;
}
div.messageheaderbox
{
margin: -14px 8px 0px 8px;
border: 1px solid #ccc;
}
table.headers-table
{
width: 100%;
background-color: #EBEBEB;
}
#messagebody #full-headers,
#messagebody table.headers-table
{
width: auto;
margin: 6px 8px;
background-color: #F4F4F4;
}
#messagebody.mailvelope {
padding: 10px 8px;
}
#messagebody table.headers-table
{
margin: 16px 6px 6px 6px;
}
div.message-partheaders + div.message-part
{
border-top: 0;
padding-top: 4px;
}
table.headers-table tr td
{
font-size: 11px;
border-bottom:1px solid #FFFFFF;
}
table.headers-table tr td.header-title
{
width: 1%;
color: #666666;
font-weight: bold;
text-align: right;
white-space: nowrap;
padding: 0 4px 0 8px;
}
table.headers-table tr td.header
{
width: 99%;
}
table.headers-table tr td.subject
{
font-weight: bold;
}
table.headers-table tr td.header span
{
white-space: nowrap;
}
#attachment-list
{
margin: 0;
padding: 0 4px 0 8px;
min-height: 16px;
list-style-image: none;
list-style-type: none;
background: url(images/icons/attachment.png) 4px 2px no-repeat #DFDFDF;
}
#messageframe #attachment-list
{
border-bottom: 1px solid #ccc;
}
.messageheaderbox #attachment-list
{
border-top: 1px solid #ccc;
}
#attachment-list:after
{
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#attachment-list li
{
float: left;
height: 18px;
font-size: 11px;
padding: 2px 0px 0px 15px;
white-space: nowrap;
}
#attachment-list li a
{
text-decoration: none;
}
#attachment-list li a:hover
{
text-decoration: underline;
}
#attachment-list li a.drop {
background: url(images/icons/down_small.gif) no-repeat center 6px;
width: 12px;
height: 16px;
cursor: pointer;
padding: 0;
margin-left: 3px;
display: inline-block;
vertical-align: middle;
}
#messagebody
{
position:relative;
padding-bottom: 10px;
background-color: #FFFFFF;
}
div.message-part,
div.message-htmlpart
{
padding: 10px 8px;
border-top: 1px solid #ccc;
/* overflow: hidden; */
}
#messagebody div:first-child
{
border-top: 0;
}
div.message-part a,
div.message-htmlpart a
{
color: #0000CC;
}
div.message-part div.pre
{
margin: 0px;
padding: 0px;
font-family: monospace;
font-size: 12px;
}
div.message-part span.sig
{
color: #666666;
}
div.message-part blockquote
{
color: blue;
border-left: 2px solid blue;
border-right: 2px solid blue;
background-color: #F6F6F6;
margin: 2px 0;
padding: 0 0.4em;
overflow: hidden;
text-overflow: ellipsis;
}
div.message-part blockquote blockquote
{
color: green;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.message-part blockquote blockquote blockquote
{
color: #990000;
border-left: 2px solid #bb0000;
border-right: 2px solid #bb0000;
}
#messagebody span.part-notice
{
display: block;
}
#message-objects div,
#messagebody span.part-notice
{
margin: 8px;
min-height: 20px;
padding: 10px 10px 6px 46px;
}
#message-objects div a,
#messagebody span.part-notice a
{
color: #666666;
padding-left: 10px;
}
#message-objects div a:hover,
#messagebody span.part-notice a:hover
{
color: #333333;
}
#messagebody fieldset.image-attachment {
border: 0;
border-top: 1px solid #ccc;
margin: 1em 1em 0 1em;
}
#messagebody fieldset.image-attachment p > img
{
max-width: 80%;
}
#messagebody legend.image-filename
{
color: #999;
font-size: 0.9em;
}
#messagebody p.image-attachment
{
margin: 0 1em;
padding: 1em;
border-top: 1px solid #ccc;
}
#messagebody p.image-attachment a.image-link
{
float: left;
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
{
font-size: 11px;
padding-right: 1em;
}
#messagebody p.image-attachment .attachment-links a
{
margin-right: 0.6em;
color: #cc0000;
font-size: 11px;
text-decoration: none;
}
#messagebody p.image-attachment .attachment-links a:hover
{
text-decoration: underline;
}
#messagelinks
{
position: absolute;
top: 8px;
right: 10px;
height: 16px;
text-align: right;
}
#messageframe #messagelinks
{
top: 2px;
right: 2px;
}
#compose-headers #openextwinlink
{
position: absolute;
height: 15px;
top: 4px;
right: 2px;
}
#full-headers
{
color: #666666;
text-align: center;
padding: 2px 6px;
border-bottom: 1px solid #ccc;
background-color: #EBEBEB;
}
.messageheaderbox #full-headers
{
border-bottom: 0;
}
div.more-headers
{
cursor: pointer;
height: 8px;
border-bottom: 0;
}
div.show-headers
{
background: url(images/icons/down_small.gif) no-repeat center;
}
div.hide-headers
{
background: url(images/icons/up_small.gif) no-repeat center;
}
#headers-source
{
margin: 2px 0;
padding: 0.5em;
height: 145px;
background: white;
overflow: auto;
font-size: 11px;
border: 1px solid #CCC;
display: none;
text-align: left;
color: #333;
}
/** message compose styles */
#compose-container
{
position: absolute;
top: 0;
left: 205px;
right: 0;
bottom: 0;
margin: 0;
}
#compose-div
{
position: absolute;
top: 85px;
right: 0;
left: 0;
bottom: 0;
margin: 0;
}
#compose-body-div
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 175px;
border: 1px solid #999;
}
-#compose-body-div .mce-tinymce {
+#compose-body-div .tox-tinymce {
border: 0 !important;
width: 100% !important;
}
-.mce-top-part::before {
- box-shadow: none !important;
-}
-
#compose-div .boxlistcontent
{
bottom: 23px;
}
#compose-body
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 9pt;
font-family: monospace;
resize: none;
border: none;
outline: none;
}
#compose-headers
{
width: 100%;
}
#compose-headers td.editfield
{
padding-right: 8px;
width: 95%;
}
#compose-headers td.top
{
vertical-align: top;
}
#compose-headers td.title,
#compose-subject td.title
{
width: 80px !important;
font-size: 11px;
font-weight: bold;
padding-right: 10px;
white-space: nowrap;
color: #666;
}
#compose-headers td textarea,
#compose-headers td input
{
resize: none;
width: 100%;
border: 1px solid #999;
}
#compose-headers td textarea
{
height: 32px;
}
input.from_address
{
width: 80% !important;
}
#compose-cc,
#compose-bcc,
#compose-replyto,
#compose-followupto
{
display: none;
}
#bounceheaders td.editfield {
width: 95%;
}
#compose-editorfooter
{
position: absolute;
right: 5px;
bottom: 0;
text-align: right;
line-height: 20px;
}
#compose-editorfooter label
{
font-size: 11px;
font-weight: bold;
color: #666;
}
#compose-buttons
{
position: absolute;
left: 5px;
bottom: 1px;
width: auto;
}
#compose-contacts
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 195px;
border: 1px solid #999;
background-color: #F9F9F9;
}
#compose-attachments
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #999;
background-color: #F9F9F9;
}
#compose-attachments.droptarget.hover
{
background-color: #F0F0EE;
box-shadow: 0 0 5px 0 #999;
-moz-box-shadow: 0 0 5px 0 #999;
-o-box-shadow: 0 0 5px 0 #999;
}
#compose-attachments ul
{
margin: 0px;
padding: 0px;
background-color: #FFF;
list-style-image: none;
list-style-type: none;
}
#compose-attachments ul li
{
position: relative;
height: 18px;
line-height: 16px;
font-size: 11px;
padding: 2px 16px 1px 2px;
border-bottom: 1px solid #EBEBEB;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#compose-attachments li a.delete,
#compose-attachments li a.cancelupload
{
text-indent: -5000px;
width: 17px;
height: 16px;
padding-bottom: 2px;
display: inline-block;
text-decoration: none;
vertical-align: middle;
background-position: 0px -392px;
}
#compose-attachments li img
{
vertical-align: middle;
}
#compose-attachments li span
{
line-height: 18px;
vertical-align: middle;
}
#compose-attachments li a.drop {
background: url(images/icons/down_small.gif) no-repeat center 8px;
width: 16px;
height: 22px;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
#upload-form,
#attachment-form
{
padding: 6px;
}
#upload-form div,
#attachment-form div
{
padding: 2px;
}
#upload-form div.buttons,
#attachment-form div.buttons
{
margin-top: 4px;
}
#quota
{
position: absolute;
top: 3px;
right: 8px;
width: 100px;
}
#quotaimg
{
position: absolute;
top: 3px;
right: 6px;
z-index: 101;
}
/* addressbook in compose - copy from addressbook.css */
#directorylist
{
list-style: none;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
#directorylist li
{
display: block;
font-size: 11px;
background: url(images/icons/folders.png) 5px -108px no-repeat;
border-bottom: 1px solid #EBEBEB;
white-space: nowrap;
}
#directorylist li a
{
cursor: default;
display: block;
padding-left: 25px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
white-space: nowrap;
height: 15px;
}
#directorylist li.selected
{
background-color: #929292;
border-bottom: 1px solid #898989;
}
#directorylist li.selected a
{
color: #FFF;
font-weight: bold;
}
#contacts-table
{
width: 100%;
table-layout: fixed;
}
#contacts-table tbody td
{
cursor: default;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#contacts-table td span.email
{
display: inline;
color: #ccc;
font-style: italic;
margin-left: 0.5em;
}
#abookcountbar
{
margin-top: 4px;
margin-left: 4px;
position: absolute;
margin-right: 5px;
right: 0;
top: 0;
}
#abookactions
{
position: absolute;
text-underline: none;
}
#abookactions a
{
font-weight: bold;
line-height: 22px;
height: 22px;
width: auto;
margin: 0;
padding-left: 5px;
padding-right: 5px;
text-shadow: 1px 1px white;
background: url("images/icons/groupactions.png") no-repeat right -70px;
}
#abookactions a.disabled
{
color: #999;
}
#compose-contacts .searchbox
{
top: 2px;
left: 7px;
}
#compose-contacts #directorylist
{
width: 100%;
top: 23px;
position: absolute;
border-top: 1px solid #eee;
}
#compose-contacts #contacts-table
{
top: 45px;
position: absolute;
}
-#image-selector {
- padding-bottom: 0 !important;
-}
-
/**** Styles for widescreen (3-column) view ****/
.widescreen #mailview-top {
bottom: 0;
width: 400px;
height: auto;
}
.widescreen #mailview-bottom {
left: 412px;
top:0;
border: 1px solid #a3a3a3;
}
#messagelistheader,
.widescreen #messagelistfooter #countcontrols,
.widescreen .messagelist > thead,
.widescreen .messagelist .branch,
.widescreen table.fixedcopy {
display: none;
}
#messagelistcontainer {
top: 0;
}
.widescreen #messagelistcontainer {
top: 21px;
overflow-x: hidden;
}
.widescreen #mailpreviewframe {
top: 0;
}
.widescreen #messagelistheader {
display: block;
top: 0;
white-space: nowrap;
border-top: 0;
border-bottom: 1px solid #999;
height: 20px;
}
.widescreen #messagelistheader .listmenu {
display: inline-block;
vertical-align: middle;
line-height: 16px;
width: 15px;
background: url(images/messageicons.png) 4px -236px no-repeat;
cursor: pointer;
overflow: hidden;
text-indent: -5000px;
padding: 2px 4px;
}
.widescreen .messagelist td {
border-left: 0;
vertical-align: top;
padding: 3px 1px 1px !important;
}
.widescreen .messagelist td.subject {
width: 99%;
white-space: wrap;
position: relative; /* for span.date positioning in Firefox */
}
.widescreen .messagelist td.threads {
width: 14px;
vertical-align: middle;
}
.widescreen .messagelist td.flags {
width: 20px;
}
.widescreen .messagelist td.subject span {
line-height: 16px;
}
.widescreen .messagelist td.subject span.date {
right: 2px;
top: 3px;
position: absolute;
color: #666;
}
.widescreen .messagelist td.subject span.fromto {
padding-left: 18px;
display: block;
margin-right: 90px;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
}
.widescreen .messagelist tr.flagged td.subject span.date,
.widescreen .messagelist tr.flagged td.subject span.fromto {
color: #ff0000;
}
.widescreen .messagelist tr.selected td.subject span.date,
.widescreen .messagelist tr.selected td.subject span.fromto {
color: #fff;
}
.widescreen .messagelist tr.deleted td.subject span.date,
.widescreen .messagelist tr.deleted td.subject span.fromto {
color: #ccc;
}
.widescreen .messagelist td.subject span.subject {
clear: both;
display: block;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
}
.widescreen .messagelist td.flags span {
width: 20px;
height: 18px;
display: block;
}
.widescreen .messagelist td.flags span.flag {
cursor: pointer;
}
.widescreen .messagelist tr td.subject span.msgicon,
.widescreen .messagelist tr td.subject span.unreadchildren {
width: 18px;
margin: 0;
}
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 56a96f7a1..cb5daec1f 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -1,267 +1,271 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) 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 authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@color-main: #37beff;
@color-main-dark: darken(@color-main, 35%);
@color-black: #161b1d;
@color-font: lighten(@color-black, 10%);
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
@color-success: #41b849;
@color-warning: #ffd452;
@color-black-shade-text: tint(@color-black, 40%);
@color-black-shade-border: lighten(@color-black, 75%);
@color-black-shade-bg: lighten(@color-black, 85%);
// Layout elements
@color-layout-border: @color-black-shade-border;
@color-layout-header: @color-font;
@color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
@color-layout-header-background: #f4f4f4;
@color-layout-footer-background: #fff;
@color-layout-mobile-header-background: @color-layout-header-background;
@color-layout-mobile-footer-background: @color-layout-header-background;
// Task menu
@color-taskmenu-background: #2f3a3f;
@color-taskmenu-button: #fff;
@color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: @color-main;
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: transparent;
@color-taskmenu-button-hover: #fff;
@color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: @color-main;
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
@color-taskmenu-button-logout-hover: @color-error;
// Toolbar
@color-toolbar-button: @color-font;
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
@color-searchbar-background: #fbfbfb;
// Toolbar menu
@color-menu-hover: #fff;
@color-menu-hover-background: @color-main;
// Listings
@color-list: @color-font;
@color-list-selected: @color-font;
@color-list-selected-background: tint(@color-main, 90%);
@color-list-flagged: @color-error;
@color-list-deleted: fadeout(@color-font, 50%);
@color-list-secondary: @color-black-shade-text;
@color-list-droptarget-background: #ffffcc;
@color-list-focus-indicator: lighten(@color-main, 20%);
@color-list-border: @color-black-shade-bg;
@color-list-badge: #fff;
@color-list-badge-background: @color-main;
@color-list-recent: darken(@color-main, 20%);
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-main;
@color-list-pagenav: @color-black-shade-text;
@color-list-icon: fadeout(@color-list-secondary, 25%);
@color-list-unread-status: @color-warning;
@color-attachmentlist-border: #f4f4f4;
@color-attachmentlist-background: #fcfcfc;
// Drag-n-drop layer
@color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background;
@color-drag-layer-shadow: @color-black-shade-bg;
// Messages
@color-message: @color-font;
@color-message-border: transparent;
@color-message-background: fadeout(@color-main, 95%);
@color-message-text: #fff;
@color-message-link: @color-main;
@color-message-link-font-weight: normal;
@color-message-information: @color-main;
@color-message-success: @color-success;
@color-message-warning: @color-warning;
@color-message-error: @color-error;
@color-message-loading: tint(@color-font, 30%);
@color-message-information-text: @color-message-text;
@color-message-success-text: @color-message-text;
@color-message-warning-text: @color-message;
@color-message-error-text: @color-message-text;
@color-message-loading-text: @color-message-text;
@color-message-error-box: @color-message;
@color-message-information-box: @color-message;
@color-message-success-box: @color-message;
@color-message-warning-box: @color-message;
@color-message-error-box-background: fadeout(@color-message-error, 80%);
@color-message-information-box-background: fadeout(@color-message-information, 80%);
@color-message-success-box-background: fadeout(@color-message-success, 80%);
@color-message-warning-box-background: fadeout(@color-message-warning, 80%);
// Popovers (menus)
@color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: @color-black-shade-bg;
@color-popover-mobile-header: #fff;
@color-popover-mobile-header-background: @color-main-dark;
@color-popover-mobile-dropbutton-background: #f6f6f6;
// Dialogs
@color-dialog-overlay-background: fade(@color-font, 50%);
@color-dialog-header: @color-layout-header;
@color-dialog-header-border: @color-border;
@color-spinner-circle: @color-black-shade-bg;
@color-spinner-item: @color-black-shade-text;
// Forms
@color-input: @color-font;
@color-input-border: #ced4da; // from Bootstrap's .form-control
@color-input-border-focus: @color-main;
@color-input-border-focus-shadow: fadeout(@color-main, 75);
@color-input-border-invalid: @color-error;
@color-input-border-invalid-shadow: fadeout(@color-error, 75);
@color-input-addon-background: @color-black-shade-bg;
@color-recipient-input-border: @color-input-border;
@color-recipient-input-background: @color-black-shade-bg;
@color-input-placeholder: #bbb;
@color-checkbox: @color-main;
@color-checkbox-checked: @color-main;
@color-checkbox-checked-disabled: lighten(@color-main, 15%);
@color-checkbox-focus: @color-input-border-focus;
@color-checkbox-focus-shadow: @color-input-border-focus-shadow;
@color-form-hint: @color-black-shade-text;
@color-image-upload-background: #f4f4f4;
@color-btn-secondary: #fff;
@color-btn-secondary-background: lighten(@color-black, 50%);
@color-btn-primary: #fff;
@color-btn-primary-background: @color-main;
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
@color-quota-background: #fff;
@color-quota-text: @color-black-shade-text;
@color-quota-value: @color-main;
@color-quota-value-warning: @color-error;
@color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
@color-blockquote-0: darken(@color-main, 30%);
@color-blockquote-1: darken(@color-success, 25%);
@color-blockquote-2: darken(@color-error, 20%);
@color-blockquote-0-border: @color-blockquote-0;
@color-blockquote-1-border: @color-blockquote-1;
@color-blockquote-2-border: @color-blockquote-2;
@color-mail-signature: @color-black-shade-text;
@color-mail-headers: @color-black-shade-text;
@color-messagepart-border: #f4f4f4;
@color-messagepart-background: #fcfcfc;
@color-spellcheck-link: @color-error;
@color-table-border: @color-layout-border;
@color-table-selected: @color-list-selected;
@color-table-selected-background: @color-list-selected-background;
// Datepicker
@color-datepicker-border: @color-layout-border;
@color-datepicker-font: @color-font;
@color-datepicker-highlight: @color-main;
@color-datepicker-highlight-background: lighten(@color-main, 30%);
@color-datepicker-active: #fff;
@color-datepicker-active-background: @color-main;
+// HTML editor
+@color-editor-disabled-mask: fadeout(lighten(@color-black, 85), 10);
+
+
// Image tools
@color-image-tools: #fff;
@color-image-tools-background: fadeout(@color-main, 60%);
@color-image-tools-hover: fadeout(@color-main, 50%);
// Dark mode colors
@color-dark-main: darken(@color-main, 30%);
@color-dark-background: #21292c;
@color-dark-font: #c5d1d3;
@color-dark-border: #4d6066;
@color-dark-hint: darken(@color-dark-font, 20%);
@color-dark-information: shade(@color-main, 40%);
@color-dark-success: shade(@color-success, 40%);
@color-dark-warning: shade(@color-warning, 40%);
@color-dark-error: shade(@color-error, 40%);
@color-dark-list-selected: @color-main;
@color-dark-list-selected-background: #374549;
@color-dark-list-badge: lighten(@color-dark-font, 10%);
@color-dark-list-badge-background: @color-dark-border;
@color-dark-list-deleted: darken(@color-dark-hint, 15%);
@color-dark-list-droptarget-background: #4d4d00;
@color-dark-list-border: #2c373a;
@color-dark-input: @color-dark-font;
@color-dark-input-border: #7c949c;
@color-dark-input-background: @color-dark-background;
@color-dark-input-focus: #e2e7e9;
@color-dark-input-border-focus: @color-main;
@color-dark-input-background-focus: lighten(@color-dark-background, 5%);
@color-dark-input-addon-background: #374549;
@color-dark-checkbox: @color-dark-border;
@color-dark-checkbox-checked: @color-dark-main;
@color-dark-btn: lighten(@color-dark-font, 10%);
@color-dark-btn-primary-background: @color-dark-main;
@color-dark-btn-secondary-background: @color-dark-border;
@color-dark-btn-danger-background: @color-dark-error;
@color-dark-dialog-overlay-background: fade(black, 70%);
@color-dark-popover-background: #161b1d;
@color-dark-popover-border: lighten(#161b1d, 50%);
@color-dark-message-information: @color-dark-information;
@color-dark-message-success: @color-dark-success;
@color-dark-message-warning: @color-dark-warning;
@color-dark-message-error: @color-dark-error;
@color-dark-message-loading: lighten(@color-dark-background, 10%);
@color-dark-scrollbar-thumb: @color-dark-main;
@color-dark-scrollbar-track: @color-dark-border;
@color-dark-blockquote-0: lighten(@color-main, 10%);
@color-dark-blockquote-1: lighten(@color-success, 10%);
@color-dark-blockquote-2: lighten(@color-error, 10%);
@color-dark-blockquote-0-border: @color-dark-blockquote-0;
@color-dark-blockquote-1-border: @color-dark-blockquote-1;
@color-dark-blockquote-2-border: @color-dark-blockquote-2;
diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index 666f94ebf..38bf2f0d0 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/skins/elastic/styles/widgets/dialogs.less
@@ -1,255 +1,256 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) 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 authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Dialogs and popovers ***/
.popupmenu {
display: none;
padding: 0;
min-width: 180px;
height: 100%;
li > a {
width: 100%;
}
&.propform {
overflow: hidden;
padding: .25rem; // so overflow do not truncate focus outline on inputs
}
&.simplelist {
min-width: 80px;
}
}
.popup.justified {
display: flex;
justify-content: space-around;
}
.popover-body {
padding: 0;
overflow-x: hidden;
& > .popupmenu {
display: block !important;
}
}
.popover {
box-shadow: 3px 3px 5px @color-popover-shadow;
border-color: @color-layout-border;
padding: 0;
.popover-header {
// On mobile don't display popup arrows and titles
display: none;
}
@media screen and (min-width: (@screen-width-small + 1px)) {
.listing {
li:first-child {
border-radius: .25rem .25rem 0 0;
}
li:last-child {
border-radius: 0 0 .25rem .25rem;
}
}
}
}
html.layout-small,
html.layout-phone {
.popover:not(.select-menu) {
margin: 0 !important;
padding: 0;
right: 0;
left: initial !important;
bottom: 0;
top: 0;
width: @layout-mobile-menu-width;
transform: none !important;
border-radius: 0;
border: 0;
display: flex;
flex-direction: column;
box-shadow: none;
div.arrow {
display: none;
}
.listing li:last-child {
border-bottom: 1px solid @color-list-border;
}
}
.popover-overlay {
z-index: 1000;
background-color: @color-dialog-overlay-background;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.popover-header {
display: block;
border-radius: 0;
border: 0;
padding: 0 .5em;
height: @layout-touch-header-height;
min-height: @layout-touch-header-height; // for when it's a flex item
line-height: @layout-touch-header-height;
font-size: @layout-touch-header-font-size;
color: @color-popover-mobile-header;
background-color: @color-popover-mobile-header-background;
&:before {
display: none; // hide the Bootstrap's popover arrow element
}
a {
display: inline-block;
width: 100%;
}
}
.popover-body > * {
max-height: 100% !important;
}
}
html.touch .popover {
.listing {
li a {
line-height: @layout-touch-menu-record-height;
font-size: @layout-touch-menu-record-font-size;
padding: 0 .5em;
&:before {
float: left; // overwrite icon float to have unified element height
}
}
}
}
.select-menu {
max-width: initial;
margin: 0;
height: auto;
+ z-index: 1300; // above TinyMCE dialogs
.popover-header {
border-radius: .25rem .25rem 0 0 !important;
}
.listing li {
a {
padding-left: .25rem;
outline: 0; // for Android browser
}
&:last-child {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
}
// Use 'inline' class for menus that have a list elements with no <a> inside
// and no header
&.inline {
.listing li {
padding-right: .5rem;
&:first-child {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
}
}
}
/** PGP Key search/import dialog **/
.pgpkeyimport {
div.key {
position: relative;
padding: .5rem 0;
&.revoked,
&.disabled {
color: @color-list-secondary;
}
label {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0;
&:after {
content: ":";
}
&.keyid {
display: none;
}
}
label + a,
label + span {
line-height: 2.6rem;
margin-right: 1em;
white-space: nowrap;
text-decoration: none;
}
label.keyid + a {
font-weight: bold;
&:before {
&:extend(.font-icon-class);
content: @fa-var-key;
}
}
}
ul.uids {
margin: 0;
padding: 0;
}
li.uid {
border: 0;
padding: .25rem 0 0 1.5em;
line-height: 1.5rem !important;
list-style-type: none;
&:before {
&:extend(.font-icon-class);
content: @fa-var-user;
opacity: 0.25;
font-size: 1em;
line-height: 1.25;
}
}
button.importkey {
position: absolute;
top: .5rem;
right: 0;
}
button:disabled {
display: none;
}
}
diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index 74c2a10ff..a8c5d0df3 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -1,966 +1,524 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) 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 authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Text Editor widget (and TinyMCE editor) ***/
-.mce-tinymce {
- &.mce-container.mce-panel {
- border-radius: .25rem;
- border-color: @color-input-border;
- overflow: hidden;
- }
+// use of div.tox instead of just .tox is to have prio over TinyMCE styles
+div.tox {
+ font-size: 1rem;
- .mce-btn,
- .mce-panel {
- background-color: @color-input-addon-background;
+ &, :not(.svg) {
+ .font-family;
}
- .mce-panel {
- border-color: @color-input-border;
+ &.tox-tinymce {
+ border-radius: .25rem;
+ border: 1px solid @color-input-border;
}
&.focused {
border-color: @color-input-border-focus !important;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
}
-}
-.mce-top-part::before,
-.mce-tinymce,
-.mce-window {
- box-shadow: none !important;
-}
+ .tox-toolbar-overlord {
+ z-index: 1; // for sticky header feature
-.mce-btn {
- &.mce-active {
- background: @color-btn-secondary-background !important;
+ & > div {
+ // The svg is copied from TinyMCE with modified height params
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E");
+ background-color: @color-input-addon-background;
+ }
}
-}
-.mce-window {
- &.mce-container {
- border: 0;
+ .tox-toolbar__primary {
+ border-top: 0;
+ }
- & :not(.mce-ico) {
- .font-family;
- }
+ // This one is for mobile
+ .tox-toolbar {
+ background-color: @color-input-addon-background;
}
- .mce-reset {
- background: #fff;
+ .tox-edit-area {
+ border: 0;
}
- .mce-container-body {
- &.mce-abs-layout {
- overflow: unset;
+ .tox-dialog {
+ border-radius: 0;
+ border-color: @color-layout-border;
+ box-shadow: none;
+ align-self: unset !important;
+
+ .tox-form__group {
+ margin-top: 0;
+ margin-bottom: .75rem;
}
- .mce-abs-end {
- display: none;
+ .tox-dialog__body-nav-item--active {
+ color: @color-link;
+ border-color: transparent;
+
+ &:hover {
+ color: @color-link-hover;
+ }
}
}
- .mce-window-head {
- height: @layout-header-height;
+ .tox-dialog__body-content {
+ overflow: unset;
+ }
+
+ .tox-dialog-wrap__backdrop {
+ background-color: @color-dialog-overlay-background;
+ }
+
+ .tox-dialog__header {
+ height: (@layout-header-height - 1px);
border-bottom: 1px solid @color-dialog-header-border;
+ justify-content: flex-end; // fixes close button position when dialog has no title
padding: 0;
- .mce-title {
- line-height: @layout-header-height;
- font-size: 1.25rem;
- padding: 0 3rem 0 1rem;
+ .tox-button {
color: @color-dialog-header;
- }
-
- .mce-close {
- border: 0;
- color: @color-dialog-header;
- background: transparent;
right: 0;
- top: 0;
- position: absolute;
- height: (@layout-header-height - .75rem);
- width: 1.25em;
- margin: 0 .25rem;
- padding: .1rem .75rem;
- cursor: pointer;
- outline: 0;
+ height: (@layout-header-height - .7rem);
+ width: 2.25em;
+ margin-right: .4rem;
- &:before {
- &:extend(.font-icon-class);
- content: @fa-var-times;
- margin: 0;
+ &:hover {
+ background: transparent;
+ border-color: transparent;
}
- i {
+ .tox-icon {
display: none;
}
+
+ &:before {
+ &:extend(.font-icon-class);
+ content: @fa-var-times;
+ line-height: 1.5rem;
+ margin: 0 !important;
+ }
}
}
- .mce-foot {
+ .tox-dialog__footer {
+ height: (@layout-footer-height - 1px) !important;
border: 0;
- height: @layout-header-height !important;
- position: relative;
+ margin: 0;
+ padding: 0 1rem;
@media screen and (max-width: @screen-width-xs) {
border-top: 1px solid @color-dialog-header-border;
}
- .mce-container-body {
- height: 100% !important;
- display: flex;
- align-items: center;
- justify-content: flex-end; // just 'end' does not work in Chrome
-
- .mce-btn {
- position: initial;
- margin-right: .5rem;
- line-height: 1;
- width: auto !important;
- height: auto !important;
-
- &:last-child {
- margin-right: 1rem;
- }
-
- .mce-txt {
- line-height: 1.5;
- vertical-align: unset;
- }
+ & > div {
+ white-space: nowrap;
+ max-height: (@layout-footer-height - 1px);
- button:before {
- &:extend(.font-icon-class);
- display: inline;
- float: none;
- vertical-align: middle;
- margin-right: .4rem;
- }
- }
-
- .mce-abs-end {
- position: initial;
- width: 1rem;
- order: 9;
+ button:first-child {
+ margin: 0;
}
}
- .mce-btn {
- .btn-secondary;
- border-radius: .3rem;
- border-color: transparent;
+ .tox-button {
+ .btn-primary;
+ font-weight: normal;
+ padding: .5rem .75rem;
- &:focus {
- border-color: transparent !important;
- color: @color-btn-secondary;
- background: @color-btn-secondary-background;
+ &:before {
+ &:extend(.font-icon-class);
+ width: 1em;
+ content: @fa-var-check;
}
- &.mce-primary {
- .btn-primary;
+ // this is redundant, but required because of tinymce styles interference
+ &:focus:not(:disabled) {
+ background: @color-btn-primary-background;
+ border-color: @color-btn-primary-background;
}
- button:hover,
- button {
+ &.tox-button--secondary {
+ .btn-secondary;
color: @color-btn-secondary;
- padding: .5rem .75rem;
- }
- }
-
- .mce-btn:last-child button:before {
- content: @fa-var-times;
- }
-
- .mce-btn.mce-primary button:before {
- content: @fa-var-check;
- }
-
- .mce-search-foot {
- div:nth-of-type(2) button:before {
- content: @fa-var-search;
- }
- div:nth-of-type(3) button:before,
- div:nth-of-type(4) button:before {
- content: @fa-var-pencil-alt;
- }
- div:nth-of-type(6) button:before {
- content: @fa-var-chevron-left;
- }
- div:nth-of-type(7) button:before {
- content: @fa-var-chevron-right;
- }
- div:nth-of-type(7) button:after {
- &:extend(.font-icon-class);
- display: inline;
- float: none;
- margin: 0 0 0 .2rem;
- content: @fa-var-chevron-right;
- }
- @media screen and (min-width: (@screen-width-xs + 1px)) {
- div:nth-of-type(6) {
- margin-left: .5rem;
+ &:before {
+ content: @fa-var-times;
}
- div:nth-of-type(7) button {
- &:before {
- display: none;
- }
+
+ // this is redundant, but required because of tinymce styles interference
+ &:focus:not(:disabled) {
+ background: @color-btn-secondary-background;
+ border-color: @color-btn-secondary-background;
}
}
}
}
- // Form elements, let's keep'em in .mce-window to make overwriting simpler
-
- .mce-formitem {
- min-width: 450px;
- position: unset !important;
-
- & > .mce-container-body {
- margin-bottom: .5rem;
-
- & > * {
- width: 75% !important;
- position: unset !important;
- }
-
- & > label {
- max-width: 25%;
- min-width: 25%;
- line-height: 2.5 !important;
- }
+ .tox-search-dialog {
+ .tox-form__group:not(:first-child) {
+ flex: initial !important;
}
- .mce-widget {
- border-radius: .25rem;
- }
- }
-
- .mce-form {
- padding: 1rem;
- box-sizing: border-box;
-
- .mce-form {
- padding: 0;
- position: unset !important;
- width: 100% !important;
-
- & > .mce-container-body {
- flex-wrap: wrap;
- height: auto !important;
- }
-
- .mce-formitem {
- min-width: 100%;
- width: 100% !important;
+ .tox-dialog__footer-start {
+ button {
+ padding: .25rem;
}
}
- .mce-container {
- height: auto !important;
-
- .mce-container-body {
- display: flex;
- height: auto !important;
-
- & > input:not([size="5"]) {
- position: relative;
- left: 0 !important;
- flex: 1;
+ .tox-dialog__footer-end {
+ button {
+ &:before {
+ content: @fa-var-pencil-alt !important;
}
- }
- }
-
- & > .mce-container-body {
- box-sizing: border-box;
- width: 100% !important;
- }
-
- .mce-form-split {
- .mce-formitem {
- min-width: auto;
-
- & > .mce-container-body {
- width: 100% !important;
+ &:nth-of-type(1):before {
+ content: @fa-var-search !important;
}
}
}
-
- label {
- position: unset;
- line-height: 2.5 !important;
- height: auto !important;
- }
}
- .mce-colorpicker {
- & + .mce-form {
- width: 150px !important;
- padding: 0;
+ .tox-dialog__title {
+ line-height: @layout-header-height;
+ font-size: 1.25rem;
+ font-weight: bold;
+ padding: 0 0 0 1rem;
+ width: 100%;
+ color: @color-dialog-header;
+ }
- .mce-formitem {
- min-width: unset;
+ // Make toolbar buttons smaller
+ .tox-tbtn {
+ height: 28px;
- & + :not(.mce-formitem) {
- height: 50px !important;
- }
- }
+ &:not(.tox-tbtn--select,.tox-split-button__chevron) {
+ width: 32px;
}
}
- .mce-textbox {
- padding: .375rem .75rem !important;
- line-height: 1.5;
+ .tox-label {
color: @color-font;
+ padding-bottom: .25rem;
+ }
- &:not(textarea) {
- height: auto !important;
- }
+ // Adding .form-control does not work with TinyMCE skins,
+ // so we have to overwrite some props here
+ .tox-color-input > input,
+ .tox-selectfield select,
+ .tox-textarea,
+ .tox-textfield {
+ .font-family !important;
+ font-size: @page-font-size;
+ line-height: 1.5;
+ color: @color-font;
+ border-radius: .25rem;
+ min-height: 0;
+ padding: .375rem .75rem;
&:focus {
- color: @color-font;
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}
-
- &[size="5"] {
- width: auto !important;
- }
-
- &.mce-multiline {
- line-height: 1.25;
- width: 100% !important;
- position: unset;
- box-sizing: border-box;
- display: block;
- }
}
- .mce-listbox {
- button {
- line-height: 1.5;
- padding: .375rem .75rem;
- }
-
- &:focus {
- border-color: @color-input-border-focus !important;
- box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
- }
+ .tox-color-input span {
+ top: 5px;
}
- .mce-checkbox {
- line-height: 2.5;
-
- i.mce-i-checkbox {
- border: 0;
- width: auto;
- color: @color-checkbox;
- text-indent: 0;
-
- &:before {
- &:extend(.font-icon-class);
- margin: 0;
- content: @fa-var-toggle-off;
- }
- }
+ .custom-switch {
+ position: relative;
+ font-size: 1rem;
+ margin-top: .15rem;
- &.mce-checked i.mce-i-checkbox:before {
- content: @fa-var-toggle-on;
+ .tox-checkbox__icons {
+ display: none;
}
- &:focus {
- i.mce-i-checkbox {
- border: 0;
- }
+ .tox-checkbox__label {
+ margin: 0;
}
}
- .mce-combobox {
- display: flex;
-
- input {
- border-radius: .3rem 0 0 .3rem;
- flex: 1;
-
- &:focus {
- z-index: 1;
- }
- }
-
- &.mce-combobox-fake {
- input {
- border-radius: .3rem;
- }
- }
-
+ .image-selector {
+ font-size: 1rem;
button {
- padding: .4rem .6rem;
- }
-
- .mce-btn {
- border-radius: 0 .3rem .3rem 0;
- background: @color-input-addon-background;
-
- &:focus {
- background-color: @color-input-border-focus-shadow;
- border-color: #c5c5c5;
- }
- }
- }
-
- .mce-tabs {
- padding-top: 1rem;
- margin: 0 1rem;
- border-color: @color-layout-border;
-
- .mce-tab {
- border-radius: .25rem .25rem 0 0;
- padding: .5rem 1rem;
- height: auto !important;
- border: 1px solid transparent;
- color: @color-link;
- background: transparent;
- margin-bottom: -1px;
-
- &.mce-active {
- border: 1px solid @color-layout-border;
- border-bottom-color: #fff;
- color: @color-font !important;
- }
-
- &:not(.mce-active):hover {
- border: 1px solid @color-list-border;
- border-bottom-color: transparent;
- border-bottom: 0;
- }
-
- &:focus {
- outline: unset !important;
- }
+ .btn-secondary;
+ padding: .5rem .75rem;
+ line-height: 1.5;
}
}
- .mce-label {
- text-shadow: none;
- color: @color-font;
- }
-}
-
-
-// Menus and popovers, e.g. color selector, emoticons selector, font selector
-.mce-menu,
-.mce-floatpanel.mce-popover {
- box-shadow: 3px 3px 5px @color-popover-shadow !important;
- border-color: @color-layout-border !important;
- border-radius: .3rem;
-}
-
-.mce-menu {
- .mce-menu-item.mce-active {
- color: @color-menu-hover;
- background-color: @color-menu-hover-background;
+ // small fix for image dialog
+ .tox-form__controls-h-stack div:not(:last-child) {
+ flex: 1;
}
- .popover-header {
- display: none !important;
+ .tox-collection__item-label {
+ white-space: nowrap; // fix TinyMCE bug
}
}
-div.mce-menubtn.mce-opened {
- z-index: 65530 !important; // BUG: https://github.com/tinymce/tinymce/issues/4542
-}
-
-#mce-modal-block.mce-in {
- background-color: @color-dialog-overlay-background;
- opacity: 1 !important;
-}
-
@media screen and (max-width: @screen-width-xs) {
- .mce-window {
- width: 100% !important;
- height: 100% !important;
- left: 0 !important;
- top: 0 !important;
- border-width: 0 !important;
-
- & > .mce-reset {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
-
- .mce-window-body {
- flex: 1;
- overflow-y: auto !important;
- }
-
- & > .mce-reset > div,
- .mce-container-body {
+ div.tox {
+ .tox-dialog {
+ margin: 0 !important;
width: 100% !important;
+ height: 100%;
+ left: 0 !important;
+ top: 0 !important;
+ border-width: 0 !important;
}
- .mce-window-head {
+ .tox-dialog__header {
background-color: @color-layout-mobile-header-background;
- .mce-title {
- font-size: 1rem;
- text-align: center;
- padding: 0 1rem;
- }
-
- .mce-close {
+ .tox-button {
display: none;
}
}
- .mce-foot {
- background-color: @color-layout-mobile-footer-background;
-
- .mce-container-body {
- justify-content: space-evenly;
-
- .mce-btn {
- position: initial;
- height: 100% !important;
- margin: 0;
- background: transparent;
- border-width: 0;
-
- &:focus {
- box-shadow: none;
- }
-
- &:hover {
- background: transparent;
- }
-
- &:last-child {
- margin: 0;
- }
-
- button {
- color: @color-font;
- padding: .45rem;
- font-size: .9rem;
-
- &:before {
- display: block;
- float: none;
- width: 100%;
- margin: 0;
- line-height: 1.75;
- height: 1.75rem;
- }
- }
- }
-
- .mce-abs-end {
- display: none;
- }
- }
-
- .mce-search-foot {
- div:nth-of-type(7) button:after {
- display: none;
- }
- }
+ .tox-dialog__title {
+ font-size: 1rem;
+ text-align: center;
+ padding: 0 1rem;
}
- .mce-form,
- .mce-form + .mce-container, // for Embed tab in Media dialog
- .mce-formitem,
- .mce-combobox,
- .mce-panel:not(.mce-popover) {
- width: 100% !important;
- }
-
- .mce-formitem {
- min-width: unset;
- }
-
- .mce-form {
- & > .mce-container-body {
- display: flex;
- flex-direction: column;
- left: 0;
- right: 0;
- box-sizing: border-box;
- }
-
- .mce-container-body {
- height: auto !important;
- flex-direction: column;
-
- & > label {
- position: unset !important;
- width: 100% !important;
- max-width: 100%;
- }
-
- & > label + * {
- position: unset !important;
- width: auto !important;
- }
-
- & > .mce-checkbox {
- position: absolute;
- left: 0 !important;
- top: 3rem !important;
- }
- }
- }
-
- // FIXME: How to fix the input width in less hacky way?
- .mce-combobox input {
- max-width: ~"calc(100% - 4rem)";
- }
- .mce-combobox-fake input {
- max-width: ~"calc(100% - 1.7rem)";
- }
- }
-
- .mce-menu {
- width: @layout-mobile-menu-width !important;
- right: 0;
- top: 0 !important;
- left: auto !important;
- height: 100% !important;
- max-height: unset !important;
- padding: 0 !important;
- margin: 0 !important;
- border-radius: 0;
- border: 0 !important;
-
- .popover-header {
- display: block !important;
+ .tox-dialog__footer {
+ background-color: @color-layout-mobile-footer-background;
- a {
- font-size: 1.2rem;
- line-height: @layout-touch-header-height;
+ .tox-button {
+ color: @color-font !important;
+ background: transparent !important;
+ padding: .45rem;
+ margin: 0 !important;
+ border: 0;
+ font-size: 90%;
&:before {
- content: @fa-var-times;
- }
- }
- }
-
- .mce-container-body {
- width: 100% !important;
- }
-
- .mce-menu-item {
- height: @layout-touch-menu-record-height;
- line-height: @layout-touch-menu-record-height;
- padding: 0 .5rem;
- border-left: 0;
- border-bottom: 1px solid @color-list-border;
- margin: 0;
-
- .mce-ico {
- font-size: 150%;
- padding: 0 .7rem 0 .25rem;
- margin-top: -.2rem;
- }
-
- .mce-text {
- font-size: 1.2rem;
- .font-family;
- line-height: @layout-touch-menu-record-height;
- color: @color-font;
- }
-
- .mce-caret {
- display: none;
- }
-
- &.mce-menu-item-preview {
- &.mce-active {
- border-left: none;
- position: relative;
-
- &:after {
- .font-icon-class; // :extend() does not work here
- content: @fa-var-check;
- position: absolute;
- right: .5rem;
- top: 0;
- color: @color-font;
- }
+ display: block;
+ float: none;
+ width: 100%;
+ margin: 0;
+ line-height: 1.75;
+ height: 1.75rem;
}
- }
- &.mce-menu-item-expand {
- position: relative;
-
- &:after {
- .font-icon-class; // :extend() does not work here
- content: @fa-var-angle-right;
- position: absolute;
- right: .5rem;
- top: 0;
+ &:active,
+ &:focus,
+ &:hover {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
color: @color-font;
}
}
- }
- }
-
- .mce-menu-item-sep,
- .mce-menu-shortcut {
- display: none !important;
- }
-
- .mce-charmap-dialog {
- position: unset !important;
-
- + .mce-container {
- display: none;
- }
- }
-
- .mce-charmap {
- display: block;
-
- tbody {
- display: block;
- }
- tr {
- display: flex;
- flex-wrap: wrap;
- }
+ & > div {
+ justify-content: space-evenly;
+ display: flex;
+ width: 100%;
- td {
- flex: 1;
- height: auto !important;
- min-width: 17%;
- padding: 0 !important;
- border: 0 !important;
- border-bottom: 1px solid @color-list-border !important;
-
- div {
- font-size: 3rem;
- line-height: 2;
+ &:empty {
+ display: none;
+ }
}
}
}
}
-html.touch .mce-grid td {
- padding: .5rem;
-}
-
-
/*** Media file selector for TinyMCE ***/
.image-selector {
- margin: 1rem 1rem 1rem 1rem !important;
padding: 1rem .5rem 10rem .5rem !important;
&.droptarget {
border: .2rem dashed @color-table-border;
&:after {
margin-top: 2rem;
}
}
- button {
- .btn-secondary;
- padding: .5rem .75rem;
- line-height: 1.5;
- position: relative;
-
- &:before {
- line-height: 1;
- }
- }
-
form {
position: absolute;
top: 0;
}
.attachmentslist {
- margin-left: 0;
+ margin: 0;
overflow-x: hidden;
overflow-y: auto;
height: 19.1em;
+ padding: 0 !important;
li {
padding: .25rem;
cursor: pointer;
&:before {
display: none;
}
&:hover,
&:focus {
background: @color-list-selected-background;
}
span.name {
flex: 1;
margin: auto;
padding-left: 1rem;
.overflow-ellipsis;
}
span.img {
height: 80px;
width: 80px;
display: flex;
border: 1px solid @color-list-border;
background: white;
border-radius: .75rem;
overflow: hidden;
}
img {
margin: auto;
}
}
html.layout-phone & {
height: auto;
}
}
}
/*** HTML editor widget ***/
.html-editor {
position: relative;
margin-bottom: .2rem;
.editor-toolbar {
position: absolute;
left: 1px;
top: 1px;
right: 1px;
border-radius: .25rem .25rem 0 0;
border-bottom: 1px solid @color-input-border;
background-color: @color-input-addon-background;
.mce-i-html {
display: block;
- padding: 1px 5px;
- margin: 2px;
- width: 2rem;
- height: 24px;
- border: 1px solid transparent;
- color: #595959;
+ margin: 2px 2px 2px 4px;
+ width: 34px;
+ height: 28px;
+ border-radius: .25rem;
+ color: #222f3e; // from TinyMCE
&:focus,
&:hover {
text-decoration: none;
border-color: #e2e4e7;
- background-color: #fff;
+ background-color: #dee0e2; // from TinyMCE
+ }
+
+ &:before {
+ &:extend(.font-icon-class);
+ content: @fa-var-image;
+ margin: 0;
+ width: 34px;
+ line-height: 28px;
}
}
}
// hide toolbar in html mode and in mailvelope mode
&.mailvelope .editor-toolbar,
- .mce-tinymce + textarea + .editor-toolbar {
+ .tox-tinymce + .editor-toolbar {
display: none;
}
- .mce-i-html:before,
- .mce-i-plaintext:before {
- &:extend(.font-icon-class);
- margin: 0;
- width: 1em;
- font-size: 1.2rem;
- }
-
- .mce-i-html:before {
- content: @fa-var-image;
- line-height: 1.2em;
- }
-
- .mce-i-plaintext:before {
- content: @fa-var-window-close; //@fa-var-align-justify;
- }
-
& > .googie_edit_layer,
& > textarea {
font-family: monospace;
font-size: 13px;
width: 100% !important;
- padding-top: 2.5rem;
+ padding-top: 48px;
resize: none;
}
& > iframe { // e.g. mailvelope frame
border-radius: .3rem;
border: 1px solid @color-input-border;
min-height: 30em;
}
- #composebody_ifr {
- min-height: 30em;
+ & > .tox-tinymce.focused {
+ border-color: @color-input-border-focus;
+ box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
}
}
/*** GoogieSpell widget ***/
.googie_window {
width: 16rem;
height: auto;
}
.googie_edit_layer {
font-family: monospace;
// from Bootstrap's textarea
padding: .5rem .75rem;
border: 1px solid @color-input-border;
border-radius: .3rem;
line-height: 1.5;
}
.googie_link {
color: @color-spellcheck-link;
text-decoration: underline;
cursor: pointer;
}
.googie_list {
li {
min-width: 8rem;
width: auto;
&.googie_list_onhover {
color: @color-menu-hover;
background-color: @color-menu-hover-background;
}
.googie_list_revert:before {
&:extend(.font-icon-class);
content: @fa-var-undo;
}
.googie_add_to_dict:before {
&:extend(.font-icon-class);
content: @fa-var-plus-square;
}
}
input {
display: inline-block;
margin: .25rem .5rem;
}
}
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index c5acc5343..a8eba38e8 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -1,4315 +1,4252 @@
/**
* Roundcube webmail functions for the Elastic skin
*
* Copyright (c) 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.
*
* @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
*/
"use strict";
function rcube_elastic_ui()
{
var prefs, ref = this,
mode = 'normal', // one of: large, normal, small, phone
color_mode = 'light', // 'light' or 'dark'
touch = false,
ios = false,
popups_close_lock,
is_framed = rcmail.is_framed(),
env = {
config: {
standard_windows: rcmail.env.standard_windows,
message_extwin: rcmail.env.message_extwin,
compose_extwin: rcmail.env.compose_extwin,
help_open_extwin: rcmail.env.help_open_extwin
},
checkboxes: 0,
small_screen_config: {
standard_windows: true,
message_extwin: false,
compose_extwin: false,
help_open_extwin: false
}
},
menus = {},
content_buttons = [],
frame_buttons = [],
layout = {
menu: $('#layout-menu'),
sidebar: $('#layout-sidebar'),
list: $('#layout-list'),
content: $('#layout-content'),
},
buttons = {
menu: $('a.task-menu-button'),
back_sidebar: $('a.back-sidebar-button'),
back_list: $('a.back-list-button'),
back_content: $('a.back-content-button'),
};
// Public methods
this.register_content_buttons = register_content_buttons;
this.menu_hide = menu_hide;
this.menu_toggle = menu_toggle;
this.menu_destroy = menu_destroy;
this.popup_init = popup_init;
this.about_dialog = about_dialog;
this.headers_dialog = headers_dialog;
this.import_dialog = import_dialog;
this.headers_show = headers_show;
this.spellmenu = spellmenu;
this.searchmenu = searchmenu;
this.headersmenu = headersmenu;
this.header_reset = header_reset;
this.compose_status = compose_status;
this.attachmentmenu = attachmentmenu;
this.mailtomenu = mailtomenu;
this.recipient_selector = recipient_selector;
this.show_list = show_list;
this.show_sidebar = show_sidebar;
this.smart_field_init = smart_field_init;
this.smart_field_reset = smart_field_reset;
this.form_errors = form_errors;
this.switch_nav_list = switch_nav_list;
this.searchbar_init = searchbar_init;
this.pretty_checkbox = pretty_checkbox;
this.pretty_select = pretty_select;
this.datepicker_init = datepicker_init;
this.bootstrap_style = bootstrap_style;
this.toggle_list_selection = toggle_list_selection;
this.get_screen_mode = get_screen_mode;
this.is_mobile = is_mobile;
this.is_touch = is_touch;
// Detect screen size/mode
screen_mode();
// Initialize layout
layout_init();
// Convert some elements to Bootstrap style
bootstrap_style();
// Initialize responsive toolbars (have to be before popups init)
toolbar_init();
// Initialize content frame and list handlers
content_frame_init();
// Initialize menu dropdowns
dropdowns_init();
// Setup various UI elements
setup();
// Update layout after initialization
resize();
/**
* Setup procedure
*/
function setup()
{
var title, form, content_buttons = [];
// Intercept jQuery-UI dialogs...
$.ui && $.widget('ui.dialog', $.ui.dialog, {
open: function() {
// ... to unify min width for iframe'd dialogs
if ($(this.element).is('.iframe')) {
this.options.width = Math.max(576, this.options.width);
}
this._super();
// ... to re-style them on dialog open
dialog_open(this);
return this;
},
close: function() {
this._super();
// ... to close custom select dropdowns on dialog close
$('.select-menu:visible').remove();
return this;
}
});
// menu/sidebar/list button
buttons.menu.on('click', function() { app_menu(true); return false; });
buttons.back_sidebar.on('click', function() { show_sidebar(); return false; });
buttons.back_list.on('click', function() { show_list(); return false; });
buttons.back_content.on('click', function() { show_content(true); return false; });
// Initialize search forms
$('.searchbar').each(function() { searchbar_init(this); });
// Set content frame title in parent window (exclude ext-windows and dialog frames)
if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
if (title = $('h1.voice').first().text()) {
parent.$('#layout-content > .header > .header-title:not(.constant)').text(title);
}
}
else if (!is_framed) {
title = layout.content.find('.boxtitle').first().detach().text();
if (!title) {
title = $('h1.voice').first().text();
}
if (title) {
layout.content.find('.header > .header-title').text(title);
}
}
// Add content frame toolbar in the footer, for content buttons and navigation
if (!is_framed && layout.content.length && !layout.content.is('.no-navbar')
&& !layout.content.children('.frame-content').length
) {
env.frame_nav = $('<div class="footer menu toolbar content-frame-navigation hide-nav-buttons">')
.append($('<a class="button prev">')
.append($('<span class="inner"></span>').text(rcmail.gettext('previous'))))
.append($('<span class="buttons">'))
.append($('<a class="button next">')
.append($('<span class="inner"></span>').text(rcmail.gettext('next'))))
.appendTo(layout.content);
}
// Move some buttons to the frame footer toolbar
$('a[data-content-button]').each(function() {
content_buttons.push(create_cloned_button($(this)));
});
// Move form buttons from the content frame into the frame footer (on parent window)
$('.formbuttons').filter(function() { return !$(this).parent('.searchoptions').length; }).children().each(function() {
var target = $(this);
// skip non-content buttons
if (!is_framed && !target.parents('#layout-content').length) {
return;
}
if (target.is('.cancel')) {
target.addClass('hidden');
return;
}
content_buttons.push(create_cloned_button(target));
});
(is_framed ? parent.UI : ref).register_content_buttons(content_buttons);
// Mail compose features
if (form = rcmail.gui_objects.messageform) {
form = $('form[name="' + form + '"]');
// Show input elements with non-empty value
// These event handlers need to be registered before rcmail 'init' event
$('#_cc, #_bcc, #_replyto, #_followupto', $('.compose-headers')).each(function() {
$(this).on('change', function() {
$('#compose' + $(this).attr('id'))[this.value ? 'removeClass' : 'addClass']('hidden');
});
});
// We put compose options outside of the main form
// Because IE/Edge (<16) does not support 'form' attribute we'll copy
// inputs into the main form as hidden fields
// TODO: Consider doing this for IE/Edge only, just set the 'form' attribute on others
$('#compose-options').find('textarea,input,select').each(function() {
var hidden = $('<input>')
.attr({type: 'hidden', name: $(this).attr('name')})
.appendTo(form);
$(this).attr('tabindex', 2)
.on('change', function() {
hidden.val(this.type != 'checkbox' || this.checked ? $(this).val() : '');
})
.change();
});
}
// Use smart recipient inputs
// This have to be after mail compose feature above
$('[data-recipient-input]').each(function() { recipient_input(this); });
// Image upload widget
$('.image-upload').each(function() { image_upload_input(this); });
// Add HTML/Plain switcher on top of textarea with TinyMCE editor
$('textarea[data-html-editor]').each(function() { html_editor_init(this); });
$('#dragmessage-menu,#dragcontact-menu').each(function() {
rcmail.gui_object('dragmenu', this.id);
});
// Taskmenu items added by plugins do not use elastic classes (e.g help plugin)
// it's for larry skin compat. We'll assign 'selected' and icon-specific class.
$('#taskmenu > a').each(function() {
if (/button-([a-z]+)/.test(this.className)) {
var data, name = RegExp.$1,
button = find_button(this.id);
if (button && (data = button.data)) {
if (data.sel) {
data.sel = data.sel.replace('button-selected', 'selected') + ' ' + name;
}
if (data.act) {
data.act += ' ' + name;
}
rcmail.buttons[button.command][button.index] = data;
rcmail.init_button(button.command, data);
}
$(this).addClass(name);
$('.button-inner', this).addClass('inner');
}
$(this).on('mouseover', function() { rcube_webmail.long_subject_title(this, 0, $('span.inner', this)); });
});
// Some plugins use 'listbubtton' class, we'll replace it with 'button'
$('.listbutton').each(function() {
var button = find_button(this.id);
$(this).addClass('button').removeClass('listbutton');
if (button.data.sel) {
button.data.sel = button.data.sel.replace('listbutton', 'button');
}
if (button.data.act) {
button.data.act = button.data.act.replace('listbutton', 'button');
}
rcmail.buttons[button.command][button.index] = button.data;
rcmail.init_button(button.command, button.data);
});
// buttons that should be hidden on small screen devices
$('[data-hidden]').each(function() {
var m, v = $(this).data('hidden'),
parent = $(this).parent('li'),
re = /(large|big|small|phone|lbs)/g;
while (m = re.exec(v)) {
$(parent.length ? parent : this).addClass('hidden-' + m[1]);
}
});
// Modify normal checkboxes on lists so they are different
// than those used for row selection, i.e. use icons
$('[data-list]').each(function() {
$('input[type=checkbox]', this).each(function() { pretty_checkbox(this); });
});
// Assign .formcontainer class to the iframe body, when it
// contains .formcontent and .formbuttons.
if (is_framed) {
$('.formcontent').each(function() {
if ($(this).next('.formbuttons').length) {
$(this).parent().addClass('formcontainer');
}
});
}
// move "Download all attachments" button into a better location
$('#attachment-list + a.zipdownload').appendTo('.header-links');
if (ios = $('html').is('.ipad,.iphone')) {
$('.iframe-wrapper, .scroller').addClass('ios-scroll');
}
if ($('html').filter('.ipad,.iphone,.webkit.mobile,.webkit.tablet').addClass('webkit-scroller').length) {
$(layout.menu).addClass('webkit-scroller');
}
// Set .notree class on treelist widget update
$('.treelist').each(function() {
var list = this, callback = function() {
$(list)[$('.treetoggle', list).length > 0 ? 'removeClass' : 'addClass']('notree');
};
if (window.MutationObserver) {
(new MutationObserver(callback)).observe(list, {childList: true, subtree: true});
}
callback();
// Add title with full folder name on hover
// TODO: This should be done in another way, so if an entry is
// added after page load it also works there.
$('li.mailbox > a').on('mouseover', function() { rcube_webmail.long_subject_title_ex(this); });
});
// Store default logo path if not already set
if (!$('#logo').data('src-default')) {
$('#logo').data('src-default', $('#logo').attr('src'));
}
};
/**
* Moves form buttons into the content frame actions toolbar (for mobile)
*/
function register_content_buttons(buttons)
{
// we need these buttons really only in phone mode
if (/*mode == 'phone' && */ env.frame_nav && buttons && buttons.length) {
var toolbar = env.frame_nav.children('.buttons');
content_buttons = [];
$.each(buttons, function() {
if (this.data('target')) {
content_buttons.push(this.data('target'));
}
});
toolbar.html('').append(buttons);
}
};
/**
* Registers cloned button
*/
function register_cloned_button(old_id, new_id, active_class)
{
var button = find_button(old_id);
if (button) {
rcmail.register_button(button.command, new_id, button.data.type, active_class, button.data.sel);
}
};
/**
* Create a button clone for use in toolbar
*/
function create_cloned_button(target, menu_button, add_class, always_active)
{
var popup, click = true,
button = $('<a>'),
target_id = target.attr('id') || new Date().getTime(),
button_id = target_id + '-clone',
btn_class = target[0].className + (add_class ? ' ' + add_class : '');
if (!menu_button) {
btn_class = btn_class.replace('btn-primary', 'primary').replace(/(btn[a-z-]*|button|disabled)/g, '').trim()
btn_class += ' button' + (!always_active ? ' disabled' : '');
}
else if (popup = target.data('popup')) {
button.data({popup: popup, 'toggle-button': target.data('toggle-button')});
popup_init(button[0]);
click = false;
rcmail.register_menu_button(button[0], popup);
}
button.attr({id: button_id, href: '#', 'class': btn_class})
.append($('<span class="inner">').text(target.text()));
if (click) {
button.on('click', function(e) { target.click(); });
}
if (is_framed && !menu_button) {
button.data('target', target);
frame_buttons.push($.extend({button_id: button_id}, find_button(target[0].id)));
}
else {
// Register the button to get active state updates
register_cloned_button(target_id, button_id, btn_class.replace(' disabled', ''));
}
return button;
};
/**
* Finds an rcmail button
*/
function find_button(id)
{
var i, button, command;
for (command in rcmail.buttons) {
for (i = 0; i < rcmail.buttons[command].length; i++) {
button = rcmail.buttons[command][i];
if (button.id == id) {
return {
command: command,
index: i,
data: button
};
}
}
}
};
/**
* Setup environment
*/
function layout_init()
{
// Initialize light/dark mode
color_mode_init();
// Select current layout element
env.last_selected = $('#layout > div.selected')[0];
if (!env.last_selected && layout.content.length) {
$.each(['sidebar', 'list', 'content'], function() {
if (layout[this].length) {
env.last_selected = layout[this][0];
layout[this].addClass('selected');
return false;
}
});
}
// Register resize handler
$(window).on('resize', function() {
clearTimeout(env.resize_timeout);
env.resize_timeout = setTimeout(function() { resize(); }, 25);
});
// Enable rcmail.open_window intercepting
env.open_window = rcmail.open_window;
rcmail.open_window = window_open;
rcmail
.addEventListener('message', message_displayed)
.addEventListener('menu-open', menu_toggle)
.addEventListener('menu-close', menu_toggle)
.addEventListener('editor-init', tinymce_init)
.addEventListener('autocomplete_create', rcmail_popup_init)
.addEventListener('googiespell_create', rcmail_popup_init)
.addEventListener('setquota', update_quota)
.addEventListener('enable-command', enable_command_handler)
.addEventListener('clonerow', pretty_checkbox_fix)
.addEventListener('init', init);
- // Add styling for TinyMCE editor popups
- // We need to use MutationObserver, as TinyMCE does not provide any events for this
- if (window.MutationObserver && window.tinymce) {
- var callback = function(list) {
- $.each(list, function() {
- $.each(this.addedNodes, function() {
- tinymce_style(this);
- });
- });
- };
-
- (new MutationObserver(callback)).observe(document.body, {childList: true});
- }
-
// Create floating action button(s)
if ((layout.list.length || layout.content.length) && is_mobile()) {
var fabuttons = [];
$('[data-fab]').each(function() {
var button = $(this),
task = button.data('fab-task') || '*',
action = button.data('fab-action') || '*';
if ((task == '*' || task == rcmail.env.task)
&& (action == '*' || action == rcmail.env.action || (action == 'none' && !rcmail.env.action))
) {
fabuttons.push(create_cloned_button(button, false, false, true));
}
});
if (fabuttons.length) {
$('<div class="floating-action-buttons">').append(fabuttons)
.appendTo(layout.list.length ? layout.list : layout.content);
}
}
// Initialize column resizers (must be after floating buttons)
if (layout.sidebar.length) {
splitter_init(layout.sidebar);
}
if (layout.list.length) {
splitter_init(layout.list);
}
};
/**
* rcmail 'init' event handler
*/
function init()
{
// Additional functionality on list widgets
$('[data-list]').filter('ul,table').each(function() {
var button,
table = $(this),
list = table.data('list');
if (rcmail[list] && rcmail[list].multiselect) {
var repl, button,
parent = table.parents('layout-sidebar,#layout-list,#layout-content').last(),
header = parent.find('.header'),
toolbar = header.find('ul');
if (!toolbar.length) {
toolbar = header;
}
else if (button = toolbar.find('a.select').data('toggle-button')) {
button = $('#' + button);
}
// Enable checkbox selection on list widgets
rcmail[list].enable_checkbox_selection();
// Add Select button to the list navigation bar
if (!button) {
button = $('<a>').attr({'class': 'button selection disabled', role: 'button', title: rcmail.gettext('select')})
.on('click', function() { UI.toggle_list_selection(this, table.attr('id')); })
.append($('<span class="inner">').text(rcmail.gettext('select')));
if (toolbar.is('.menu')) {
button.prependTo(toolbar).wrap('<li role="menuitem">');
// Add a button to the content toolbar menu too
if (layout.content) {
var button2 = create_cloned_button(button, true, 'hidden-big hidden-large');
$('<li role="menuitem">').append(button2).appendTo('#toolbar-menu');
button = button.add(button2);
}
}
else {
if (repl = table.data('list-select-replace')) {
$(repl).replaceWith(button);
}
else {
button.appendTo(toolbar).addClass('icon');
if (!parent.is('#layout-sidebar')) {
button.addClass('toolbar-button');
}
}
}
}
// Update Select button state on list update
rcmail.addEventListener('listupdate', function(prop) {
if (prop.list && prop.list == rcmail[list]) {
if (prop.rowcount) {
button.addClass('active').removeClass('disabled').attr('tabindex', 0);
}
else {
button.removeClass('active').addClass('disabled').attr('tabindex', -1);
}
}
});
}
// https://github.com/roundcube/elastic/issues/45
// Draggable blocks scrolling on touch devices, we'll disable it there
if (touch && rcmail[list]) {
if (typeof rcmail[list].draggable == 'function') {
rcmail[list].draggable('destroy');
}
else if (typeof rcmail[list].draggable == 'boolean') {
rcmail[list].draggable = false;
}
}
});
// Display "List is empty..." on the list
if (window.MutationObserver) {
$('[data-label-msg]').filter('ul,table').each(function() {
var fn, observer, callback,
info = $('<div class="listing-info hidden">').insertAfter(this),
table = $(this),
fn = function() {
var ext, command,
msg = table.data('label-msg'),
list = table.is('ul') ? table : table.children('tbody');
if (!rcmail.env.search_request && !rcmail.env.qsearch
&& msg && !list.children(':visible').length
) {
ext = table.data('label-ext');
command = table.data('create-command');
if (ext && (!command || rcmail.commands[command])) {
msg += ' ' + ext;
}
info.text(msg).removeClass('hidden');
return;
}
info.addClass('hidden');
};
callback = function() {
// wait until the UI stops loading and the list is visible
if (rcmail.busy || !table.is(':visible')) {
return setTimeout(callback, 250);
}
clearTimeout(env.list_timer);
env.list_timer = setTimeout(fn, 50);
};
// show/hide the message when something changes on the list
observer = new MutationObserver(callback);
observer.observe(table[0], {childList: true, subtree: true, attributes: true, attributeFilter: ['style']});
// initialize the message
callback();
});
}
// Add menu link for each attachment
if (rcmail.env.action != 'print') {
$('#attachment-list > li').each(function() {
attachmentmenu_append(this);
});
}
var phone_confirmation = function(label) {
if (mode == 'phone') {
rcmail.display_message(rcmail.gettext(label), 'confirmation');
}
};
rcmail.addEventListener('fileappended', function(e) {
if (e.attachment.complete) {
attachmentmenu_append(e.item);
if (e.attachment.mimetype == 'text/vcard' && rcmail.commands['attach-vcard']) {
phone_confirmation('vcard_attachments.vcardattached');
}
}
})
.addEventListener('managesieve.insertrow', function(o) { bootstrap_style(o.obj); })
.addEventListener('add-recipient', function() { phone_confirmation('recipientsadded'); });
rcmail.init_pagejumper('.pagenav > input');
if (rcmail.task == 'mail') {
if (rcmail.env.action == 'compose') {
rcmail.addEventListener('compose-encrypted', function(e) {
$("a.mode-html, button.attach").prop('disabled', e.active);
$('a.attach, a.responses:not(.edit)')[e.active ? 'addClass' : 'removeClass']('disabled');
});
$('#layout-sidebar > .footer:not(.pagenav) > a.button').click(function() {
if ($(this).is('.disabled')) {
rcmail.display_message(rcmail.gettext('nocontactselected'), 'warning');
}
});
// Update compose status bar on attachments list update
if (window.MutationObserver) {
var observer, list = $('#attachment-list'),
status_callback = function() { compose_status('attach', list.children().length > 0); };
observer = new MutationObserver(status_callback);
observer.observe(list[0], {childList: true});
status_callback();
}
}
// In compose/preview window we do not provide "Back" button, instead
// we modify the "Mail" button in the task menu to act like it (i.e. calls 'list' command)
if (!rcmail.env.extwin && (rcmail.env.action == 'compose' || rcmail.env.action == 'show')) {
$('a.mail', layout.menu).attr({
'aria-disabled': false,
onclick: "return rcmail.command('list','',this,event);"
});
}
// Append contact menu to all mailto: links
if (rcmail.env.action == 'preview' || rcmail.env.action == 'show') {
$('a').filter('[href^="mailto:"]').each(function() {
mailtomenu_append(this);
});
// restore headers view to last state
headers_show();
}
}
else if (rcmail.task == 'settings') {
rcmail.addEventListener('identity-encryption-show', function(p) {
bootstrap_style(p.container);
});
rcmail.addEventListener('identity-encryption-update', function(p) {
bootstrap_style(p.container);
});
}
rcmail.set_env({
thread_padding: '1.5rem',
// increase popup windows, so they do not switch to tablet mode
popup_width_small: 1025,
popup_width: 1200
});
// Update layout after initialization (again)
// In devel mode we have to wait until all styles are applied by less
if (rcmail.env.devel_mode && window.less) {
less.pageLoadFinished.then(function() {
resize();
// Re-focus the focused input field on mail compose
if (rcmail.env.compose_focus_elem) {
$(rcmail.env.compose_focus_elem).focus();
}
});
}
else {
resize();
}
// Add date format placeholder to datepicker inputs
var func, format = rcmail.env.date_format_localized;
if (format) {
func = function(input) {
$(input).filter('.datepicker').attr('placeholder', format);
// also make selects pretty
$(input).parent().find('select').each(function() { pretty_select(this); });
};
$('input.datepicker').each(function() { func(this); });
rcmail.addEventListener('insert-edit-field', func);
}
};
/**
* Initializes light/dark mode
*/
function color_mode_init()
{
if (rcmail.env.action == 'print') {
return;
}
var pref,
color_scheme = window.matchMedia('(prefers-color-scheme: dark)'),
switch_iframe_color_mode = function() {
try {
$(this.contentWindow.document).find('html')[color_mode == 'dark' ? 'addClass' : 'removeClass']('dark-mode');
}
catch(e) { /* ignore */ }
},
switch_color_mode = function() {
if (color_mode == 'dark') {
$('#taskmenu a.theme').removeClass('dark').addClass('light').find('span').text(rcmail.gettext('lightmode'));
$('html').addClass('dark-mode');
}
else {
$('#taskmenu a.theme').removeClass('light').addClass('dark').find('span').text(rcmail.gettext('darkmode'));
$('html').removeClass('dark-mode');
}
$('iframe').each(switch_iframe_color_mode);
};
// Add onclick action to the menu button
$('#taskmenu a.theme').on('click', function() {
color_mode = $(this).is('.dark') ? 'dark' : 'light';
switch_color_mode();
rcmail.set_cookie('colorMode', color_mode);
});
// Note: this does not work in IE and Safari
color_scheme.addListener(function(e) {
color_mode = e.matches ? 'dark' : 'light';
switch_color_mode();
rcmail.set_cookie('colorMode', null);
});
// We deliberately use only cookies here, not local storage
if (pref = rcmail.get_cookie('colorMode')) {
color_mode = pref;
}
else if (color_scheme.matches) {
color_mode = 'dark';
}
switch_color_mode();
$('iframe').on('load', switch_iframe_color_mode);
};
/**
* Apply bootstrap classes to html elements
*/
function bootstrap_style(context)
{
if (!context) {
context = document;
}
// Buttons
$('input.button,button', context).not('.btn').addClass('btn').not('.btn-primary,.primary,.mainaction').addClass('btn-secondary');
$('input.button.mainaction,button.primary,button.mainaction', context).addClass('btn-primary');
$('button.btn.delete,button.btn.discard', context).addClass('btn-danger');
$.each(['warning', 'error', 'information', 'confirmation'], function() {
var type = this;
$('.box' + type + ':not(.ui.alert)', context).each(function() {
alert_style(this, type, true);
});
});
// Convert structure of single dialogs (one input or just an image),
// e.g. group create, attachment rename where we use <label>Label<input></label>
if (context != document && $('.popup', context).children().length == 1) {
var content = $('.popup', context).children().first();
if (content.is('img')) {
$('.popup', context).addClass('justified');
}
else if (content.is('label')) {
var input = content.find('input').detach(),
label = content.detach(),
id = input.attr('id');
if (!id) {
input.attr('id', id = 'dialog-input-elastic');
}
$('.popup', context).addClass('formcontent').append(
$('<div class="form-group row">')
.append(label.attr('for', id).addClass('col-sm-2 col-form-label'))
.append($('<div class="col-sm-10">').append(input))
);
input.focus();
}
}
// Forms
var supported_controls = 'input:not(.button,.no-bs,[type=button],[type=radio],[type=checkbox]),textarea';
$(supported_controls, $('.propform', context)).addClass('form-control');
$('[type=checkbox]', $('.propform', context)).addClass('form-check-input');
// Note: On selects we add form-control to get consistent focus
// and to not have to create separate rules for selects and inputs
$('select', context).addClass('form-control custom-select');
if (context != document) {
$(supported_controls, context).addClass('form-control');
}
$('table.propform', context).each(function() {
var text_rows = 0, form_rows = 0;
var col_sizes = ['sm', 4, 8];
if ($(this).attr('class').match(/cols-([a-z]+)-(\d)-(\d)/)) {
col_sizes = [RegExp.$1, RegExp.$2, RegExp.$3];
}
$(this).find('> tbody > tr, > tr').each(function() {
var first, last, row = $(this),
row_classes = ['form-group', 'row'],
cells = row.children('td');
if (cells.length == 2) {
first = cells.first();
last = cells.last();
$('label', first).addClass('col-form-label');
first.addClass('col-' + col_sizes[0] + '-' + col_sizes[1]);
last.addClass('col-' + col_sizes[0] + '-' + col_sizes[2]);
if (last.find('[type=checkbox]').length == 1 && !last.find('.proplist').length) {
row_classes.push('form-check');
if (last.find('a').length) {
row_classes.push('with-link');
}
form_rows++;
}
else if (!last.find('input:not([type=hidden]),textarea,radio,select').length) {
last.addClass('form-control-plaintext');
text_rows++;
}
else {
form_rows++;
}
// style some multi-input fields
if (last.children('.datepicker') && last.children('input').length == 2) {
last.addClass('datetime');
}
}
else if (cells.length == 1) {
cells.css('width', '100%');
}
row.addClass(row_classes.join(' '));
});
if (text_rows > form_rows) {
$(this).addClass('text-only');
}
});
// Special input + anything entry
$('td.input-group', context).each(function() {
$(this).children().slice(1).addClass('input-group-append');
});
// Other forms, e.g. Contact advanced search
$('fieldset.propform:not(.groupped) div.row', context).each(function() {
var has_input = $('input:not([type=hidden]),select,textarea', this).length > 0;
if (has_input) {
$(supported_controls, this).addClass('form-control');
}
$(this).children().last().addClass('col-sm-8' + (!has_input ? ' form-control-plaintext' : ''));
$(this).children().first().addClass('col-sm-4 col-form-label');
$(this).addClass('form-group');
});
// Contact info/edit form
$('fieldset.propform.groupped fieldset', context).each(function() {
$('.row', this).each(function() {
var label, first,
has_input = $('input,select,textarea', this).length > 0,
items = $(this).children();
if (has_input) {
$(supported_controls, this).addClass('form-control');
}
if (items.length < 2) {
return;
}
first = items.first();
if (first.is('select')) {
first.addClass('input-group-prepend');
}
else {
first.wrap('<span class="input-group-prepend">').addClass('input-group-text');
}
if (!has_input) {
items.last().addClass('form-control-plaintext');
}
$('.content', this).addClass('input-group-prepend input-group-append input-group-text');
$('a.deletebutton', this).addClass('input-group-text icon delete').wrap('<span class="input-group-append">');
$(this).addClass('input-group');
});
});
// Advanced options form
$('fieldset.advanced', context).each(function() {
var table = $(this).children('.propform').first();
table.wrap($('<div>').addClass('collapse'));
$(this).children('legend').first().addClass('closed').on('click', function() {
table.parent().collapse('toggle');
$(this).toggleClass('closed');
});
});
// Other forms, e.g. Insert response
$('.propform > .prop.block:not(.row)', context).each(function() {
$(this).addClass('form-group row').each(function() {
$('label', this).addClass('col-form-label').wrap($('<div class="col-sm-4">'));
$('input,select,textarea', this).wrap($('<div class="col-sm-8">'));
$(supported_controls, this).addClass('form-control');
});
});
$('td.rowbuttons > a', context).addClass('btn');
// Testing Bootstrap Tabs on contact info/edit page
// Tabs do not scale nicely on very small screen, so can be used
// only with small number of tabs with short text labels
$('form.tabbed,div.tabbed', context).each(function(idx, item) {
var tabs = [], nav = $('<ul>').attr({'class': 'nav nav-tabs', role: 'tablist'});
$(this).addClass('tab-content').children('fieldset').each(function(i, fieldset) {
var tab, id = fieldset.id || ('tab' + idx + '-' + i),
tab_class = $(fieldset).data('navlink-class');
$(fieldset).addClass('tab-pane').attr({id: id, role: 'tabpanel'});
tab = $('<li>').addClass('nav-item').append(
$('<a>').addClass('nav-link' + (tab_class ? ' ' + tab_class : ''))
.attr({role: 'tab', 'href': '#' + id})
.text($('legend', fieldset).first().text())
.click(function(e) {
$(this).tab('show');
// Because we return false we have to close popups
popups_close(e);
// Returning false here prevents from strange scrolling issue
// when the form is in an iframe, e.g. contact edit form
return false;
})
);
$('legend', fieldset).first().hide();
tabs.push(tab);
});
// create the navigation bar
nav.append(tabs).insertBefore(item);
// activate the first tab
$('a.nav-link', nav).first().click();
});
$('input[type=file]:not(.custom-file-input)', context).each(function() {
var label_text = rcmail.gettext('choosefile' + (this.multiple ? 's' : '')),
label = $('<label>').attr({'class': 'custom-file-label',
'data-browse': rcmail.gettext('browse')}).text(label_text);
$(this).addClass('custom-file-input').wrap('<div class="custom-file">');
$(this).on('change', function() {
var text = label_text;
if (this.files.length) {
text = this.files[0].name;
if (this.files.length > 1) {
text += ', ...';
}
}
// Note: We don't use label variable to allow cloning of the input
$(this).next().text(text);
})
.parent().append(label);
});
// Make tables pretier
$('table:not(.table,.compact-table,.propform,.listing,.ui-datepicker-calendar)', context)
.filter(function() {
// exclude direct propform children and external content
return !$(this).parent().is('.propform')
&& !$(this).parents('#message-header,.message-htmlpart,.message-partheaders,.boxinformation,.raw-tables').length;
})
.each(function() {
// TODO: Consider implementing automatic setting of table-responsive on window resize
var table = $(this).addClass('table');
table.parent().addClass('table-responsive-sm');
table.find('thead').addClass('thead-default');
});
// The same for some other checkboxes
// We do this here, not in setup() because we want to cover dialogs
$('input.pretty-checkbox, .propform input[type=checkbox], .form-check input[type=checkbox], .popupmenu.form input[type=checkbox], .menu input[type=checkbox]', context)
.each(function() { pretty_checkbox(this); });
// Also when we add action-row of the form, e.g. Managesieve plugin adds them after the page is ready
if ($(context).is('.actionrow')) {
$('input[type=checkbox]', context).each(function() { pretty_checkbox(this); });
}
// Input-group combo is an element with a select field on the left
// and input(s) on right, and where the whole right side can be hidden
// depending on the select position. This code fixes border radius on select
$('.input-group-combo > select', context).first().on('change', function() {
var select = $(this),
fn = function() {
select[select.next().is(':visible') ? 'removeClass' : 'addClass']('alone');
};
setTimeout(fn, 50);
setTimeout(fn, 2000); // for devel mode
}).trigger('change');
// Make message-objects alerts pretty (the same as UI alerts)
$('#message-objects', context).children(':not(.ui.alert)').add('.part-notice').each(function() {
// message objects with notice class are really warnings
var cl = String($(this).removeClass('notice part-notice').attr('class')).split(/\s/)[0] || 'warning';
alert_style(this, cl);
$(this).addClass('box' + cl);
$('a', this).addClass('btn btn-primary btn-sm');
});
// Form validation errors (managesieve plugin)
$('.error', context).addClass('is-invalid');
// Make logon form prettier
if (rcmail.env.task == 'login' && context == document) {
$('#rcmloginsubmit').addClass('btn-lg text-uppercase w-100');
$('#login-form table tr').each(function() {
var input = $('input,select', this),
label = $('label', this),
icon_name = input.data('icon'),
icon = $('<i>').attr('class', 'input-group-text icon ' + input.attr('name').replace('_', ''));
if (icon_name) {
icon.addClass(icon_name);
}
$(this).addClass('form-group row');
label.parent().css('display', 'none');
input.addClass(input.is('select') ? 'custom-select' : 'form-control')
.attr('placeholder', label.text())
.before($('<span class="input-group-prepend">').append(icon))
.parent().addClass('input-group input-group-lg');
});
}
$('select:not([multiple])', context).each(function() { pretty_select(this); });
};
- /**
- * Detects if the element is TinyMCE dialog/menu
- * and adds Elastic styling to it
- */
- function tinymce_style(elem)
- {
- // TinyMCE dialog widnows
- if ($(elem).is('.mce-window')) {
- var body = $(elem).find('.mce-window-body'),
- foot = $(elem).find('.mce-foot > .mce-container-body');
-
- // Apply basic forms style
- if (body.length) {
- bootstrap_style(body[0]);
- }
-
- body.find('button').filter(function() { return $(this).parent('.mce-btn').length > 0; }).removeClass('btn btn-secondary');
-
- // Fix icons in Find and Replace dialog footer
- if (foot.children('.mce-widget').length === 5) {
- foot.addClass('mce-search-foot');
- }
-
- // Apply some form structure fixes and helper classes
- $(elem).find('.mce-charmap').parent().parent().addClass('mce-charmap-dialog');
- $(elem).find('.mce-combobox').each(function() {
- if (!$(this).children('.mce-btn').length) {
- $(this).addClass('mce-combobox-fake');
- }
- });
- $(elem).find('.mce-form > .mce-container-body').each(function() {
- if ($(this).children('.mce-formitem').length > 4) {
- $(this).addClass('mce-form-split');
- }
- });
- $(elem).find('.mce-form').next(':not(.mce-formitem)').addClass('mce-form');
-
- // Fix dialog height (e.g. Table properties dialog)
- if (!is_mobile()) {
- var offset, max_height = 0, height = body.height();
- $(elem).find('.mce-form').each(function() {
- max_height = Math.max(max_height, $(this).height());
- });
-
- if (height < max_height) {
- max_height += (body.find('.mce-tabs').height() || 0) + 25;
- body.height(max_height);
- $(elem).height($(elem).height() + (max_height - height));
- $(elem).css('top', ($(window).height() - $(elem).height())/2 + 'px');
- }
- }
- }
- // TinyMCE menus on mobile
- else if ($(elem).is('.mce-menu')) {
- $(elem).prepend(
- $('<h3 class="popover-header">').append(
- $('<a class="button icon "' + 'cancel' + '">')
- .text(rcmail.gettext('close'))
- .on('click', function() { $(document.body).click(); })));
-
- if (window.MutationObserver) {
- var callback = function() {
- if (mode != 'phone') {
- return;
- }
- if (!$('.mce-menu:visible').length) {
- $('div.mce-overlay').click();
- }
- else if (!$('div.mce-overlay').length) {
- $('<div>').attr('class', 'popover-overlay mce-overlay')
- .appendTo('body')
- .click(function() { $(this).remove(); });
- }
- };
-
- (new MutationObserver(callback)).observe(elem, {attributes: true});
- }
- }
- };
-
/**
* Initializes popup menus
*/
function dropdowns_init()
{
$('[data-popup]').each(function() { popup_init(this); });
$(document).on('click', popups_close);
rcube_webmail.set_iframe_events({mousedown: popups_close, touchstart: popups_close});
};
/**
* Init content frame
*/
function content_frame_init()
{
if (!layout.list.length) {
return;
}
var last_selected = env.last_selected,
title_reset = function(title) {
if (typeof title !== 'string' || !title.length) {
title = $('h1.voice').text() || $('title').text() || '';
}
layout.content.find('.header > .header-title').text(title);
};
// display or reset the content frame
var common_content_handler = function(e, href, show, title)
{
if (is_mobile() && env.frame_nav) {
content_frame_navigation(href, e);
}
if (show && !layout.content.is(':visible')) {
env.last_selected = layout.content[0];
}
else if (!show && env.last_selected != last_selected && !env.content_lock) {
env.last_selected = last_selected;
}
screen_resize();
title_reset(title && show ? title : null);
env.content_lock = false;
};
var common_list_handler = function(e) {
if (mode != 'large' && !env.content_lock && e.force) {
show_list();
}
env.content_lock = false;
// display current folder name in list header
if (e.title) {
$('.header > .header-title', layout.list).text(e.title);
}
};
var list_handler = function(e) {
var args = {};
if (rcmail.env.task == 'addressbook' || rcmail.env.task == 'mail') {
args.force = true;
}
// display current folder name in list header
if (rcmail.env.task == 'mail' && !rcmail.env.action) {
var name = $.type(e) == 'string' ? e : rcmail.env.mailbox,
folder = rcmail.env.mailboxes[name];
args.title = folder ? folder.name : '';
}
common_list_handler(args);
};
// when loading content-frame in small-screen mode display it
layout.content.find('iframe').on('load', function(e) {
var win, href = '', show = true;
// Reset the scroll position of the iframe-wrapper
$(this).parent('.iframe-wrapper').scrollTop(0);
try {
win = e.target.contentWindow;
href = win.location.href;
show = !href.endsWith(rcmail.env.blankpage);
// Reset title back to the default
$(win).on('unload', title_reset);
}
catch(e) { /* ignore */ }
common_content_handler(e, href, show);
});
rcmail
.addEventListener('afterlist', list_handler)
.addEventListener('afterlistgroup', list_handler)
.addEventListener('afterlistsearch', list_handler)
// plugins
.addEventListener('show-list', function(e) {
e.force = true;
common_list_handler(e);
})
.addEventListener('show-content', function(e) {
if (e.obj && !$(e.obj).is('iframe')) {
$(e.scrollElement || e.obj).scrollTop(0);
if (is_mobile()) {
iframe_loader(e.obj);
}
}
common_content_handler(e.event || new Event, '_action=' + (e.mode || 'edit'), true, e.title);
});
};
/**
* Content frame navigation
*/
function content_frame_navigation(href, event)
{
// Don't display navigation for create/add action frames
if (href.match(/_action=(create|add)/) || href.match(/_nav=hide/)) {
$(env.frame_nav).addClass('hide-nav-buttons');
return;
}
var node, uid, list, _list = $('[data-list]', layout.list).data('list');
if (!_list || !(list = rcmail[_list])) {
// hide navbar if there are no visible buttons, e.g. Help plugin UI
if ($(env.frame_nav).is('.hide-nav-buttons') && !$('.buttons', env.frame_nav).children().length) {
$(env.frame_nav).addClass('hidden');
}
return;
}
$(env.frame_nav).removeClass('hide-nav-buttons hidden');
// expand collapsed row so we do not skip the whole thread
// TODO: Unified interface for list and treelist widgets
if (uid = list.get_single_selection()) {
if (list.rows && list.rows[uid] && !list.rows[uid].expanded) {
list.expand_row(event, uid);
}
else if (list.get_node && (node = list.get_node(uid)) && node.collapsed) {
list.expand(uid);
}
}
var prev, next,
frame = $('#' + rcmail.env.contentframe),
next_button = $('a.button.next', env.frame_nav).off('click').addClass('disabled'),
prev_button = $('a.button.prev', env.frame_nav).off('click').addClass('disabled');
if ((next = list.get_next()) || rcmail.env.current_page < rcmail.env.pagecount) {
next_button.removeClass('disabled').on('click', function() {
env.content_lock = true;
iframe_loader(frame);
if (next) {
list.select(next);
}
else {
rcmail.env.list_uid = 'FIRST';
rcmail.command('nextpage');
}
});
}
if (((prev = list.get_prev()) && (prev != '*' || _list != 'subscription_list')) || rcmail.env.current_page > 1) {
prev_button.removeClass('disabled').on('click', function() {
env.content_lock = true;
iframe_loader(frame);
if (prev) {
list.select(prev);
}
else {
rcmail.env.list_uid = 'LAST';
rcmail.command('previouspage');
}
});
}
};
/**
* Handler for editor-init event
*/
function tinymce_init(o)
{
var onload = [],
is_editor = $('#' + o.id).parent().is('.html-editor');
// Enable autoresize plugin
o.config.plugins += ' autoresize';
if (is_touch()) {
- // Make the toolbar icons bigger
- o.config.toolbar_items_size = null;
-
// Use minimalistic toolbar
- o.config.toolbar = 'undo redo | insert | styleselect';
-
- if (o.config.plugins.match(/emoticons/)) {
- o.config.toolbar += ' emoticons';
- }
+ o.config.toolbar = 'undo redo | link image styleselect';
}
if (rcmail.task == 'mail' && rcmail.env.action == 'compose') {
var form = $('#compose-content > form'),
keypress = function(e) {
if (e.key == 'Tab' && e.shiftKey) {
$('#compose-content > form').scrollTop(0);
}
};
// Shift+Tab on mail compose editor scrolls the page to the top
onload.push(function(ed) {
ed.on('keypress', keypress);
});
$('#composebody').on('keypress', keypress);
// Keep the editor toolbar on top of the screen on scroll
form.on('scroll', function() {
- var container = $('.mce-container-body', form),
- toolbar = $('.mce-top-part', container),
+ var container = $('.tox-editor-container', form),
+ toolbar = container.find('.tox-toolbar-overlord'),
editor_offset = container.offset(),
header_top = form.offset().top;
if (editor_offset && (editor_offset.top - header_top < 0)) {
toolbar.css({position: 'fixed', top: header_top + 'px', width: container.width() + 'px'});
}
else {
toolbar.css({position: 'relative', top: 0, width: 'auto'})
}
});
$(window).resize(function() { form.trigger('scroll'); });
+
}
if (is_editor) {
o.config.toolbar = 'plaintext | ' + o.config.toolbar;
// Use setup_callback, we can't use editor-load event
o.config.setup_callback = function(ed) {
- ed.addButton('plaintext', {
+ ed.ui.registry.addButton('plaintext', {
tooltip: rcmail.gettext('plaintoggle'),
- icon: 'plaintext',
- onclick: function(e) {
+ icon: 'close',
+ onAction: function(e) {
if (rcmail.command('toggle-editor', {id: ed.id, html: false}, '', e.originalEvent)) {
$('#' + ed.id).parent().removeClass('ishtml');
}
}
});
};
}
+ // Add styling for TinyMCE dialogs
+ onload.push(function(ed) {
+ ed.on('OpenWindow', function(e) {
+ var dialog = $('.tox-dialog:last')[0],
+ callback = function(e) {
+ var body = $(dialog).find('.tox-dialog__body'),
+ foot = $(dialog).find('.tox-dialog__footer'),
+ buttons = foot.find('button');
+
+ if (!e) {
+ // Fix icons in Find and Replace dialog footer
+ if (buttons.length === 4) {
+ body.closest('.tox-dialog').addClass('tox-search-dialog');
+ }
+ // Switch Save and Cancel buttons order
+ else if (buttons.length == 2) {
+ buttons.first().insertAfter(buttons[1]);
+ }
+
+ // TODO: Styling form elements does not work well because of
+ // https://github.com/tinymce/tinymce/issues/4867
+ // also https://github.com/tinymce/tinymce/issues/4869
+ }
+
+ body.find('select').each(function() { pretty_select(this); });
+ body.find('.tox-checkbox > input').each(function() { pretty_checkbox(this); });
+ };
+
+ // TODO: Maybe some day we'll not have to use MutationObserver
+ // https://github.com/tinymce/tinymce/issues/4869
+ if (window.MutationObserver) {
+ (new MutationObserver(callback)).observe($('.tox-dialog__body-content', dialog)[0], {childList: true});
+ }
+ callback();
+ });
+ });
+
rcmail.addEventListener('editor-load', function(e) {
$.each(onload, function() { this(e.ref.editor); });
});
};
function datepicker_init(datepicker)
{
// Datepicker widget improvements: overlay element, styling updates on calendar element update
// The widget does not provide any event system, so we use MutationObserver
if (window.MutationObserver) {
$(datepicker).not('[data-observed]').each(function() {
var overlay, hidden = true,
win = is_framed ? parent : window,
callback = function(data) {
$.each(data, function(i, v) {
// add/remove overlay on widget show/hide
if (v.type == 'attributes') {
var is_hidden = $(v.target).attr('aria-hidden') == 'true';
if (is_hidden != hidden) {
if (!is_hidden) {
overlay = $('<div>').attr('class', 'ui-widget-overlay datepicker')
.appendTo(win.document.body)
.click(function(e) {
$(this).remove();
if (is_framed) {
$.datepicker._hideDatepicker();
}
});
}
else if (overlay) {
overlay.remove();
}
hidden = is_hidden;
}
}
else if (v.addedNodes.length) {
// apply styles when widget content changed
win.UI.bootstrap_style(v.target);
// Month/Year change handlers do not work from parent, fix it
if (is_framed) {
win.$('select.ui-datepicker-month', v.target).on('change', function() {
$.datepicker._selectMonthYear($.datepicker._lastInput, this, "M");
});
win.$('select.ui-datepicker-year', v.target).on('change', function() {
$.datepicker._selectMonthYear($.datepicker._lastInput, this, "Y");
});
}
}
});
};
$(this).attr('data-observed', '1');
if (is_framed) {
// move the datepicker to parent window
$(this).detach().appendTo(parent.document.body);
// create fake element, so the valid one is not removed by datepicker code
$('<div id="ui-datepicker-div" class="hidden">').appendTo(document.body);
}
(new MutationObserver(callback)).observe(this, {childList: true, subtree: false, attributes: true, attributeFilter: ['aria-hidden']});
});
}
};
function toggle_list_selection(obj, list_id)
{
if ($(obj).is('.active')) {
$('#' + list_id).toggleClass('withselection');
}
};
/**
* Handler for some Roundcube core popups
*/
function rcmail_popup_init(o)
{
// Add some common styling to the autocomplete/googiespell popups
$('ul', o.obj).addClass('menu listing iconized');
$(o.obj).addClass('popupmenu popover');
bootstrap_style(o.obj);
// for googiespell list
$('input', o.obj).addClass('form-control');
// Modify the googiespell menu on mobile
if (is_mobile() && $(o.obj).is('.googie_window')) {
// Set popup Close title
var title = rcmail.gettext('close'),
class_name = 'button icon cancel',
close_link = $('<a>').attr('class', class_name).text(title)
.click(function(e) {
e.stopPropagation();
$('.popover-overlay').remove();
$(o.obj).hide();
});
$('<h3 class="popover-header">').append(close_link).prependTo(o.obj);
// add overlay element for phone layout
if (!$('.popover-overlay').length) {
$('<div>').attr('class', 'popover-overlay')
.appendTo('body')
.click(function() { $(this).remove(); });
}
$('ul,button', o.obj).click(function(e) {
if (!$(e.target).is('input')) {
$('.popover-overlay').remove();
}
});
}
};
/**
* Handler for 'enable-command' event
*/
function enable_command_handler(args)
{
if (is_framed) {
$.each(frame_buttons, function(i, button) {
if (args.command == button.command) {
parent.$('#' + button.button_id)[args.status ? 'removeClass' : 'addClass']('disabled');
}
});
}
if (rcmail.task == 'mail') {
switch (args.command) {
case 'reply-list':
if (rcmail.env.reply_all_mode == 1) {
var label = rcmail.gettext(args.status ? 'replylist' : 'replyall');
$('.toolbar a.reply-all').attr('title', label).find('.inner').text(label);
}
break;
case 'compose-encrypted':
// show the toolbar button for Mailvelope
$('.toolbar a.encrypt').parent().show();
break;
case 'compose-encrypted-signed':
// enable selector for encrypt and sign
$('#encryption-menu-button').show();
break;
}
}
};
/**
* screen mode
*/
function screen_mode()
{
var size, width = $(window).width();
if (width <= 480)
size = 'phone';
else if (width > 1200)
size = 'large';
else if (width > 768)
size = 'normal';
else
size = 'small';
touch = width <= 1024;
mode = size;
};
/**
* Get current screen mode
*/
function get_screen_mode()
{
return mode;
};
/**
* Window resize handler
* Does layout reflows e.g. on screen orientation change
*/
function resize()
{
var mobile;
screen_mode();
screen_resize();
screen_resize_html();
// disable ext-windows and other features
if (mobile = is_mobile()) {
rcmail.set_env(env.small_screen_config);
rcmail.enable_command('extwin', false);
}
else {
rcmail.set_env(env.config);
rcmail.enable_command('extwin', true);
}
// Hide content frame buttons on small devices (with frame toolbar in parent window)
$.each(content_buttons, function() { $(this)[mobile ? 'hide' : 'show'](); });
rcmail.triggerEvent('skin-resize', { mode: mode })
};
function screen_resize()
{
if (is_framed && !layout.sidebar.length && !layout.list.length) {
screen_resize_headers();
return;
}
switch (mode) {
case 'phone': screen_resize_phone(); break;
case 'small': screen_resize_small(); break;
case 'normal': screen_resize_normal(); break;
case 'large': screen_resize_large(); break;
}
screen_resize_logo(mode);
screen_resize_headers();
// On iOS and Android the content frame height is never correct, fix it.
// Actually I observed the issue on my old iPad with iOS 9.3.
if (bw.webkit && bw.ipad && bw.agent.match(/OS 9/)) {
$('.iframe-wrapper').each(function() {
var h = $(this).height();
if (h) {
$(this).children('iframe').height(h);
}
});
}
};
/**
* Assigns layout-* and touch-mode class to the 'html' element
*
* If we're inside an iframe that is small we have to
* check if the parent window is also small (mobile).
* We use that e.g. to still display desktop-like popovers in dialogs
*/
function screen_resize_html()
{
var meta = layout_metadata(),
html = $(document.documentElement);
if (html[0].className.match(/layout-([a-z]+)/)) {
if (RegExp.$1 != meta.mode) {
html.removeClass('layout-' + RegExp.$1)
.addClass('layout-' + meta.mode);
}
}
else {
html.addClass('layout-' + meta.mode);
}
if (meta.touch && !html.is('.touch')) {
html.addClass('touch');
}
else if (!meta.touch && html.is('.touch')) {
html.removeClass('touch');
}
};
function screen_resize_logo(mode)
{
if (mode == 'phone' && $('#logo').data('src-small')) {
$('#logo').attr('src', $('#logo').data('src-small'));
}
else {
$('#logo').attr('src', $('#logo').data('src-default'));
}
}
/**
* Sets left and right margin to the header title element to make it
* properly centered depending on the number of buttons on both sides
*/
function screen_resize_headers()
{
$('#layout > div > .header').each(function() {
var title, right = 0, left = 0, padding = 0,
sizes = {left: 0, right: 0};
$(this).children(':visible:not(.position-absolute)').each(function() {
if (!title && $(this).is('.header-title')) {
title = $(this);
return;
}
sizes[title ? 'right' : 'left'] += this.offsetWidth;
});
if (padding + sizes.right >= sizes.left) {
right = 0;
left = sizes.right + padding - sizes.left;
}
else {
left = 0;
right = sizes.left - (padding + sizes.right);
}
$(title).css({
'margin-right': right + 'px',
'margin-left': left + 'px',
'padding-right': padding + 'px'
});
});
};
function screen_resize_phone()
{
screen_resize_small_all();
app_menu(false);
};
function screen_resize_small()
{
screen_resize_small_all();
app_menu(true);
};
function screen_resize_normal()
{
var show;
if (layout.list.length) {
show = layout.list.is(env.last_selected) || (!layout.sidebar.is(env.last_selected) && !layout.sidebar.is('.layout-sticky'));
layout.list[show ? 'removeClass' : 'addClass']('hidden');
}
if (layout.sidebar.length) {
show = !layout.list.length || layout.sidebar.is(env.last_selected) || layout.sidebar.is('.layout-sticky');
layout.sidebar[show ? 'removeClass' : 'addClass']('hidden');
}
layout.content.removeClass('hidden');
app_menu(true);
screen_resize_small_none();
if (layout.list.length) {
$('.header > ul.menu', layout.list).addClass('popupmenu');
}
};
function screen_resize_large()
{
$.each(layout, function(name, item) { item.removeClass('hidden'); });
screen_resize_small_none();
if (layout.list) {
$('.header > ul.menu.popupmenu', layout.list).removeClass('popupmenu');
}
};
function screen_resize_small_all()
{
var show, got_content = false;
if (layout.content.length) {
show = got_content = layout.content.is(env.last_selected);
layout.content[show ? 'removeClass' : 'addClass']('hidden');
$('.header > ul.menu', layout.content).addClass('popupmenu');
}
if (layout.list.length) {
show = !got_content && layout.list.is(env.last_selected);
layout.list[show ? 'removeClass' : 'addClass']('hidden');
$('.header > ul.menu', layout.list).addClass('popupmenu');
}
if (layout.sidebar.length) {
show = !got_content && (layout.sidebar.is(env.last_selected) || !layout.list.length);
layout.sidebar[show ? 'removeClass' : 'addClass']('hidden');
}
if (got_content) {
buttons.back_list.show();
}
};
function screen_resize_small_none()
{
buttons.back_list.filter(function() { return $(this).parents('#layout-sidebar').length == 0; }).hide();
$('ul.menu.popupmenu').removeClass('popupmenu');
};
function show_content(unsticky)
{
// show sidebar and hide list
layout.list.addClass('hidden');
layout.sidebar.addClass('hidden');
layout.content.removeClass('hidden');
if (unsticky) {
layout.sidebar.removeClass('layout-sticky');
}
screen_resize_headers();
env.last_selected = layout.content[0];
};
function show_sidebar(sticky)
{
// show sidebar and hide list
layout.list.addClass('hidden');
layout.sidebar.removeClass('hidden');
if (sticky) {
layout.sidebar.addClass('layout-sticky');
}
if (mode == 'small' || mode == 'phone') {
layout.content.addClass('hidden');
}
screen_resize_headers();
env.last_selected = layout.sidebar[0];
};
function show_list(scroll)
{
if (!layout.list.length && !layout.sidebar.length) {
history.back();
}
else {
// show list and hide sidebar and content
layout.sidebar.addClass('hidden').removeClass('layout-sticky');
layout.list.removeClass('hidden');
if (mode == 'small' || mode == 'phone') {
hide_content();
}
if (scroll) {
layout.list.children('.scroller').scrollTop(0);
}
env.last_selected = layout.list[0];
}
screen_resize_headers();
};
function hide_content()
{
// show sidebar or list, hide content frame
env.last_selected = layout.list[0] || layout.sidebar[0];
screen_resize();
// reset content frame, so we can load it again
rcmail.show_contentframe(false);
// now we have to unselect selected row on the list
$('[data-list]', layout.list).each(function() {
var list = $(this).data('list');
if (rcmail[list]) {
if (rcmail[list].clear_selection) {
rcmail[list].clear_selection(); // list widget
}
else if (rcmail[list].select) {
rcmail[list].select(); // treelist widget
}
}
});
};
// show menu widget
function app_menu(show)
{
if (show) {
if (mode == 'phone') {
$('<div id="menu-overlay" class="popover-overlay">')
.on('click', function() { app_menu(false); })
.appendTo('body');
if (!env.menu_initialized) {
env.menu_initialized = true;
$('a', layout.menu).on('click', function(e) { if (mode == 'phone') app_menu(); });
}
layout.menu.addClass('popover');
}
layout.menu.removeClass('hidden');
}
else {
$('#menu-overlay').remove();
layout.menu.addClass('hidden').removeClass('popover');
}
};
/**
* Triggered when a UI message is displayed
*/
function message_displayed(p)
{
if (p.type == 'loading' && $('.iframe-loader:visible').length) {
// hide original message object, we don't need two "loaders"
rcmail.hide_message(p.object);
return;
}
alert_style(p.object, p.type, true);
$(p.object).attr('role', 'alert');
};
/**
* Applies some styling and icon to an alert object
*/
function alert_style(object, type, wrap)
{
var tmp, classes = 'ui alert',
addicon = !$(object).is('.noicon'),
map = {
information: 'alert-info',
notice: 'alert-info',
confirmation: 'alert-success',
warning: 'alert-warning',
error: 'alert-danger',
loading: 'alert-info loading',
uploading: 'alert-info loading',
vcardattachment: 'alert-info' // vcard_attachments plugin
};
// we need the content to be non-text node for best alignment
if (wrap && addicon && !$(object).is('.aligned-buttons')) {
$(object).html($('<span>').html($(object).html()));
}
// Type can be e.g. 'notice chat'
type = type.split(' ')[0];
if (tmp = map[type]) {
classes += ' ' + tmp;
if (addicon) {
$('<i>').attr('class', 'icon').prependTo(object);
}
}
$(object).addClass(classes);
};
/**
* Set UI dialogs size/style depending on screen size
*/
function dialog_open(dialog)
{
var me = $(dialog.uiDialog),
width = me.width(),
height = me.height(),
maxWidth = $(window).width(),
maxHeight = $(window).height();
if (maxWidth <= 480) {
me.css({width: '100%', height: '100%'});
}
else {
if (height > maxHeight) {
me.css('height', '100%');
}
if (width > maxWidth) {
me.css('width', '100%');
}
}
// Close all popovers
$(document).click();
// Display loader when the dialog has an iframe
iframe_loader($('div.popup > iframe', me));
// TODO: style buttons/forms
bootstrap_style(dialog.uiDialog);
};
/**
* Initializes searchbar widget
*/
function searchbar_init(bar)
{
var unread_button = $(),
options_button = $('a.button.options', bar),
input = $('input:not([type=hidden])', bar),
placeholder = input.attr('placeholder'),
form = $('form', bar),
is_search_pending = function() {
if (input.val()) {
return true;
}
if (rcmail.task == 'mail' && $('#s_interval').val()) {
return true;
}
if (rcmail.gui_objects.search_filter && $(rcmail.gui_objects.search_filter).val() != 'ALL') {
return true;
}
if (rcmail.gui_objects.foldersfilter && $(rcmail.gui_objects.foldersfilter).val() != '---') {
return true;
}
},
close_func = function() {
if ($(bar).is('.open')) {
options_button.click();
}
},
update_func = function() {
$(bar)[is_search_pending() ? 'addClass' : 'removeClass']('active');
unread_button[rcmail.gui_objects.search_filter && $(rcmail.gui_objects.search_filter).val() == 'UNSEEN' ? 'addClass' : 'removeClass']('selected');
};
// Add Unread filter button
if (input.is('#mailsearchform')) {
unread_button = $('<a>')
.attr({'class': 'button unread', href: '#', role: 'button', title: rcmail.gettext('showunread')})
.on('click', function(e) {
$(rcmail.gui_objects.search_filter).val($(e.target).is('.selected') ? 'ALL' : 'UNSEEN');
rcmail.command('search');
})
.insertBefore(options_button);
}
options_button.on('click', function(e) {
var id = $(this).data('target'),
options = $('#' + id),
open = $(bar).is('.open');
if (options.length) {
if (!open) {
if (ref[id]) {
ref[id](options.get(0), this, e);
}
else if (typeof window[id] == 'function') {
window[id](options.get(0), this, e);
}
}
options.next()[open ? 'show' : 'hide']();
options.toggleClass('hidden');
$('.floating-action-buttons').toggleClass('hidden');
$(bar).toggleClass('open');
$('button.search', options).off('click.search').on('click.search', function() {
options_button.click();
update_func();
});
}
});
input.on('input change', update_func)
.on('focus blur', function(e) { input.attr('placeholder', e.type == 'blur' ? placeholder : ''); });
// Search reset action
$('a.reset', bar).on('click', function(e) {
// for treelist widget's search setting val and keyup.treelist is needed
// in normal search form reset-search command will do the trick
input.val('').change().trigger('keyup.treelist', {keyCode: 27});
if ($(bar).is('.open')) {
options_button.click();
}
// Reset filter
if (rcmail.gui_objects.search_filter) {
$(rcmail.gui_objects.search_filter).val('ALL');
}
if (rcmail.gui_objects.foldersfilter) {
$(rcmail.gui_objects.foldersfilter).val('---').change();
rcmail.folder_filter('---');
}
update_func();
});
rcmail.addEventListener('init', update_func)
.addEventListener('responsebeforesearch', update_func)
.addEventListener('beforelist', close_func)
.addEventListener('afterlist', update_func)
.addEventListener('beforesearch', close_func);
};
/**
* Converts toolbar menu into popup-menu for small screens
*/
function toolbar_init()
{
if (env.got_smart_toolbar) {
return;
}
env.got_smart_toolbar = true;
var list_mark, items = [],
list_items = [],
meta = layout_metadata(),
button_func = function(button, items, cloned) {
var item = $('<li role="menuitem">'),
button = cloned ? create_cloned_button($(button), true, 'hidden-big hidden-large') : $(button).detach();
// Remove empty text nodes that break alignment of text of the menu item
button.contents().filter(function() { if (this.nodeType == 3 && this.nodeValue.trim().length == 0) $(this).remove(); });
if (button.is('.spacer')) {
item.addClass('spacer');
}
else {
item.append(button);
}
items.push(item);
};
// convert content toolbar to a popup list
layout.content.find('.header > .menu').each(function() {
var toolbar = $(this);
toolbar.children().each(function() { button_func(this, items); });
toolbar.remove();
});
// convert list toolbar to a popup list
layout.list.find('.header > .menu').each(function() {
var toolbar = $(this);
list_mark = toolbar.next();
toolbar.children().each(function() {
if (meta.mode != 'large') {
// TODO: Would be better to set this automatically on submenu display
// i.e. in show/shown event (see popup_init()), if possible
$(this).data('popup-pos', 'right');
}
// add items to the content menu too
button_func(this, items, true);
button_func(this, list_items);
});
toolbar.remove();
});
// special elements to clone and add to the toolbar (mobile only)
$('ul[data-menu="toolbar-small"] > li > a').each(function() {
var button = $(this).clone();
button.attr('id', this.id + '_clone');
// TODO: rcmail.register_button()
items.push($('<li role="menuitem">').addClass('hidden-big').append(button));
});
// append the new list toolbar and menu button
if (list_items.length) {
var container = layout.list.children('.header'),
menu_attrs = {'class': 'menu toolbar popupmenu listing iconized', id: 'toolbar-list-menu'},
menu_button = $('<a class="button icon toolbar-list-button" href="#list-menu">')
.attr({'data-popup': 'toolbar-list-menu'}),
// TODO: copy original toolbar attributes (class, role, aria-*)
toolbar = $('<ul>').attr(menu_attrs).data('popup-parent', container).append(list_items);
if (list_mark.length) {
toolbar.insertBefore(list_mark);
}
else {
container.append(toolbar);
}
container.append(menu_button);
}
// append the new toolbar and menu button
if (items.length) {
var container = layout.content.children('.header'),
menu_attrs = {'class': 'menu toolbar popupmenu listing iconized', id: 'toolbar-menu'},
menu_button = $('<a class="button icon toolbar-menu-button" href="#menu">')
.attr({'data-popup': 'toolbar-menu'});
container
// TODO: copy original toolbar attributes (class, role, aria-*)
.append($('<ul>').attr(menu_attrs).data('popup-parent', container).append(items))
.append(menu_button);
// bind toolbar menu with the menu button in the list header
layout.list.find('a.toolbar-menu-button').click(function(e) {
e.stopPropagation();
menu_button.click();
});
}
};
/**
* Initialize a popup for specified button element
*/
function popup_init(item, win)
{
// On mobile we display the menu from the frame in the parent window
if (is_framed && is_mobile()) {
return parent.UI.popup_init(item, win || window);
}
if (!win) win = window;
var level,
popup_id = $(item).data('popup'),
popup = $(win.$('#' + popup_id).get(0)), // a "hack" to support elements in frames
popup_orig = popup,
title = $(item).attr('title'),
content_element = function() {
// On mobile we display a menu from the frame in the parent window
// To make menu actions working we have to clone the menu
// and pass click events to it...
if (win != window) {
popup = popup_orig.clone(true, true);
popup.attr('id', popup_id + '-clone')
.appendTo(document.body)
.find('li > a').attr('onclick', '').off('click').on('click', function(e) {
if (!$(this).is('.disabled')) {
$(item).popover('hide');
win.$('#' + $(this).attr('id')).click();
}
return false;
});
}
return popup.get(0);
};
$(item).attr({
'aria-haspopup': 'true',
'aria-expanded': 'false',
'aria-owns': popup_id,
})
.popover({
content: content_element,
trigger: $(item).data('popup-trigger') || 'click',
placement: $(item).data('popup-pos') || 'bottom',
animation: true,
boundary: 'window', // fix for https://github.com/twbs/bootstrap/issues/25428
html: true
})
.on('show.bs.popover', function(event) {
var init_func = popup.data('popup-init');
if (popup_id && menus[popup_id]) {
menus[popup_id].transitioning = true;
}
if (init_func && ref[init_func]) {
ref[init_func](popup.get(0), item, event);
}
else if (init_func && win[init_func]) {
win[init_func](popup.get(0), item, event);
}
level = $('div.popover:visible').length + 1;
popup.removeClass('hidden').attr('aria-hidden', false)
// Stop propagation on menu items that have popups
// to make a click on them not hide their parent menu(s)
.find('[aria-haspopup="true"]')
.data('level', level + 1)
.off('click.popup')
.on('click.popup', function(e) { e.stopPropagation(); });
if (!is_mobile()) {
// Set popup height so it is less than the window height
popup.css('max-height', Math.min(36 * 15 - 1, $(window).height() - 30));
}
})
.on('shown.bs.popover', function(event) {
var mobile = is_mobile(),
popover = $('#' + $(item).attr('aria-describedby'));
level = $(item).data('level') || 1;
// Set popup Back/Close title
if (mobile) {
var label = level > 1 ? 'back' : 'close',
title = rcmail.gettext(label),
class_name = 'button icon ' + (label == 'back' ? 'back' : 'cancel');
$('.popover-header', popover).empty()
.append($('<a>').attr('class', class_name).text(title)
.on('click', function(e) {
$(item).popover('hide');
if (level > 1) {
e.stopPropagation();
}
})
.on('mousedown', function(e) {
// stop propagation to i.e. do not close jQuery-UI dialogs below
e.stopPropagation();
})
);
}
// Hide other menus on the same level
$.each(menus, function(id, prop) {
if ($(prop.target).data('level') == level && id != popup_id) {
menu_hide(id);
}
});
// On keyboard event focus the first (active) entry and enable keyboard navigation
if ($(item).data('event') == 'key') {
popover.off('keydown.popup').on('keydown.popup', 'a.active', function(e) {
var entry, node, mode = 'next';
switch (e.which) {
case 27: // ESC
case 9: // TAB
$(item).popover('toggle').focus();
return false;
case 38: // ARROW-UP
case 63232:
mode = 'previous';
case 40: // ARROW-DOWN
case 63233:
entry = e.target.parentNode;
while (entry = entry[mode + 'Sibling']) {
if (node = $(entry).children('.active')[0]) {
node.focus();
break;
}
}
return false; // prevents from scrolling the whole page
}
});
popover.find('a.active').first().focus();
}
if (popup_id && menus[popup_id]) {
menus[popup_id].transitioning = false;
}
// add overlay element for phone layout
if (mobile && !$('.popover-overlay').length) {
$('<div>').attr('class', 'popover-overlay')
.appendTo('body')
.click(function() { $(this).remove(); });
}
$('.popover-body', popover).addClass('webkit-scroller');
})
.on('hide.bs.popover', function() {
if (level == 1) {
$('.popover-overlay').remove();
}
if (popup_id && menus[popup_id] && popup.is(':visible')) {
menus[popup_id].transitioning = true;
}
})
.on('hidden.bs.popover', function() {
if (/-clone$/.test(popup.attr('id'))) {
popup.remove();
}
else {
popup.attr('aria-hidden', true)
// Some menus aren't being hidden, force that
.addClass('hidden')
// Bootstrap will detach the popup element from
// the DOM (https://github.com/twbs/bootstrap/issues/20219)
// making our menus to not update buttons state.
// Work around this by attaching it back to the DOM tree.
.appendTo(popup.data('popup-parent') || document.body);
}
// close orphaned popovers, for some reason there are sometimes such dummy elements left
$('.popover-body:empty').each(function() { $(this).parent().remove(); });
if (popup_id && menus[popup_id]) {
delete menus[popup_id];
}
})
// Because Bootstrap does not provide originalEvent in show/shown events
// we have to handle that by our own using click and keydown handlers
.on('click', function() {
$(this).data('event', 'mouse');
})
.on('keydown', function(e) {
if (e.originalEvent) {
switch (e.originalEvent.which) {
case 13:
case 32:
// Open the popup on ENTER or SPACE
e.preventDefault();
$(this).data('event', 'key').popover('toggle');
break;
case 27:
// Close the popup on ESC key
$(this).popover('hide');
break;
}
}
});
// re-add title attribute removed by bootstrap popover
if (title) {
$(item).attr('title', title);
}
popup.attr('aria-hidden', 'true').data('button', item);
// stop propagation to e.g. do not hide the popup when
// clicking inside on form elements
if (popup.data('editable')) {
popup.on('click mousedown', function(e) { e.stopPropagation(); });
}
};
/**
* Closes all popups (for use as event handler)
*/
function popups_close(e)
{
// Ignore some of propagated click events (see pretty_select())
if (popups_close_lock && popups_close_lock > (new Date().getTime() - 250)) {
return;
}
$('.popover.show').each(function() {
var popup = $('.popover-body', this),
button = popup.children().first().data('button');
if (button && e.target != button && !$(button).find(e.target).length && typeof button !== 'string') {
$(button).popover('hide');
}
if (!button) {
$(this).remove();
}
});
};
/**
* Handler for menu-open and menu-close events
*/
function menu_toggle(p)
{
if (!p || !p.name || (p.props && p.props.skinable === false)) {
return;
}
if (is_framed && is_mobile()) {
if (!p.win) {
p.win = window;
}
return parent.UI.menu_toggle(p);
}
if (p.name == 'messagelistmenu') {
menu_messagelist(p);
}
else if (p.event == 'menu-open') {
var fn, pos,
content = $('ul', p.obj).first(),
target = p.props && p.props.link ? p.props.link : p.originalEvent.target;
// Sanity check, make sure we have some content to show
if (!content.length) {
return;
}
if ($(target).is('span')) {
target = $(target).parents('a,li')[0];
}
if (p.name.match(/^drag/)) {
// create a fake element to position drag menu on the cursor position
pos = rcube_event.get_mouse_pos(p.originalEvent);
target = $('<a>').css({
position: 'absolute',
left: pos.x,
top: pos.y,
height: '1px',
width: '1px',
visibility: 'hidden'
})
.appendTo(document.body).get(0);
}
pos = $(target).data('popup-pos') || 'right';
if (p.name == 'folder-selector') {
content.addClass('listing folderlist');
}
else if (p.name == 'addressbook-selector' || p.name == 'contactgroup-selector') {
content.addClass('listing contactlist');
}
else if (content.hasClass('menu')) {
content.addClass('listing');
}
if (p.name == 'pagejump-selector') {
content.addClass('simplelist');
p.obj.addClass('simplelist');
pos = 'top';
}
// There can be only one menu of the same type
if (menus[p.name]) {
menu_hide(p.name, p.originalEvent);
}
// Popover menus use animation. Sometimes the same menu is
// immediately hidden and shown (e.g. folder-selector for copy and move action)
// we have to wait until the previous menu hides before we can open it again
fn = function() {
if (menus[p.name] && menus[p.name].transitioning) {
return setTimeout(fn, 50);
}
if (!$(target).data('popup')) {
$(target).data({
event: rcube_event.is_keyboard(p.originalEvent) ? 'key' : 'mouse',
popup: p.name,
'popup-pos': pos,
'popup-trigger': 'manual'
});
popup_init(target, p.win);
}
menus[p.name] = {target: target};
$(target).popover('show');
}
fn();
}
else {
menu_hide(p.name, p.originalEvent);
}
// Stop propagation so multi-level menus work properly
p.originalEvent.stopPropagation();
};
/**
* Close menu by name
*/
function menu_hide(name, event)
{
var target = menu_target(name);
if (name.match(/^drag/)) {
$(target).popover('dispose').remove();
}
else {
$(target).popover('hide');
// In phone mode close all menus when forwardmenu is requested to be closed
// FIXME: This is a hack, we need some generic solution.
if (name == 'forwardmenu') {
popups_close(event);
}
}
};
/**
* Destroys menu by name
*
* This is required when you replace the menu content element
*/
function menu_destroy(name)
{
$('[aria-owns=' + name + ']').popover('dispose').data('popup', null);
};
/**
* Get menu target by name
*/
function menu_target(name)
{
var target;
if (menus[name]) {
target = menus[name].target;
}
else {
target = $('#' + name).data('button');
if (!target) {
// catch cases as 'forwardmenu' where menu suffix has no hyphen
// or try with -menu suffix if it's not in the menu name already
if (name.match(/(?!-)menu$/)) {
name = name.substr(0, name.length - 4);
}
target = $('#' + name + '-menu').data('button');
}
}
return target;
};
/**
* Messages list options dialog
*/
function menu_messagelist(p)
{
var content = $('#listoptions-menu'),
width = content.width() + 25,
dialog = content.clone(true);
// set form values
$('select[name="sort_col"]', dialog).val(rcmail.env.sort_col || '');
$('select[name="sort_ord"]', dialog).val(rcmail.env.sort_order || 'ASC');
$('select[name="mode"]', dialog).val(rcmail.env.threading ? 'threads' : 'list');
// Fix id/for attributes
$('select', dialog).each(function() { this.id = this.id + '-clone'; });
$('label', dialog).each(function() { $(this).attr('for', $(this).attr('for') + '-clone'); });
var save_func = function(e) {
if (rcube_event.is_keyboard(e.originalEvent)) {
$('#listmenulink').focus();
}
var col = $('select[name="sort_col"]', dialog).val(),
ord = $('select[name="sort_ord"]', dialog).val(),
mode = $('select[name="mode"]', dialog).val();
rcmail.set_list_options([], col, ord, mode == 'threads' ? 1 : 0);
return true;
};
dialog = rcmail.simple_dialog(dialog, rcmail.gettext('listoptionstitle'), save_func, {
closeOnEscape: true,
minWidth: 400
});
};
/**
* About dialog
*/
function about_dialog(elem)
{
var support_url, support_func, support_button = false,
dialog = $('<iframe>').attr({id: 'aboutframe', src: rcmail.url('settings/about', {_framed: 1})}),
support_link = $('#supportlink');
if (support_link.length && (support_url = support_link.attr('href'))) {
support_button = support_link.text();
support_func = function(e) { support_url.indexOf('mailto:') < 0 ? window.open(support_url) : location.href = support_url; };
}
rcmail.simple_dialog(dialog, $(elem).text(), support_func, {
button: support_button,
button_class: 'help',
cancel_button: 'close',
height: 400
});
};
/**
* Show/hide more mail headers (envelope)
*/
function headers_show(toggle)
{
var key = 'mail.show.envelope',
pref = get_pref(key),
show = toggle ? !pref : pref,
mode = show ? 'summary' : 'details',
headers = $('div.header-content');
$('div.header-links').find('a.headers-details,a.headers-summary')
.removeClass().addClass('headers-' + mode).text(rcmail.gettext(mode));
headers[show ? 'addClass' : 'removeClass']('details-view');
if (toggle) {
// save new pref
save_pref(key, show);
}
};
/**
* Mail headers dialog
*/
function headers_dialog()
{
var props = {_uid: rcmail.env.uid, _mbox: rcmail.env.mailbox, _framed: 1},
dialog = $('<iframe>').attr({id: 'headersframe', src: rcmail.url('headers', props)});
rcmail.simple_dialog(dialog, rcmail.gettext('arialabelmessageheaders'), null, {
cancel_button: 'close',
height: 400
});
};
/**
* Mail import dialog
*/
function import_dialog()
{
if (!rcmail.commands['import-messages']) {
return;
}
var content = $('#uploadform'),
dialog = content.clone(true);
var save_func = function(e) {
return rcmail.command('import-messages', $(dialog.find('form')[0]));
};
rcmail.simple_dialog(dialog, rcmail.gettext('importmessages'), save_func, {
button: 'import',
closeOnEscape: true,
minWidth: 400
});
};
/**
* Search options menu popup
*/
function searchmenu(obj)
{
var n, all,
list = $('input[name="s_mods[]"]', obj),
scope_select = $('#s_scope', obj),
mbox = rcmail.env.mailbox,
mods = rcmail.env.search_mods,
scope = rcmail.env.search_scope || 'base';
if (!$(obj).data('initialized')) {
$(obj).data('initialized', true);
if (list.length) {
list.on('change', function() { set_searchmod(obj, this); });
rcmail.addEventListener('beforesearch', function() { set_searchmod(obj); });
}
}
if (rcmail.env.search_mods) {
if (rcmail.env.task == 'mail') {
if (scope == 'all') {
mbox = '*';
}
mods = mods[mbox] ? mods[mbox] : mods['*'];
all = 'text';
scope_select.val(scope);
}
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) {
list.filter('[value="' + n + '"]').prop('checked', true);
}
}
}
};
function set_searchmod(menu, elem)
{
var all, m, task = rcmail.env.task,
mods = rcmail.env.search_mods,
mbox = rcmail.env.mailbox,
scope = $('#s_scope', menu).val(),
interval = $('#s_interval', menu).val();
if (scope == 'all') {
mbox = '*';
}
if (!mods) {
mods = {};
}
if (task == 'mail') {
if (!mods[mbox]) {
mods[mbox] = rcube_clone_object(mods['*']);
}
m = mods[mbox];
all = 'text';
rcmail.env.search_scope = scope;
rcmail.env.search_interval = interval;
}
else { //addressbook
m = mods;
all = '*';
}
if (!elem) {
return;
}
if (!elem.checked) {
delete(m[elem.value]);
}
else {
m[elem.value] = 1;
}
// mark all fields
if (elem.value == all) {
$('input[name="s_mods[]"]', menu).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;
}
});
}
rcmail.set_searchmods(m);
};
/**
* Spellcheck languages list
*/
function spellmenu(obj)
{
var i, link, li, list = [],
lang = rcmail.spellcheck_lang(),
ul = $('ul', obj);
if (!ul.length) {
ul = $('<ul class="selectable listing iconized" role="menu">');
for (i in rcmail.env.spell_langs) {
li = $('<li role="menuitem">');
link = $('<a href="#'+ i +'" tabindex="0"></a>')
.text(rcmail.env.spell_langs[i])
.addClass('active').data('lang', i)
.on('click keypress', function(e) {
if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
rcmail.spellcheck_lang_set($(this).data('lang'));
rcmail.hide_menu('spell-menu', e);
return false;
}
});
link.appendTo(li);
list.push(li);
}
ul.append(list).appendTo(obj);
}
// select current language
$('li', ul).each(function() {
var el = $('a', this);
if (el.data('lang') == lang) {
el.addClass('selected').attr('aria-selected', 'true');
}
else if (el.hasClass('selected')) {
el.removeClass('selected').removeAttr('aria-selected');
}
});
};
/**
* Add/remove item to/from compose options status bar
*/
function compose_status(id, status)
{
var bar = $('#composestatusbar'), ico = bar.find('a.button.icon.' + id);
if (!status) {
ico.remove();
}
else if (!ico.length) {
$('<a>').attr('class', 'button icon ' + id)
.on('click', function() { show_sidebar(); })
.appendTo(bar);
}
};
/**
* Attachment menu
*/
function attachmentmenu(obj, button, event)
{
var id = $(button).parent().attr('id').replace(/^attach/, '');
$.each(['open', 'download', 'rename'], function() {
var action = this;
$('#attachmenu' + action, obj).off('click').attr('onclick', '').click(function(e) {
return rcmail.command(action + '-attachment', id, this, e.originalEvent);
});
});
// call menu-open so core can set state of menu commands
return rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, obj, event);
};
/**
* Appends drop-icon to attachments list item (to invoke attachment menu)
*/
function attachmentmenu_append(item)
{
item = $(item);
if (!item.is('.no-menu') && !item.children('.dropdown').length) {
var label = rcmail.gettext('options'),
fname = item.find('a.filename');
var button = $('<a>').attr({
href: '#',
tabindex: fname.attr('tabindex') || 0,
title: label,
'class': 'button icon dropdown skip-content'
})
.on('click', function(e) {
return attachmentmenu($('#attachmentmenu'), button, e);
})
.append($('<span>').attr('class', 'inner').text(label));
if (fname.length) {
button.insertAfter(fname);
}
else {
button.appendTo(item);
}
}
};
/**
* Mailto menu
*/
function mailtomenu(obj, button, event, onclick)
{
var mailto = $(button).attr('href').replace(/^mailto:/, '');
if (mailto.indexOf('@') < 0) {
return true; // let the browser handle this
}
// disable all menu actions
obj.find('a').off('click').removeClass('active');
if (rcmail.env.has_writeable_addressbook) {
$('.addressbook', obj).addClass('active')
.on('click', function(e) {
var i, contact = mailto,
txt = $(button).filter('.rcmContactAddress').text();
contact = contact.split('?')[0].split(',')[0].replace(/(^<|>$)/g, '');
if (txt) {
txt = txt.replace('<' + contact + '>', '');
contact = '"' + txt.trim() + '" <' + contact + '>';
}
return rcmail.command('add-contact', contact, this, e.originalEvent);
});
}
$('.compose', obj).addClass('active').on('click', function(e) {
// Execute the original onclick handler to support mailto URL arguments (#6751)
if (onclick) {
button.onclick = onclick;
// use the second argument to tell our handler to not display the menu again
$(button).trigger('click', [true]);
button.onclick = null;
}
else {
rcmail.command('compose', mailto, this, e.originalEvent);
}
return false; // for Chrome
});
return rcmail.command('menu-open', {menu: 'mailto-menu', link: button}, button, event.originalEvent);
};
/**
* Appends popup menu to mailto links
*/
function mailtomenu_append(item)
{
// Remember the original onclick handler and display the menu instead
var onclick = item.onclick;
item.onclick = null;
$(item).on('click', function(e, menu) {
return menu || mailtomenu($('#mailto-menu'), item, e, onclick);
});
};
/**
* Headers menu in mail compose
*/
function headersmenu(obj, button, event)
{
$('li > a', obj).each(function() {
var link = $(this), target = '#compose_' + link.data('target');
link[$(target).is(':visible') ? 'removeClass' : 'addClass']('active')
.off().on('click', function() {
$(target).removeClass('hidden').find('.recipient-input input').focus();
link.removeClass('active');
rcmail.set_menu_buttons();
});
});
};
/**
* Reset/hide compose message recipient input
*/
function header_reset(id)
{
$('#' + id).val('').change()
// jump to the next input
.closest('.form-group').nextAll(':not(.hidden)').first().find('input').focus();
$('a[data-target=' + id.replace(/^_/, '') + ']').addClass('active');
rcmail.set_menu_buttons();
};
/**
* Recipient (contact) selector
*/
function recipient_selector(field, opts)
{
if (!opts) opts = {};
var title = rcmail.gettext(opts.title || 'insertcontact'),
dialog = $('#recipient-dialog'),
parent = dialog.parent(),
close_func = function() {
if (dialog.is(':visible')) {
rcmail.env.recipient_dialog.dialog('close');
}
},
insert_func = function() {
if (opts.action) {
opts.action();
close_func();
return;
}
rcmail.command('add-recipient');
};
if (!rcmail.env.recipient_selector_initialized) {
rcmail.addEventListener('add-recipient', close_func);
rcmail.env.recipient_selector_initialized = true;
}
if (field) {
rcmail.env.focused_field = '#_' + field;
}
rcmail.contact_list.clear_selection();
rcmail.contact_list.multiselect = 'multiselect' in opts ? opts.multiselect : true;
rcmail.env.recipient_dialog = rcmail.simple_dialog(dialog, title, insert_func, {
button: rcmail.gettext(opts.button || 'insert'),
button_class: opts.button_class || 'insert recipient',
height: 600,
classes: {
'ui-dialog-content': 'p-0' // remove padding on dialog content
},
open: function() {
// Don't want focus in the search field, we focus first contacts source record instead
$('#directorylist a').first().focus();
},
close: function() {
dialog.appendTo(parent);
$(this).remove();
$(opts.focus || rcmail.env.focused_field).focus();
}
});
};
/**
* Create/Update quota widget (setquota event handler)
*/
function update_quota(p)
{
var element = $('#quotadisplay'),
bar = element.find('.bar'),
value = p.total ? p.percent : 0;
if (!bar.length) {
bar = $('<span class="bar"><span class="value"></span></span>').appendTo(element);
}
if (value > 0 && value < 10) {
value = 10; // smaller values look not so nice
}
bar.find('.value').css('width', value + '%')[value >= 90 ? 'addClass' : 'removeClass']('warning');
// set title and reset tooltip's data (needed in case of empty title)
element.attr({'data-original-title': '', title: element.find('.count').attr('title')});
if (p.table) {
element.css('cursor', 'pointer').data('popup-pos', 'top')
.off('click').on('click', function(e) {
rcmail.simple_dialog(p.table, 'quota', null, {cancel_button: 'close'});
});
}
else {
element.tooltip('dispose').tooltip({trigger: is_mobile() ? 'click' : 'hover'});
}
};
/**
* Replaces recipient input with content-editable element that uses "recipient boxes"
*/
function recipient_input(obj)
{
var list, input, selection = '',
apply_func = function() {
// update the original input
$(obj).val(list.text() + input.val());
},
insert_recipient = function(name, email, replace) {
var recipient = $('<li class="recipient">'),
name_element = $('<span class="name">').html(recipient_input_name(name || email))
.on('dblclick', function(e) { recipient_input_edit_dialog(e, insert_recipient); }),
email_element = $('<span class="email">'),
// TODO: should the 'close' link have tabindex?
link = $('<a>').attr({'class': 'button icon remove'})
.click(function() {
recipient.remove();
apply_func();
input.focus();
return false;
});
if (name) {
email = ' <' + email + '>';
}
email_element.text((name ? email : '') + ',');
recipient.attr('title', name ? (name + email) : null)
.append([name_element, email_element, link])
if (replace)
replace.replaceWith(recipient);
else
recipient.insertBefore(input.parent());
apply_func();
},
update_func = function(text) {
var result;
text = (text || input.val()).replace(/[,;\s]+$/, '');
result = recipient_input_parser(text);
$.each(result.recipients, function() {
insert_recipient(this.name, this.email);
});
input.val(result.text);
apply_func();
return result.recipients.length > 0;
},
parse_func = function(e, ac) {
var last, paste, value = this.value;
// On paste the text is not yet in the input we have to use clipboard.
// Also because on paste new-line characters are replaced by spaces (#6460)
if (e.type == 'paste') {
// pasted text
paste = (e.originalEvent.clipboardData || window.clipboardData).getData('text') || '';
// insert pasted text in place of the selection (or just cursor position)
value = value.substring(0, this.selectionStart) + paste + value.substring(this.selectionEnd);
e.preventDefault();
}
// #7231: When clicking on autocompletion list a change event
// is fired twice. We have to remove last recipient box if it is
// the same recpient (with incomplete email address).
// FIXME: Anyone with a better solution?
else if (ac) {
last = list.find('li.recipient').last();
if (last.length && this.value.indexOf(last.text().replace(/[ ,]+$/, '')) > -1) {
last.remove();
}
}
update_func(value);
},
keydown_func = function(e) {
// On Backspace remove the last recipient
if (e.keyCode == 8 && !input.val().length) {
list.children('li.recipient').last().remove();
apply_func();
return false;
}
// Here we add a recipient box when the separator (,;\s) or Enter was pressed,
else if (e.key == ' ' || e.key == ',' || e.key == ';' || (e.key == 'Enter' && !rcmail.ksearch_visible())) {
if (update_func()) {
return false;
}
}
};
// Create the input element and "editable" area
input = $('<input>').attr({type: 'text', tabindex: $(obj).attr('tabindex')})
.on('paste change', parse_func)
.on('keydown', keydown_func)
.on('blur', function() { list.removeClass('focus'); })
.on('focus mousedown', function() { list.addClass('focus'); });
list = $('<ul>').addClass('form-control recipient-input ac-input rounded-left')
.append($('<li class="input">').append(input))
// "selection" hack to allow text selection in the recipient box or multiple boxes (#7129)
.on('mouseup', function () { selection = window.getSelection().toString(); })
.on('click', function() { if (!selection.length) input.focus(); })
.sortable({
appendTo: document.body,
items: "> .recipient",
connectWith: '.recipient-input',
receive: function(event, ui) {
var recipient = list.text();
list.find('.recipient').remove();
update_func(recipient);
if (ui.sender) {
ui.sender.find('input').change();
}
}
});
// Hide the original input/textarea
// Note: we do not remove the original element, and we do not use
// display: none, because we want to handle onfocus event
// Note: tabindex:-1 to make Shift+TAB working on these widgets
$(obj).css({position: 'absolute', opacity: 0, left: '-5000px', width: '10px'})
.attr('tabindex', -1)
.after(list)
// some core code sometimes focuses or changes the original node
// in such cases we wan't to parse it's value and apply changes
// to the widget element
.on('focus', function(e) { input.focus(); e.preventDefault(); })
.on('change', function() {
$('li.recipient', list).remove();
input.val(this.value).change();
})
// copy and parse the value already set
.change();
// Init autocompletion
rcmail.init_address_input_events(input);
};
/**
* Parses recipient address input and extracts recipients from it
*/
function recipient_input_parser(text)
{
// support new-line as a separator, for paste action (#6460)
text = text.replace(/[,;\s]*[\r\n]+/g, ',').trim();
var recipients = [],
address_rx_part = '(\\S+|("[^"]+"))@\\S+',
recipient_rx1 = new RegExp('(<' + address_rx_part + '>)'),
recipient_rx2 = new RegExp('(' + address_rx_part + ')'),
global_rx = /(?=\S)[^",;]*(?:"[^\\"]*(?:\\[,;\S][^\\"]*)*"[^",;]*)*/g,
matches = text.match(global_rx);
$.each(matches || [], function() {
if (this.length && (recipient_rx1.test(this) || recipient_rx2.test(this))) {
var email, str = this;
text = text.replace(str, '');
// Support space-separated email addresses
while (str.length && str.indexOf(RegExp.$1) === 0) {
email = RegExp.$1;
recipients.push({
name: '',
email: email.replace(/(^<|>$)/g, '')
});
str = str.replace(email, '').trim();
if (!recipient_rx1.test(str) && !recipient_rx2.test(str)) {
break;
}
}
if (email != RegExp.$1) {
email = RegExp.$1;
recipients.push({
name: str.replace(email, '').trim(),
email: email.replace(/(^<|>$)/g, '')
});
}
}
});
text = text.replace(/[,;]+/, ',').replace(/^[,;\s]+/, '');
return {recipients: recipients, text: text};
};
/**
* Generates HTML for a text adding <span class="hidden">
* for quote/backslash characters, so they are hidden from the user,
* but still in place to make copying simpler
*
* Note: Selection works in Chrome, but not in Firefox?
*/
function recipient_input_name(text)
{
var i, char, result = '', len = text.length;
if (text.charAt(0) != '"' && text.indexOf('"') > -1) {
text = '"' + text.replace('\\', '\\\\').replace('"', '\\"') + '"';
}
for (i=0; i<len; i++) {
char = text.charAt(i);
switch (char) {
case '"':
if (i > 0 && i < len - 1) {
result += '"';
break;
}
result += '<span class="quotes">' + char + '</span>';
break;
case '\\':
result += '<span class="quotes">' + char + '</span>';
if (text.charAt(i+1) == '\\') {
result += char;
i++;
}
break;
case '<':
result += '&lt;';
break;
case '>':
result += '&gt;';
break;
default:
result += char;
}
}
return result;
};
/**
* Displays dialog to edit a recipient entry
*/
function recipient_input_edit_dialog(e, callback)
{
var element = $(e.target).parents('.recipient'),
recipient = element.text().replace(/,+$/, ''),
input = $('<input>').attr({type: 'text', size: 50}).val(recipient),
content = $('<label>').text(rcmail.gettext('recipient')).append(input);
rcmail.simple_dialog(content, 'recipientedit', function() {
var result, value = input.val();
if (value) {
if (value != recipient) {
result = recipient_input_parser(value);
if (result.recipients.length != 1) {
return false;
}
callback(result.recipients[0].name, result.recipients[0].email, element);
}
return true;
}
});
};
/**
* Adds logic to the contact photo widget
*/
function image_upload_input(obj)
{
var reset_button = $('<a>')
.attr({'class': 'icon button delete', href: '#', })
.click(function(e) { rcmail.command('delete-photo', '', this, e); return false; }),
img = $(obj).find('img')[0],
img_onload = function() {
var state = (img.currentSrc || img.src).indexOf(rcmail.env.photo_placeholder) != -1;
$(obj)[state ? 'removeClass' : 'addClass']('changed');
};
$(obj).append(reset_button).click(function() { rcmail.upload_input('upload-form'); });
// Note: Looks like only Firefox does not need this separate call
img_onload();
$(img).on('load', img_onload);
};
/**
* Displays loading... overlay for iframes
*/
function iframe_loader(frame)
{
frame = $(frame);
if (frame.length) {
var loader = $('<div class="iframe-loader">')
.append($('<div class="spinner spinner-border" role="status">')
.append($('<span class="sr-only">').text(rcmail.gettext('loading'))));
// custom 'loaded' event is expected to be triggered by plugins
// when using the loader not on an iframe
frame.on('load error loaded', function() {
// wait some time to make sure the iframe stopped loading
setTimeout(function() { loader.remove(); }, 500);
})
.parent().append(loader);
// fix scrolling in iOS
if (ios) {
frame.parent().addClass('ios-scroll');
}
}
};
/**
* Convert checkbox input into Bootstrap's custom switch
*/
function pretty_checkbox(checkbox)
{
var label, parent, id, checkbox = $(checkbox);
if (checkbox.is('.custom-control-input')) {
return;
}
if (!(id = checkbox.attr('id'))) {
id = 'icochk' + (++env.checkboxes);
checkbox.attr('id', id);
}
if (checkbox.parent().is('label')) {
label = checkbox.parent();
checkbox = checkbox.detach();
label.before(checkbox);
}
else {
label = $('<label>');
}
label.attr({'for': id, 'class': 'custom-control-label', title: checkbox.attr('title') || ''})
.on('click', function(e) { e.stopPropagation(); });
checkbox.addClass('form-check-input custom-control-input')
.wrap('<div class="custom-control custom-switch">')
.parent().append(label);
};
/**
* Fix pretty checkbox input in a cloned element
*/
function pretty_checkbox_fix(params)
{
var id, input = $(params.row).find('input[id^=icochk]');
if (input.length) {
id = 'icochk' + (++env.checkboxes);
input.attr('id', id).next('label').attr('for', id);
}
};
/**
* Make select dropdowns pretty
* TODO: searching, optgroup, [multiple], iPhone/iPad
*/
function pretty_select(select)
{
// iPhone is not supported yet (problem with browser dropdown on focus)
if (bw.iphone || bw.ipad) {
return;
}
select = $(select);
if (select.is('.pretty-select')) {
return;
}
var select_ident = 'select' + select.attr('id') + select.attr('name');
var is_menu_open = function() {
// Use proper window in cases when the select element intialized
// inside an iframe is then used in a dialog inside a parent's window
// For some reason we can't access data-button property in cross-window
// case, we use data-ident attribute instead
var win = select[0].ownerDocument.defaultView;
if (win.$('.select-menu .listing').data('ident') == select_ident) {
return true;
}
};
var close_func = function() {
var open = is_menu_open();
select.popover('dispose').focus();
return !open;
};
var open_func = function(e) {
var last_char, last_index = -1, items = [], index = [],
dialog = select.closest('.ui-dialog')[0],
max_height = (document.documentElement.clientHeight || $(document.body).height()) - 75,
max_width = $(document.body).width() - 20,
min_width = Math.min(select.outerWidth(), max_width),
value = select.val();
if (!is_mobile()) {
max_height *= 0.5;
}
// close other popups
popups_close(e);
$('option', select).each(function() {
var label = $(this).text(),
link = $('<a href="#">')
.data('value', this.value)
.addClass(this.disabled ? 'disabled' : 'active' + (this.value == value ? ' selected' : ''));
if (label.length) {
link.text(label);
index.push(this.disabled ? '' : label.charAt(0).toLowerCase());
}
else {
link.html('&nbsp;'); // link can't be empty
index.push('');
}
items.push($('<li>').append(link));
});
var list = $('<ul class="listing selectable iconized">')
.attr('data-ident', select_ident)
.data('button', select[0])
.append(items)
.on('click', 'a.active', function() {
// first close the list, then update the select, the order is important
// for cases when the select might be removed in change event (datepicker)
var val = $(this).data('value'), ret = close_func();
select.val(val).change();
return ret;
})
.on('keydown', 'a.active', function(e) {
var item, char, last, node, mode = 'next';
switch (e.which) {
case 27: // ESC
case 9: // TAB
return close_func();
case 13: // ENTER
case 32: // SPACE
$(this).click();
return false; // for IE
case 38: // ARROW-UP
case 63232:
mode = 'previous';
// no-break
case 40: // ARROW-DOWN
case 63233:
item = e.target.parentNode;
while (item = item[mode + 'Sibling']) {
if (node = $(item).children('.active')[0]) {
node.focus();
break;
}
}
return false; // prevents from scrolling the whole page
default:
// A letter key has been pressed, search mode
char = e.originalEvent.key;
if (char && char.length == 1) {
char = char.toLowerCase();
if (last_char != char) {
last_index = -1;
}
last = index.indexOf(char, last_index + 1);
if (last > -1 || (last = index.indexOf(char)) > -1) {
list.find('a').eq(last).focus();
}
last_char = char;
last_index = last;
}
}
});
select.popover('dispose')
.popover({
// because of focus issues we can't always use body,
// if select is in a dialog, popover has to be a child of this dialog
container: dialog || document.body,
content: list[0],
placement: 'bottom',
trigger: 'manual',
boundary: 'viewport',
html: true,
offset: '0,2',
sanitize: false,
template: '<div class="popover select-menu" style="min-width: ' + min_width + 'px; max-width: ' + max_width + 'px">'
+ '<div class="popover-header"></div>'
+ '<div class="popover-body" style="max-height: ' + max_height + 'px"></div></div>'
})
.on('shown.bs.popover', function() {
select.focus(); // for Chrome
// Set popup Close title
list.parent().prev()
.empty()
.append($('<a class="button icon cancel">').text(rcmail.gettext('close'))
.on('click', function(e) {
e.stopPropagation();
return close_func();
})
);
// Find the selected item, focus it
var selected = list.find('a.selected').first();
if (selected.focus().length) {
var list_parent = list.parent();
// try to scroll the list so focused element is in center
last_index = list.find('a').index(selected[0]);
last_char = index[last_index];
if (last_index > 5) {
list_parent.scrollTop(list_parent.scrollTop() + list_parent.height()/2);
}
}
// focus first active element on the list
else if (rcube_event.is_keyboard(e)) {
list.find('a.active').first().focus();
}
// don't propagate mousedown event
list.on('mousedown', function(e) { e.stopPropagation(); });
})
.popover('show');
};
select.addClass('pretty-select custom-select form-control')
.on('mousedown keydown', function(e) {
select = $(e.target); // so it works after clone
// Do nothing on disabled select or on TAB key
if (select.prop('disabled')) {
return;
}
if (e.which == 9) {
close_func();
return true;
}
// Close popup on ESC key or on click if already open
if (e.which == 27 || (e.type == 'mousedown' && is_menu_open())) {
return close_func();
}
select.focus();
// prevent displaying browser-default select dropdown
select.prop('disabled', true);
setTimeout(function() { select.prop('disabled', false); }, 0);
e.stopPropagation();
// display options in our way (on SPACE, ENTER, ARROW-DOWN or mousedown)
if (e.type == 'mousedown' || e.which == 13 || e.which == 32 || e.which == 40 || e.which == 63233) {
open_func(e);
// Prevent from closing the menu by general popover closing handler (popups_close())
// We used to just stop propagation in onclick handler, but it didn't work
// in Chrome where onclick handler wasn't invoked on mobile (#6705)
popups_close_lock = new Date().getTime();
return false;
}
})
};
/**
* HTML editor textarea wrapper with nice looking tabs-like switch
*/
function html_editor_init(obj)
{
// Here we support two structures
// 1. <div><textarea></textarea><select class="hidden"></div>
// 2. <tr><td><td><td><textarea></textarea></td></tr>
// <tr><td><td><td><input type="checkbox"></td></tr>
var sw, is_table = false,
editor = $(obj),
parent = editor.parent(),
plain_btn = $('<a class="mce-i-html" href="#" tabindex="-1"></a>')
.attr('title', rcmail.gettext('htmltoggle'))
.on('click', function(e) {
if (rcmail.command('toggle-editor', {id: editor.attr('id'), html: true}, '', e.originalEvent)) {
parent.addClass('ishtml');
}
})
.on('keydown', function(e) {
if (e.which == 9) { // TAB
editor.focus();
return false;
}
}),
toolbar = $('<div class="editor-toolbar">').append(plain_btn);
if (parent.is('td')) {
sw = $('input[type="checkbox"]', parent.parent().next());
is_table = true;
}
else {
sw = editor.next('select.hidden');
}
// make the textarea autoresizeable
textarea_autoresize_init(editor);
// sanity check
if (sw.length != 1) {
return;
}
parent.addClass('html-editor');
editor.after(toolbar).data('control', sw)
.on('keydown', function(e) {
// ALT + F10 is the way to access toolbar in TinyMCE, let's do the same for plain editor
if (e.altKey && e.which == 121) {
plain_btn.focus();
}
});
if (is_table) {
// Hide unwanted table cells
sw.parents('tr').first().hide();
parent.prev().hide();
// Modify the textarea cell to use 100% width
parent.addClass('col-sm-12');
}
};
/**
* Make the textarea autoresizeable depending on it's content length.
* The way there's no vertical scrollbar.
*/
function textarea_autoresize_init(textarea)
{
var padding = parseInt($(textarea).css('padding-top')) + parseInt($(textarea).css('padding-bottom')) + 2,
// FIXME: Is there a better way to get initial height of the textarea?
// At this moment clientHeight/offsetHeight is 0.
min_height = ($(textarea)[0].rows || 5) * 21,
resize = function(e) {
if (this.scrollHeight - padding <= min_height) {
return;
}
// To fix scroll-jump issue in Edge we'll find the scrolling parent
// and re-apply scrollTop value after we reset textarea height
var scroll_element, scroll_pos = 0;
$(e.target).parents().each(function() {
if (this.scrollTop > 0) {
scroll_element = this;
scroll_pos = this.scrollTop;
return false;
}
});
var oldHeight = $(this).outerHeight();
$(this).outerHeight(0);
var newHeight = Math.max(min_height, this.scrollHeight);
$(this).outerHeight(oldHeight);
if (newHeight !== oldHeight) {
$(this).height(newHeight);
}
if (scroll_pos) {
scroll_element.scrollTop = scroll_pos;
}
};
$(textarea).on('input', resize).trigger('input');
};
// Inititalizes smart list input
function smart_field_init(field)
{
var tip, id = field.id + '_list',
area = $('<div class="multi-input"><div class="content"></div><div class="invalid-feedback"></div></div>'),
list = field.value ? field.value.split("\n") : [''];
if ($('#' + id).length) {
return;
}
// add input rows
$.each(list, function(i, v) {
smart_field_row_add($('.content', area), v, i, field);
});
area.attr('id', id);
field = $(field);
if (field.attr('disabled')) {
area.hide();
}
// disable the original field anyway, we don't want it in POST
else {
field.prop('disabled', true);
}
if (field.data('hidden')) {
area.hide();
}
field.after(area);
if (field.hasClass('is-invalid')) {
area.addClass('is-invalid');
$('.invalid-feedback', area).text(field.data('error-msg'));
}
};
function smart_field_row_add(area, value, idx, field, after)
{
// build row element content
var input,
elem = $('<div class="input-group">'
+ '<input type="text" class="form-control">'
+ '<span class="input-group-append"><a class="icon reset input-group-text" href="#"></a></span>'
+ '</div>');
input = elem.find('input').attr({
value: value,
name: field.name + '[]',
size: $(field).data('size'),
title: field.title,
placeholder: field.placeholder
})
.keydown(function(e) {
// element creation event (on Enter)
if (e.which == 13) {
var elem = smart_field_row_add(area, '', (new Date()).getTime(), field, input.parent());
$('input', elem).focus();
}
// backspace or delete: remove input, focus previous one
else if ((e.which == 8 || e.which == 46) && input.val() == '') {
var parent = input.parent(),
siblings = area.children();
if (siblings.length > 1) {
if (parent.prev().length) {
parent.prev().children('input').focus();
}
else {
parent.next().children('input').focus();
}
parent.remove();
return false;
}
}
});
// element deletion event
elem.find('a.reset').click(function() {
var record = $(this.parentNode.parentNode);
if (area.children().length > 1) {
$('input', record.next().length ? record.next() : record.prev()).focus();
record.remove();
}
else {
$('input', record).val('').focus();
}
});
elem.find('input,a')
.on('focus', function() { area.addClass('focused'); })
.on('blur', function() { area.removeClass('focused'); });
if (after) {
after.after(elem);
}
else {
elem.appendTo(area);
}
return elem;
};
// Reset and fill the smart list input with new data
function smart_field_reset(field, data)
{
var id = field.id + '_list',
list = data.length ? data : [''],
area = $('#' + id).children('.content');
area.empty();
// add input rows
$.each(list, function(i, v) {
smart_field_row_add(area, v, i, field);
});
};
/**
* Register form errors, mark fields as invalid, dsplay the error below the input
*/
function form_errors(tips)
{
$.each(tips, function() {
var input = $('#' + this[0]).addClass('is-invalid');
if (input.data('type') == 'list') {
input.data('error-msg', this[2]);
$('#' + this[0] + '_list > .invalid-feedback').text(this[2]);
return;
}
input.after($('<span class="invalid-feedback">').text(this[2]));
});
};
/**
* Show/hide the navigation list
*/
function switch_nav_list(obj)
{
var records, height, speed = 250,
button = $('a', obj),
navlist = $(obj).next();
if (!navlist.height()) {
records = $('tr,li', navlist).filter(function() { return this.style.display != 'none'; });
height = $(records[0]).height() || 50;
navlist.animate({height: (Math.min(5, records.length) * height + 1) + 'px'}, speed);
button.addClass('collapse').removeClass('expand');
$(obj).addClass('expanded');
}
else {
navlist.animate({height: '0'}, speed);
button.addClass('expand').removeClass('collapse');
$(obj).removeClass('expanded');
}
};
/**
* Create a splitter (resizing) element on a layout column
*/
function splitter_init(node)
{
// Use id of the list element, if exists, as a part of the key, instead of action.column-id
// This way e.g. the sidebar in Settings is always the same width for all Settings' pages
var list_id = node.find('.scroller .listing').first().attr('id'),
key = rcmail.env.task + '.' + (list_id || (rcmail.env.action + '.' + node.attr('id'))),
pos = get_pref(key),
inverted = node.is('.sidebar-right'),
set_width = function(width) {
node.css({
width: Math.max(100, width),
// reset default properties
// 'min-width': 100,
flex: 'none'
});
};
if (!node[inverted ? 'prev' : 'next']().length) {
return;
}
$('<div class="column-resizer">')
.addClass(inverted ? 'inverted' : null)
.appendTo(node)
.on('mousedown', function(e) {
var ts, splitter = $(this), offset = node.position().left;
// Makes col-resize cursor follow the mouse pointer on dragging
// and fixes issues related to iframes
splitter.addClass('active');
// Disable selection on document while dragging
// It can happen when you move mouse out of window, on top
document.body.style.userSelect = 'none';
// Start listening to mousemove events
$(document)
.on('mousemove.resizer', function(e) {
// Use of timeouts makes the move more smooth in Chrome
clearTimeout(ts);
ts = setTimeout(function() {
// For left-side-splitter we need the current offset
if (inverted) {
offset = node.position().left;
}
var cursor_position = rcube_event.get_mouse_pos(e).x,
width = inverted ? node.width() + (offset - cursor_position) : cursor_position - offset;
set_width(width);
}, 5);
})
.on('mouseup.resizer', function() {
// Remove registered events
$(document).off('.resizer');
$('iframe').off('.resizer');
document.body.style.userSelect = 'auto';
// Set back the splitter width to normal
splitter.removeClass('active');
// Save the current position (width)
save_pref(key, node.width());
});
});
if (pos) {
set_width(pos);
}
};
/**
* Wrapper for rcmail.open_window to intercept window opening
* and display a dialog with an iframe instead of a real window.
*/
function window_open(url)
{
// Use 4th argument to bypass the dialog-mode e.g. for external windows
if (!is_mobile() || arguments[3] === true) {
return env.open_window.apply(rcmail, arguments);
}
// _extwin=1, _framed=1 are required to display attachment preview
// layout properly and make mobile menus working
url = rcmail.add_url(url, '_framed', 1);
url = rcmail.add_url(url, '_extwin', 1);
var label, title = '',
props = {cancel_button: 'close', width: 768, height: 768},
frame = $('<iframe>').attr({id: 'windowframe', src: url});
if (/_action=([a-z_]+)/.test(url) && (label = rcmail.labels[RegExp.$1])) {
title = label;
}
if (/_frame=1/.test(url)) {
props.dialogClass = 'no-titlebar';
}
rcmail.simple_dialog(frame, title, null, props);
return true;
};
/**
* Get layout modes. In frame mode returns the parent layout modes.
*/
function layout_metadata()
{
if (is_framed) {
var doc = $(parent.document.documentElement);
return {
mode: doc[0].className.match(/layout-([a-z]+)/) ? RegExp.$1 : mode,
touch: doc.is('.touch'),
};
}
return {mode: mode, touch: touch};
};
/**
* Returns true if the layout is in 'small' or 'phone' mode
*/
function is_mobile()
{
var meta = layout_metadata();
return meta.mode == 'phone' || meta.mode == 'small';
};
/**
* Returns true if the layout is in 'touch' mode
*/
function is_touch()
{
var meta = layout_metadata();
return meta.touch;
};
/**
* Get preference stored in browser
*/
function get_pref(key)
{
if (!prefs) {
prefs = rcmail.local_storage_get_item('prefs.elastic', {});
}
// 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 localStorage is supported)
if (rcmail.local_storage_set_item('prefs.elastic', 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 supported)
if (!rcmail.local_storage_set_item('prefs.elastic', prefs)) {
// store value in cookie
var exp = new Date();
exp.setYear(exp.getFullYear() + 1);
rcmail.set_cookie(key, val, exp);
}
};
}
if (window.rcmail) {
/**
* Elastic version of show_menu as we don't need e.g. menu positioning from core
* TODO: keyboard navigation in menus
*/
rcmail.show_menu = function(prop, show, event)
{
var name = typeof prop == 'object' ? prop.menu : prop,
obj = $('#' + name);
if (typeof prop == 'string') {
prop = {menu: name};
}
// just delegate the action to rcube_elastic_ui
return rcmail.triggerEvent(show === false ? 'menu-close' : 'menu-open', {name: name, obj: obj, props: prop, originalEvent: event});
}
/**
* Elastic version of hide_menu as we don't need e.g. menus stack handling
*/
rcmail.hide_menu = function(name, event)
{
// delegate to rcube_elastic_ui
return rcmail.triggerEvent('menu-close', {name: name, props: {menu: name}, originalEvent: event});
}
}
else {
// rcmail does not exists e.g. on the error template inside a frame
// we fake the engine a little
var rcmail = parent.rcmail,
rcube_webmail = parent.rcube_webmail,
bw = {};
}
var UI = new rcube_elastic_ui();
// Improve non-inline datepickers
if ($ && $.datepicker) {
var __newInst = $.datepicker._newInst;
$.extend($.datepicker, {
_newInst: function(target, inline) {
var inst = __newInst.call(this, target, inline);
if (!inst.inline) {
UI.datepicker_init(inst.dpDiv);
}
return inst;
}
});
}
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index b8fa60c40..695f40fda 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -1,1563 +1,1554 @@
/**
* Roundcube webmail styles for the Email section
*
* Copyright (c) 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: 200px;
bottom: 0;
z-index: 1; /* fixes scrolling in Edge (#5750) */
}
#mailview-right {
position: absolute;
top: 0;
left: 212px;
right: 0;
bottom: 0;
}
#mailview-right.fullwidth {
left: 0;
}
#mailview-top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
}
html.ie #mailview-top {
overflow: visible; /* fixes display issues of fixed list header in IE */
}
#mailview-bottom {
display: none;
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 0;
border-radius: 4px;
}
#composeview-right #mailview-bottom {
border-radius: 0 0 4px 4px;
}
#mailboxcontainer,
#messagelistcontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
outline: none;
}
#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: 5px 6px 3px;
border-top: 1px solid #ddd;
background: #eaeaea;
border-radius: 0 0 4px 4px;
white-space: nowrap;
}
#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:first-child {
border-top: 0;
}
.folderlist li.mailbox.unread > a {
padding-right: 36px;
}
.folderlist li.unread {
font-weight: bold;
}
.folderlist li.recent > a {
color: #017cb4;
}
.folderlist li.mailbox .unreadcount {
position: absolute;
top: 3px;
right: 6px;
min-width: 1.8em;
line-height: 15px;
padding: 2px 4px;
background: #6a939f;
border-radius: 9px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: none;
}
.folderlist li.mailbox.selected > a .unreadcount {
background: #005d76;
}
.folderlist li.mailbox.recent > a .unreadcount {
background: #006ca4;
}
#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;
}
#messagetoolbar.fullwidth {
right: 0;
}
#messagesearchtools {
position: absolute;
right: 0;
top: 0;
}
#s_interval {
margin: 3px 8px;
}
/*** message list ***/
table.messagelist {
z-index: 1;
}
table.messagelist.fixedcopy {
z-index: 2;
}
.messagelist thead th:first-child {
border-radius: 4px 0 0 0; /* for Chrome */
}
.messagelist tr > .attachment,
.messagelist tr > .threads,
.messagelist tr > .status,
.messagelist tr > .flag,
.messagelist tr > .priority {
width: 20px;
padding: 2px 3px !important;
}
.messagelist tr > .threads {
width: 26px;
}
.messagelist tr > .threads + td,
.messagelist tr > .threads + th {
border-left: 0;
}
.messagelist tr > .size {
width: 60px;
text-align: right;
}
.messagelist thead tr th.size {
text-align: left;
}
.messagelist tr > .fromto,
.messagelist tr > .from,
.messagelist tr > .to,
.messagelist tr > .cc,
.messagelist tr > .replyto {
width: 200px;
}
.messagelist tr > .date {
width: 155px;
}
.messagelist tr > .folder {
width: 135px;
}
.messagelist tr > .hidden {
display: none;
}
.messagelist tr.message {
/* background-color: #fff; */
}
.messagelist tr.thread.expanded:not(.selected) td {
background-color: #ededed;
}
.messagelist tr.unread {
font-weight: bold;
/* background-color: #fff; */
}
.messagelist tr.flagged th,
.messagelist tr.flagged td,
.messagelist tr.flagged td a {
color: #f30;
}
.messagelist thead tr th.sortedASC a,
.messagelist thead tr th.sortedDESC a {
color: #004458;
text-decoration: underline;
background-image: url(images/listicons.png);
background-repeat: no-repeat;
background-position: right -912px;
}
.messagelist thead tr th.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 > .flag span,
.messagelist tr > .status span,
.messagelist tr > .attachment span,
.messagelist tr > .priority span {
display: block;
width: 20px;
text-indent: -5000px;
overflow: hidden;
}
.messagelist tr td div.collapsed,
.messagelist tr td div.expanded,
.messagelist tr > .threads .listmenu,
.messagelist tr .attachment span.attachment,
.messagelist tr .attachment span.report,
.messagelist tr .attachment span.encrypted,
.messagelist tr > .priority span.priority,
.messagelist tr > .priority span.prio1,
.messagelist tr > .priority span.prio2,
.messagelist tr > .priority span.prio3,
.messagelist tr > .priority span.prio4,
.messagelist tr > .priority span.prio5,
.messagelist tr .flag span.flagged,
.messagelist tr .flag span.unflagged,
.messagelist tr .flag span.unflagged:hover,
.messagelist tr > .status span.status,
.messagelist tr > .status span.msgicon,
.messagelist tr > .status span.deleted,
.messagelist tr > .status span.unread,
.messagelist tr > .status span.unreadchildren,
.messagelist tr > .subject span.msgicon,
.messagelist tr > .subject span.deleted,
.messagelist tr > .subject span.unread,
.messagelist tr > .subject span.replied,
.messagelist tr > .subject span.forwarded,
.messagelist tr > .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 .attachment span.attachment {
background-position: 0 -996px;
}
.messagelist thead tr .attachment span.attachment {
background-position: -24px -996px;
}
.messagelist tbody tr .attachment span.report {
background-position: -24px -1116px;
}
.messagelist tbody tr .attachment span.encrypted {
background-position: 0 -2272px;
}
.messagelist thead tr th.priority span.priority {
background-position: -25px -1845px;
}
.messagelist tr td.priority span.prio5 {
background-position: -2px -1905px;
}
.messagelist tr td.priority span.prio4 {
background-position: -2px -1885px;
}
.messagelist tr td.priority span.prio2 {
background-position: -2px -1865px;
}
.messagelist tr td.priority span.prio1 {
background-position: -2px -1845px;
}
/* thread parent message with flagged children */
.messagelist tr.flaggedroot td.flag span.unflagged {
background-position: -23px -1076px;
}
.messagelist tbody tr .flag span.flagged {
background-position: 0 -1036px;
}
.messagelist thead tr th.flag span.flagged {
background-position: -22px -1037px;
}
.messagelist tr:hover td.status span.msgicon {
background-position: -23px -1057px;
}
.messagelist tr:hover .flag span.unflagged {
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:hover td.status span.deleted,
.messagelist tr td.subject span.deleted {
background-position: -21px -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 -1017px !important;
}
.messagelist thead tr th.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 th.threads .listmenu {
background-position: 4px -972px;
cursor: pointer;
width: 24px;
height: 21px;
overflow: hidden;
text-indent: -5000px;
margin: -3px -5px -2px -6px;
padding: 3px 5px 2px 6px;
}
.messagelist tr th.threads .listmenu:focus {
background-color: rgba(73,180,210,0.7);
outline: none;
}
.messagelist thead tr th.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;
}
#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;
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 15em 0 0;
padding: 8px 8px 4px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.headers-table td {
color: #666;
padding: 1px 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-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: #e9e9e9;
border-right: 1px solid #dfdfdf;
border-radius: 3px 0 0 0; /* for Opera */
}
.moreheaderstoggle:focus {
background: #66bcd9;
border-right-color: #66bcd9;
}
.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;
}
#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 {
padding-right: 0.5em;
white-space: nowrap;
}
#messagecontent .leftcol,
#messagepreview .leftcol {
margin-right: 252px;
}
#messagecontent .rightcol,
#messagepreview .rightcol {
position: absolute;
right: 8px;
width: 230px;
min-height: 200px;
background: #f0f0f0;
padding: 8px;
border-radius: 4px;
z-index: 1;
}
#messagecontent .rightcol {
margin-top: 8px;
}
#messagebody {
position: relative;
margin: 8px;
}
#messagebody.mailvelope {
margin: 0;
}
#message-objects div,
#messagebody span.part-notice {
margin: 8px;
}
#message-objects div.notice {
display: block;
color: #960;
border: 1px solid #ffdf0e;
background-color: #fef893;
background-position: 5px -83px;
padding: 6px 12px 6px 30px;
white-space: normal;
}
#message-objects div a.button,
#messagebody span.part-notice a.button {
margin-left: 10px;
margin-top: -1px;
}
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 div.pre {
margin: 0;
padding: 0;
font-family: monospace;
font-size: 12px;
}
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;
padding: 0 0.4em;
overflow: hidden;
text-overflow: ellipsis;
}
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: 1%;
padding-left: 0;
vertical-align: top;
}
div.message-partheaders .headers-table td.header {
width: 99%;
}
#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;
margin-bottom: 0;
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;
white-space: nowrap;
}
#messagebody p.image-attachment .attachment-links a {
margin-right: 0.6em;
}
#messagepartcontainer {
position: absolute;
top: 0;
left: 232px;
right: 0;
bottom: 0;
}
#messagepartframe {
border: 0;
width: 100%;
height: 100%;
}
#messagepartheader {
position: absolute;
top: 0;
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;
}
.subject .flag-icon {
display: none;
}
body.status-flagged .flag-icon {
display: inline-block;
background: url(images/listicons.png) 0 -1038px no-repeat;
width: 20px;
height: 16px;
vertical-align: text-top;
}
/*** message composition ***/
#composeview-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
bottom: 0;
}
#composeview-right {
position: absolute;
top: 0;
left: 212px;
right: 0;
bottom: 0;
}
#compose-contacts {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
}
#compose-contacts .listsearchbox {
display: block;
}
#compose-contacts #directorylist {
border-bottom: 4px solid #c7e3ef;
}
#compose-contacts .scroller {
top: 65px;
}
#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-image: url(images/listicons.png);
background-position: -100px 0;
background-repeat: no-repeat;
overflow: hidden;
text-overflow: ellipsis;
}
#compose-contacts li a {
padding-left: 36px;
}
#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 a:focus,
#compose-contacts li.addressbook.selected a {
background-position: 6px -791px;
}
#contacts-table td.contactgroup {
background-position: 6px -1553px;
}
#contacts-table tr.selected td.contactgroup {
background-position: 6px -1577px;
}
#contacts-table td.contact {
background-position: 6px -1601px;
}
#contacts-table tr.selected td.contact {
background-position: 6px -1625px;
}
#compose-content {
position: absolute;
top: 0;
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: 10%;
white-space: nowrap;
padding-left: 6px;
min-width: 60px;
line-height: 16px;
}
.compose-headers td.top {
vertical-align: top;
padding-top: 5px;
}
.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 textarea,
.compose-headers td input {
width: 100%;
resize: none;
}
.compose-headers td.bounceopts {
padding-top: 20px;
}
#compose-cc, #compose-bcc, #compose-replyto, #compose-followupto {
display: none;
}
#composeoptions {
display: none;
padding: 0 0 0 8px;
white-space: normal;
}
.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;
}
#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;
}
#composebodycontainer.mailvelope {
right: 0;
z-index: 10;
}
#composebodycontainer.mailvelope > iframe[scrolling='no'] {
position: relative;
}
#composebody {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 99%;
border: 0;
border-radius: 0 0 0 4px;
padding: 4px;
resize: none;
font-family: monospace;
font-size: 9pt;
outline: none;
}
#composebody:active,
#composebody:focus {
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;
}
-#image-selector.droptarget,
#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: #017db4;
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);
}
#compose-attachments .attachment-size {
color: #888;
}
#compose-attachments .hint {
color: #666;
margin: 0 0 8px;
}
#composeview-bottom .formbuttons.floating {
position: absolute;
width: auto;
right: 260px;
z-index: 200;
padding-bottom: 8px;
}
-#composebodycontainer .mce-tinymce {
+#composebodycontainer .tox-tinymce {
border: 0 !important;
margin-top: 1px;
}
-#composebodycontainer .mce-panel {
- border-color: #ddd !important;
-}
-
-#composebody_toolbargroup {
- border-bottom: 1px solid #ddd;
-}
-
#uploadform a.iconlink {
margin-left: 1em;
text-indent: -5000px;
}
#uploadform form div {
margin: 4px 0;
}
/**** Styles for widescreen (3-column) view ****/
.widescreen #mailview-top {
bottom: 0;
width: 400px;
height: auto;
}
.widescreen #mailview-bottom {
left: 412px;
top:0;
border: 1px solid #b2b8bf;
}
#messagelistheader,
.widescreen #messagelistfooter #countcontrols,
.widescreen .messagelist > thead,
.widescreen .messagelist .branch,
.widescreen table.fixedcopy {
display: none;
}
.widescreen #messagelistcontainer {
top: 34px;
overflow-x: hidden;
}
.widescreen #messagelistheader {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 34px;
padding: 6px 6px;
background: #efefef;
border-radius: 4px 4px 0 0;
white-space: nowrap;
border-bottom: 1px solid #dfdfdf;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.widescreen #messagelistheader .listmenu {
margin-right: 8px;
vertical-align: middle;
line-height: 24px;
width: 28px;
padding: 0;
text-indent: -5000px;
overflow: hidden;
display: inline-block;
background: url(images/listicons.png) 0 -2328px no-repeat;
}
.widescreen #messagelistheader .listmenu:focus {
background-color: rgba(128,128,128,0.55);
outline: none;
}
.widescreen #countcontrols {
line-height: 24px;
display: inline;
min-width: 0;
}
.widescreen #countcontrols span {
padding: 0;
}
.widescreen .pagenavbuttons {
position: absolute;
top: 4px;
right: 6px;
}
.widescreen .pagenavbuttons a.button {
background: none;
border: 0;
padding: 2px;
margin: 0;
height: 20px;
}
.widescreen .pagenavbuttons a.button.pressed {
background: inherit;
}
.widescreen a.listmenu:focus,
.widescreen .pagenav a.button:focus {
border-color: #017db6;
outline: none;
}
.widescreen .messagelist td {
border-left: 0;
vertical-align: top;
padding: 3px 2px !important;
}
.widescreen .messagelist td.subject {
width: 99%;
white-space: wrap;
position: relative; /* for span.date positioning in Firefox */
}
.widescreen .messagelist td.threads {
width: 20px;
vertical-align: bottom;
}
.widescreen .messagelist td.threads div {
padding-bottom: 1px;
}
.widescreen .messagelist td.flags {
width: 22px;
}
.widescreen .messagelist td.subject span {
line-height: 20px;
}
.widescreen .messagelist td.subject span.date {
right: 2px;
top: 3px;
position: absolute;
color: #666;
}
.widescreen .messagelist td.subject span.fromto {
padding-left: 22px;
display: block;
margin-right: 10em;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
}
.widescreen .messagelist tr.flagged td.subject span.date,
.widescreen .messagelist tr.flagged td.subject span.fromto {
color: #ff5c33;
}
.widescreen .messagelist tr.deleted td.subject span.date,
.widescreen .messagelist tr.deleted td.subject span.fromto {
color: #ccc;
}
.widescreen .messagelist td.subject span.subject {
clear: both;
display: block;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
}
.widescreen .messagelist td.flags span {
width: 20px;
height: 20px;
display: block;
margin-left: 1px;
}
.widescreen .messagelist td.flags span.flag {
cursor: pointer;
}
.widescreen .messagelist tr td.subject span.msgicon,
.widescreen .messagelist tr td.subject span.unreadchildren {
width: 20px;
height: 20px;
}
/* move attachments list to the bottom on narrow mail preview page */
@media screen and (max-width: 800px) {
#messagepreview .leftcol {
margin-right: 0;
}
#messagepreview .rightcol {
min-height: 0;
width: auto;
right: 0;
position: relative;
border-radius: 0;
border-bottom: 1px solid #dfdfdf;
background-color: #f9f9f9;
padding: 5px;
}
ul.attachmentslist,
ul.attachmentslist > li,
div.rightcol > div > a.button {
vertical-align: middle;
display: inline-block;
margin-top: 0;
}
}
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index c01f31db4..240ca2f7d 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1,3171 +1,3151 @@
/**
* Roundcube webmail styles for skin "Larry"
*
* Copyright (c) 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.
*/
body {
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
background: #cad2d9;
margin: 0;
}
body.noscroll {
/* also avoids bounce effect in Chrome and Safari */
overflow: hidden;
}
.iphone body.noscroll {
/* revert on iPhone (#1490551) */
overflow: auto;
}
a {
color: #0069a6;
}
a:visited {
color: #0186ba;
}
img {
border: 0;
}
.voice {
position: absolute;
border: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
}
input,
textarea,
select,
button {
font-family: inherit;
font-size: inherit;
vertical-align: middle;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
margin: 0; /* Safari by default adds a margin */
padding: 4px;
border: 1px solid #b2b2b2;
border-radius: 4px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
button:focus,
input.button:focus,
textarea:focus {
border-color: #4787b1;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
outline: none;
}
input[type="text"]:required,
input[type="email"]:required,
input[type="password"]:required {
border-color: #4787b1;
}
input.placeholder,
textarea.placeholder {
color: #aaa;
}
.bold {
font-weight: bold;
}
/* fixes vertical alignment of checkboxes and labels */
label input + span {
vertical-align: middle;
}
.noselect {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
li > .input-group {
display: inline;
}
/*** buttons ***/
button,
input.button {
display: inline-block;
margin: 0 2px;
padding: 4px 8px;
color: #525252;
border: 1px solid #c0c0c0;
border-radius: 4px;
background: #f7f7f7;
text-decoration: none;
outline: none;
}
.formbuttons button,
.formbuttons input.button {
color: #ddd;
font-size: 110%;
padding: 4px 12px;
border-color: #465864;
border-radius: 5px;
background: #666666;
box-shadow: 0 1px 1px 0 #ccc;
}
.formbuttons button:hover,
.formbuttons button:focus,
.formbuttons input.button:hover,
.formbuttons input.button:focus,
input.button.mainaction:hover,
input.button.mainaction:focus {
color: #f2f2f2;
border-color: #465864;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
}
.formbuttons button:active,
.formbuttons input.button:active {
color: #fff;
background: #5f5f5f;
}
button.mainaction,
input.button.mainaction {
color: #ededed;
border-color: #1f262c;
background: #2c2f33;
}
button.mainaction:active,
input.button.mainaction:active {
color: #fff;
background: #515151;
background: -moz-linear-gradient(top, #2a2e31 0%, #505050 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050));
background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%);
background: linear-gradient(to bottom, #2a2e31 0%, #505050 100%);
}
button[disabled],
button[disabled]:hover,
input.button[disabled],
input.button[disabled]:hover,
input.button.mainaction[disabled] {
color: #aaa !important;
}
button.mainaction,
input.mainaction {
font-weight: bold !important;
}
form.smart-upload,
input.smart-upload {
visibility: hidden;
width: 1px;
height: 1px;
opacity: 0;
}
/** link buttons **/
a.button,
.buttongroup {
display: inline-block;
margin: 0 2px;
padding: 2px 5px;
color: #525252;
border: 1px solid #c6c6c6;
border-radius: 4px;
background: #e6e6e6;
text-decoration: none;
}
.buttongroup {
padding: 0;
white-space: nowrap;
}
button:focus,
a.button:focus,
input.button:focus {
border-color: #017db6;
box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
outline: none;
}
label.disabled,
button.disabled,
a.button.disabled {
color: #999;
}
a.button.disabled,
input.button.disabled,
input.button[disabled],
button.disabled,
button[disabled],
button.disabled:hover,
button[disabled]:hover,
a.button.disabled:hover,
input.button.disabled:hover,
input.button[disabled]:hover {
border-color: #c6c6c6;
}
.buttongroup a.button {
margin: 0;
border-width: 0 1px 0 0;
border-radius: 0;
background: 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,
button:active,
input.button:active {
background: #f7f7f7;
}
.pagenav.dark a.button {
font-weight: bold;
border: 0;
background: transparent;
margin: 0;
}
.pagenav.dark a.button.pressed {
background: #d8d8d8;
}
.buttongroup a.button.selected,
.buttongroup a.button.selected:hover {
background: #8a8a8a;
border-right-color: #8a8a8a;
border-left-color: #555;
}
.buttongroup a.button:focus,
.buttongroup a.button.selected:focus {
background: #f2f2f2;
background: -moz-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#49b3d2), color-stop(100%,#66bcd9));
background: -ms-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
background: linear-gradient(to bottom, #49b3d2 0, #66bcd9 100%);
}
.pagenav a.button {
padding: 1px 3px;
height: 16px;
vertical-align: middle;
margin-bottom: 1px;
}
.pagenav .buttongroup a.button,
.pagenav .buttongroup a.button:hover {
padding: 1px 5px;
margin-bottom: 0;
}
a.button span.icon,
.pagenav a.button span.inner {
display: inline-block;
width: 16px;
height: 13px;
text-indent: 1000px;
overflow: hidden;
background: url(images/buttons.png) -6px -211px no-repeat;
}
a.button.prevpage span.icon,
.pagenav a.prevpage span.inner {
background-position: -7px -226px;
}
a.button.nextpage span.icon,
.pagenav a.nextpage span.inner {
background-position: -28px -226px;
}
a.button.lastpage span.icon,
.pagenav a.lastpage span.inner {
background-position: -28px -211px;
}
a.button.pageup span.icon,
.pagenav a.pageup span.inner {
background-position: -7px -241px;
}
a.button.pagedown span.icon,
.pagenav a.pagedown span.inner {
background-position: -29px -241px;
}
a.button.reply span.icon,
.pagenav a.reply span.inner {
background-position: -7px -256px;
}
a.button.forward span.icon,
.pagenav a.forward span.inner {
background-position: -29px -256px;
}
a.button.replyall span.icon,
.pagenav a.replyall span.inner {
background-position: -7px -271px;
}
a.button.extwin span.icon,
.pagenav a.extwin span.inner {
background-position: -29px -271px;
}
a.button.changeformat.html span.icon,
.pagenav a.changeformat.html span.inner {
background-position: -7px -1859px;
}
a.button.changeformat.html.selected span.icon,
.pagenav a.changeformat.html.selected span.inner {
background-position: -29px -1859px;
}
a.button.changeformat.text span.icon,
.pagenav a.changeformat.text span.inner {
background-position: -7px -1874px;
}
a.button.changeformat.text.selected span.icon,
.pagenav a.changeformat.text.selected span.inner {
background-position: -29px -1874px;
}
a.button.add span.icon {
background-position: -7px -2009px;
}
a.button.delete span.icon {
background-position: -29px -2009px;
}
.pagenav .countdisplay {
display: inline-block;
padding: 3px 1em 0 1em;
min-width: 16em;
}
.pagenavbuttons {
position: relative;
top: -2px;
}
.pagenav .pagejumper {
text-align: center;
padding: 3px 0;
cursor: default;
}
a.iconbutton {
display: inline-block;
width: 20px;
height: 18px;
text-decoration: none;
text-indent: -5000px;
background: url(images/buttons.png) -1000px 0 no-repeat;
}
a.iconbutton.disabled {
opacity: 0.4;
cursor: default;
}
a.iconbutton.searchicon,
a.iconbutton.searchoptions {
width: 24px;
background-position: -2px -317px;
}
a.iconbutton.searchicon {
width: 15px;
}
a.iconbutton.reset {
width: 24px;
background-position: -25px -317px;
}
a.iconbutton.remove,
a.iconbutton.cancel {
background-position: -7px -378px;
}
a.iconbutton.delete {
background-position: -7px -338px;
}
a.iconbutton.add {
background-position: -7px -358px;
}
a.iconbutton.remove {
background-position: -7px -379px;
}
a.iconbutton.cancel {
background-position: -7px -398px;
}
a.iconbutton.edit {
background-position: -7px -418px;
}
a.iconbutton.upload {
background-position: -6px -438px;
}
a.iconlink {
display: inline-block;
color: #888;
text-decoration: none;
white-space: nowrap;
padding: 2px 8px 2px 20px;
background: url(images/buttons.png) -1000px 0 no-repeat;
}
a.iconlink:hover {
text-decoration: underline;
}
a.iconlink.delete {
background-position: -7px -337px;
}
a.iconlink.add {
background-position: -7px -357px;
}
a.iconlink.remove {
background-position: -7px -378px;
}
a.iconlink.cancel {
background-position: -7px -397px;
}
a.iconlink.edit {
background-position: -7px -417px;
}
a.iconlink.upload {
background-position: -6px -437px;
}
/*** message bar ***/
#message div.loading,
#message div.uploading,
#message div.warning,
#message div.error,
#message div.notice,
#message div.confirmation,
#message-objects div.notice {
color: #555;
font-weight: bold;
padding: 6px 30px 6px 25px;
display: inline-block;
white-space: nowrap;
background: url(images/messages.png) 0 5px no-repeat;
cursor: default;
}
#message div.warning {
color: #960;
background-position: 0 -86px;
}
#message div.error {
color: #cf2734;
background-position: 0 -57px;
}
#message div.confirmation {
color: #093;
background-position: 0 -25px;
}
#message div.loading {
background: url(images/ajaxloader.gif) 2px 6px no-repeat;
}
#message div a,
#message div span {
padding-right: 0.5em;
text-decoration: none;
}
#message div a:hover {
text-decoration: underline;
cursor: pointer;
}
#message.statusbar {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 27px;
padding-left: 8px;
border-top: 1px solid #ddd;
border-radius: 0 0 4px 4px;
background: #eaeaea;
background: -moz-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#c8c8c8));
background: -ms-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
background: linear-gradient(to bottom, #eaeaea 0%, #c8c8c8 100%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#messagestack {
position: absolute;
bottom: 20px;
right: 12px;
z-index: 50000;
width: auto;
height: auto;
max-height: 85%;
overflow-y: auto;
padding: 2px;
}
#messagestack div {
display: block;
position: relative;
width: 280px;
height: auto;
min-height: 16px;
margin: 3px 2px 5px 2px;
padding: 8px 10px 7px 30px;
cursor: default;
font-size: 12px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #444;
color: #ebebeb;
background: rgba(64,64,64,0.85);
background: -moz-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,0.85)), color-stop(100%,rgba(48,48,48,0.9)));
background: -webkit-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%);
background: -ms-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%);
background: linear-gradient(to bottom, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%);
}
#messagestack div:after {
content: "";
position: absolute;
display: block;
top: 0;
left: 4px;
width: 20px;
height: 24px;
background: url(images/messages_dark.png) 0 7px no-repeat;
}
#messagestack div.error {
color: #ff615d;
}
#messagestack div.error:after {
background-position: 0 -55px;
}
#messagestack div.warning {
color: #f4bf0e;
}
#messagestack div.warning:after {
background-position: 0 -84px;
}
#messagestack div.confirmation {
color: #00e05a;
}
#messagestack div.confirmation:after {
background-position: 0 -25px;
}
#messagestack div.uploading,
#messagestack div.loading {
color: #ddd;
}
#messagestack div.uploading:after,
#messagestack div.loading:after {
top: 4px;
left: 6px;
background: url(images/ajaxloader_dark.gif) 0 4px no-repeat;
}
#messagestack div.voice {
position: absolute;
top: -1000px;
}
#messagestack div a {
color: #94c0da;
}
#messagestack div a:hover {
text-decoration: underline;
cursor: pointer;
}
.ui-dialog.error .ui-dialog-title,
.ui-dialog.warning .ui-dialog-title,
.ui-dialog.confirmation .ui-dialog-title {
padding-left: 25px;
background: url(images/messages.png) 0 5px no-repeat;
}
.ui-dialog.warning .ui-dialog-title {
color: #960;
background-position: 0 -91px;
}
.ui-dialog.error .ui-dialog-title {
color: #cf2734;
background-position: 0 -62px;
}
.ui-dialog.confirmation .ui-dialog-title {
color: #093;
background-position: 0 -32px;
}
.ui-autocomplete {
max-height: 160px;
overflow-x: hidden;
overflow-y: auto;
}
/*** basic page layout ***/
#header {
overflow-x: hidden; /* Chrome bug #1488851 */
}
#topline {
height: 18px;
background-color: #333333;
border-bottom: 1px solid #383838;
padding: 2px 0 2px 10px;
color: #aaa;
text-align: center;
}
#topnav {
position: relative;
height: 46px;
margin-bottom: 10px;
padding: 0 0 0 10px;
background: #1c1c1c;
}
#topline a,
#topnav a {
color: #eee;
text-decoration: none;
}
#topline a:hover {
text-decoration: underline;
}
#toplogo {
padding-top: 2px;
cursor: pointer;
border: none;
}
.topleft {
float: left;
}
.topright {
float: right;
}
.closelink {
display: inline-block;
padding: 2px 10px 2px 20px;
}
#topline span.username {
padding-right: 1em;
}
#topline .topleft a {
display: inline-block;
padding: 2px 0.8em 0 0;
color: #aaa;
}
#topline a.button-logout {
display: inline-block;
padding: 2px 10px 2px 20px;
background: url(images/buttons.png) -6px -193px no-repeat;
color: #fff;
}
#taskbar .button-logout {
display: none;
}
#taskbar a.button-logout span.button-inner {
background-position: -2px -1791px;
}
#taskbar a.button-logout:hover span.button-inner {
background-position: -2px -1829px;
}
/*** minimal version of the page header ***/
.minimal #topline {
position: fixed;
top: -18px;
background: #444;
z-index: 5000;
width: 100%;
height: 22px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.minimal #topline:hover {
top: 0px;
opacity: 0.94;
-webkit-transition: top 0.3s ease-in-out;
-moz-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
.extwin #topline,
.extwin #topline:hover {
position: static;
top: 0px;
height: 18px;
width: auto;
-moz-box-sizing: content-box;
box-sizing: content-box;
opacity: 0.999;
}
.minimal #topline a.button-logout {
display: none;
}
.minimal #topline span.username {
display: inline-block;
padding-top: 2px;
}
.minimal #topnav {
position: relative;
top: 4px;
height: 42px;
}
.minimal #taskbar a {
position: relative;
padding: 10px 10px 0 6px;
height: 32px;
}
.minimal #taskbar .button-logout {
display: inline-block;
}
.minimal #taskbar .button-inner {
top: -4px;
padding: 0;
height: 24px !important;
width: 27px;
text-indent: -5000px;
}
#taskbar .tooltip {
display: none;
}
.minimal #taskbar .tooltip {
position: absolute;
top: -500px;
right: 2px;
display: inline-block;
padding: 2px 8px 3px 8px;
background: #444;
color: #eee;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 1px 4px 0 #333;
z-index: 200;
white-space: nowrap;
}
.minimal #taskbar .tooltip:after {
content: "";
position: absolute;
top: -4px;
right: 15px;
border-style: solid;
border-width: 0 4px 4px;
border-color: #444 transparent;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
z-index: 251;
}
.minimal #taskbar a:hover .tooltip {
display: block;
top: 39px;
}
/*** taskbar ***/
#taskbar {
position: relative;
padding-right: 18px;
}
#taskbar a {
display: inline-block;
height: 34px;
padding: 12px 10px 0 6px;
}
#taskbar a span.button-inner {
display: inline-block;
font-size: 110%;
font-weight: normal;
padding: 5px 0 0 34px;
height: 19px;
background: url(images/buttons.png) -1000px 0 no-repeat;
}
#taskbar a:focus {
color: #fff;
background-color: rgba(73,180,210,0.7);
outline: none;
}
#taskbar a.button-selected {
color: #20a6fb;
background-color: #2c2c2c;
}
#taskbar a.button-mail span.button-inner {
background-position: 0 2px;
}
#taskbar a.button-mail:hover span.button-inner,
#taskbar a.button-mail.button-selected span.button-inner {
background-position: 0 -22px;
}
#taskbar a.button-addressbook span.button-inner {
background-position: 0 -48px;
}
#taskbar a.button-addressbook:hover span.button-inner,
#taskbar a.button-addressbook.button-selected span.button-inner {
background-position: 0 -72px;
}
#taskbar a.button-settings span.button-inner {
background-position: 0 -96px;
}
#taskbar a.button-settings:hover span.button-inner,
#taskbar a.button-settings.button-selected span.button-inner {
background-position: 0 -120px;
}
#taskbar a.button-calendar span.button-inner {
background-position: 0 -144px;
}
#taskbar a.button-calendar:hover span.button-inner,
#taskbar a.button-calendar.button-selected span.button-inner {
background-position: 0 -168px;
}
#taskbar .minmodetoggle {
position: absolute;
top: 0;
right: 0;
display: block;
width: 19px;
height: 46px;
cursor: pointer;
background: url(images/buttons.png) -35px -1778px no-repeat;
}
.minimal #taskbar .minmodetoggle {
height: 42px;
background-position: -35px -1820px;
}
#mainscreen {
position: absolute;
top: 88px;
left: 10px;
right: 10px;
bottom: 20px;
}
#mainscreencontent {
position: absolute;
top: 42px;
left: 0;
right: 0;
bottom: 0;
}
#mainscreen.offset {
top: 132px;
}
#mainscreen .offset {
top: 42px;
}
.minimal #mainscreen {
top: 62px;
}
.minimal #mainscreen.offset {
top: 102px;
}
.extwin #mainscreen {
top: 40px;
}
.extwin #mainscreen.offset {
top: 86px;
}
.uibox {
border: 1px solid #b2b8bf;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.minwidth {
min-width: 1024px;
}
.scroller {
overflow: auto;
}
.watermark {
background-image: url(images/watermark.jpg);
background-position: center;
background-repeat: no-repeat;
}
/* fix scrolling within iframes in webkit browsers on touch devices */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px) {
.iframebox {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
/*** lists ***/
.listbox {
background: #d9ecf4;
overflow: hidden;
}
.listbox .scroller {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
.listbox .scroller.withfooter {
bottom: 42px;
}
.listbox .boxtitle + .scroller {
top: 34px;
}
.boxtitle,
.uibox .listing thead th,
.uibox .listing thead td {
font-size: 12px;
font-weight: bold;
padding: 7px 8px 6px 8px;
line-height: 20px;
margin: 0;
border-bottom: 1px solid #bbd3da;
white-space: nowrap;
}
.uibox .listing thead th,
.uibox .listing thead td {
padding-bottom: 8px;
height: auto;
}
.uibox .boxtitle,
.uibox .listing thead th,
.uibox .listing thead td {
background: #b0ccd7;
color: #004458;
}
.listbox .listitem,
.listbox .tablink,
.listing tbody td,
.listing li {
display: block;
border-bottom: 1px solid #bbd3da;
cursor: default;
font-weight: normal;
}
.listbox .listitem a,
.listbox .listitem span,
.listbox .tablink a,
.listing tbody td,
.listing li a {
display: block;
color: #376572;
text-decoration: none;
cursor: default;
padding: 5px 8px;
line-height: 17px;
height: 17px;
white-space: nowrap;
}
.listing tbody td {
display: table-cell;
min-height: 14px;
outline: none;
}
.listing tbody td a {
color: #376572;
text-decoration: none;
}
.webkit .listing tbody td {
height: 14px;
}
/* This padding-left minus the focused padding left should be half of the focused border-left */
.listing thead tr td:first-child,
.listing tbody tr td:first-child {
border-left: 2px solid transparent;
padding-left: 6px;
}
.listing.iconized thead tr td:first-child,
.listing.iconized tbody tr td:first-child {
padding-left: 34px;
}
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.listing.focus tbody tr.focused > td:first-child {
border-left: 2px solid #739da8;
}
.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a {
color: #004458;
font-weight: bold;
background-color: #c7e3ef;
}
ul.listing {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul.listing li {
background-color: #d9ecf4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul.listing li ul {
border-top: 1px solid #bbd3da;
}
ul.listing li.droptarget,
table.listing tr.droptarget td {
background-color: #e8e798;
}
.listbox table.listing {
background-color: #d9ecf4;
}
table.listing,
table.layout {
border: 0;
width: 100%;
border-spacing: 0;
}
table.layout td {
vertical-align: top;
}
ul.treelist li {
position: relative;
}
ul.treelist li ul {
margin: 0;
padding: 0;
}
ul.treelist li ul li:last-child {
border-bottom: 0;
}
ul.treelist li a {
display: block;
padding-left: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
ul.treelist li a:focus,
ul.listing .listitem a:focus,
ul.listing .listitem span:focus,
ul.listing.focus .listitem.focused span {
color: #fff !important;
background-color: rgba(73,180,210,0.6);
outline: none;
}
ul.treelist ul li a {
padding-left: 38px;
}
ul.treelist ul ul li a {
padding-left: 54px;
}
ul.treelist.iconized li a {
padding-left: 36px;
}
ul.treelist.iconized ul li a {
padding-left: 62px;
}
ul.treelist.iconized ul ul li a {
padding-left: 88px;
}
ul.treelist.iconized ul ul ul li a {
padding-left: 114px;
}
ul.treelist li div.treetoggle {
position: absolute;
top: 7px;
left: 4px;
width: 13px;
height: 13px;
background: url(images/listicons.png) -3px -144px no-repeat;
cursor: pointer;
}
ul.treelist li ul li div.treetoggle {
left: 22px;
}
ul.treelist.iconized li div.treetoggle {
top: 13px;
left: 19px;
}
ul.treelist.iconized ul li div.treetoggle {
left: 45px;
}
ul.treelist.iconized ul ul li div.treetoggle {
left: 71px;
}
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;
left: 0;
width: 100%;
height: 42px;
border-top: 1px solid #bbd3da;
background: #d9ecf4;
white-space: nowrap;
overflow: hidden;
}
.uibox .boxfooter {
border-radius: 0 0 4px 4px;
}
.boxfooter .listbutton {
display: inline-block;
text-decoration: none;
width: 48px;
border-right: 1px solid #fff;
background: #c7e3ef;
padding: 3px 0;
margin-top: 1px;
}
.boxfooter a.listbutton:focus {
color: #fff;
background-color: rgba(73,180,210,0.6);
outline: none;
}
.uibox .boxfooter .listbutton:first-child {
border-radius: 0 0 0 4px;
}
.boxfooter .listbutton .inner {
display: inline-block;
width: 48px;
height: 35px;
text-indent: -5000px;
background-image: url(images/buttons.png);
background-position: -1000px 0;
background-repeat: no-repeat;
}
.boxfooter .listbutton.add .inner {
background-position: 10px -1301px;
}
.boxfooter .listbutton.delete .inner {
background-position: 10px -1342px;
}
.boxfooter .listbutton.groupactions .inner {
background-position: 5px -1382px;
}
.boxfooter .listbutton.addto .inner {
background-position: 5px -1422px;
}
.boxfooter .listbutton.addcc .inner {
background-position: 5px -1462px;
}
.boxfooter .listbutton.addbcc {
width: 54px;
}
.boxfooter .listbutton.addbcc .inner {
width: 54px;
background-position: 2px -1502px;
}
.boxfooter .listbutton.removegroup .inner {
background-position: 5px -1540px;
}
.boxfooter .listbutton.disabled .inner {
opacity: 0.4;
}
.boxfooter .countdisplay {
display: inline-block;
position: relative;
top: 10px;
color: #69929e;
padding: 3px 6px;
}
.boxpagenav {
position: absolute;
top: 10px;
right: 6px;
width: auto;
}
.boxpagenav a.icon {
display: inline-block;
padding: 1px 3px;
height: 13px;
width: 14px;
text-indent: 1000px;
vertical-align: bottom;
overflow: hidden;
background: url(images/buttons.png) -4px -286px no-repeat;
}
.boxpagenav a.icon.prevpage {
background-position: -4px -301px;
}
.boxpagenav a.icon.nextpage {
background-position: -28px -301px;
}
.boxpagenav a.icon.lastpage {
background-position: -28px -286px;
}
.boxpagenav a.icon.disabled {
opacity: 0.4;
}
.centerbox {
width: 40em;
margin: 16px auto;
}
.errorbox {
width: 40em;
padding: 20px;
}
.errorbox h3 {
font-size: 16px;
margin-top: 0;
}
/*** Records table ***/
table.records-table {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border: 1px solid #bbd3da;
}
.boxlistcontent .records-table {
border: 0;
}
.records-table thead th,
.records-table thead td {
color: #69939e;
font-size: 11px;
font-weight: bold;
background: #d6eaf3;
border-left: 1px solid #bbd3da;
padding: 8px 7px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.records-table.sortheader thead th,
.records-table.sortheader thead td {
padding: 0;
}
.records-table thead th a,
.records-table thead td a,
.records-table thead th span,
.records-table thead td span {
display: block;
padding: 7px 7px;
color: #69939e;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
}
.records-table thead th a:focus,
.records-table thead td a:focus {
color: #fff;
background-color: rgba(73,180,210,0.7);
outline: none;
}
.records-table tbody td {
padding: 2px 7px;
border-bottom: 1px solid #ddd;
border-left: 1px dotted #bbd3da;
white-space: nowrap;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
background-color: #fff;
outline: none;
}
/* This padding-left minus the focused padding left should be half of the focused border-left */
.records-table thead tr th:first-child,
.records-table thead tr td:first-child,
.records-table tbody tr td:first-child {
border-left: 2px solid transparent;
padding-left: 4px;
}
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.records-table.focus tbody tr.focused > td:first-child {
border-left: 2px solid #49b3d2;
}
.records-table tr.selected td {
color: #fff !important;
background-color: #4db0d2;
}
.records-table.focus tr.selected td {
background-color: #017db6 !important;
}
.records-table tr.selected td a,
.records-table tr.selected td span {
color: #fff !important;
}
.records-table tr.deleted td,
.records-table tr.deleted td a {
color: #ccc !important;
}
/*** iFrames ***/
#aboutframe {
width: 97%;
height: 100%;
border: 0;
padding: 0;
}
body.iframe {
background: #fff;
margin: 38px 0 10px 0;
}
body.iframe.error {
background: #ededed;
}
body.iframe.floatingbuttons {
margin-bottom: 40px;
}
body.iframe.fullheight {
margin: 0;
}
.contentbox .boxtitle,
body.iframe .boxtitle {
color: #777;
background: #efefef;
border-bottom: 1px solid #d0d0d0;
}
body.iframe .boxtitle {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
body.iframe .footerleft.floating,
#composeview-bottom .formbuttons.floating {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 110;
background: #fff;
padding-top: 8px;
padding-bottom: 12px;
}
body.iframe .footerleft.floating:before,
#composeview-bottom .formbuttons.floating:before {
content: " ";
position: absolute;
top: -6px;
left: 0;
width: 100%;
height: 6px;
background: url(images/overflowshadow.png) top center no-repeat;
}
.boxcontent {
padding: 10px;
}
.boxcontent .boxwarning {
margin: 0 0 10px;
display: block;
color: #960;
border: 1px solid #ffdf0e;
background: url(images/messages.png) #fef893 5px -85px no-repeat;
padding: 6px 12px 6px 30px;
}
.contentbox .scroller {
position: absolute;
top: 34px;
left: 0;
right: 0;
bottom: 0px;
overflow: auto;
}
.iframebox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
}
.footerleft {
padding: 0 12px 4px 12px;
}
.propform fieldset {
margin-bottom: 20px;
border: 0;
padding: 0;
}
.propform fieldset legend {
display: block;
font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 0;
}
.propform fieldset fieldset legend {
color: #666;
font-size: 12px;
}
.propform div.prop {
margin-bottom: 0.5em;
}
.propform div.prop.block label {
display: block;
margin-bottom: 0.3em;
}
.propform div.prop.block input,
.propform div.prop.block textarea {
width: 95%;
}
.propform a.disabled {
color: #999;
text-decoration: none;
cursor: default;
}
fieldset.floating {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
table.propform {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
ul.proplist li,
table.propform td {
width: 80%;
padding: 4px 10px;
background: #eee;
border-bottom: 2px solid #fff;
}
table.propform td.title {
width: 20%;
color: #333;
padding-right: 20px;
white-space: nowrap;
}
-table.propform .mceLayout td {
- padding: 0;
- border-bottom: 0;
-}
-
ul.proplist {
list-style: none;
margin: 0;
padding: 0;
}
ul.proplist li {
width: auto;
}
ul.proplist.simplelist li {
border: 0;
background: transparent;
}
#pluginbody {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.formcontent input,
.formcontent textarea {
width: 95%;
}
.formcontent .hint {
font-style: italic;
margin-bottom: 1em;
}
/*** Login form ***/
#login-form {
position: relative;
width: 580px;
margin: 20ex auto 2ex auto;
}
#login-form .box-inner {
width: 430px;
background: #404040;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #404040), color-stop(100%, #2e2e2e));
background: -ms-linear-gradient(top, #404040 0%, #2e2e2e 100%);
background: linear-gradient(to bottom, #404040 0%, #2e2e2e 100%);
margin: 0 50px;
padding: 10px 24px 24px 24px;
border-radius: 6px;
}
#login-form .box-bottom {
margin-top: -3px;
padding-top: 10px;
}
#login-form .noscriptwarning {
margin: 0 auto;
width: 430px;
color: #cf2734;
font-size: 110%;
font-weight: bold;
}
#login-form td.input {
width: 80%;
padding: 8px;
}
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
width: 100%;
border-color: #666;
}
#login-form button.button {
color: #444;
border-color: #f9f9f9;
background-color: #f9f9f9;
}
#login-form button.button:active {
color: #333;
background-color: #dcdcdc;
}
#login-form form table {
width: 98%;
}
#login-form td.title {
width: 20%;
white-space: nowrap;
color: #cecece;
text-align: right;
padding-right: 1em;
}
#login-form p.formbuttons {
margin-top: 2em;
text-align: center;
}
#login-form #logo {
margin-bottom: 20px;
border: none;
}
#login-form #message {
min-height: 40px;
padding: 5px 25px;
text-align: center;
font-size: 1.1em;
}
#login-form #message div {
display: inline-block;
padding-right: 0;
font-size: 12px;
}
#bottomline {
font-size: 90%;
text-align: center;
margin-top: 2em;
}
/*** quicksearch **/
.searchbox {
position: relative;
}
#quicksearchbar {
position: absolute;
right: 2px;
top: 2px;
width: 240px;
}
.searchbox input,
#quicksearchbar input {
width: 176px;
margin: 0;
padding: 3px 30px 3px 34px;
height: 18px;
background: #f1f1f1;
border-color: #ababab;
font-weight: bold;
font-size: 11px;
}
.searchbox .searchicon,
.searchbox #searchmenulink,
#quicksearchbar #searchmenulink {
position: absolute;
top: 5px;
left: 6px;
}
.searchbox #searchreset,
.searchbox .iconbutton.reset,
#quicksearchbar #searchreset {
position: absolute;
top: 4px;
right: 1px;
}
.listsearchbox {
padding: 4px;
background: #c7e3ef;
display: none;
}
.listsearchbox input {
width: 100%;
height: 26px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*** toolbar ***/
.toolbar .spacer {
display: inline-block;
width: 24px;
height: 40px;
padding: 0;
}
.toolbar a.button {
text-align: center;
font-size: 10px;
color: #555;
min-width: 50px;
max-width: 70px;
height: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 28px 2px 0 2px;
background: url(images/buttons.png) -100px 0 no-repeat transparent;
border: 0;
border-radius: 0;
}
.dropbutton .dropbuttontip:focus,
.toolbar a.button:focus {
color: #fff;
background-color: rgba(30,150,192, 0.5);
border-radius: 3px;
}
.toolbar a.button.disabled {
opacity: 0.4;
}
.toolbar a.button.selected {
color: #1978a1;
}
.toolbar a.button.selected:focus {
color: #fff;
}
.toolbar a.button.hidden {
display: none;
}
.dropbutton {
display: inline-block;
position: relative;
}
.dropbutton .dropbuttontip {
display: block;
position: absolute;
right: 0;
top: 0;
height: 41px;
width: 18px;
overflow: hidden;
text-indent: -5000px;
background: url(images/buttons.png) 0 -1255px no-repeat;
cursor: pointer;
outline: none;
}
.dropbutton .dropbuttontip:focus,
.dropbutton .dropbuttontip:hover {
background-position: -26px -1255px;
}
.dropbutton a.button.disabled + .dropbuttontip {
opacity: 0.5;
}
.dropbutton a.button.disabled + .dropbuttontip:hover {
background-position: 0 -1255px;
}
.dropbutton a.button {
margin-left: 0;
padding-left: 0;
margin-right: 0;
padding-right: 0;
}
.toolbar a.button.back {
background-position: 0 -1216px;
}
.toolbar a.button.checkmail {
background-position: center -1176px;
}
.toolbar a.button.compose {
background-position: center -530px;
}
.toolbar a.button.reply {
background-position: center -570px;
}
.toolbar a.button.reply-all {
min-width: 64px;
background-position: 0 -610px;
}
.toolbar a.button.forward {
min-width: 64px;
background-position: 0 -650px;
}
.toolbar a.button.delete {
background-position: center -690px;
}
.toolbar a.button.archive {
background-position: center -730px;
}
.toolbar a.button.junk {
background-position: center -770px;
}
.toolbar a.button.print {
background-position: center -810px;
}
.toolbar a.button.markmessage {
background-position: center -1094px;
}
.toolbar a.button.move {
background-position: center -1971px;
}
.toolbar a.button.more {
background-position: center -850px;
}
.toolbar a.button.attach {
background-position: center -890px;
}
.toolbar a.button.spellcheck {
min-width: 64px;
background-position: 0 -930px;
}
.toolbar a.button.spellcheck.selected {
background-position: 0 -1620px;
color: #1978a1;
}
.toolbar a.button.insertsig {
background-position: center -1135px;
}
.toolbar a.button.search {
background-position: center -970px;
}
.toolbar a.button.import {
background-position: center -1012px;
}
.toolbar a.button.export {
min-width: 64px;
background-position: 0 -1054px;
}
.toolbar a.button.send {
background-position: center -1660px;
}
.toolbar a.button.savedraft {
background-position: center -1700px;
}
.toolbar a.button.close {
background-position: 0 -1745px;
}
.toolbar a.button.download {
background-position: center -1892px;
}
.toolbar a.button.responses {
background-position: center -1932px;
}
.toolbar a.button.encrypt {
min-width: 66px;
background-position: center -2025px;
}
.toolbar a.button.encrypt.selected {
background-position: center -2065px;
}
.toolbar a.button.rotate {
background-position: center -2148px;
}
.toolbar a.button.zoomin {
background-position: center -2190px;
}
.toolbar a.button.zoomout {
background-position: center -2230px;
}
a.menuselector {
display: inline-block;
border: 1px solid #ababab;
border-radius: 4px;
background: #f1f1f1;
text-decoration: none;
color: #333;
cursor: pointer;
white-space: nowrap;
}
a.menuselector .handle {
display: inline-block;
padding: 0 32px 0 6px;
height: 20px;
line-height: 19px;
background: url(images/selector.png) right center no-repeat;
border-radius: 4px;
}
a.menuselector:active {
background: #dddddd;
background: -moz-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f8f8f8));
background: -ms-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
background: linear-gradient(to bottom, #dddddd 0%, #f8f8f8 100%);
text-decoration: none;
}
select.decorated {
position: relative;
z-index: 10;
opacity: 0;
height: 22px;
cursor: pointer;
-khtml-appearance: none;
-webkit-appearance: none;
border: 0;
}
html.opera select.decorated {
opacity: 1;
}
select.decorated option {
color: #fff;
background: #444;
border: 0;
border-top: 1px solid #5a5a5a;
border-bottom: 1px solid #333;
padding: 4px 6px;
outline: none;
cursor: default;
}
a.menuselector:focus,
a.menuselector.focus,
a.iconbutton:focus,
.pagenav a.button:focus {
border-color: #0883d0;
box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8);
outline: none;
}
/*** quota indicator ***/
#quotadisplay {
left: 6px;
height: 18px;
font-size: 12px;
font-weight: bold;
padding-left: 30px;
background: url(images/quota.png) -100px 0 no-repeat;
}
#quotadisplay.p90,
#quotadisplay.p100 {
color: #e03221;
}
table.quota-info {
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
margin: 5px;
}
table.quota-info td,
table.quota-info th {
color: white;
border: 1px solid lightgrey;
padding: 2px 3px;
text-align: center;
min-width: 80px;
}
table.quota-info td.name {
text-align: left;
}
table.quota-info td.root {
font-style: italic;
}
/*** popup menus ***/
.popupmenu,
#rcmKSearchpane {
display: none;
position: absolute;
top: 32px;
left: 90px;
width: auto;
max-height: 70%;
overflow: -moz-scrollbars-vertical;
overflow-y: auto;
background: #444;
z-index: 240;
border-radius: 4px;
box-shadow: 0 2px 6px 0 #333;
}
.popupmenu.dropdown {
border-radius: 0 0 4px 4px;
border-top: 0;
}
.popupmenu > .buttons {
border-top: 1px solid #5a5a5a;
height: 25px;
padding-top: 5px;
text-align: center;
}
ul.toolbarmenu,
ul.toolbarmenu ul,
#rcmKSearchpane ul {
margin: 0;
padding: 0;
list-style: none;
}
.googie_list td,
ul.toolbarmenu li,
#rcmKSearchpane ul li {
color: #fff;
white-space: nowrap;
min-width: 130px;
margin: 0;
border-top: 1px solid #5a5a5a;
}
.googie_list tr:first-child td,
ul.toolbarmenu > li:first-child,
select.decorated option:first-child {
border-top: 0;
}
.googie_list tr:last-child td,
ul.toolbarmenu > li:last-child,
select.decorated option:last-child {
border-bottom: 0;
}
.googie_list td span,
ul.toolbarmenu li a {
display: block;
color: #666;
text-decoration: none;
min-height: 14px;
padding: 6px 16px 6px 10px;
}
.googie_list td span {
padding: 3px 10px;
}
.googie_list td span,
ul.toolbarmenu li a.active {
color: #fff;
cursor: default;
}
.googie_list td.googie_list_onhover,
ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus,
#rcmKSearchpane ul li.selected,
#pagejump-selector ul li.selected,
select.decorated option:hover,
select.decorated option[selected='selected'] {
background-color: #0883d0;
outline: none;
}
ul.toolbarmenu.iconized li a,
ul.toolbarmenu.selectable li a {
padding-left: 30px;
}
ul.toolbarmenu.selectable li a.selected {
background: url(images/messages.png) 4px -27px no-repeat;
}
ul.toolbarmenu li label {
display: block;
color: #fff;
padding: 4px 8px;
}
ul.toolbarmenu li.separator label {
color: #bbb;
font-style: italic;
padding: 0 8px;
line-height: 17px;
}
ul.toolbarmenu li input {
margin: 0;
}
ul.toolbarmenu li a.icon {
color: #eee;
padding: 2px 6px;
}
ul.toolbarmenu li span.icon,
#rcmKSearchpane ul li i.icon {
display: block;
min-height: 14px;
padding: 4px 4px 1px 24px;
height: 17px;
background-image: url(images/listicons.png);
background-position: -100px 0;
background-repeat: no-repeat;
opacity: 0.2;
}
ul.toolbarmenu li a.active span.icon {
opacity: 0.99;
}
ul.toolbarmenu li span.read {
background-position: 0 -1220px;
}
ul.toolbarmenu li span.unread {
background-position: 0 -1196px;
}
ul.toolbarmenu li span.flagged {
background-position: 0 -1244px;
}
ul.toolbarmenu li span.unflagged {
background-position: 0 -1268px;
}
ul.toolbarmenu li span.mail {
background-position: 0 -1293px;
}
ul.toolbarmenu li span.list {
background-position: 0 -1317px;
}
ul.toolbarmenu li span.invert {
background-position: 0 -1340px;
}
ul.toolbarmenu li span.cross {
background-position: 0 -1365px;
}
ul.toolbarmenu li span.print {
background-position: 0 -1436px;
}
ul.toolbarmenu li span.download {
background-position: 0 -1412px;
}
ul.toolbarmenu li span.rename {
background-position: 0 -2295px;
}
ul.toolbarmenu li span.edit {
background-position: 0 -1388px;
}
ul.toolbarmenu li span.viewsource {
background-position: 0 -1460px;
}
ul.toolbarmenu li span.extwin {
background-position: 0 -1484px;
}
ul.toolbarmenu li span.conversation {
background-position: 0 -1532px;
}
ul.toolbarmenu li span.move {
background-position: 0 -2126px;
}
ul.toolbarmenu li span.copy {
background-position: 0 -2150px;
}
#pagejump-selector {
max-height: 250px;
overflow-x: hidden;
}
#pagejump-selector ul li {
min-width: 45px;
padding: 4px 6px;
cursor: default;
}
#snippetslist {
max-width: 200px;
}
#snippetslist li a {
overflow: hidden;
text-overflow: ellipsis;
}
#rcmKSearchpane {
border-radius: 0 0 4px 4px;
border-top: 0;
}
#rcmKSearchpane ul li {
text-decoration: none;
min-height: 14px;
padding: 6px 10px 6px 28px;
border: 0;
cursor: default;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
}
#rcmKSearchpane ul li i.icon {
opacity: 0.99;
position: absolute;
top: 4px;
left: 5px;
width: 18px;
height: 18px;
padding: 0;
background-position: -1px -2223px;
}
#rcmKSearchpane ul li.group i.icon {
background-position: -1px -2247px;
}
.popupdialog {
display: none;
padding: 10px;
}
.popupdialog .formbuttons {
margin: 20px 0 4px 0;
}
.ui-dialog .prompt input {
display: block;
margin: 8px 0;
}
.ui-dialog iframe {
width: 100%;
height: 100%;
border: 0;
}
.ui-dialog-content.iframe {
padding: 0 !important;
overflow: hidden !important;
}
.hint {
margin: 4px 0;
color: #999;
}
.splitter {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
position: absolute;
background: url(images/splitter.png) center no-repeat;
}
.splitter-h {
height: 10px;
width: 100%;
cursor: n-resize;
cursor: row-resize;
background-position: center 0;
}
.splitter-v {
width: 10px;
height: 100%;
cursor: e-resize;
cursor: col-resize;
background-position: 0 center;
}
#rcmdraglayer {
min-width: 260px;
width: auto !important;
width: 260px;
padding: 6px 8px;
background: #444;
border: 1px solid #555;
border-radius: 4px;
box-shadow: 0 2px 6px 0 #333;
z-index: 250;
color: #ccc;
white-space: nowrap;
opacity: 0.92;
}
#rcmdraglayer:after {
content: "";
position: absolute;
top: 6px;
left: -6px;
border-style: solid;
border-width: 6px 6px 6px 0;
border-color: transparent #444;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
z-index: 251;
}
.draglayercopy:before {
position: absolute;
bottom: -6px;
left: -6px;
content: " ";
width: 16px;
height: 16px;
background: url(images/buttons.png) -7px -358px no-repeat;
z-index: 255;
}
.popup label > input {
margin-left: 10px;
}
/*** folder selector ***/
#folder-selector {
z-index: 1000;
}
#folder-selector li a span {
background: url("images/listicons.png") 4px -2021px no-repeat;
display: block;
height: 17px;
min-height: 14px;
padding: 4px 4px 1px 28px;
overflow: hidden;
max-width: 120px;
text-overflow: ellipsis;
}
#folder-selector li a.virtual span {
opacity: .2;
}
#folder-selector li.inbox span {
background-position: 4px -2049px;
}
#folder-selector li.drafts span {
background-position: 4px -1388px;
}
#folder-selector li.sent span {
background-position: 4px -2074px;
}
#folder-selector li.trash span {
background-position: 4px -1508px;
}
#folder-selector li.junk span {
background-position: 4px -2100px;
}
/*** folders list ***/
.folderlist 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;
}
.folderlist li.mailbox.unread > a {
padding-right: 36px;
}
.folderlist li.mailbox > a:focus,
.folderlist li.mailbox.selected > a {
background-position: 6px -21px;
}
.folderlist li.mailbox.inbox > a {
background-position: 6px -189px;
}
.folderlist li.mailbox.inbox > a:focus,
.folderlist li.mailbox.inbox.selected > a {
background-position: 6px -213px;
}
.folderlist li.mailbox.drafts > a {
background-position: 6px -238px;
}
.folderlist li.mailbox.drafts > a:focus,
.folderlist li.mailbox.drafts.selected > a {
background-position: 6px -262px;
}
.folderlist li.mailbox.sent > a {
background-position: 6px -286px;
}
.folderlist li.mailbox.sent > a:focus,
.folderlist li.mailbox.sent.selected > a {
background-position: 6px -310px;
}
.folderlist li.mailbox.junk > a {
background-position: 6px -334px;
}
.folderlist li.mailbox.junk > a:focus,
.folderlist li.mailbox.junk.selected > a {
background-position: 6px -358px;
}
.folderlist li.mailbox.trash > a {
background-position: 6px -382px;
}
.folderlist li.mailbox.trash > a:focus,
.folderlist li.mailbox.trash.selected > a {
background-position: 6px -406px;
}
.folderlist li.mailbox.trash.empty > a {
background-position: 6px -1924px;
}
.folderlist li.mailbox.trash.empty > a:focus,
.folderlist li.mailbox.trash.empty.selected > a {
background-position: 6px -1948px;
}
.folderlist li.mailbox.archive > a {
background-position: 6px -1699px;
}
.folderlist li.mailbox.archive > a:focus,
.folderlist li.mailbox.archive.selected > a {
background-position: 6px -1723px;
}
.folderlist li.mailbox ul li.drafts > a {
background-position: 23px -238px;
}
.folderlist li.mailbox ul li.drafts > a:focus,
.folderlist li.mailbox ul li.drafts.selected > a {
background-position: 23px -262px;
}
.folderlist li.mailbox ul li.sent > a {
background-position: 23px -286px;
}
.folderlist li.mailbox ul li.sent > a:focus,
.folderlist li.mailbox ul li.sent.selected > a {
background-position: 23px -310px;
}
.folderlist li.mailbox ul li.junk > a {
background-position: 23px -334px;
}
.folderlist li.mailbox ul li.junk > a:focus,
.folderlist li.mailbox ul li.junk.selected > a {
background-position: 23px -358px;
}
.folderlist li.mailbox ul li.trash > a {
background-position: 23px -382px;
}
.folderlist li.mailbox ul li.trash > a:focus,
.folderlist li.mailbox ul li.trash.selected > a {
background-position: 23px -406px;
}
.folderlist li.mailbox ul li.trash.empty > a {
background-position: 23px -1924px;
}
.folderlist li.mailbox ul li.trash.empty > a:focus,
.folderlist li.mailbox ul li.trash.empty.selected > a {
background-position: 23px -1948px;
}
.folderlist li.mailbox ul li.archive > a {
background-position: 23px -1699px;
}
.folderlist li.mailbox ul li.archive > a:focus,
.folderlist li.mailbox ul li.archive.selected > a {
background-position: 23px -1723px;
}
.folderlist li.virtual > a {
color: #aaa;
}
.folderlist li.mailbox div.treetoggle {
top: 13px;
left: 19px;
}
.folderlist li.mailbox ul li:last-child {
border-bottom: 0;
}
/* nested mailboxes */
.folderlist li.mailbox ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #bbd3da;
}
.folderlist li.mailbox ul li a {
padding-left: 52px; /* 36 + 1 x 16 */
background-position: 22px -93px; /* 6 + 1 x 16 */
}
.folderlist li.mailbox ul li > a:focus,
.folderlist li.mailbox ul li.selected > a {
background-position: 22px -117px;
}
.folderlist li.mailbox ul li div.treetoggle {
left: 33px;
top: 14px;
}
.folderlist li.mailbox ul ul li.mailbox a {
padding-left: 68px; /* 2x */
background-position: 38px -93px;
}
.folderlist li.mailbox ul ul li > a:focus,
.folderlist li.mailbox ul ul li.selected > a {
background-position: 38px -117px;
}
.folderlist li.mailbox ul ul li div.treetoggle {
left: 48px;
}
.folderlist li.mailbox ul ul ul li.mailbox a {
padding-left: 84px; /* 3x */
background-position: 54px -93px;
}
.folderlist li.mailbox ul ul ul li > a:focus,
.folderlist li.mailbox ul ul ul li.selected > a {
background-position: 54px -117px;
}
.folderlist li.mailbox ul ul ul li div.treetoggle {
left: 64px;
}
.folderlist li.mailbox ul ul ul ul li.mailbox a {
padding-left: 100px; /* 4x */
background-position: 70px -93px;
}
.folderlist li.mailbox ul ul ul ul li > a:focus,
.folderlist li.mailbox ul ul ul ul li.selected > a {
background-position: 70px -117px;
}
.folderlist li.mailbox ul ul ul ul li div.treetoggle {
left: 80px;
}
/* indent folders on levels > 4 */
.folderlist li.mailbox ul ul ul ul ul li {
padding-left: 16px;
}
.folderlist li.mailbox ul ul ul ul ul li div.treetoggle {
left: 96px;
}
/*** attachment list ***/
.attachmentslist {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.attachmentslist li {
display: block;
position: relative;
background: url(images/filetypes.png) 0 0 no-repeat;
margin-bottom: 1px;
line-height: 24px;
}
.attachmentslist li.txt,
.attachmentslist li.text {
background-position: 0 -416px;
}
.attachmentslist li.pdf {
background-position: 0 -26px;
}
.attachmentslist li.doc,
.attachmentslist li.docx,
.attachmentslist li.msword {
background-position: 0 -52px;
}
.attachmentslist li.odt {
background-position: 0 -78px;
}
.attachmentslist li.xls,
.attachmentslist li.xlsx,
.attachmentslist li.msexcel {
background-position: 0 -104px;
}
.attachmentslist li.ods {
background-position: 0 -130px;
}
.attachmentslist li.zip,
.attachmentslist li.gz {
background-position: 0 -156px;
}
.attachmentslist li.rar {
background-position: 0 -182px;
}
.attachmentslist li.image {
background-position: 0 -208px;
}
.attachmentslist li.jpg,
.attachmentslist li.jpeg {
background-position: 0 -234px;
}
.attachmentslist li.png {
background-position: 0 -260px;
}
.attachmentslist li.m4p {
background-position: 0 -286px;
}
.attachmentslist li.mp3,
.attachmentslist li.audio {
background-position: 0 -312px;
}
.attachmentslist li.video {
background-position: 0 -338px;
}
.attachmentslist li.ics,
.attachmentslist li.calendar {
background-position: 0 -364px;
}
.attachmentslist li.vcard {
background-position: 0 -390px;
}
.attachmentslist li.sig,
.attachmentslist li.pgp-signature,
.attachmentslist li.pkcs7-signature {
background-position: 0 -442px;
}
.attachmentslist li.html {
background-position: 0 -468px;
}
.attachmentslist li.eml,
.attachmentslist li.rfc822 {
background-position: 0 -494px;
}
.attachmentslist li.ppt,
.attachmentslist li.pptx,
.attachmentslist li.ppsx,
.attachmentslist li.vnd.mspowerpoint {
background-position: 0 -520px;
}
.attachmentslist li.odp,
.attachmentslist li.otp {
background-position: 0 -546px;
}
.attachmentslist li.application.asc {
background-position: 0 -598px;
}
.attachmentslist li.application.pgp-keys {
background-position: 0 -572px;
}
.attachmentslist li a {
display: block;
color: #333;
font-weight: bold;
padding: 3px 15px 3px 30px;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 20px;
outline: none;
}
.attachmentslist li a.drop {
background: url(images/buttons.png) no-repeat scroll center -1570px;
width: 14px;
height: 20px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
padding: 0;
overflow: hidden;
text-indent: -5000px;
outline: none;
}
#compose-attachments .attachmentslist li a.drop {
right: 24px;
}
.attachmentslist li a:focus,
.attachmentslist li a.drop:focus {
background-color: rgba(30,150,192, 0.5);
border-radius: 2px;
}
#compose-attachments ul li {
padding-right: 24px;
}
.attachmentslist li a:hover {
text-decoration: underline;
}
.attachmentslist li.uploading {
background: url(images/ajaxloader.gif) 4px 4px no-repeat;
padding-left: 30px;
}
.attachmentslist li a.delete,
.attachmentslist li a.cancelupload {
position: absolute;
top: 4px;
right: 0;
width: 20px;
height: 18px;
padding: 0;
text-decoration: none;
text-indent: -5000px;
background-image: url(images/buttons.png);
background-position: -6px -338px;
background-repeat: no-repeat;
}
.attachmentslist li a.cancelupload {
background-position: -6px -378px;
}
.attachmentslist li a.filename {
display: flex;
overflow: hidden;
}
.attachmentslist li .attachment-name {
overflow: hidden;
text-overflow: ellipsis;
}
.attachmentslist li .attachment-size {
padding: 0 .25em;
}
/*** fieldset tabs ***/
.tabbed.ui-tabs {
padding: 0;
border: 0 !important;
background: none;
}
.ui-dialog .tabbed.ui-tabs {
margin: -12px -8px 0 -8px;
}
.boxcontent.tabbed.ui-tabs {
padding: 10px;
}
.ui-tabs .tabsbar.ui-tabs-nav {
margin-bottom: 4px;
}
.ui-dialog-content .ui-tabs .tabsbar.ui-tabs-nav {
margin-bottom: 0;
}
.tabsbar .tablink:last-child {
background: none;
}
.tabsbar .tablink:last-child a {
border-right: 0;
}
.ui-tabs .ui-tabs-nav li.tablink a {
background: #fff;
}
.ui-tabs fieldset.ui-tabs-panel {
border: 0;
padding: 0;
margin-left: 0;
background: none;
}
.ui-dialog .propform .ui-tabs-panel {
display: block;
background: #efefef;
padding: 0.5em 1em;
}
-#image-selector-form.droptarget {
- background: url(images/filedrop.png) center bottom no-repeat;
-}
-
/** Common TinyMCE fixes **/
-.mce-btn-small:not(.mce-active) {
- background: transparent !important;
-}
-.mce-btn-small:not(.mce-active):hover {
- background: white !important;
-}
-
-.mce-btn-small .mce-ico {
- display: inline; /* for old Firefox */
+#image-selector.droptarget {
+ background: url(images/filedrop.png) center bottom no-repeat;
}
-.mce-btn-small i {
- line-height: 16px !important;
- vertical-align: text-top !important;
+div.tox .tox-toolbar,
+div.tox .tox-toolbar__overflow,
+div.tox .tox-toolbar__primary {
+ background-color: #f0f0f0;
}
-_:not(), _:-moz-handler-blocked, .mozilla .mce-btn-small i {
- line-height: 20px !important;
+div.tox .tox-toolbar__primary {
+ border: 0;
}
-.mce-top-part::before {
- box-shadow: none !important;
+div.tox div.tox-dialog-wrap__backdrop {
+ background: #aaa;
+ opacity: .3;
}
-.mce-textbox {
- border-radius: 0;
- box-shadow: none;
+div.tox div.tox-dialog {
+ box-shadow: 1px 1px 18px #666;
+ border-width: 0;
}
-button.mce-close,
-.mce-btn button,
-.mce-textbox:focus {
- box-shadow: none;
- outline: none;
-}
.mce-menu {
z-index: 65537 !important;
}
.mce-tinymce.mce-container {
box-shadow: none;
}
.mce-toolbar.mce-container {
background: #f0f0f0;
}
/** PGP Key import dialog **/
.pgpkeyimport div.key {
position: relative;
margin-bottom: 2px;
padding: 1em;
background-color: #ebebeb;
}
.pgpkeyimport div.key.revoked,
.pgpkeyimport div.key.disabled {
color: #a0a0a0;
}
.pgpkeyimport div.key label {
display: inline-block;
margin-right: 0.5em;
}
.pgpkeyimport div.key label:after {
content: ":";
}
.pgpkeyimport div.key label + a,
.pgpkeyimport div.key label + span {
display: inline-block;
margin-right: 2em;
white-space: nowrap;
}
.pgpkeyimport div.key label + a {
font-weight: bold;
}
.pgpkeyimport ul.uids {
margin: 1em 0 0 0;
padding: 0;
}
.pgpkeyimport li.uid {
border: 0;
padding: 0.3em;
}
.pgpkeyimport div.key button.importkey {
position: absolute;
top: 0.8em;
right: 0.8em;
padding: 4px 6px;
}
.pgpkeyimport div.key button[disabled] {
display: none;
}
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index fbf7c8d51..9de92b5af 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -1,1522 +1,1522 @@
/**
* Roundcube functions for default skin interface
*
* Copyright (c) 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.
*
* @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
*/
function rcube_mail_ui()
{
var env = {};
var popups = {};
var popupconfig = {
forwardmenu: { editable:1 },
searchmenu: { editable:1, callback:searchmenu },
attachmentmenu: { },
listoptions: { editable:1 },
groupmenu: { above:1 },
mailboxmenu: { above:1 },
spellmenu: { callback: spellmenu },
'folder-selector': { iconized:1 }
};
var me = this;
var mailviewsplit;
var mailviewsplit2;
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.toggle_popup = toggle_popup;
this.add_popup = add_popup;
this.import_dialog = import_dialog;
this.set_searchmod = set_searchmod;
this.set_searchscope = set_searchscope;
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;
this.folder_search_init = folder_search_init;
// 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");
}
$(document).ready(function() { me.init(); });
}
/**
*
*/
function setenv(key, val)
{
env[key] = val;
}
/**
* Get preference stored in browser
*/
function get_pref(key)
{
if (!prefs) {
prefs = 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 localStorage is supported)
if (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 supported)
if (!rcmail.local_storage_set_item('prefs.larry', prefs)) {
// 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);
$.widget('ui.dialog', $.ui.dialog, {
open: function() {
this._super();
dialog_open(this);
return this;
}});
/*** 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_toggle)
.addEventListener('menu-close', menu_toggle)
.addEventListener('menu-save', save_listoptions)
.addEventListener('enable-command', enable_command)
.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) })
.addEventListener('responseaftersearch', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) });
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('aftershow-headers', function() { layout_messageview(); })
.addEventListener('afterhide-headers', function() { layout_messageview(); });
$('#previewheaderstoggle').click(function(e) {
toggle_preview_headers();
if (this.blur && !rcube_event.is_keyboard(e))
this.blur();
return false;
});
// add menu link for each attachment
$('#attachment-list > li').each(function() {
attachmentmenu_append(this);
});
if (get_pref('previewheaders') == '1') {
toggle_preview_headers();
}
if (rcmail.env.action == 'show') {
$('#messagecontent').focus();
}
}
else if (rcmail.env.action == 'compose') {
rcmail.addEventListener('fileappended', function(e) { if (e.attachment.complete) attachmentmenu_append(e.item); })
.addEventListener('aftertoggle-editor', function(e) {
window.setTimeout(function() { layout_composeview(); }, 200);
})
.addEventListener('compose-encrypted', function(e) {
$("select[name='editorSelector']").prop('disabled', e.active);
$('a.button.attach, a.button.responses')[(e.active?'addClass':'removeClass')]('disabled');
$('#responseslist a.insertresponse')[(e.active?'removeClass':'addClass')]('active');
});
init_compose_editfields();
$('#composeoptionstoggle').click(function(e){
var expanded = $('#composeoptions').toggle().is(':visible');
$('#composeoptionstoggle').toggleClass('remove').attr('aria-expanded', expanded ? 'true' : 'false');
layout_composeview();
save_pref('composeoptions', expanded ? '1' : '0');
if (!rcube_event.is_keyboard(e))
this.blur();
return false;
}).css('cursor', 'pointer');
if (get_pref('composeoptions') !== '0') {
$('#composeoptionstoggle').click();
}
// 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:206, min:170, size:12, render:layout_composeview }).init();
// add menu link for each attachment
$('#attachment-list > li').each(function() {
attachmentmenu_append(this);
});
}
else if (rcmail.env.action == 'bounce') {
init_compose_editfields();
}
else if (rcmail.env.action == 'list' || !rcmail.env.action) {
mail_layout();
$('#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; });
rcmail.init_pagejumper('#pagejumper');
rcmail.addEventListener('setquota', update_quota)
.addEventListener('layout-change', mail_layout);
}
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:206, 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();
rcmail.addEventListener('setquota', update_quota);
folder_search_init($('#folderslist'));
}
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 == 'responses') {
new rcube_splitter({ id:'responseviewsplitter', p1:'#responseslist', p2:'#response-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') {
var legend = $('#preferences-details fieldset.advanced legend'),
toggle = $('<a href="#toggle"></a>')
.text(rcmail.gettext('toggleadvancedoptions'))
.attr('title', rcmail.gettext('toggleadvancedoptions'))
.addClass('advanced-toggle');
legend.click(function(e) {
toggle.html($(this).hasClass('collapsed') ? '&#9650;' : '&#9660;');
$(this).toggleClass('collapsed')
.closest('fieldset').children('.propform').toggle()
}).append(toggle).addClass('collapsed')
// this magically fixes incorrect position of toggle link created above in Firefox 3.6
if (bw.mz)
legend.parents('form').css('display', 'inline');
}
}
/*** addressbook task ***/
else if (rcmail.env.task == 'addressbook') {
rcmail.addEventListener('beforepushgroup', push_contactgroup)
.addEventListener('beforepopgroup', pop_contactgroup)
.addEventListener('menu-open', menu_toggle)
.addEventListener('menu-close', menu_toggle);
if (rcmail.env.action == '') {
new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
orientation:'v', relative:true, start:206, min:150, size:12, render:resize_leftcol }).init();
new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
orientation:'v', relative:true, start:266, min:260, size:12 }).init();
}
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" tabindex="-1"><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())
.on(bw.mz ? 'change keyup' : 'change', function() {
var val = $('option:selected', this).text();
$(this).next().children().text(val);
});
select
.on('focus', function(e){ overlay.addClass('focus'); })
.on('blur', function(e){ overlay.removeClass('focus'); });
});
// set min-width to show all toolbar buttons
var screen = $('body.minwidth');
if (screen.length) {
screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
}
// don't use $(window).resize() due to some unwanted side-effects
window.onresize = resize;
resize();
}
/**
* 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') && me.messagedialog.text() != msg)
msg = me.messagedialog.html() + '<p>' + p.message + '</p>';
me.messagedialog.html(msg)
.dialog({
resizable: false,
closeOnEscape: true,
dialogClass: p.type,
title: rcmail.gettext('errortitle'),
close: dialog_close,
hide: {effect: 'fadeOut'},
width: 420,
minHeight: 90
}).show();
me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog');
if (p.timeout > 0)
me.message_timer = window.setTimeout(dialog_close, p.timeout);
}
}
// modify dialog position to fully fit the close button into the window
function dialog_open(dialog)
{
var me = $(dialog.uiDialog),
offset = me.offset(),
position = me.position(),
width = me.outerWidth(),
maxWidth = $(window).width(),
topOffset = offset.top - 12;
if (topOffset < 0)
me.css('top', position.top - topOffset);
if (offset.left + width + 12 > maxWidth)
me.css('left', position.left - 12);
}
// Mail view layout initialization and change handler
function mail_layout(p)
{
var layout = p ? p.new_layout : rcmail.env.layout,
top = $('#mailview-top'),
bottom = $('#mailview-bottom');
if (p)
$('#mainscreencontent').removeClass().addClass(layout);
$('#mailviewsplitter')[layout == 'desktop' ? 'show' : 'hide']();
$('#mailviewsplitter2')[layout == 'widescreen' ? 'show' : 'hide']();
$('#mailpreviewframe')[layout != 'list' ? 'show' : 'hide']();
rcmail.env.contentframe = layout == 'list' ? null : 'messagecontframe';
if (layout == 'widescreen') {
$('#countcontrols').detach().appendTo($('#messagelistheader'));
top.css({height: 'auto', width: 394});
bottom.css({top: 0, left: 406, height: 'auto'}).show();
if (!mailviewsplit2) {
mailviewsplit2 = new rcube_splitter({ id:'mailviewsplitter2', p1:'#mailview-top', p2:'#mailview-bottom',
orientation:'v', relative:true, start:416, min:400, size:12});
mailviewsplit2.init();
}
else
mailviewsplit2.resize();
}
else if (layout == 'desktop') {
top.css({height: 270, width: 'auto'});
bottom.css({left: 0, top: 284, height: 'auto'}).show();
if (!mailviewsplit) {
mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
orientation:'h', relative:true, start:276, min:150, size:12, offset:4 });
mailviewsplit.init();
}
else
mailviewsplit.resize();
}
else { // layout == 'list'
top.css({height: 'auto', width: 'auto'});
bottom.hide();
}
if (p && p.old_layout == 'widescreen') {
$('#countcontrols').detach().appendTo($('#messagelistfooter'));
}
}
/**
* 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().attr('aria-hidden', 'true');
$('div.leftcol').css('margin-right', '0');
}
var mvlpe = $('#messagebody.mailvelope, #messagebody > .mailvelope');
if (mvlpe.length) {
var h = $('#messagecontent').length ?
$('#messagecontent').height() - 16 :
$(window).height() - mvlpe.offset().top - 2;
mvlpe.height(h);
}
}
function render_mailboxlist(splitter)
{
// TODO: implement smart shortening of long folder names
}
function resize_leftcol(splitter)
{
// STUB
}
function init_compose_editfields()
{
// 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);
}
}
// 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); });
}
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;
if (!form.length)
return;
bh = form.height() - bottom.position().top;
ovflw = minheight - bh;
btns = ovflw > -100 ? 0 : 40;
bottom.height(Math.max(minheight, bh));
form.css('overflow', ovflw > 0 ? 'auto' : 'hidden');
w = body.parent().width() - 5;
h = body.parent().height() - 8;
body.width(w).height(h);
- $('#composebodycontainer > div').width(w+8);
- $('#composebody_ifr').height(h + 4 - $('div.mce-toolbar').height());
+ $('#composebodycontainer > div').width(w+7);
+ $('#composebody_ifr').height(h + 4 - $('div.tox-toolbar').height());
$('#googie_edit_layer').width(w).height(h);
// $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons');
// $('#composeformbuttons')[(btns ? 'show' : 'hide')]();
var abooks = $('#directorylist');
if (abooks.length)
$('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
}
function update_quota(p)
{
var element = $('#quotadisplay'), menu = $('#quotamenu'),
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;
element.css('background-position', '0 -' + y + 'px');
element.attr('class', 'countdisplay p' + (Math.round(p.percent / 10) * 10));
if (p.table) {
if (!menu.length)
menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body'));
menu.html(p.table);
element.css('cursor', 'pointer').off('click').on('click', function(e) {
return rcmail.command('menu-open', 'quotamenu', e.target, e);
});
}
}
function folder_search_init(container)
{
// animation to unfold list search box
$('.boxtitle a.search', container).click(function(e) {
var title = $('.boxtitle', container),
box = $('.listsearchbox', container),
dir = box.is(':visible') ? -1 : 1,
height = 34 + ($('select', box).length ? 22 : 0);
box.slideToggle({
duration: 160,
progress: function(animation, progress) {
if (dir < 0) progress = 1 - progress;
$('.scroller', container).css('top', (title.outerHeight() + height * progress) + 'px');
},
complete: function() {
box.toggleClass('expanded');
if (box.is(':visible')) {
box.find('input[type=text]').focus();
height = 34 + ($('select', box).length ? $('select', box).outerHeight() + 4 : 0);
$('.scroller', container).css('top', (title.outerHeight() + height) + 'px');
}
else {
$('a.reset', box).click();
}
// TODO: save state in localStorage
}
});
return false;
});
}
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);
}
else if (p.command == 'compose-encrypted') {
// show the toolbar button for Mailvelope
$('a.button.encrypt').parent().show();
}
else if (p.command == 'compose-encrypted-signed') {
// enable selector for encrypt and sign
$('#encryptionmenulink').show();
}
}
/**
* 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 toggle_popup(popup, e, config)
{
// auto-register menu object
if (config || !popupconfig[popup])
add_popup(popup, config);
return rcmail.command('menu-open', popup, e.target, e);
}
/**
* (Deprecated) trigger for popup menus
*/
function show_popup(popup, show, config)
{
// auto-register menu object
if (config || !popupconfig[popup])
add_popup(popup, config);
config = popupconfig[popup] || {};
var ref = $(config.link ? config.link : '#'+popup+'link'),
pos = ref.offset();
if (ref.has('.inner'))
ref = ref.children('.inner');
// fire command with simulated mouse click event
return rcmail.command('menu-open',
{ menu:popup, show:show },
ref.get(0),
$.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top }));
}
/**
* 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').attr('aria-expanded', 'true');
else
button.attr('href', '#details').removeClass('remove').addClass('add').attr('aria-expanded', 'false');
save_pref('previewheaders', full.is(':visible') ? '1' : '0');
}
/**
*
*/
function switch_view_mode(mode, force)
{
if (force || !$('#mail'+mode+'mode').hasClass('disabled')) {
$('#maillistmode, #mailthreadmode').removeClass('selected').attr('tabindex', '0').attr('aria-disabled', 'false');
$('#mail'+mode+'mode').addClass('selected').attr('tabindex', '-1').attr('aria-disabled', 'true');
}
}
/**** popup menu callbacks ****/
/**
* Handler for menu-open and menu-close events
*/
function menu_toggle(p)
{
if (p && p.name == 'messagelistmenu') {
show_listoptions(p);
}
else if (p) {
// adjust menu position according to config
var config = popupconfig[p.name] || {},
ref = $(config.link || '#'+p.name+'link'),
visible = p.obj && p.obj.is(':visible'),
above = config.above;
// fix position according to config
if (p.obj && visible && ref.length) {
var parent = ref.parent(),
win = $(window), pos;
if (parent.hasClass('dropbutton'))
ref = parent;
if (config.above || ref.hasClass('dropbutton')) {
pos = ref.offset();
p.obj.css({ left:pos.left+'px', top:(pos.top + (config.above ? -p.obj.height() : ref.outerHeight()))+'px' });
}
}
// add the right classes
if (p.obj && config.iconized) {
p.obj.children('ul').addClass('iconized');
}
// apply some data-attributes from menu config
if (p.obj && config.editable)
p.obj.attr('data-editable', 'true');
// trigger callback function
if (typeof config.callback == 'function') {
config.callback(visible, p);
}
}
}
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,
scope = rcmail.env.search_scope || 'base';
if (rcmail.env.task == 'mail') {
if (scope == 'all')
mbox = '*';
mods = mods[mbox] ? mods[mbox] : mods['*'];
all = 'text';
$('input:radio[name="s_scope"]').prop('checked', false).filter('#s_scope_'+scope).prop('checked', true);
}
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, event)
{
var id = elem.parentNode.id.replace(/^attach/, '');
$.each(['open', 'download', 'rename'], function() {
var action = this;
$('#attachmenu' + action).off('click').attr('onclick', '').click(function(e) {
return rcmail.command(action + '-attachment', id, this);
});
});
popupconfig.attachmentmenu.link = elem;
rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event);
}
function spellmenu(show, p)
{
var k, link, li,
lang = rcmail.spellcheck_lang(),
ul = $('ul', p.obj);
if (!ul.length) {
ul = $('<ul class="toolbarmenu selectable" role="menu">');
for (k in rcmail.env.spell_langs) {
li = $('<li role="menuitem">');
link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k])
.addClass('active').data('lang', k)
.on('click keypress', function(e) {
if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
rcmail.spellcheck_lang_set($(this).data('lang'));
rcmail.hide_menu('spellmenu', e);
return false;
}
});
link.appendTo(li);
li.appendTo(ul);
}
ul.appendTo(p.obj);
}
// select current language
$('li', ul).each(function() {
var el = $('a', this);
if (el.data('lang') == lang)
el.addClass('selected').attr('aria-selected', 'true');
else if (el.hasClass('selected'))
el.removeClass('selected').removeAttr('aria-selected');
});
}
// append drop-icon to attachments list item (to invoke attachment menu)
function attachmentmenu_append(item)
{
item = $(item);
if (!item.children('.drop').length && !item.is('.no-menu')) {
var label = rcmail.gettext('options'),
fname = item.find('a.filename'),
tabindex = fname.attr('tabindex') || 0;
var button = $('<a>')
.attr({'class': 'drop skip-content', tabindex: tabindex, 'aria-haspopup': true, title: label})
.text(label)
.on('click keypress', function(e) {
if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
attachmentmenu(this, e);
return false;
}
});
if (fname.length)
button.insertAfter(fname);
else
button.appendTo(item);
}
}
/**
*
*/
function show_listoptions(p)
{
var $dialog = $('#listoptions');
// close the dialog
if ($dialog.is(':visible')) {
$dialog.dialog('close', p.originalEvent);
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');
$.each(['widescreen', 'desktop', 'list'], function() {
$('input[name="layout"][value="' + this + '"]').prop('checked', rcmail.env.layout == this);
});
$('#listoptions-columns', $dialog)[rcmail.env.layout == 'widescreen' ? 'hide' : 'show']();
// set checkboxes
$('input[name="list_col[]"]').each(function() {
$(this).prop('checked', $.inArray(this.value, rcmail.env.listcols) != -1);
});
$dialog.dialog({
modal: true,
resizable: false,
closeOnEscape: true,
title: null,
open: function(e) {
setTimeout(function(){ $dialog.find('a, input:not(:disabled)').not('[aria-disabled=true]').first().focus(); }, 100);
},
close: function(e) {
$dialog.dialog('destroy').hide();
if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent))
$('#listmenulink').focus();
},
minWidth: 500,
width: $dialog.width()+25
}).show();
}
/**
*
*/
function save_listoptions(p)
{
$('#listoptions').dialog('close');
if (rcube_event.is_keyboard(p.originalEvent))
$('#listmenulink').focus();
var sort = $('input[name="sort_col"]:checked').val(),
ord = $('input[name="sort_ord"]:checked').val(),
layout = $('input[name="layout"]:checked').val(),
cols = $('input[name="list_col[]"]:checked')
.map(function(){ return this.value; }).get();
rcmail.set_list_options(cols, sort, ord, rcmail.env.threading, layout);
}
/**
*
*/
function set_searchmod(elem)
{
var all, m, task = rcmail.env.task,
mods = rcmail.env.search_mods,
mbox = rcmail.env.mailbox,
scope = $('input[name="s_scope"]:checked').val();
if (scope == 'all')
mbox = '*';
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) {
$('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;
}
});
}
rcmail.set_searchmods(m);
}
function set_searchscope(elem)
{
rcmail.set_searchscope(elem.value);
}
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')
});
}
/**
* Mail import dialog
*/
function import_dialog()
{
var content = $('#uploadform'),
dialog = content.clone().removeClass('popupdialog');
var save_func = function(e) {
return rcmail.command('import-messages', $(dialog.find('form')[0]));
};
rcmail.simple_dialog(dialog, rcmail.gettext('importmessages'), save_func, {
button: 'import',
closeOnEscape: true,
minWidth: 400
});
}
/**
*
*/
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();
$('input,textarea', row).focus();
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);
}
// create tabs container
var tabs = $('<ul>').addClass('tabsbar').prependTo(content);
// convert fildsets into tabs
fs.each(function(idx) {
var tab, a, elm = $(this),
legend = elm.children('legend'),
tid = id + '-t' + idx;
// create a tab
a = $('<a>').text(legend.text()).attr('href', '#' + tid);
tab = $('<li>').addClass('tablink');
// remove legend
legend.remove();
// link fieldset with tab item
elm.attr('id', tid);
// add the tab to container
tab.append(a).appendTo(tabs);
});
// use jquery UI tabs widget to do the interaction and styling
content.tabs({
active: current || 0,
heightStyle: 'content',
activate: function(e, ui) {resize(); }
});
}
/**
* Show about page as jquery UI dialog
*/
function show_about(elem)
{
var frame = $('<iframe>').attr({id: 'aboutframe', src: rcmail.url('settings/about'), frameborder: '0'});
h = Math.floor($(window).height() * 0.75),
buttons = {},
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
*
* @deprecated Use treelist widget
*/
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);
this.parent = this.p1.parent();
// 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')
.attr('role', 'presentation')
.addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v'))
.appendTo(this.parent)
.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 - Math.floor(this.halfsize)) + 'px');
this.p2.css('top', Math.ceil(this.pos + Math.ceil(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.parent.outerHeight(), 10) - parseInt(this.p2.css('top'), 10);
this.p2.css('height', (new_height > 0 ? new_height : 0) + 'px');
}
}
else {
this.p1.css('width', Math.floor(this.pos - this.p1pos.left - Math.floor(this.halfsize)) + 'px');
this.p2.css('left', Math.ceil(this.pos + Math.ceil(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.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).on('mousemove.' + this.id, onDrag).on('mouseup.' + this.id, onDragStop);
// hack messages list so it will propagate the mouseup event over the list
if (rcmail.message_list)
rcmail.message_list.drag_active = true;
// 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.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 - Math.max(0, me.offset));
if (me.pos > me.min)
me.pos = Math.min(me.pos, me.parent.height() - me.min);
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 - Math.max(0, me.offset));
if (me.pos > me.min)
me.pos = Math.min(me.pos, me.parent.width() - me.min);
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).off('.' + me.id);
me.drag_active = false;
if (rcmail.message_list)
rcmail.message_list.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.parent.outerHeight(), 10) - parseInt(me.p2[0].style.top, 10);
me.p2.css('height', (new_height > 0 ? new_height : 0) +'px');
}
else {
var new_width = parseInt(me.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];
};
// @license-end
diff --git a/tests/Browser/Components/HtmlEditor.php b/tests/Browser/Components/HtmlEditor.php
index 40d71a393..0a3cc8cb2 100644
--- a/tests/Browser/Components/HtmlEditor.php
+++ b/tests/Browser/Components/HtmlEditor.php
@@ -1,97 +1,97 @@
<?php
namespace Tests\Browser\Components;
use App;
use Tests\Browser\Browser;
use Laravel\Dusk\Component;
class HtmlEditor extends Component
{
const MODE_PLAIN = 'plain';
const MODE_HTML = 'html';
public $id;
/**
* Class constructor
*/
public function __construct($id)
{
$this->id = trim($id);
}
/**
* Get the root selector for the component.
*
* @return string
*/
public function selector()
{
return '#' . $this->id;
}
/**
* Assert that the browser page contains the component.
*
* @param Browser $browser
*
* @return void
*/
public function assert($browser)
{
$browser->waitFor($this->selector() . '.html-editor');
}
/**
* Get the element shortcuts for the component.
*
* @return array
*/
public function elements()
{
return [
'@plain-toolbar' => '.editor-toolbar',
'@plain-body' => 'textarea',
- '@html-editor' => '.mce-tinymce',
- '@html-toolbar' => '.mce-tinymce .mce-toolbar',
+ '@html-editor' => '.tox-tinymce',
+ '@html-toolbar' => '.tox-tinymce .tox-editor-header',
'@html-body' => 'iframe',
];
}
/**
* Assert editor mode
*/
public function assertMode($browser, $mode)
{
if ($mode == self::MODE_PLAIN) {
$browser->assertVisible('@plain-toolbar')
->assertMissing('@html-body');
}
else {
$browser->assertMissing('@plain-toolbar')
->assertVisible('@html-body');
}
}
/**
* Switch editor mode
*/
public function switchMode($browser, $mode, $accept_warning = false)
{
if ($mode == self::MODE_HTML) {
$browser->click('@plain-toolbar a.mce-i-html');
if ($accept_warning) {
$browser->waitForDialog()->acceptDialog();
}
- $browser->waitFor('@html-body');
+ $browser->waitFor('@html-body')->waitFor('@html-toolbar');
}
else {
- $browser->click('@html-toolbar .mce-i-plaintext');
+ $browser->click('.tox-toolbar__group:first-child button');
if ($accept_warning) {
$browser->waitForDialog()->acceptDialog();
}
$browser->waitFor('@plain-body');
}
}
}
diff --git a/tests/phpunit.xml b/tests/phpunit.xml
index 41cb5c1ce..749b255dc 100644
--- a/tests/phpunit.xml
+++ b/tests/phpunit.xml
@@ -1,103 +1,102 @@
<phpunit backupGlobals="false"
bootstrap="bootstrap.php"
colors="true">
<testsuites>
<testsuite name="All Tests">
<file>Framework/BaseReplacer.php</file>
<file>Framework/Bootstrap.php</file>
<file>Framework/Browser.php</file>
<file>Framework/Cache.php</file>
<file>Framework/CacheShared.php</file>
<file>Framework/Charset.php</file>
<file>Framework/Config.php</file>
<file>Framework/Contacts.php</file>
<file>Framework/ContentFilter.php</file>
<file>Framework/Csv2vcard.php</file>
<file>Framework/DB.php</file>
<file>Framework/DBMssql.php</file>
<file>Framework/DBMysql.php</file>
<file>Framework/DBOracle.php</file>
<file>Framework/DBPgsql.php</file>
<file>Framework/DBSqlite.php</file>
<file>Framework/DBSqlsrv.php</file>
<file>Framework/Enriched.php</file>
<file>Framework/Html.php</file>
<file>Framework/Html2text.php</file>
<file>Framework/Imap.php</file>
<file>Framework/ImapCache.php</file>
<file>Framework/ImapGeneric.php</file>
<file>Framework/ImapSearch.php</file>
<file>Framework/Image.php</file>
<file>Framework/Ldap.php</file>
<file>Framework/LdapGeneric.php</file>
<file>Framework/MessageHeader.php</file>
<file>Framework/MessagePart.php</file>
<file>Framework/Mime.php</file>
<file>Framework/Rcube.php</file>
<file>Framework/ResultIndex.php</file>
<file>Framework/ResultMultifolder.php</file>
<file>Framework/ResultSet.php</file>
<file>Framework/ResultThread.php</file>
<file>Framework/Smtp.php</file>
<file>Framework/SpellcheckAtd.php</file>
<file>Framework/SpellcheckEnchant.php</file>
<file>Framework/SpellcheckGoogie.php</file>
<file>Framework/SpellcheckPspell.php</file>
<file>Framework/Spellchecker.php</file>
<file>Framework/StringReplacer.php</file>
<file>Framework/Text2Html.php</file>
<file>Framework/User.php</file>
<file>Framework/Utils.php</file>
<file>Framework/VCard.php</file>
<file>Framework/Washtml.php</file>
<file>MailFunc.php</file>
<file>Rcmail/OutputHtml.php</file>
<file>Rcmail/Rcmail.php</file>
<file>Rcmail/Sendmail.php</file>
</testsuite>
<testsuite name="Plugins Tests">
<file>./../plugins/acl/tests/Acl.php</file>
<file>./../plugins/additional_message_headers/tests/AdditionalMessageHeaders.php</file>
<file>./../plugins/archive/tests/Archive.php</file>
<file>./../plugins/attachment_reminder/tests/AttachmentReminder.php</file>
<file>./../plugins/autologon/tests/Autologon.php</file>
<file>./../plugins/database_attachments/tests/DatabaseAttachments.php</file>
<file>./../plugins/debug_logger/tests/DebugLogger.php</file>
<file>./../plugins/emoticons/tests/Emoticons.php</file>
- <file>./../plugins/emoticons/tests/EmoticonsEngine.php</file>
<file>./../plugins/enigma/tests/Enigma.php</file>
<file>./../plugins/example_addressbook/tests/ExampleAddressbook.php</file>
<file>./../plugins/filesystem_attachments/tests/FilesystemAttachments.php</file>
<file>./../plugins/help/tests/Help.php</file>
<file>./../plugins/hide_blockquote/tests/HideBlockquote.php</file>
<file>./../plugins/http_authentication/tests/HttpAuthentication.php</file>
<file>./../plugins/identicon/tests/Identicon.php</file>
<file>./../plugins/identity_select/tests/IdentitySelect.php</file>
<file>./../plugins/jqueryui/tests/Jqueryui.php</file>
<file>./../plugins/krb_authentication/tests/KrbAuthentication.php</file>
<file>./../plugins/managesieve/tests/Managesieve.php</file>
<file>./../plugins/managesieve/tests/Parser.php</file>
<file>./../plugins/managesieve/tests/Tokenizer.php</file>
<file>./../plugins/managesieve/tests/Vacation.php</file>
<file>./../plugins/markasjunk/tests/Markasjunk.php</file>
<file>./../plugins/new_user_dialog/tests/NewUserDialog.php</file>
<file>./../plugins/new_user_identity/tests/NewUserIdentity.php</file>
<file>./../plugins/newmail_notifier/tests/NewmailNotifier.php</file>
<file>./../plugins/password/tests/Password.php</file>
<file>./../plugins/redundant_attachments/tests/RedundantAttachments.php</file>
<file>./../plugins/show_additional_headers/tests/ShowAdditionalHeaders.php</file>
<file>./../plugins/squirrelmail_usercopy/tests/Squirrelmail_usercopy.php</file>
<file>./../plugins/subscriptions_option/tests/SubscriptionsOption.php</file>
<file>./../plugins/userinfo/tests/Userinfo.php</file>
<file>./../plugins/vcard_attachments/tests/VcardAttachments.php</file>
<file>./../plugins/virtuser_file/tests/VirtuserFile.php</file>
<file>./../plugins/virtuser_query/tests/VirtuserQuery.php</file>
<file>./../plugins/zipdownload/tests/Zipdownload.php</file>
</testsuite>
</testsuites>
<filter>
<whitelist>
<directory suffix=".php">../program/lib</directory>
</whitelist>
</filter>
</phpunit>

File Metadata

Mime Type
text/x-diff
Expires
Sat, Jan 31, 6:37 PM (1 d, 12 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
426431
Default Alt Text
(589 KB)

Event Timeline