summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAleksander Machniak <alec@alec.pl>2014-11-20 06:03:22 -0500
committerAleksander Machniak <alec@alec.pl>2014-11-20 06:03:22 -0500
commit0b36d151572e050b51d82e7429fee847ebb33e22 (patch)
tree137c6f6455e5cec18a5d499039bd4a32b0bec707
parent2dfad0a56454ec3d3bc981379078424ba443f2aa (diff)
Add method to display operation (uploading) progress in UI message
-rw-r--r--program/include/rcmail.php2
-rw-r--r--program/js/app.js64
-rw-r--r--skins/classic/common.css1
-rw-r--r--skins/larry/styles.css3
4 files changed, 60 insertions, 10 deletions
diff --git a/program/include/rcmail.php b/program/include/rcmail.php
index 527b74e39..f0c363131 100644
--- a/program/include/rcmail.php
+++ b/program/include/rcmail.php
@@ -439,7 +439,7 @@ class rcmail extends rcube
// add some basic labels to client
$this->output->add_label('loading', 'servererror', 'connerror', 'requesttimedout',
- 'refreshing', 'windowopenerror');
+ 'refreshing', 'windowopenerror', 'uploadingmany');
return $this->output;
}
diff --git a/program/js/app.js b/program/js/app.js
index 984dddf14..fd0d2e12f 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -556,7 +556,7 @@ function rcube_webmail()
// 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 @@ function rcube_webmail()
};
// 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 @@ function rcube_webmail()
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 @@ function rcube_webmail()
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 @@ function rcube_webmail()
if (timeout > 0)
setTimeout(function() { ref.hide_message(id, type != 'loading'); }, timeout);
+
return id;
};
@@ -6487,6 +6504,35 @@ function rcube_webmail()
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)
{
diff --git a/skins/classic/common.css b/skins/classic/common.css
index 03494496d..0a8edd5c7 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -281,6 +281,7 @@ body > #message div.confirmation,
}
body > #message div.loading,
+body > #message div.uploading,
#message-objects div.loading
{
background: url(images/display/loading.gif) 6px 3px no-repeat;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 0cb11dafd..b4ba65f4e 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -530,6 +530,7 @@ a.iconlink.upload {
/*** message bar ***/
#message div.loading,
+#message div.uploading,
#message div.warning,
#message div.error,
#message div.notice,
@@ -670,10 +671,12 @@ a.iconlink.upload {
background-position: 0 -25px;
}
+#messagestack div.uploading,
#messagestack div.loading {
color: #ddd;
}
+#messagestack div.uploading:after,
#messagestack div.loading:after {
top: 4px;
left: 6px;