Skip to content

GitLab

Commit 4f6161a2 authored by Dries's avatar Dries
Browse files

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

parent 04ef7cf8
Hide whitespace changes
Inline Side-by-side
core/includes/batch.inc
View file @ 4f6161a2
......@@ -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.
......
core/includes/theme.inc
View file @ 4f6161a2
......@@ -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;
......
core/misc/progress.js
View file @ 4f6161a2
......@@ -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);
},
......
core/modules/system/css/system.module.css
View file @ 4f6161a2
......@@ -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;
......
core/modules/system/css/system.theme.css
View file @ 4f6161a2
......@@ -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;}
}
/**
......
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