1
0
mirror of https://github.com/phpbb/phpbb.git synced 2025-02-25 12:33:29 +01:00

Merge pull request #4149 from CHItA/ticket/14438

[ticket/14438] Allign progressbar text to center
This commit is contained in:
Marc Alexander 2016-01-31 20:08:39 +01:00
commit 63fd2159e0
2 changed files with 26 additions and 9 deletions

View File

@ -2554,6 +2554,7 @@ fieldset.permissions .padding {
#progress-bar {
position: relative;
width: 90%;
text-align: center;
height: 25px;
margin: 20px auto;
border: 1px solid #cecece;
@ -2563,10 +2564,7 @@ fieldset.permissions .padding {
position: absolute;
top: 0;
width: 100%;
text-align: center;
line-height: 25px;
font-weight: bold;
color: #fff;
color: #000;
}
#progress-bar #progress-bar-filler {
@ -2577,4 +2575,11 @@ fieldset.permissions .padding {
background-color: #3c84ad;
width: 0;
height: 25px;
overflow: hidden;
color: #fff;
}
#progress-bar p {
line-height: 25px;
font-weight: bold;
}

View File

@ -177,7 +177,7 @@
* @param progressObject
*/
function setProgress(progressObject) {
var $statusText, $progressBar, $progressText, $progressFiller;
var $statusText, $progressBar, $progressText, $progressFiller, $progressFillerText;
if (progressObject.task_name.length) {
if (!progressBarTriggered) {
@ -189,18 +189,23 @@
$progressBar.attr('id', 'progress-bar');
$progressText = $('<p />');
$progressText.attr('id', 'progress-bar-text');
$progressFiller = $('<span />');
$progressFiller = $('<div />');
$progressFiller.attr('id', 'progress-bar-filler');
$progressFiller.html($progressText);
$progressFillerText = $('<p />');
$progressFillerText.attr('id', 'progress-bar-filler-text');
$statusText = $('<p />');
$statusText.attr('id', 'progress-status-text');
$progressFiller.append($progressFillerText);
$progressBar.append($progressText);
$progressBar.append($progressFiller);
$progressBarWrapper.append($statusText);
$progressBarWrapper.append($progressBar);
$progressFillerText.css('width', $progressBar.width());
progressBarTriggered = true;
} else if (progressObject.hasOwnProperty('restart')) {
clearInterval(progressTimer);
@ -210,6 +215,7 @@
$statusText = $('#progress-status-text');
$progressText.text('0%');
$progressFillerText.text('0%');
$progressFiller.css('width', '0%');
currentProgress = 0;
@ -342,15 +348,20 @@
*
* @param $progressText
* @param $progressFiller
* @param $progressFillerText
* @param progressLimit
*/
function incrementFiller($progressText, $progressFiller, progressLimit) {
function incrementFiller($progressText, $progressFiller, $progressFillerText, progressLimit) {
if (currentProgress >= progressLimit || currentProgress >= 100) {
clearInterval(progressTimer);
return;
}
var $progressBar = $('#progress-bar');
currentProgress++;
$progressFillerText.css('width', $progressBar.width());
$progressFillerText.text(currentProgress + '%');
$progressText.text(currentProgress + '%');
$progressFiller.css('width', currentProgress + '%');
}
@ -362,13 +373,14 @@
*/
function incrementProgressBar(progressLimit) {
var $progressFiller = $('#progress-bar-filler');
var $progressFillerText = $('#progress-bar-filler-text');
var $progressText = $('#progress-bar-text');
var progressStart = $progressFiller.width() / $progressFiller.offsetParent().width() * 100;
currentProgress = Math.floor(progressStart);
clearInterval(progressTimer);
progressTimer = setInterval(function() {
incrementFiller($progressText, $progressFiller, progressLimit);
incrementFiller($progressText, $progressFiller, $progressFillerText, progressLimit);
}, 10);
}