summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDries2013-07-18 17:58:44 (GMT)
committer Dries2013-07-18 17:58:44 (GMT)
commit4f6161a226704a71e0aa734d7001669e229bdfc9 (patch)
tree78c2b28cb4223d999827f09e0f2ad65d84649c0b
parent04ef7cf88dd3ac1742bba7422b279413f31b1622 (diff)
Issue #1989480 by LewisNyman, rteijeiro, oresh, swentel, Gaelan: Progress Bar style update.
-rw-r--r--core/includes/batch.inc18
-rw-r--r--core/includes/theme.inc7
-rw-r--r--core/misc/progress.gifbin5872 -> 0 bytes
-rw-r--r--core/misc/progress.js18
-rw-r--r--core/modules/system/css/system.module.css41
-rw-r--r--core/modules/system/css/system.theme.css92
6 files changed, 138 insertions, 38 deletions
diff --git a/core/includes/batch.inc b/core/includes/batch.inc
index 27fb632..569ce58 100644
--- a/core/includes/batch.inc
+++ b/core/includes/batch.inc
@@ -86,9 +86,9 @@ function _batch_page() {
*/
function _batch_do() {
// Perform actual processing.
- list($percentage, $message) = _batch_process();
+ list($percentage, $message, $label) = _batch_process();
- return new JsonResponse(array('status' => TRUE, 'percentage' => $percentage, 'message' => $message));
+ return new JsonResponse(array('status' => TRUE, 'percentage' => $percentage, 'message' => $message, 'label' => $label));
}
/**
@@ -108,6 +108,7 @@ function _batch_progress_page() {
// This is the first page so we return some output immediately.
$percentage = 0;
$message = $current_set['init_message'];
+ $label = '';
$batch['running'] = TRUE;
}
else {
@@ -128,7 +129,7 @@ function _batch_progress_page() {
print $fallback;
// Perform actual processing.
- list($percentage, $message) = _batch_process($batch);
+ list($percentage, $message, $label) = _batch_process($batch);
if ($percentage == 100) {
$new_op = 'finished';
}
@@ -166,7 +167,7 @@ function _batch_progress_page() {
drupal_add_js($js_setting, 'setting');
drupal_add_library('system', 'drupal.batch');
- return theme('progress_bar', array('percent' => $percentage, 'message' => $message));
+ return theme('progress_bar', array('percent' => $percentage, 'message' => $message, 'label' => $label));
}
/**
@@ -208,7 +209,7 @@ function _batch_process() {
include_once DRUPAL_ROOT . '/' . $current_set['file'];
}
- $task_message = '';
+ $task_message = $label = '';
// Assume a single pass operation and set the completion level to 1 by
// default.
$finished = 1;
@@ -296,14 +297,11 @@ function _batch_process() {
'@estimate' => ($current > 0) ? format_interval(($elapsed * ($total - $current) / $current) / 1000) : '-',
);
$message = strtr($progress_message, $values);
- if (!empty($message)) {
- $message .= '<br />';
- }
if (!empty($task_message)) {
- $message .= $task_message;
+ $label = $task_message;
}
- return array($percentage, $message);
+ return array($percentage, $message, $label);
}
else {
// If we are not in progressive mode, the entire batch has been processed.
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 55ec85f..83fec4e 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2385,9 +2385,10 @@ function theme_more_link($variables) {
*/
function theme_progress_bar($variables) {
$output = '<div id="progress" class="progress">';
- $output .= '<div class="bar"><div class="filled" style="width: ' . $variables['percent'] . '%"></div></div>';
- $output .= '<div class="percentage">' . $variables['percent'] . '%</div>';
- $output .= '<div class="message">' . $variables['message'] . '</div>';
+ $output .= '<div class="progress__label">' . $variables['label'] . '</div>';
+ $output .= '<div class="progress__track"><div class="progress__bar" style="width: ' . $variables['percent'] . '%"></div></div>';
+ $output .= '<div class="progress__percentage">' . $variables['percent'] . '%</div>';
+ $output .= '<div class="progress__description">' . $variables['message'] . '</div>';
$output .= '</div>';
return $output;
diff --git a/core/misc/progress.gif b/core/misc/progress.gif
deleted file mode 100644
index f84a9de..0000000
--- a/core/misc/progress.gif
+++ /dev/null
Binary files differ
diff --git a/core/misc/progress.js b/core/misc/progress.js
index 922fea5..e3e000f 100644
--- a/core/misc/progress.js
+++ b/core/misc/progress.js
@@ -21,21 +21,23 @@ Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
// The WAI-ARIA setting aria-live="polite" will announce changes after users
// have completed their current activity and not interrupt the screen reader.
this.element = $('<div class="progress" aria-live="polite"></div>').attr('id', id);
- this.element.html('<div class="bar"><div class="filled"></div></div>' +
- '<div class="percentage"></div>' +
- '<div class="message">&nbsp;</div>');
+ this.element.html('<div class="progress__label">&nbsp;</div>' +
+ '<div class="progress__track"><div class="progress__bar"></div></div>' +
+ '<div class="progress__percentage"></div>' +
+ '<div class="progress__description">&nbsp;</div>');
};
$.extend(Drupal.ProgressBar.prototype, {
/**
* Set the percentage and status message for the progressbar.
*/
- setProgress: function (percentage, message) {
+ setProgress: function (percentage, message, label) {
if (percentage >= 0 && percentage <= 100) {
- $(this.element).find('div.filled').css('width', percentage + '%');
- $(this.element).find('div.percentage').html(percentage + '%');
+ $(this.element).find('div.progress__bar').css('width', percentage + '%');
+ $(this.element).find('div.progress__percentage').html(percentage + '%');
}
- $('div.message', this.element).html(message);
+ $('div.progress__description', this.element).html(message);
+ $('div.progress__label', this.element).html(label);
if (this.updateCallback) {
this.updateCallback(percentage, message, this);
}
@@ -82,7 +84,7 @@ $.extend(Drupal.ProgressBar.prototype, {
return;
}
// Update display.
- pb.setProgress(progress.percentage, progress.message);
+ pb.setProgress(progress.percentage, progress.message, progress.label);
// Schedule next timer.
pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
},
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index 006d6d7..6f33ee8 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -186,25 +186,50 @@ table.sticky-header {
*
* @see progress.js
*/
-/* Bar */
-.progress .bar {
+.progress {
+ position: relative;
+}
+.progress__track {
background-color: #fff;
border: 1px solid;
+ margin-top: 5px;
+ max-width: 100%;
+ min-width: 100px;
+ height: 16px;
+ background-color: #fff;
}
-.progress .filled {
+.progress__bar {
background-color: #000;
height: 1.5em;
- width: 5px;
+ width: 3%;
+}
+.progress__description,
+.progress__percentage {
+ color: #555;
+ overflow: hidden;
+ font-size: .875em;
+ margin-top: 0.2em;
+}
+.progress__description {
+ float: left; /* LTR */
+}
+[dir="rtl"] .progress__description {
+ float: right;
}
-.progress .percentage {
+.progress__percentage {
float: right; /* LTR */
}
-[dir="rtl"] .progress .percentage {
+[dir="rtl"] .progress__percentage {
float: left;
}
-[dir="rtl"] .progress-disabled {
- float: right;
+.progress--small .progress__track {
+ height: 7px;
+}
+.progress--small .progress__bar {
+ height: 7px;
+ background-size: 20px 20px;
}
+
/* Throbber */
.ajax-progress {
display: inline-block;
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index dfb496b..d3c52a3 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -274,17 +274,91 @@ th.checkbox {
*
* @see progress.js
*/
-.progress {
- font-weight: bold;
+.progress__track {
+ border-color: #b3b3b3;
+ border-radius: 10em;
+ background-color: #f2f1eb;
+ background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0);
+ background-image: -moz-linear-gradient(#e7e7df, #f0f0f0);
+ background-image: -o-linear-gradient(#e7e7df, #f0f0f0);
+ background-image: linear-gradient(#e7e7df, #f0f0f0);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16);
+}
+.progress__bar {
+ border: 1px #07629a solid;
+ background: #057ec9;
+ background-image:
+ -webkit-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
+ -webkit-linear-gradient( left top,
+ #0094f0 0%,
+ #0094f0 25%,
+ #007ecc 25%,
+ #007ecc 50%,
+ #0094f0 50%,
+ #0094f0 75%,
+ #0094f0 100% );
+ background-image:
+ -moz-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
+ -moz-linear-gradient( left top,
+ #0094f0 0%,
+ #0094f0 25%,
+ #007ecc 25%,
+ #007ecc 50%,
+ #0094f0 50%,
+ #0094f0 75%,
+ #0094f0 100% );
+ background-image:
+ -o-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
+ -o-linear-gradient( left top,
+ #0094f0 0%,
+ #0094f0 25%,
+ #007ecc 25%,
+ #007ecc 50%,
+ #0094f0 50%,
+ #0094f0 75%,
+ #0094f0 100% );
+ background-image:
+ linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
+ linear-gradient( to right bottom,
+ #0094f0 0%,
+ #0094f0 25%,
+ #007ecc 25%,
+ #007ecc 50%,
+ #0094f0 50%,
+ #0094f0 75%,
+ #0094f0 100% );
+ background-size: 40px 40px;
+ margin-top: -1px;
+ margin-left: -1px;
+ padding: 0 1px;
+ height: 16px;
+ border-radius: 10em;
+ -webkit-animation: animate-stripes 3s linear infinite;
+ -moz-animation: animate-stripes 3s linear infinite;
+ -webkit-transition: width 0.5s ease-out;
+ -moz-transition: width 0.5s ease-out;
+ -ms-transition: width 0.5s ease-out;
+ -o-transition: width 0.5s ease-out;
+ transition: width 0.5s ease-out;
+}
+
+/**
+ * Progress bar animations.
+ */
+@-webkit-keyframes animate-stripes {
+ 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
+}
+@-moz-keyframes animate-stripes {
+ 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
+}
+@-o-keyframes animate-stripes {
+ 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
}
-.progress .bar {
- background: #ccc;
- border-color: #666;
- margin: 0 0.2em;
- border-radius: 3px;
+@-ms-keyframes animate-stripes {
+ 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
}
-.progress .filled {
- background: #0072b9 url(../../../misc/progress.gif);
+@keyframes animate-stripes {
+ 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
}
/**