// Improve new install style (new progress bar)

This commit is contained in:
rMalie
2011-12-30 14:37:27 +00:00
parent c4c71dc5f9
commit bbf6c71e48
5 changed files with 48 additions and 63 deletions
+6 -7
View File
@@ -224,13 +224,12 @@ class InstallControllerHttpProcess extends InstallControllerHttp
public function display() public function display()
{ {
$this->process_steps = array( $this->process_steps = array(
'installDatabase', array('key' => 'installDatabase', 'lang' => $this->l('Create database tables')),
'populateDatabase', array('key' => 'populateDatabase', 'lang' => $this->l('Populate database tables')),
'configureShop', array('key' => 'configureShop', 'lang' => $this->l('Configure shop informations')),
'installModules', array('key' => 'installModules', 'lang' => $this->l('Install modules')),
'installFixtures', array('key' => 'installFixtures', 'lang' => $this->l('Install demonstration data')),
'installTheme', array('key' => 'installTheme', 'lang' => $this->l('Install theme')),
//'preactivation',
); );
$this->displayTemplate('process'); $this->displayTemplate('process');
} }
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

+16 -30
View File
@@ -5,8 +5,6 @@ $(document).ready(function()
start_install(); start_install();
}); });
is_installing_count = 0;
is_installing_max = 5;
current_step = 0; current_step = 0;
function start_install() function start_install()
{ {
@@ -17,7 +15,6 @@ function start_install()
$('.process_step').removeClass('fail').removeClass('success').hide(); $('.process_step').removeClass('fail').removeClass('success').hide();
$('.error_log').hide(); $('.error_log').hide();
setTimeout(text_is_installing, 500);
$('#progress_bar').show(); $('#progress_bar').show();
$('#progress_bar .installing').show(); $('#progress_bar .installing').show();
process_install(); process_install();
@@ -27,10 +24,12 @@ function process_install(step)
{ {
if (!step) if (!step)
step = process_steps[0]; step = process_steps[0];
$('.installing').hide().html(step.lang+' ...').fadeIn('slow');
$.ajax({ $.ajax({
url: 'index.php', url: 'index.php',
data: step+'=true', data: step.key+'=true',
dataType: 'json', dataType: 'json',
cache: false, cache: false,
success: function(json) success: function(json)
@@ -38,11 +37,12 @@ function process_install(step)
// No error during this step // No error during this step
if (json.success) if (json.success)
{ {
$('#progress_bar_'+step).addClass('complete'); $('#process_step_'+step.key).show().addClass('success');
$('#process_step_'+step).show().addClass('success');
current_step++; current_step++;
if (current_step >= process_steps.length) if (current_step >= process_steps.length)
{ {
$('#progress_bar .total .progress').animate({'width': '100%'}, 500);
// Installation finished // Installation finished
setTimeout(function() setTimeout(function()
{ {
@@ -51,6 +51,8 @@ function process_install(step)
} }
else else
{ {
$('#progress_bar .total .progress').animate({'width': '+='+process_percent+'%'}, 500);
// Process next step // Process next step
process_install(process_steps[current_step]); process_install(process_steps[current_step]);
} }
@@ -58,13 +60,13 @@ function process_install(step)
// An error occured during this step // An error occured during this step
else else
{ {
install_error(step, json.message); install_error(step.key, json.message);
} }
}, },
// An error HTTP (page not found, json not valid, etc.) occured during this step // An error HTTP (page not found, json not valid, etc.) occured during this step
error: function() error: function()
{ {
install_error(step); install_error(step.key);
} }
}); });
} }
@@ -73,12 +75,11 @@ function install_error(step, errors)
{ {
current_step = 0; current_step = 0;
is_installing = false; is_installing = false;
$('#process_step_'+step).show().addClass('fail'); $('#process_step_'+step.key).show().addClass('fail');
$.each(process_steps, function(k, v) $.each(process_steps, function(k, v)
{ {
$('#progress_bar_'+v).removeClass('complete'); $('#progress_bar_'+v.key).removeClass('complete');
}); });
$('#progress_bar .installing').hide();
if (errors) if (errors)
{ {
@@ -92,30 +93,15 @@ function install_error(step, errors)
display += '<li>'+v+'</li>'; display += '<li>'+v+'</li>';
}); });
display += '</ol>'; display += '</ol>';
$('#process_step_'+step+' .error_log').html(display).show(); $('#process_step_'+step.key+' .error_log').html(display).show();
} }
} }
function install_success() function install_success()
{ {
$('.installing').html(install_is_done);
return;
is_installing = false; is_installing = false;
$('#install_process_form').slideUp(); $('#install_process_form').slideUp();
$('#install_process_success').slideDown(); $('#install_process_success').slideDown();
}
function text_is_installing()
{
if (!is_installing)
return;
var text = '';
for (var i = 0; i <= is_installing_count; i++)
text += '.';
$('#progress_bar .installing span').html(text);
is_installing_count++;
if (is_installing_count == is_installing_max)
is_installing_count = 0;
setTimeout(text_is_installing, 500);
} }
+18 -14
View File
@@ -695,24 +695,28 @@ ul#optional_update {list-style-type:none;}
#progress_bar { #progress_bar {
display: none; display: none;
} }
#progress_bar table { #progress_bar .total {
width: 100%; width: 100%;
height: 30px;
border: 1px solid #999999; border: 1px solid #999999;
background-color: #eeeeee;
} }
#progress_bar table td {
background-color: #eeeeee; #progress_bar .total .progress {
height: 25px; width: 0px;
margin: 3px; height: 30px;
} background-color: #74A3DC;
#progress_bar table td.complete { }
background-color: #74A3DC;
}
#progress_bar .installing { #progress_bar .installing {
background: url("img/ajax-loader-small.gif") no-repeat scroll 0 0 transparent; background: url("img/ajax-loader-small.gif") no-repeat scroll 0 0 transparent;
font-size: 14px; display: none;
font-style: italic; font-size: 18px;
padding-left: 20px; font-style: italic;
display: none; font-weight: bold;
height: 26px;
padding-left: 36px;
padding-top: 6px;
} }
#progress_bar ol { #progress_bar ol {
+8 -12
View File
@@ -2,28 +2,24 @@
<script type="text/javascript"> <script type="text/javascript">
<!-- <!--
var install_is_done = '<?php echo addslashes($this->l('Done !')) ?>';
var process_steps = <?php echo Tools::jsonEncode($this->process_steps) ?>; var process_steps = <?php echo Tools::jsonEncode($this->process_steps) ?>;
var process_percent = <?php echo 100 / count($this->process_steps) ?>;
--> -->
</script> </script>
<div id="install_process_form"> <div id="install_process_form">
<div id="progress_bar"> <div id="progress_bar">
<div class="installing"> <div class="installing"></div>
<?php echo $this->l('Installing') ?> <span></span>
</div>
<table> <div class="total">
<tr> <div class="progress"></div>
<?php foreach ($this->process_steps as $item): ?> </div>
<td id="progress_bar_<?php echo $item ?>" style="width: <?php floor(100 / count($this->process_steps)) ?>%">&nbsp;</td>
<?php endforeach; ?>
</tr>
</table>
<ol class="process_list"> <ol class="process_list">
<?php foreach ($this->process_steps as $item): ?> <?php foreach ($this->process_steps as $item): ?>
<li id="process_step_<?php echo $item ?>" class="process_step"> <li id="process_step_<?php echo $item['key'] ?>" class="process_step">
<?php echo $this->l('process_step_'.$item) ?> <?php echo $item['lang'] ?>
<div class="error_log"></div> <div class="error_log"></div>
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>