tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add progress bar 

refs #7163
This commit is contained in:
Johannes Meyer 2014-10-14 16:14:28 +02:00
parent 0777848a84
commit c0df55c079
3 changed files with 186 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
application/controllers/SetupController.php
View File

@ -36,7 +36,8 @@ class SetupController extends ActionController
$this->view->report = $installer->getReport();
} else {
$wizard->handleRequest();
}
$this->view->wizard = $wizard;
}
}
}

98
application/views/scripts/setup/index.phtml
View File

@ -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 class="setup-content">
<?php if (isset($wizard)): ?>
<?= $this->render('setup/parts/wizard.phtml'); ?>
<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">
<?php if ($finished): ?>
<?= $this->render('setup/parts/install.phtml'); ?>
<?php else: ?>
<?= $this->render('setup/parts/wizard.phtml'); ?>
<?php endif ?>
</div>
</div>

89
public/css/icinga/setup.less
View File

@ -2,9 +2,96 @@
overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
}
#setup .setup-content {
#setup {
.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 {
margin-top: 1.5em;