diff --git a/core/includes/batch.inc b/core/includes/batch.inc index 27fb632a23da4598726ed3413f9f4609b9fdc508..569ce58e72181f1e5ca3f7a143ae54cbacfbd667 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 .= '
'; - } 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 55ec85fb6dea3b89f2bf1d6c43047856651d4837..83fec4e80cb1b1b4dc52279917696a689c519c95 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 = '
'; - $output .= '
'; - $output .= '
' . $variables['percent'] . '%
'; - $output .= '
' . $variables['message'] . '
'; + $output .= '
' . $variables['label'] . '
'; + $output .= '
'; + $output .= '
' . $variables['percent'] . '%
'; + $output .= '
' . $variables['message'] . '
'; $output .= '
'; return $output; diff --git a/core/misc/progress.gif b/core/misc/progress.gif deleted file mode 100644 index f84a9de57677e5e8060f3f7ba25680cf41edd3ef..0000000000000000000000000000000000000000 --- a/core/misc/progress.gif +++ /dev/null @@ -1,32 +0,0 @@ -GIF89a(hgfedca`^][`Z`__X^^]V]\U\[SYRYQXXPVVOU[ZZNUYYSSXXWQVWQPPUTTNNSMRMQPKKJJONIINHMGGLFKFJIHGFFEEDCBAAA@@! NETSCAPE2.0!d,( (&(& +'+'0,0,1/1/34349898=:=:?  ABBAB"#"1B$G&D"A !(ɒPEG-ZXldI)5Ȩ RHBfMnй 5GaU\ WejWY @dHYDh 6[.F812n"\pɻ%(<8I.+_|쥲d&Od0c> (S2EL1~%Ŕ͝=Mz̏Dl&>9`/\tIVK[aǖ=KWZ -DkӧB5tR@ϙ&J-aFyH"-B =Dq>@tO>#|:@9t c7߈c 6d4020  cL1 ",b .1"J(DP)HB%h -!d,(d d&('+dd,0d/1d43d89d:=d??d#ABdȚGHd %%KMd ---PRd 22TTd77UVd<>YЈH[ШHH](IM_ȄhĄ&/dH4zD1)M)H$M njYqb".LdPSiʷ/=MӔnTp%2MD"EVZe͐%kDX`%xj+-[bEbQHL5 -ӧK"葦I!d,( dd (+0d139=? #B"%H* M. --R5 2T67V;ZCD\FE]JI_L!LcN$tҔNb6ɾN%o^#x5RW\#r5m[#lӪ5왱FȔ5biX1`zeV.ZbreiU+TJeSM0ijT $FY -!d,(( dd +0d139=? #B"%H* -M. -R5 2T67V;ZCD\FE]JI_L!LcN$\%E)4F#~ *o#x9RW#r9m#lӪ9v4E.%[LѰb.ҭ\.ŚҪV.:%ҧP8EDɑH+E)!d,(d( dd +0d139=? #B"%H* -M. -2R5 T67V;ZCD\FE]JI_L!LcN$&=$&JISIO_A'O O-ZgrAl][,4ieRlLČM[ خLt$֫L\d -$RBqiJ25zI@!d,(dd( +0d139=? #B"%H* -M. -2R5 7T6V;ZCD\FE]JI_L!LcN$&=$&JISO?PRZCD\FE]JI_L!LcN$&=$&JISO?yr/t֙B.Tqim5Mְ-r E4)cH&b "[pHWZ -ҌQ4q ԤJ e$I!d,(dd( +0d13d9=? #B"%H* -M. -2R5 7T6X@ZCD\FE]JI_L!LcN$&=$&JISO?ys:u$my[DM5li&m2Mʘ-E4Ȗ&\4UE9P -5&N TL=$iP !d,(d( +0d139d=? #B"%H* -M. -2R5 7T6X@DZC\FE]JI_L!LcN$&=$&JISO?yijRIԕ5n8MXe۶c5Mְ-r E4)cH&b آ[rZKSWXJ(RLM I.A4#H!d,(d( +0d139= d?#B"%H* -M. -2R5 7T6X@DZCE\F]JI_L!LcN$&=$&JISO?MA7uЩ+IoMҦ -ilLr E4)cH&bkע[~Ђ$+HNd*Ԩx8yjRK2Mj$2!d,(dd( +dd0139=? "#dB %H*-M. -2R5 7T6X@DZCE\FI]J_L!LcN$"=$&JHSH)>F"ѳ;x(SW8r(q׵H(QYcɖ1FXD( ׬ZdzňթTLԦNYHS$GM -!d,(d( +dd0139=? B"#* %dH --M.2R5 7T6X@DZCE\FI]JL_L!đcN$"=$&JHS( h`$}Qg/%wQB%qQ-%kئ1F(-F 0FrbkV-FZbT*FBbjS'F(Y/#H!d,(d( +dd0139=? B"#H* %. --dM 2R57T6X@DZCE\FI]JL_L!OcNH($&JHS(؏>~(ѳ;x(SW8r(q󖍒5lE֌3JƐ)k"_*z)+YjS -5Mid SIAb!d,( d( d+d0139=? B"#H* %M. --5 2dR7T6X@DZCE\FI]JL_L!OcN$My&&Jg7)>{Ճ7;uΥ#7)8ou[5i11cȞ ɮEplV-EXZE@ZIE&UH$G!d,(d d( +0139=? B"#H* %M. --R5 267dTX@DZCE\FI]JL_L!OcNH8bML6I{ًGuЩ+GI9G&uh$*Ҩ-kرd 5!"5W:ʑPɑ&J0-jD $C!d,(dd ( +0d139=? B"#H* %M. --R5 2T67;X@DZCE\FI]JL_L!OcNH8ILoߦJ:M92Wi7G*YɶM5k̜A3L0atM?b9jMV-:%P:}ZDIӥLi$P !d,(ހd ( +0139=? B"#H* %M. --R5 2T67V;<@>XDZCE\FI]JL_L!OcNH8JLo_yBUrJ9:W ˷pشqF3gЌ!SL1]|Ѳ+,Yzr -UEDE8]ʴ'H!d,(ހdd ( d+0d139=? B"#H* %M. --R5 2T67V;CDZE\FI]JL_L!Oc`4()O?F,ջwȝ%xPbݷpm6ڵfϢK,ذbzu+׫X:j))Q,ZCDFE\I]JL_L!Oc`4()(}ѳdOޡwc9WcD6n=fGΠ12F ##^{d #]bͲN4#ԦNUI!G"M -!d,(d ( d+0d139=? B"#H* %M. --R5 2T67V;ZCD\FEJI]!L_Oc`4()Ȩ#~ճE#x1RW#rb#oYc3h=BGˆ12/Fje),WVBe)Q@=d)&J0=rd)R@; \ No newline at end of file diff --git a/core/misc/progress.js b/core/misc/progress.js index 922fea5779e85b02dcf537ac78d1e66f14331b6e..e3e000fbf9e506afefa4253b2359677ef9d8aaf3 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 = $('
').attr('id', id); - this.element.html('
' + - '
' + - '
 
'); + this.element.html('
 
' + + '
' + + '
' + + '
 
'); }; $.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 006d6d7a3a782cd0c5d8497f62c3791d025ef3e1..6f33ee89e0a851b644650d7ab3cabfa1814be475 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 dfb496bcf1c1564a8e3e2e9c1d247d0248f5f17b..d3c52a3bd9ee6870af674f05588027e95edc16bc 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;} } /**