diff options
| -rw-r--r-- | CHANGELOG | 1 | ||||
| -rw-r--r-- | bin/quotaimg.php | 204 | ||||
| -rw-r--r-- | program/js/app.js | 64 | ||||
| -rw-r--r-- | program/steps/mail/func.inc | 67 | ||||
| -rw-r--r-- | skins/default/mail.css | 17 | ||||
| -rw-r--r-- | skins/default/templates/mail.html | 2 |
6 files changed, 106 insertions, 249 deletions
@@ -1,6 +1,7 @@ CHANGELOG RoundCube Webmail =========================== +- Fix quota indicator issues by content generation on client-size (#1486197, #1486220) - Don't display disabled sections in Settings (#1486099) - Added server-side e-mail address validation with 'email_dns_check' option (#1485857) - Fix login page loading into an iframe when session expires (#1485952) diff --git a/bin/quotaimg.php b/bin/quotaimg.php deleted file mode 100644 index 817d38590..000000000 --- a/bin/quotaimg.php +++ /dev/null @@ -1,204 +0,0 @@ -<?php -/* - +-----------------------------------------------------------------------+ - | bin/quotaimg.php | - | | - | This file is part of the RoundCube Webmail client | - | Copyright (C) 2005-2009, RoundCube Dev. - Switzerland | - | Licensed under the GNU GPL | - | | - | PURPOSE: | - | Create a GIF image showing the mailbox quot as bar | - | | - +-----------------------------------------------------------------------+ - | Author: Brett Patterson <brett2@umbc.edu> | - +-----------------------------------------------------------------------+ - - $Id$ - -*/ - -define('INSTALL_PATH', realpath(dirname(__FILE__).'/..') . '/'); -require INSTALL_PATH . 'program/include/iniset.php'; - -$RCMAIL = rcmail::get_instance(); - -$used = isset($_GET['u']) ? intval($_GET['u']) : '??'; -$quota = isset($_GET['q']) ? intval($_GET['q']) : '??'; -$width = empty($_GET['w']) ? 100 : min(300, intval($_GET['w'])); -$height = empty($_GET['h']) ? 14 : min(50, intval($_GET['h'])); - -/** - * Quota display - * - * Modify the following few elements to change the display of the image. - * Modifiable attributes are: - * bool border :: Defines whether you want to show a border around it? - * bool unknown :: Leave default; Defines whether quota is "unknown" - * - * int height :: Defines height of the image - * int width :: Defines width of the image - * int font :: Changes the font size & font used in the GD library. - * Available values are from 1 to 5. - * int padding :: Changes the offset (in pixels) from the top of the image - * to where the top of the text will be aligned. User - * greater than 0 to ensure text is off the border. - * array limit :: Holds the integer values of in an associative array as - * to what defines the upper and lower levels for quota - * display. - * High - Quota is nearing capacity. - * Mid - Quota is around the middle - * Low - Currently not used. - * array color :: An associative array of strings of comma separated - * values (R,G,B) for use in color creation. Define the - * RGB values you'd like to use. A list of colors (and - * their RGB values) can be found here: - * http://www.december.com/html/spec/colorcodes.html - * - * @return void - * - * @param mixed $used The amount used, or ?? if unknown. - * @param mixed $total The total available, or ?? if unknown. - * @param int $width Width of the image. - * @param int $height Height of the image. - * - * @see rcube_imap::get_quota() - * @see iil_C_GetQuota() - * - * @todo Make colors a config option. - */ -function genQuota($used, $total, $width, $height) -{ - $unknown = false; - $border = 0; - - $font = 2; - $padding = 0; - - $limit['high'] = 80; - $limit['mid'] = 55; - $limit['low'] = 0; - - // Fill Colors - $color['fill']['high'] = '243, 49, 49'; // Near quota fill color - $color['fill']['mid'] = '245, 173, 60'; // Mid-area of quota fill color - $color['fill']['low'] = '145, 225, 100'; // Far from quota fill color - - // Background colors - $color['bg']['OL'] = '215, 13, 13'; // Over limit bbackground - $color['bg']['Unknown'] = '238, 99, 99'; // Unknown background - $color['bg']['quota'] = '255, 255, 255'; // Normal quota background - - // Misc. Colors - $color['border'] = '0, 0, 0'; - $color['text']['high'] = '255, 255, 255'; // white text for red background - $color['text']['mid'] = '102, 102, 102'; - $color['text']['low'] = '102, 102, 102'; - $color['text']['normal'] = '102, 102, 102'; - - - /************************************ - ***** DO NOT EDIT BELOW HERE ***** - ***********************************/ - - // @todo: Set to "??" instead? - if (preg_match('/^[^0-9?]*$/', $used) || preg_match('/^[^0-9?]*$/', $total)) { - return false; - } - - if (strpos($used, '?') !== false || strpos($total, '?') !== false && $used != 0) { - $unknown = true; - } - - $im = imagecreate($width, $height); - - if ($border) { - list($r, $g, $b) = explode(',', $color['border']); - - $borderc = imagecolorallocate($im, $r, $g, $b); - - imageline($im, 0, 0, $width, 0, $borderc); - imageline($im, 0, $height-$border, 0, 0, $borderc); - imageline($im, $width-1, 0, $width-$border, $height, $borderc); - imageline($im, $width, $height-$border, 0, $height-$border, $borderc); - } - - if ($unknown) { - list($r, $g, $b) = explode(',', $color['text']['normal']); - $text = imagecolorallocate($im, $r, $g, $b); - list($r, $g, $b) = explode(',', $color['bg']['Unknown']); - $background = imagecolorallocate($im, $r, $g, $b); - - imagefilledrectangle($im, 0, 0, $width, $height, $background); - - $string = 'Unknown'; - $mid = floor(($width-(strlen($string)*imagefontwidth($font)))/2)+1; - imagestring($im, $font, $mid, $padding, $string, $text); - } else if ($used > $total) { - list($r, $g, $b) = explode(',', $color['text']['normal']); - $text = imagecolorallocate($im, $r, $g, $b); - list($r, $g, $b) = explode(',', $color['bg']['OL']); - $background = imagecolorallocate($im, $r, $g, $b); - - imagefilledrectangle($im, 0, 0, $width, $height, $background); - - $string = 'Over Limit'; - $mid = floor(($width-(strlen($string)*imagefontwidth($font)))/2)+1; - imagestring($im, $font, $mid, $padding, $string, $text); - } else { - list($r, $g, $b) = explode(',', $color['bg']['quota']); - $background = imagecolorallocate($im, $r, $b, $g); - - imagefilledrectangle($im, 0, 0, $width, $height, $background); - - $quota = ($used==0)?0:(round($used/$total, 2)*100); - - if ($quota >= $limit['high']) { - list($r, $g, $b) = explode(',', $color['text']['high']); - $text = imagecolorallocate($im, $r, $g, $b); - list($r, $g, $b) = explode(',', $color['fill']['high']); - $fill = imagecolorallocate($im, $r, $g, $b); - } elseif($quota >= $limit['mid']) { - list($r, $g, $b) = explode(',', $color['text']['mid']); - $text = imagecolorallocate($im, $r, $g, $b); - list($r, $g, $b) = explode(',', $color['fill']['mid']); - $fill = imagecolorallocate($im, $r, $g, $b); - } else { - // if($quota >= $limit['low']) - list($r, $g, $b) = explode(',', $color['text']['low']); - $text = imagecolorallocate($im, $r, $g, $b); - list($r, $g, $b) = explode(',', $color['fill']['low']); - $fill = imagecolorallocate($im, $r, $g, $b); - } - - $quota_width = $quota / 100 * $width; - if ($quota_width) - imagefilledrectangle($im, $border, 0, $quota_width, $height-2*$border, $fill); - - $string = $quota . '%'; - $mid = floor(($width-(strlen($string)*imagefontwidth($font)))/2)+1; - // Print percent in black - imagestring($im, $font, $mid, $padding, $string, $text); - } - - header('Content-Type: image/gif'); - - // cache for 1 hour - $maxage = 3600; - header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$maxage). ' GMT'); - header('Cache-Control: max-age=' . $maxage); - - imagegif($im); - imagedestroy($im); -} - -if (!empty($RCMAIL->user->ID) && $width > 1 && $height > 1) { - genQuota($used, $quota, $width, $height); -} -else { - header("HTTP/1.0 403 Forbidden"); - echo "Requires a valid user session and positive values"; -} - -exit; -?> diff --git a/program/js/app.js b/program/js/app.js index f98cf5f80..83162a983 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -3914,8 +3914,12 @@ function rcube_webmail() // replace content of quota display this.set_quota = function(content) { - if (content && this.gui_objects.quotadisplay) - $(this.gui_objects.quotadisplay).html(content); + if (content && this.gui_objects.quotadisplay) { + if (typeof(content) == 'object') + this.percent_indicator(this.gui_objects.quotadisplay, content); + else + $(this.gui_objects.quotadisplay).html(content); + } }; // update the mailboxlist @@ -4044,6 +4048,61 @@ function rcube_webmail() elem.onclick = function() { rcmail.load_headers(elem); } } + // percent (quota) indicator + this.percent_indicator = function(obj, data) + { + if (!data || !obj) + return false; + + var limit_high = 80; + var limit_mid = 55; + var width = data.width ? data.width : this.env.indicator_width ? this.env.indicator_width : 100; + var height = data.height ? data.height : this.env.indicator_height ? this.env.indicator_height : 24; + var quota = data.percent ? Math.abs(parseInt(data.percent)) : 0; + var quota_width = parseInt(quota / 100 * width); + var pos = $(obj).position(); + + this.env.indicator_width = width; + this.env.indicator_height = height; + + // overlimit + if (quota_width > width) { + quota_width = width; + quota = 100; + } + + // 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_normal'); + bar1.addClass('quota_low'); + } + + // replace quota image + obj.innerHTML = ''; + $(obj).append(bar1).append(bar2).append(main); + } /********************************************************/ /********* html to text conversion functions *********/ @@ -4326,4 +4385,3 @@ function rcube_webmail() rcube_webmail.prototype.addEventListener = rcube_event_engine.prototype.addEventListener; rcube_webmail.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener; rcube_webmail.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent; - diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc index 445b89d94..b13796745 100644 --- a/program/steps/mail/func.inc +++ b/program/steps/mail/func.inc @@ -517,8 +517,16 @@ function rcmail_quota_display($attrib) $_SESSION['quota_display'] = $attrib['display']; $OUTPUT->add_gui_object('quotadisplay', $attrib['id']); - - return html::span($attrib, rcmail_quota_content(NULL, $attrib)); + + $quota = rcmail_quota_content(NULL, $attrib); + + if (is_array($quota)) { + $OUTPUT->add_script('$(document).ready(function(){ + rcmail.set_quota('.json_serialize($quota).')});', 'foot'); + $quota = ''; + } + + return html::span($attrib, $quota); } @@ -528,49 +536,34 @@ function rcmail_quota_content($quota=NULL, $attrib=NULL) $display = isset($_SESSION['quota_display']) ? $_SESSION['quota_display'] : ''; - if (is_array($quota) && !empty($quota['used']) && !empty($quota['total'])) - { - if (!isset($quota['percent'])) - $quota['percent'] = $quota['used'] / $quota['total']; + if (empty($quota)) { + if (!$IMAP->get_capability('QUOTA')) + return rcube_label('unknown'); + else + $quota = $IMAP->get_quota(); } - elseif (!$IMAP->get_capability('QUOTA')) - return rcube_label('unknown'); - else - $quota = $IMAP->get_quota(); if ($quota && !($quota['total']==0 && $RCMAIL->config->get('quota_zero_as_unlimited'))) { - $quota_text = sprintf('%s / %s (%.0f%%)', - show_bytes($quota['used'] * 1024), - show_bytes($quota['total'] * 1024), - $quota['percent']); - - // show quota as image (by Brett Patterson) - if ($display == 'image' && function_exists('imagegif')) - { - if (!$attrib['width']) - $attrib['width'] = isset($_SESSION['quota_width']) ? $_SESSION['quota_width'] : 100; - else - $_SESSION['quota_width'] = $attrib['width']; - - if (!$attrib['height']) - $attrib['height'] = isset($_SESSION['quota_height']) ? $_SESSION['quota_height'] : 14; - else - $_SESSION['quota_height'] = $attrib['height']; - - $quota_text = sprintf('<img src="./bin/quotaimg.php?u=%s&q=%d&w=%d&h=%d" width="%d" height="%d" alt="%s" title="%s / %s" />', - $quota['used'], $quota['total'], - $attrib['width'], $attrib['height'], - $attrib['width'], $attrib['height'], - $quota_text, - show_bytes($quota['used'] * 1024), - show_bytes($quota['total'] * 1024)); + $quota_result = sprintf('%s / %s (%.0f%%)', + show_bytes($quota['used'] * 1024), show_bytes($quota['total'] * 1024), + $quota['percent']); + + if ($display == 'image') { + $quota_result = array( + 'percent' => $quota['percent'], + 'title' => $quota_result, + ); + if ($attrib['width']) + $quota_result['width'] = $attrib['width']; + if ($attrib['height']) + $quota_result['height'] = $attrib['height']; } } else - $quota_text = rcube_label('unlimited'); + return rcube_label('unlimited'); - return $quota_text; + return $quota_result; } diff --git a/skins/default/mail.css b/skins/default/mail.css index 31d7c61b8..f9777eea6 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -839,12 +839,21 @@ body.messagelist color: #CCCCCC; } -#quotadisplay img -{ - margin-left: 4px; +.quota_text { + text-align: center; + font-size: 10px; + color: #666; border: 1px solid #999; + cursor: default; } - +.quota_bg { background-color: white; } +.quota_high { background-color: #F33131; } +.quota_mid { background-color: #F5AD3C; } +.quota_low { background-color: #91E164; } +.quota_text_high { color: white; } +.quota_text_mid { color: #666; } +.quota_text_low { color: #666; } + /** message view styles */ diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html index ed19ff9a0..db2f4fe16 100644 --- a/skins/default/templates/mail.html +++ b/skins/default/templates/mail.html @@ -84,7 +84,7 @@ <roundcube:button command="select-none" type="link" title="none" class="buttonPas none" classAct="button none" classSel="button nonesel" content=" " /> <roundcube:container name="listcontrols" id="listcontrols" /> <roundcube:if condition="env:quota" /> - <span style="margin-left: 20px"><roundcube:label name="quota" />:</span> + <span style="margin-left: 20px; margin-right: 5px"><roundcube:label name="quota" />:</span> <roundcube:object name="quotaDisplay" display="image" width="100" height="14" id="quotadisplay" /> <roundcube:endif /> </div> |