Show the user which pages he already visited while navigating back

refs #7163
This commit is contained in:
Johannes Meyer 2014-10-17 15:41:25 +02:00
parent 768d8da4f8
commit f453fd06e8
2 changed files with 30 additions and 5 deletions

View File

@ -6,6 +6,12 @@ $configPages = array_slice($pages, 2, count($pages) - 3, true);
$currentPos = array_search($wizard->getCurrentPage(), $pages, true); $currentPos = array_search($wizard->getCurrentPage(), $pages, true);
list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($configPages) / 2, true); list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($configPages) / 2, true);
$visitedPages = array_keys($wizard->getPageData());
$maxProgress = @max(array_keys(array_filter(
$pages,
function ($page) use ($visitedPages) { return in_array($page->getName(), $visitedPages); }
)));
?> ?>
<div id="setup" data-base-target="layout"> <div id="setup" data-base-target="layout">
<div class="header"> <div class="header">
@ -13,7 +19,9 @@ list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($con
<div class="progress-bar"> <div class="progress-bar">
<div class="step" style="width: 10%;"> <div class="step" style="width: 10%;">
<h1><?= t('Welcome', 'setup.progress'); ?></h1> <h1><?= t('Welcome', 'setup.progress'); ?></h1>
<?php $stateClass = $finished || $currentPos > 0 ? 'complete' : 'active'; ?> <?php $stateClass = $finished || $currentPos > 0 ? 'complete' : (
$maxProgress > 0 ? 'visited' : 'active'
); ?>
<table><tbody><tr> <table><tbody><tr>
<td class="left"></td> <td class="left"></td>
<td class="middle"><div class="bubble <?= $stateClass; ?>"></div></td> <td class="middle"><div class="bubble <?= $stateClass; ?>"></div></td>
@ -22,7 +30,11 @@ list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($con
</div> </div>
<div class="step" style="width: 10%;"> <div class="step" style="width: 10%;">
<h1><?= t('Requirements', 'setup.progress'); ?></h1> <h1><?= t('Requirements', 'setup.progress'); ?></h1>
<?php $stateClass = $currentPos === 1 ? ' active' : ($finished || $currentPos > 1 ? ' complete' : ''); ?> <?php $stateClass = $finished || $currentPos > 1 ? ' complete' : (
$maxProgress > 1 ? ' visited' : (
$currentPos === 1 ? ' active' : ''
)
); ?>
<table><tbody><tr> <table><tbody><tr>
<td class="left"><div class="line left<?= $stateClass; ?>"></div></td> <td class="left"><div class="line left<?= $stateClass; ?>"></div></td>
<td class="middle"><div class="bubble<?= $stateClass; ?>"></div></td> <td class="middle"><div class="bubble<?= $stateClass; ?>"></div></td>
@ -39,7 +51,9 @@ list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($con
$lineWidth = round(100 / count($configPagesLeft), 2, PHP_ROUND_HALF_DOWN); $lineWidth = round(100 / count($configPagesLeft), 2, PHP_ROUND_HALF_DOWN);
?> ?>
<?php foreach ($configPagesLeft as $pos => $page): ?> <?php foreach ($configPagesLeft as $pos => $page): ?>
<?php $stateClass = $finished || $pos < $currentPos ? ' complete' : ($currentPos > 1 ? ' active' : ''); ?> <?php $stateClass = $finished || $pos < $currentPos ? ' complete' : (
$pos < $maxProgress ? ' visited' : ($currentPos > 1 ? ' active' : '')
); ?>
<?php if ($page === $firstPage): ?> <?php if ($page === $firstPage): ?>
<div class="line left<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-right: 0"></div> <div class="line left<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-right: 0"></div>
<?php elseif ($page === $lastPage): ?> <?php elseif ($page === $lastPage): ?>
@ -50,7 +64,12 @@ list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($con
<?php endforeach ?> <?php endforeach ?>
</td> </td>
<td class="middle"> <td class="middle">
<div class="bubble<?= array_key_exists($currentPos, $configPagesLeft) ? ' active' : ($finished || $currentPos > 1 ? ' complete' : ''); ?>"></div> <div class="bubble<?= array_key_exists($currentPos, $configPagesLeft) ? (
key($configPagesRight) <= $maxProgress ? ' visited' : ' active') : (
$finished || $currentPos > 1 ? ' complete' : (
key($configPagesRight) < $maxProgress ? ' visited' : ''
)
); ?>"></div>
</td> </td>
<td class="right"> <td class="right">
<?php <?php
@ -59,7 +78,9 @@ list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($con
$lineWidth = round(100 / count($configPagesRight), 2, PHP_ROUND_HALF_DOWN); $lineWidth = round(100 / count($configPagesRight), 2, PHP_ROUND_HALF_DOWN);
?> ?>
<?php foreach ($configPagesRight as $pos => $page): ?> <?php foreach ($configPagesRight as $pos => $page): ?>
<?php $stateClass = $finished || $pos < $currentPos ? ' complete' : ($currentPos > 1 ? ' active' : ''); ?> <?php $stateClass = $finished || $pos < $currentPos ? ' complete' : (
$pos < $maxProgress ? ' visited' : ($currentPos > 1 ? ' active' : '')
); ?>
<?php if ($page === $firstPage): ?> <?php if ($page === $firstPage): ?>
<div class="line<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-left: -0.1em;"></div> <div class="line<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-left: -0.1em;"></div>
<?php elseif ($page === $lastPage): ?> <?php elseif ($page === $lastPage): ?>

View File

@ -83,6 +83,10 @@
&.complete { &.complete {
background-color: #2e8b57; background-color: #2e8b57;
} }
&.visited {
background-color: #77bf97;
}
} }
} }
} }