From c4c248cbb76d4a8d967765cefe3855f76973ac54 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@netways.de>
Date: Thu, 22 Jan 2015 10:57:41 +0100
Subject: [PATCH] Make the ModulePage's design more appealing

refs #8191
---
 .../setup/application/forms/ModulePage.php    | 16 +++----
 .../views/scripts/form/setup-modules.phtml    | 24 +++++++++++
 public/css/icinga/setup.less                  | 42 +++++++++++++++++++
 3 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 modules/setup/application/views/scripts/form/setup-modules.phtml

diff --git a/modules/setup/application/forms/ModulePage.php b/modules/setup/application/forms/ModulePage.php
index 7add2bb81..ef765c0e7 100644
--- a/modules/setup/application/forms/ModulePage.php
+++ b/modules/setup/application/forms/ModulePage.php
@@ -19,7 +19,7 @@ class ModulePage extends Form
     public function init()
     {
         $this->setName('setup_modules');
-        //$this->setViewScript('form/setup-modules.phtml');
+        $this->setViewScript('form/setup-modules.phtml');
 
         $this->modulePaths = array();
         if (($appModulePath = realpath(Icinga::app()->getApplicationDir() . '/../modules')) !== false) {
@@ -34,15 +34,11 @@ class ModulePage extends Form
                 'checkbox',
                 $module->getName(),
                 array(
-                    'label' => ucfirst($module->getName()),
-                    'value' => $module->getName() === 'monitoring' ? 1 : 0
-                )
-            );
-            $this->addElement(
-                'note',
-                $module->getName() . '_desc',
-                array(
-                    'value' => $module->getDescription()
+                    'required'      => true,
+                    'description'   => $module->getDescription(),
+                    'label'         => ucfirst($module->getName()),
+                    'value'         => $module->getName() === 'monitoring' ? 1 : 0,
+                    'decorators'    => array('ViewHelper')
                 )
             );
         }
diff --git a/modules/setup/application/views/scripts/form/setup-modules.phtml b/modules/setup/application/views/scripts/form/setup-modules.phtml
new file mode 100644
index 000000000..8d8e9ecf9
--- /dev/null
+++ b/modules/setup/application/views/scripts/form/setup-modules.phtml
@@ -0,0 +1,24 @@
+<?php
+
+use Icinga\Web\Wizard;
+
+?>
+<form id="<?= $form->getName(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>">
+<h2><?= $this->translate('Modules', 'setup.page.title'); ?></h2>
+<p><?= $this->translate('The following modules were found in your Icinga Web 2 installation. To enable and configure a module, just tick it and click "Next".'); ?></p>
+<?php foreach ($form->getElements() as $element): ?>
+ <?php if (! in_array($element->getName(), array(Wizard::BTN_PREV, Wizard::BTN_NEXT, $form->getTokenElementName(), $form->getUidElementName()))): ?>
+  <div class="module">
+    <h3><label for="<?= $element->getId(); ?>"><strong><?= $element->getLabel(); ?></strong></label></h3>
+    <label for="<?= $element->getId(); ?>"><?= $element->getDescription(); ?></label>
+    <?= $element; ?>
+  </div>
+ <?php endif ?>
+<?php endforeach ?>
+  <?= $form->getElement($form->getTokenElementName()); ?>
+  <?= $form->getElement($form->getUidElementName()); ?>
+  <div class="buttons">
+    <?= $form->getElement(Wizard::BTN_PREV); ?>
+    <?= $form->getElement(Wizard::BTN_NEXT); ?>
+  </div>
+</form>
diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less
index 0f69355b3..d6692b501 100644
--- a/public/css/icinga/setup.less
+++ b/public/css/icinga/setup.less
@@ -394,3 +394,45 @@
     margin-top: 0;
   }
 }
+
+#setup_modules {
+  div.module {
+    float: left;
+    width: 15em;
+    height: 15em;
+    margin: 1em;
+    padding: 0.3em;
+    border: 1px solid #ccc;
+    background-color: snow;
+
+    h3 {
+      border: none;
+      margin: 0.5em 0;
+      text-align: center;
+
+      label {
+        margin: 0;
+        width: 15em;
+        cursor: pointer;
+      }
+    }
+
+    h3 + label {
+      width: 13.5em;
+      height: 13.9em;
+      overflow: auto;
+      cursor: pointer;
+      font-weight: normal;
+    }
+
+    input[type=checkbox] {
+      height: 10em;
+      float: right;
+    }
+  }
+
+  div.buttons {
+    padding-top: 1em;
+    clear: both;
+  }
+}
\ No newline at end of file