From c2ac8418715e103d2fd6d38d5388e17a0a4eb2e5 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@netways.de>
Date: Wed, 30 Sep 2015 17:07:55 +0200
Subject: [PATCH] Make the about page pretty

refs #9247
---
 application/controllers/AboutController.php |  15 +-
 application/views/scripts/about/index.phtml | 182 ++++++++++++++------
 library/Icinga/Web/StyleSheet.php           |   3 +-
 library/Icinga/Web/View/helpers/url.php     |   5 +
 4 files changed, 144 insertions(+), 61 deletions(-)

diff --git a/application/controllers/AboutController.php b/application/controllers/AboutController.php
index f9f5be5b0..77d829679 100644
--- a/application/controllers/AboutController.php
+++ b/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');
     }
 }
diff --git a/application/views/scripts/about/index.phtml b/application/views/scripts/about/index.phtml
index cd9a9aabd..6c20a3e77 100644
--- a/application/views/scripts/about/index.phtml
+++ b/application/views/scripts/about/index.phtml
@@ -1,58 +1,128 @@
-<div class="content">
-    <h1>Icinga Web 2</h1>
-    <?php
-    $versionInfo = array();
-    foreach (array(
-        'appVersion'    => $this->translate('Version: %s'),
-        'gitCommitID'   => $this->translate('Git commit ID: %s'),
-        'gitCommitDate' => $this->translate('Git commit date: %s')
-    ) as $key => $label) {
-        if (array_key_exists($key, $version) && null !== ($value = $version[$key])) {
-            $versionInfo[] = sprintf($label, htmlspecialchars($value));
-        }
-    }
-
-    ?>
-    <p><?= implode('<br>', $versionInfo) ?></p>
-    <p>Copyright &copy; 2013-2015&emsp;<a href="https://www.icinga.org"><?=
-        $this->translate('The Icinga Project')
-    ?></a><br><?= $this->translate('License: GNU GPL v2 or later') ?></p>
-    <p><a href="https://dev.icinga.org/projects/icingaweb2"><?=
-        $this->translate('Report a bug')
-    ?></a>&emsp;<a href="https://www.icinga.org/services/support/"><?=
-        $this->translate('Support')
-    ?></a>&emsp;<a href="https://wiki.icinga.org/dashboard.action"><?=
-        $this->translate('Icinga Wiki')
-    ?></a>&emsp;<a href="http://docs.icinga.org/"><?=
-        $this->translate('Icinga Documentation')
-    ?></a><br><a href="https://twitter.com/icinga"><?=
-        $this->translate('Icinga on Twitter')
-    ?></a>&emsp;<a href="https://www.facebook.com/icinga"><?=
-        $this->translate('Icinga on Facebook')
-    ?></a></p>
-    <h1><?= $this->translate('Loaded modules') ?></h1>
-    <table class="action alternating" data-base-target="_next">
-      <thead>
-        <tr>
-          <th><?= $this->translate('Name') ?></th>
-          <th><?= $this->translate('Version') ?></th>
-        </tr>
-      </thead>
-      <tbody>
-      <?php
-      foreach ($modules as $module) {
-        $name = $module->getName();
-      ?>
-        <tr>
-          <td><?= $hasPermission ? $this->qlink(
-            $name,
-            'config/module/',
-            array('name' => $name),
-            array('title' => sprintf($this->translate('Show the overview of the %s module'), $name))
-          ) : $name ?></td>
-          <td><?= $module->getVersion() ?></td>
-        </tr>
-      <?php } ?>
-      </tbody>
+<div class="controls">
+    <?= $tabs; ?>
+</div>
+<div class="content about">
+    <?= $this->img(
+        'img/logo_icinga_big_dark.png',
+        null,
+        array(
+            'width' => 400,
+            'class' => 'about-logo'
+        )
+    ); ?>
+    <p class="about-version">
+    <?php if (isset($version['appVersion'])): ?>
+        <strong><?= $this->translate('Version'); ?>:</strong> <?= $this->escape($version['appVersion']); ?>
+    <?php endif ?>
+    <?php if (isset($version['gitCommitID'])): ?>
+        <br>
+        <strong><?= $this->translate('Git commit ID'); ?>:</strong> <?= $this->escape($version['gitCommitID']); ?>
+    <?php endif ?>
+    <?php if (isset($version['gitCommitDate'])): ?>
+        <br>
+        <strong><?= $this->translate('Git commit date'); ?>:</strong> <?= $this->escape($version['gitCommitDate']); ?>
+    <?php endif ?>
+    </p>
+    <p class="about-license">
+        <strong><?= $this->translate('Copyright'); ?></strong>: &copy; 2013-<?= date('Y'); ?> <?= $this->qlink(
+            $this->translate('The Icinga Project'),
+            'https://www.icinga.org',
+            null,
+            array(
+                'target' => '_blank'
+            )
+        ); ?>
+        <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>
+                <th><?= $this->translate('Version') ?></th>
+            </tr>
+        </thead>
+        <tbody>
+        <?php foreach ($modules as $module): ?>
+            <tr>
+                <td>
+                <?php if ($this->hasPermission('config/modules')): ?>
+                    <?= $this->qlink(
+                        $module->getName(),
+                        'config/module/',
+                        array('name' => $module->getName()),
+                        array('title' => sprintf($this->translate('Show the overview of the %s module'), $module->getName()))
+                    ); ?>
+                <?php else: ?>
+                    <?= $this->escape($module->getName()); ?>
+                <?php endif ?>
+                <td>
+                    <?= $this->escape($module->getVersion()); ?>
+                </td>
+            </tr>
+        <?php endforeach ?>
+        </tbody>
     </table>
 </div>
diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php
index dd45743fd..38f894487 100644
--- a/library/Icinga/Web/StyleSheet.php
+++ b/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()
diff --git a/library/Icinga/Web/View/helpers/url.php b/library/Icinga/Web/View/helpers/url.php
index 06ace7f19..962f3cb6e 100644
--- a/library/Icinga/Web/View/helpers/url.php
+++ b/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(