Commit 4f6161a2 authored by Dries's avatar Dries

Issue #1989480 by LewisNyman, rteijeiro, oresh, swentel, Gaelan: Progress Bar style update.

parent 04ef7cf8
...@@ -86,9 +86,9 @@ function _batch_page() { ...@@ -86,9 +86,9 @@ function _batch_page() {
*/ */
function _batch_do() { function _batch_do() {
// Perform actual processing. // 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() { ...@@ -108,6 +108,7 @@ function _batch_progress_page() {
// This is the first page so we return some output immediately. // This is the first page so we return some output immediately.
$percentage = 0; $percentage = 0;
$message = $current_set['init_message']; $message = $current_set['init_message'];
$label = '';
$batch['running'] = TRUE; $batch['running'] = TRUE;
} }
else { else {
...@@ -128,7 +129,7 @@ function _batch_progress_page() { ...@@ -128,7 +129,7 @@ function _batch_progress_page() {
print $fallback; print $fallback;
// Perform actual processing. // Perform actual processing.
list($percentage, $message) = _batch_process($batch); list($percentage, $message, $label) = _batch_process($batch);
if ($percentage == 100) { if ($percentage == 100) {
$new_op = 'finished'; $new_op = 'finished';
} }
...@@ -166,7 +167,7 @@ function _batch_progress_page() { ...@@ -166,7 +167,7 @@ function _batch_progress_page() {
drupal_add_js($js_setting, 'setting'); drupal_add_js($js_setting, 'setting');
drupal_add_library('system', 'drupal.batch'); 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() { ...@@ -208,7 +209,7 @@ function _batch_process() {
include_once DRUPAL_ROOT . '/' . $current_set['file']; 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 // Assume a single pass operation and set the completion level to 1 by
// default. // default.
$finished = 1; $finished = 1;
...@@ -296,14 +297,11 @@ function _batch_process() { ...@@ -296,14 +297,11 @@ function _batch_process() {
'@estimate' => ($current > 0) ? format_interval(($elapsed * ($total - $current) / $current) / 1000) : '-', '@estimate' => ($current > 0) ? format_interval(($elapsed * ($total - $current) / $current) / 1000) : '-',
); );
$message = strtr($progress_message, $values); $message = strtr($progress_message, $values);
if (!empty($message)) {
$message .= '<br />';
}
if (!empty($task_message)) { if (!empty($task_message)) {
$message .= $task_message; $label = $task_message;
} }
return array($percentage, $message); return array($percentage, $message, $label);
} }
else { else {
// If we are not in progressive mode, the entire batch has been processed. // If we are not in progressive mode, the entire batch has been processed.
......
...@@ -2385,9 +2385,10 @@ function theme_more_link($variables) { ...@@ -2385,9 +2385,10 @@ function theme_more_link($variables) {
*/ */
function theme_progress_bar($variables) { function theme_progress_bar($variables) {
$output = '<div id="progress" class="progress">'; $output = '<div id="progress" class="progress">';
$output .= '<div class="bar"><div class="filled" style="width: ' . $variables['percent'] . '%"></div></div>'; $output .= '<div class="progress__label">' . $variables['label'] . '</div>';
$output .= '<div class="percentage">' . $variables['percent'] . '%</div>'; $output .= '<div class="progress__track"><div class="progress__bar" style="width: ' . $variables['percent'] . '%"></div></div>';
$output .= '<div class="message">' . $variables['message'] . '</div>'; $output .= '<div class="progress__percentage">' . $variables['percent'] . '%</div>';
$output .= '<div class="progress__description">' . $variables['message'] . '</div>';
$output .= '</div>'; $output .= '</div>';
return $output; return $output;
......
...@@ -21,21 +21,23 @@ Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) { ...@@ -21,21 +21,23 @@ Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
// The WAI-ARIA setting aria-live="polite" will announce changes after users // The WAI-ARIA setting aria-live="polite" will announce changes after users
// have completed their current activity and not interrupt the screen reader. // 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 = $('<div class="progress" aria-live="polite"></div>').attr('id', id);
this.element.html('<div class="bar"><div class="filled"></div></div>' + this.element.html('<div class="progress__label">&nbsp;</div>' +
'<div class="percentage"></div>' + '<div class="progress__track"><div class="progress__bar"></div></div>' +
'<div class="message">&nbsp;</div>'); '<div class="progress__percentage"></div>' +
'<div class="progress__description">&nbsp;</div>');
}; };
$.extend(Drupal.ProgressBar.prototype, { $.extend(Drupal.ProgressBar.prototype, {
/** /**
* Set the percentage and status message for the progressbar. * Set the percentage and status message for the progressbar.
*/ */
setProgress: function (percentage, message) { setProgress: function (percentage, message, label) {
if (percentage >= 0 && percentage <= 100) { if (percentage >= 0 && percentage <= 100) {
$(this.element).find('div.filled').css('width', percentage + '%'); $(this.element).find('div.progress__bar').css('width', percentage + '%');
$(this.element).find('div.percentage').html(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) { if (this.updateCallback) {
this.updateCallback(percentage, message, this); this.updateCallback(percentage, message, this);
} }
...@@ -82,7 +84,7 @@ $.extend(Drupal.ProgressBar.prototype, { ...@@ -82,7 +84,7 @@ $.extend(Drupal.ProgressBar.prototype, {
return; return;
} }
// Update display. // Update display.
pb.setProgress(progress.percentage, progress.message); pb.setProgress(progress.percentage, progress.message, progress.label);
// Schedule next timer. // Schedule next timer.
pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay); pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
}, },
......
...@@ -186,25 +186,50 @@ table.sticky-header { ...@@ -186,25 +186,50 @@ table.sticky-header {
* *
* @see progress.js * @see progress.js
*/ */
/* Bar */ .progress {
.progress .bar { position: relative;
}
.progress__track {
background-color: #fff; background-color: #fff;
border: 1px solid; border: 1px solid;
margin-top: 5px;
max-width: 100%;
min-width: 100px;
height: 16px;
background-color: #fff;
} }
.progress .filled { .progress__bar {
background-color: #000; background-color: #000;
height: 1.5em; 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 */ float: right; /* LTR */
} }
[dir="rtl"] .progress .percentage { [dir="rtl"] .progress__percentage {
float: left; float: left;
} }
[dir="rtl"] .progress-disabled { .progress--small .progress__track {
float: right; height: 7px;
}
.progress--small .progress__bar {
height: 7px;
background-size: 20px 20px;
} }
/* Throbber */ /* Throbber */
.ajax-progress { .ajax-progress {
display: inline-block; display: inline-block;
......
...@@ -274,17 +274,91 @@ th.checkbox { ...@@ -274,17 +274,91 @@ th.checkbox {
* *
* @see progress.js * @see progress.js
*/ */
.progress { .progress__track {
font-weight: bold; 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 { @-ms-keyframes animate-stripes {
background: #ccc; 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
border-color: #666;
margin: 0 0.2em;
border-radius: 3px;
} }
.progress .filled { @keyframes animate-stripes {
background: #0072b9 url(../../../misc/progress.gif); 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
} }
/** /**
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment