// Improve installation design (addons iframes + progress percent + remove back button)

git-svn-id: http://dev.prestashop.com/svn/v1/branches/1.5.x@12954 b9a71923-0436-4b27-9f14-aed3839534dd

install-dev/classes/controllerHttp.php

@@ -64,6 +64,11 @@ abstract class InstallControllerHttp
 	 */
 	public $next_button = true;
 
+	/**
+	 * @var bool If false, disable previous button access
+	 */
+	public $previous_button = true;
+
 	/**
 	 * @var InstallAbstractModel
 	 */

install-dev/controllers/http/process.php

@@ -34,6 +34,8 @@ class InstallControllerHttpProcess extends InstallControllerHttp
 	 */
 	protected $model_install;
 
+	public $previous_button = false;
+
 	public function init()
 	{
 		require_once _PS_INSTALL_MODELS_PATH_.'install.php';

install-dev/theme/js/process.js

@@ -42,6 +42,7 @@ function process_install(step)
 				if (current_step >= process_steps.length)
 				{
 					$('#progress_bar .total .progress').animate({'width': '100%'}, 500);
+					$('#progress_bar .total span').html('100%');
 
 					// Installation finished
 					setTimeout(function()
@@ -52,6 +53,7 @@ function process_install(step)
 				else
 				{
 					$('#progress_bar .total .progress').animate({'width': '+='+process_percent+'%'}, 500);
+					$('#progress_bar .total span').html(Math.ceil(current_step * process_percent)+'%');
 
 					// Process next step
 					process_install(process_steps[current_step]);
@@ -98,6 +100,7 @@ function install_error(step, errors)
 
 function install_success()
 {
+	$('#progress_bar .total span').hide();
 	$('.installing').html(install_is_done);
 	is_installing = false;
 	$('#install_process_form').slideUp();

install-dev/theme/view.css

@@ -692,6 +692,9 @@ ul#optional_update {list-style-type:none;}
 }
 
 /* STEP 5 ******************************************/
+#install_process_form{
+    height: 260px;
+}
 #progress_bar {
 	display: none;
 }
@@ -700,8 +703,17 @@ ul#optional_update {list-style-type:none;}
         height: 30px;
 		border: 1px solid #999999;
         background-color: #eeeeee;
+        text-align: center;
 	}
 
+    #progress_bar .total span{
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 5px;
+        position: absolute;
+        text-align: center;
+    }
+
         #progress_bar .total .progress {
             width: 0px;
             height: 30px;

install-dev/theme/views/footer.phtml

@@ -10,7 +10,7 @@
 		<?php endif; ?>
 	<?php endif; ?>
 
-	<?php if (!$this->isFirstStep()): ?>
+	<?php if (!$this->isFirstStep() && $this->previous_button): ?>
 		<input id="btBack" class="button little" type="submit" name="submitPrevious" value="<?php echo $this->l('Back') ?>" />
 	<?php endif; ?>
 </div>

install-dev/theme/views/process.phtml

@@ -13,6 +13,7 @@ var process_percent = <?php echo 100 / count($this->process_steps) ?>;
 		<div class="installing"></div>
 
 		<div class="total">
+			<span>0%</span>
 			<div class="progress"></div>
 		</div>
 
@@ -54,26 +55,24 @@ var process_percent = <?php echo 100 / count($this->process_steps) ?>;
 		<h3 class="infosBlock"><?php echo $this->l('WARNING: For security purposes, you must delete the "install" folder.') ?></h3>
 
 		<div id="boBlock" class="blockInfoEnd clearfix">
-				<img src="theme/img/visu_boBlock.png" />
+			<img src="theme/img/visu_boBlock.png" />
-				<h3><?php echo $this->l('Back Office'); ?></h3>
+			<h3><?php echo $this->l('Back Office'); ?></h3>
-				<p class="description"><?php echo $this->l('Manage your store using your Back Office. Manage your orders and customers, add modules, change themes, etc.') ?></p>
+			<p class="description"><?php echo $this->l('Manage your store using your Back Office. Manage your orders and customers, add modules, change themes, etc.') ?></p>
-				<a href="../admin" id="access" class="BO" target="_blank"><span><?php echo $this->l('Manage your store') ?></span></a>
+			<a href="../admin" id="access" class="BO" target="_blank"><span><?php echo $this->l('Manage your store') ?></span></a>
 		</div>
 		<div id="foBlock" class="blockInfoEnd last clearfix">
-				<img src="theme/img/visu_foBlock.png" />
+			<img src="theme/img/visu_foBlock.png" />
-				<h3><?php echo $this->l('Front Office'); ?></h3>
+			<h3><?php echo $this->l('Front Office'); ?></h3>
-				<p class="description"><?php echo $this->l('Discover your store as your future customers will see it!') ?></p>
+			<p class="description"><?php echo $this->l('Discover your store as your future customers will see it!') ?></p>
-				<a href="../" id="access" class="FO" target="_blank"><span><?php echo $this->l('Discover your store') ?></span></a>
+			<a href="../" id="access" class="FO" target="_blank"><span><?php echo $this->l('Discover your store') ?></span></a>
 		</div>
 	</div>
-	<?php
+</div>
-	if (@fsockopen('addons.prestashop.com', 80, $errno, $errst, 3)): ?>
+
+<?php if (@fsockopen('addons.prestashop.com', 80, $errno, $errst, 3)): ?>
 	<iframe src="http://addons.prestashop.com/psinstall.php?lang=<?php echo $this->language->getLanguageIso() ?>" scrolling="no" id="prestastore">
 		<p>Your browser does not support iframes.</p>
 	</iframe>
-	<?php
+<?php endif; ?>
-	endif; ?>
-
-</div>
 
 <?php $this->displayTemplate('footer') ?>