- Fix quota indicator issues by content generation on client-size instead...

alecpl

2009-10-24 7415c02ecfe21eff80074605b93fd3354475e7b3

- Fix quota indicator issues by content generation on client-size
  instead of bin/quotaimage.php: better performance, better styling posibilities (#1486197, #1486220)

 CHANGELOG

@@ -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)

 bin/quotaimg.php

File was deleted

 program/js/app.js

@@ -3914,8 +3914,12 @@
  // 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 @@
    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 @@
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;


 program/steps/mail/func.inc

@@ -517,8 +517,16 @@
    $_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 @@

  $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']);
    $quota_result = 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&amp;q=%d&amp;w=%d&amp;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));
    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;
  }



 skins/default/mail.css

@@ -839,12 +839,21 @@
  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 */


 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>