Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
project
drupal
Commits
4f6161a2
Commit
4f6161a2
authored
Jul 18, 2013
by
Dries
Browse files
Issue
#1989480
by LewisNyman, rteijeiro, oresh, swentel, Gaelan: Progress Bar style update.
parent
04ef7cf8
Changes
6
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.gif
deleted
100644 → 0
View file @
04ef7cf8
5.73 KB
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"> </div>
'
);
this
.
element
.
html
(
'
<div class="progress__label"> </div>
'
+
'
<div class="progress__track"><div class="progress__bar"></div></div>
'
+
'
<div class="progress__percentage"></div>
'
+
'
<div class="progress__description"> </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
;}
}
/**
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment