Add method to display operation (uploading) progress in UI message

Aleksander Machniak

2014-11-20 0b36d151572e050b51d82e7429fee847ebb33e22

Add method to display operation (uploading) progress in UI message

 program/include/rcmail.php

@@ -439,7 +439,7 @@

        // add some basic labels to client
        $this->output->add_label('loading', 'servererror', 'connerror', 'requesttimedout',
            'refreshing', 'windowopenerror');
            'refreshing', 'windowopenerror', 'uploadingmany');

        return $this->output;
    }

 program/js/app.js

@@ -556,7 +556,7 @@

    // show message
    if (this.pending_message)
      this.display_message(this.pending_message[0], this.pending_message[1], this.pending_message[2]);
      this.display_message.apply(this, this.pending_message);

    // init treelist widget
    if (this.gui_objects.folderlist && window.rcube_treelist_widget) {
@@ -6347,7 +6347,7 @@
  };

  // display a system message, list of types in common.css (below #message definition)
  this.display_message = function(msg, type, timeout)
  this.display_message = function(msg, type, timeout, key)
  {
    // pass command to parent window
    if (this.is_framed())
@@ -6356,18 +6356,34 @@
    if (!this.gui_objects.message) {
      // save message in order to display after page loaded
      if (type != 'loading')
        this.pending_message = [msg, type, timeout];
        this.pending_message = [msg, type, timeout, key];
      return 1;
    }

    type = type ? type : 'notice';
    if (!type)
      type = 'notice';

    var key = this.html_identifier(msg),
      date = new Date(),
    if (!key)
      key = this.html_identifier(msg);

    var date = new Date(),
      id = type + date.getTime();

    if (!timeout)
      timeout = this.message_time * (type == 'error' || type == 'warning' ? 2 : 1);
    if (!timeout) {
      switch (type) {
        case 'error':
        case 'warning':
          timeout = this.message_time * 2;
          break;

        case 'uploading':
          timeout = 0;
          break;

        default:
          timeout = this.message_time;
      }
    }

    if (type == 'loading') {
      key = 'loading';
@@ -6400,7 +6416,7 @@
    if (type == 'loading') {
      this.messages[key].labels = [{'id': id, 'msg': msg}];
    }
    else {
    else if (type != 'uploading') {
      obj.click(function() { return ref.hide_message(obj); })
        .attr('role', 'alert');
    }
@@ -6409,6 +6425,7 @@

    if (timeout > 0)
      setTimeout(function() { ref.hide_message(id, type != 'loading'); }, timeout);

    return id;
  };

@@ -6487,6 +6504,35 @@
    this.messages = {};
  };

  // display uploading message with progress indicator
  // data should contain: name, total, current, percent, text
  this.display_progress = function(data)
  {
    if (!data || !data.name)
      return;

    var msg = this.messages['progress' + data.name];

    if (!data.label)
      data.label = this.get_label('uploadingmany');

    if (!msg) {
      if (!data.percent || data.percent < 100)
        this.display_message(data.label, 'uploading', 0, 'progress' + data.name);
      return;
    }

    if (!data.total || data.percent >= 100) {
      this.hide_message(msg.obj);
      return;
    }

    if (data.text)
      data.label += ' ' + data.text;

    msg.obj.text(data.label);
  };

  // open a jquery UI dialog with the given content
  this.show_popup_dialog = function(content, title, buttons, options)
  {

 skins/classic/common.css

@@ -281,6 +281,7 @@
}

body > #message div.loading,
body > #message div.uploading,
#message-objects div.loading
{
  background: url(images/display/loading.gif) 6px 3px no-repeat;

 skins/larry/styles.css

@@ -530,6 +530,7 @@
/*** message bar ***/

#message div.loading,
#message div.uploading,
#message div.warning,
#message div.error,
#message div.notice,
@@ -670,10 +671,12 @@
    background-position: 0 -25px;
}

#messagestack div.uploading,
#messagestack div.loading {
    color: #ddd;
}

#messagestack div.uploading:after,
#messagestack div.loading:after {
    top: 4px;
    left: 6px;