Add style and view scripts for first prototype

refs #6136

application/controllers/InstallController.php

@@ -0,0 +1,45 @@
+<?php
+// @codeCoverageIgnoreStart
+// {{{ICINGA_LICENSE_HEADER}}}
+// {{{ICINGA_LICENSE_HEADER}}}
+
+require_once 'Mockery/Loader.php';
+$mockeryLoader = new \Mockery\Loader;
+$mockeryLoader->register();
+
+use \Mockery;
+use Icinga\Web\Controller\ActionController;
+
+class InstallController extends ActionController
+{
+    /**
+     * Whether the controller requires the user to be authenticated
+     *
+     * The install wizard has its own authentication mechanism.
+     *
+     * @var bool
+     */
+    protected $requiresAuthentication = false;
+
+    public function indexAction()
+    {
+        $finished = false;
+        $this->view->installer = 'some log info, as html';
+        $this->view->wizard = Mockery::mock();
+        $this->view->wizard->shouldReceive('isFinished')->andReturn($finished)
+            ->shouldReceive('getTitle')->andReturn('Web')
+            ->shouldReceive('getPages')->andReturnUsing(function () {
+                $a = array(Mockery::mock(array('getTitle' => 'childTest', 'getChildPages' => array(
+                    Mockery::mock(array('getTitle' => 'child1')),
+                    Mockery::mock(array('getTitle' => 'child2'))
+                ), 'isActiveChild' => false))); for ($i=0;$i<10;$i++) { $a[] = Mockery::mock(array('getTitle' => 'title'.$i, 'getChildPages' => array())); } return $a;
+            })
+            ->shouldReceive('isActivePage')->andReturnUsing(function ($p) { return $p->getTitle() == 'title4'; })
+            ->shouldReceive('isCompletedPage')->andReturnUsing(function ($p) { return $p->getTitle() < 'title4'; })
+            ->shouldReceive('getActivePage')->andReturnUsing(function () {
+                return Mockery::mock(array('getTitle' => 'title4', '__toString' => 'teh form elements'));
+            });
+    }
+}
+
+// @codeCoverageIgnoreEnd

application/views/scripts/install/index.phtml

@@ -0,0 +1,34 @@
+<div class="wizard">
+    <div class="header">
+        <img src="<?= $this->baseUrl('img/logo_icinga-inv.png'); ?>">
+        <h1><?= $wizard->getTitle(); ?></h1>
+    </div>
+    <div class="sidebar">
+        <ul>
+<?php foreach ($wizard->getPages() as $page): ?>
+            <li class="<?= $wizard->isActivePage($page) ? 'active' : (
+                $wizard->isCompletedPage($page) ? 'complete' : 'pending'
+            ); ?>">
+                <?= $page->getTitle(); ?>
+                <ul>
+<?php foreach ($page->getChildPages() as $child): ?>
+                    <li class="child<?= $page->isActiveChild($child) ? ' active' : ''; ?>">
+                        <?= $child->getTitle(); ?>
+                    </li>
+<?php endforeach ?>
+                </ul>
+            </li>
+<?php endforeach ?>
+            <li class="install<?= $wizard->isFinished() ? ' active' : ''; ?>">
+                <?= $this->translate('Installation'); ?>
+            </li>
+        </ul>
+    </div>
+    <div class="panel">
+<?php if ($wizard->isFinished()): ?>
+        <?= $this->partial('install/index/installog.phtml', array('installer' => $installer)); ?>
+<?php else: ?>
+        <?= $wizard->getActivePage(); ?>
+<?php endif ?>
+    </div>
+</div>

application/views/scripts/install/index/installog.phtml

@@ -0,0 +1 @@
+<?= $installer; ?>

library/Icinga/Web/StyleSheet.php

@@ -22,6 +22,7 @@ class StyleSheet
         'css/icinga/monitoring-colors.less',
         'css/icinga/selection-toolbar.less',
         'css/icinga/login.less',
+        'css/icinga/install.less',
     );
 
     public static function compileForPdf()

public/css/icinga/install.less

@@ -0,0 +1,96 @@
+div.wizard {
+  div.header {
+    padding: 0.6em 0 0 1em;
+    height: 3em;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    color: #eee;
+    background-color: #555;
+    background-image: linear-gradient(top, #777, #555);
+    background-image: -o-linear-gradient(top, #777, #555);
+    background-image: -ms-linear-gradient(top, #777, #555);
+    background-image: -webkit-linear-gradient(top, #777, #555);
+
+    h1 {
+      margin: 0 3.5em;
+      display: inline-block;
+
+      font-size: 2em;
+    }
+  }
+
+  div.sidebar {
+    width: 13em;
+    position: fixed;
+    top: 3.6em;
+    left: 0;
+    bottom: 0;
+
+    background-color: #999;
+    box-shadow: inset -0.5em 0 0.5em -0.5em #555;
+    -moz-box-shadow: inset -0.5em 0 0.5em -0.5em #555;
+    -webkit-box-shadow: inset -0.5em 0 0.5em -0.5em #555;
+
+    & > ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      & > li {
+        color: #f5f5f5;
+        font-size: 1.1em;
+        padding: 0.5em;
+        margin-left: 0.5em;
+        text-shadow: #555 -1px 1px 0px;
+        border-bottom: 1px solid #888;
+
+        &.active {
+          color: black;
+          margin-left: 0;
+          padding-left: 1em;
+          text-shadow: none;
+          background-color: white;
+        }
+
+        &.complete {
+          color: green;
+        }
+
+        &.pending {
+          color: red;
+        }
+
+        &.install {
+          border-bottom: 0;
+        }
+
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+
+          li.child {
+            font-size: 0.9em;
+            padding: 0.4em 0.8em 0;
+
+            &.active {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  div.panel {
+    padding: 1em;
+    position: fixed;
+    top: 3.6em;
+    left: 13em;
+    right: 0;
+    bottom: 0;
+  }
+}