Make the about page pretty

refs #9247

application/controllers/AboutController.php

@@ -3,16 +3,23 @@
 
 namespace Icinga\Controllers;
 
-use Icinga\Application\Version;
-use Icinga\Web\Controller\ActionController;
 use Icinga\Application\Icinga;
+use Icinga\Application\Version;
+use Icinga\Web\Controller;
 
-class AboutController extends ActionController
+class AboutController extends Controller
 {
     public function indexAction()
     {
-        $this->view->hasPermission = $this->hasPermission('config/modules');
         $this->view->version = Version::get();
         $this->view->modules = Icinga::app()->getModuleManager()->getLoadedModules();
+        $this->view->tabs = $this->getTabs()->add(
+            'about',
+            array(
+                'label' => $this->translate('About'),
+                'title' => $this->translate('About Icinga Web 2'),
+                'url'   => 'about'
+            )
+        )->activate('about');
     }
 }

application/views/scripts/about/index.phtml

@@ -1,37 +1,103 @@
-<div class="content">
+<div class="controls">
-    <h1>Icinga Web 2</h1>
+    <?= $tabs; ?>
-    <?php
+</div>
-    $versionInfo = array();
+<div class="content about">
-    foreach (array(
+    <?= $this->img(
-        'appVersion'    => $this->translate('Version: %s'),
+        'img/logo_icinga_big_dark.png',
-        'gitCommitID'   => $this->translate('Git commit ID: %s'),
+        null,
-        'gitCommitDate' => $this->translate('Git commit date: %s')
+        array(
-    ) as $key => $label) {
+            'width' => 400,
-        if (array_key_exists($key, $version) && null !== ($value = $version[$key])) {
+            'class' => 'about-logo'
-            $versionInfo[] = sprintf($label, htmlspecialchars($value));
+        )
-        }
+    ); ?>
-    }
+    <p class="about-version">
-
+    <?php if (isset($version['appVersion'])): ?>
-    ?>
+        <strong><?= $this->translate('Version'); ?>:</strong> <?= $this->escape($version['appVersion']); ?>
-    <p><?= implode('<br>', $versionInfo) ?></p>
+    <?php endif ?>
-    <p>Copyright &copy; 2013-2015&emsp;<a href="https://www.icinga.org"><?=
+    <?php if (isset($version['gitCommitID'])): ?>
-        $this->translate('The Icinga Project')
+        <br>
-    ?></a><br><?= $this->translate('License: GNU GPL v2 or later') ?></p>
+        <strong><?= $this->translate('Git commit ID'); ?>:</strong> <?= $this->escape($version['gitCommitID']); ?>
-    <p><a href="https://dev.icinga.org/projects/icingaweb2"><?=
+    <?php endif ?>
-        $this->translate('Report a bug')
+    <?php if (isset($version['gitCommitDate'])): ?>
-    ?></a>&emsp;<a href="https://www.icinga.org/services/support/"><?=
+        <br>
-        $this->translate('Support')
+        <strong><?= $this->translate('Git commit date'); ?>:</strong> <?= $this->escape($version['gitCommitDate']); ?>
-    ?></a>&emsp;<a href="https://wiki.icinga.org/dashboard.action"><?=
+    <?php endif ?>
-        $this->translate('Icinga Wiki')
+    </p>
-    ?></a>&emsp;<a href="http://docs.icinga.org/"><?=
+    <p class="about-license">
-        $this->translate('Icinga Documentation')
+        <strong><?= $this->translate('Copyright'); ?></strong>: &copy; 2013-<?= date('Y'); ?> <?= $this->qlink(
-    ?></a><br><a href="https://twitter.com/icinga"><?=
+            $this->translate('The Icinga Project'),
-        $this->translate('Icinga on Twitter')
+            'https://www.icinga.org',
-    ?></a>&emsp;<a href="https://www.facebook.com/icinga"><?=
+            null,
-        $this->translate('Icinga on Facebook')
+            array(
-    ?></a></p>
+                'target' => '_blank'
-    <h1><?= $this->translate('Loaded modules') ?></h1>
+            )
-    <table class="action alternating" data-base-target="_next">
+        ); ?>
+        <br>
+        <strong><?= $this->translate('License'); ?></strong>: GNU GPL v2+
+    </p>
+    <p class="about-social">
+        <?= $this->qlink(
+            null,
+            'https://www.twitter.com/icinga',
+            null,
+            array(
+                'target'    => '_blank',
+                'icon'      => 'host',//'twitter',
+                'title'     => $this->translate('Icinga on Twitter')
+            )
+        ); ?> <?= $this->qlink(
+            null,
+            'https://www.facebook.com/icinga',
+            null,
+            array(
+                'target'    => '_blank',
+                'icon'      => 'service',//'facebook-squared',
+                'title'     => $this->translate('Icinga on Facebook')
+            )
+        ); ?>
+    </p>
+    <div class="about-urls">
+        <div><?= $this->qlink(
+            null,
+            'https://dev.icinga.org/projects/icingaweb2',
+            null,
+            array(
+                'target'    => '_blank',
+                'img'       => 'img/bugreport.png',
+                'title'     => $this->translate('Report a bug')
+            )
+        ); ?> <?= $this->qlink(
+            null,
+            'https://www.icinga.org/services/support',
+            null,
+            array(
+                'target'    => '_blank',
+                'img'       => 'img/support.png',
+                'title'     => $this->translate('Support / Mailinglists')
+            )
+        ); ?></div>
+        <div><?= $this->qlink(
+            null,
+            'https://wiki.icinga.org',
+            null,
+            array(
+                'target'    => '_blank',
+                'img'       => 'img/wiki.png',
+                'title'     => $this->translate('Icinga Wiki')
+            )
+        ); ?> <?= $this->qlink(
+            null,
+            'https://docs.icinga.org/',
+            null,
+            array(
+                'target'    => '_blank',
+                'img'       => 'img/docs.png',
+                'title'     => $this->translate('Icinga Documentation')
+            )
+        ); ?></div>
+    </div>
+    <h2><?= $this->translate('Loaded modules') ?></h2>
+    <table class="action alternating about-modules" data-base-target="_next">
         <thead>
             <tr>
                 <th><?= $this->translate('Name') ?></th>
@@ -39,20 +105,24 @@
             </tr>
         </thead>
         <tbody>
-      <?php
+        <?php foreach ($modules as $module): ?>
-      foreach ($modules as $module) {
-        $name = $module->getName();
-      ?>
             <tr>
-          <td><?= $hasPermission ? $this->qlink(
+                <td>
-            $name,
+                <?php if ($this->hasPermission('config/modules')): ?>
+                    <?= $this->qlink(
+                        $module->getName(),
                         'config/module/',
-            array('name' => $name),
+                        array('name' => $module->getName()),
-            array('title' => sprintf($this->translate('Show the overview of the %s module'), $name))
+                        array('title' => sprintf($this->translate('Show the overview of the %s module'), $module->getName()))
-          ) : $name ?></td>
+                    ); ?>
-          <td><?= $module->getVersion() ?></td>
+                <?php else: ?>
+                    <?= $this->escape($module->getName()); ?>
+                <?php endif ?>
+                <td>
+                    <?= $this->escape($module->getVersion()); ?>
+                </td>
             </tr>
-      <?php } ?>
+        <?php endforeach ?>
         </tbody>
     </table>
 </div>

library/Icinga/Web/StyleSheet.php

@@ -29,7 +29,8 @@ class StyleSheet
         'css/icinga/selection-toolbar.less',
         'css/icinga/login.less',
         'css/icinga/logo.less',
-        'css/icinga/controls.less'
+        'css/icinga/controls.less',
+        'css/icinga/about.less'
     );
 
     public static function compileForPdf()

library/Icinga/Web/View/helpers/url.php

@@ -43,6 +43,11 @@ $this->addHelperFunction('qlink', function ($title, $url, $params = null, $prope
             $icon = $view->icon($properties['icon']);
             unset($properties['icon']);
         }
+
+        if (array_key_exists('img', $properties)) {
+            $icon = $view->img($properties['img']);
+            unset($properties['img']);
+        }
     }
 
     return sprintf(