Johannes Meyer
parent
0777848a84
commit
c0df55c079
|
|
@ -36,7 +36,8 @@ class SetupController extends ActionController
|
||||||
$this->view->report = $installer->getReport();
|
$this->view->report = $installer->getReport();
|
||||||
} else {
|
} else {
|
||||||
$wizard->handleRequest();
|
$wizard->handleRequest();
|
||||||
$this->view->wizard = $wizard;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$this->view->wizard = $wizard;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,101 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$pages = $wizard->getPages();
|
||||||
|
$finished = isset($success);
|
||||||
|
$configPages = array_slice($pages, 2, count($pages) - 3, true);
|
||||||
|
$currentPos = array_search($wizard->getCurrentPage(), $pages, true);
|
||||||
|
list($configPagesLeft, $configPagesRight) = array_chunk($configPages, count($configPages) / 2, true);
|
||||||
|
|
||||||
|
?>
|
||||||
<div id="setup" class="container">
|
<div id="setup" class="container">
|
||||||
|
<div class="header">
|
||||||
|
<?= $this->img('img/logo_icinga_big.png'); ?>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="step" style="width: 10%;">
|
||||||
|
<h1><?= t('Welcome', 'setup.progress'); ?></h1>
|
||||||
|
<?php $stateClass = $finished || $currentPos > 0 ? 'complete' : 'active'; ?>
|
||||||
|
<table><tbody><tr>
|
||||||
|
<td class="left"></td>
|
||||||
|
<td class="middle"><div class="bubble <?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="right"><div class="line right <?= $stateClass; ?>"></div></td>
|
||||||
|
</tr></tbody></table>
|
||||||
|
</div>
|
||||||
|
<div class="step" style="width: 10%;">
|
||||||
|
<h1><?= t('Requirements', 'setup.progress'); ?></h1>
|
||||||
|
<?php $stateClass = $currentPos === 1 ? ' active' : ($finished || $currentPos > 1 ? ' complete' : ''); ?>
|
||||||
|
<table><tbody><tr>
|
||||||
|
<td class="left"><div class="line left<?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="middle"><div class="bubble<?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="right"><div class="line right<?= $stateClass; ?>"></div></td>
|
||||||
|
</tr></tbody></table>
|
||||||
|
</div>
|
||||||
|
<div class="step" style="width: 60%;">
|
||||||
|
<h1><?= t('Configuration', 'setup.progress'); ?></h1>
|
||||||
|
<table><tbody><tr>
|
||||||
|
<td class="left">
|
||||||
|
<?php
|
||||||
|
$firstPage = current($configPagesLeft);
|
||||||
|
$lastPage = end($configPagesLeft);
|
||||||
|
$lineWidth = round(100 / count($configPagesLeft), 2, PHP_ROUND_HALF_DOWN);
|
||||||
|
?>
|
||||||
|
<?php foreach ($configPagesLeft as $pos => $page): ?>
|
||||||
|
<?php $stateClass = $finished || $pos < $currentPos ? ' complete' : ($currentPos > 1 ? ' active' : ''); ?>
|
||||||
|
<?php if ($page === $firstPage): ?>
|
||||||
|
<div class="line left<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-right: 0"></div>
|
||||||
|
<?php elseif ($page === $lastPage): ?>
|
||||||
|
<div class="line<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-right: -0.1em;"></div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="line<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%;"></div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</td>
|
||||||
|
<td class="middle">
|
||||||
|
<div class="bubble<?= array_key_exists($currentPos, $configPagesLeft) ? ' active' : ($finished || $currentPos > 1 ? ' complete' : ''); ?>"></div>
|
||||||
|
</td>
|
||||||
|
<td class="right">
|
||||||
|
<?php
|
||||||
|
$firstPage = current($configPagesRight);
|
||||||
|
$lastPage = end($configPagesRight);
|
||||||
|
$lineWidth = round(100 / count($configPagesRight), 2, PHP_ROUND_HALF_DOWN);
|
||||||
|
?>
|
||||||
|
<?php foreach ($configPagesRight as $pos => $page): ?>
|
||||||
|
<?php $stateClass = $finished || $pos < $currentPos ? ' complete' : ($currentPos > 1 ? ' active' : ''); ?>
|
||||||
|
<?php if ($page === $firstPage): ?>
|
||||||
|
<div class="line<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-left: -0.1em;"></div>
|
||||||
|
<?php elseif ($page === $lastPage): ?>
|
||||||
|
<div class="line right<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%; margin-left: 0;"></div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="line<?= $stateClass; ?>" style="float: left; width: <?= $lineWidth; ?>%;"></div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</td>
|
||||||
|
</tr></tbody></table>
|
||||||
|
</div>
|
||||||
|
<div class="step" style="width: 10%;">
|
||||||
|
<h1><?= t('Summary', 'setup.progress'); ?></h1>
|
||||||
|
<?php $stateClass = $finished ? ' complete' : ($currentPos === count($pages) - 1 ? ' active' : ''); ?>
|
||||||
|
<table><tbody><tr>
|
||||||
|
<td class="left"><div class="line left<?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="middle"><div class="bubble<?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="right"><div class="line right<?= $stateClass; ?>"></div></td>
|
||||||
|
</tr></tbody></table>
|
||||||
|
</div>
|
||||||
|
<div class="step" style="width: 10%;">
|
||||||
|
<h1><?= t('Installation', 'setup.progress'); ?></h1>
|
||||||
|
<?php $stateClass = $finished ? ' active' : ''; ?>
|
||||||
|
<table><tbody><tr>
|
||||||
|
<td class="left"><div class="line left<?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="middle"><div class="bubble<?= $stateClass; ?>"></div></td>
|
||||||
|
<td class="right"></td>
|
||||||
|
</tr></tbody></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="setup-content">
|
<div class="setup-content">
|
||||||
<?php if (isset($wizard)): ?>
|
<?php if ($finished): ?>
|
||||||
<?= $this->render('setup/parts/wizard.phtml'); ?>
|
|
||||||
<?php else: ?>
|
|
||||||
<?= $this->render('setup/parts/install.phtml'); ?>
|
<?= $this->render('setup/parts/install.phtml'); ?>
|
||||||
|
<?php else: ?>
|
||||||
|
<?= $this->render('setup/parts/wizard.phtml'); ?>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2,8 +2,95 @@
|
||||||
overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
|
overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
|
||||||
}
|
}
|
||||||
|
|
||||||
#setup .setup-content {
|
#setup {
|
||||||
margin: 1.5em 1.8em 0 1.8em;
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 5.4em;
|
||||||
|
background-color: #555;
|
||||||
|
background-image: -moz-linear-gradient(top, #777, #555);
|
||||||
|
background-image: -webkit-linear-gradient(top, #777, #555);
|
||||||
|
background-image: -o-linear-gradient(top, #777, #555);
|
||||||
|
background-image: -ms-linear-gradient(top, #777, #555);
|
||||||
|
background-image: linear-gradient(top, #777, #555);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 12.5em;
|
||||||
|
margin: 0.5em;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 1em;
|
||||||
|
|
||||||
|
.step {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
font-size: 1em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin-top: 0.7em;
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&.left, &.right {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
background-color: lightgrey;
|
||||||
|
|
||||||
|
&.line {
|
||||||
|
height: 0.5em;
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
margin-left: 0.1em;
|
||||||
|
margin-right: -0.1em;
|
||||||
|
border-top-left-radius: 0.5em;
|
||||||
|
border-bottom-left-radius: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
margin-left: -0.1em;
|
||||||
|
margin-right: 0.1em;
|
||||||
|
border-top-right-radius: 0.5em;
|
||||||
|
border-bottom-right-radius: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bubble {
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
|
||||||
|
// Make sure that such a bubble overlays lines
|
||||||
|
position: relative;
|
||||||
|
z-index: 1337;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.complete {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setup-content {
|
||||||
|
margin: 1.5em 1.8em 0 1.8em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#setup div.buttons {
|
#setup div.buttons {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue