Merge pull request #18 from Icinga/feature/view-switcher-icons

View switcher icons

application/controllers/StaticController.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Icinga\Module\Icingadb\Controllers;
+
+use Icinga\Module\Icingadb\Web\Controller;
+
+class StaticController extends Controller
+{
+    /**
+     * Static routes don't require authentication
+     *
+     * @var bool
+     */
+    protected $requiresAuthentication = false;
+
+    /**
+     * Disable layout rendering as this controller doesn't provide any html layouts
+     */
+    public function init()
+    {
+        $this->_helper->viewRenderer->setNoRender(true);
+        $this->_helper->layout()->disableLayout();
+    }
+
+    public function indexAction()
+    {
+        $moduleRoot = $this->Module()->getBaseDir();
+
+        $file = $this->getParam('file');
+        $filePath = realpath($moduleRoot . '/public/' . rawurldecode($file));
+
+        if ($filePath === false) {
+            $this->httpNotFound('%s does not exist', $filePath);
+        }
+
+        $s = stat($filePath);
+        $eTag = sprintf('%x-%x-%x', $s['ino'], $s['size'], (float) str_pad($s['mtime'], 16, '0'));
+
+        $this->getResponse()->setHeader(
+            'Cache-Control',
+            'public, max-age=1814400, stale-while-revalidate=604800',
+            true
+        );
+
+        if ($this->getRequest()->getServer('HTTP_IF_NONE_MATCH') === $eTag) {
+            $this->getResponse()
+                ->setHttpResponseCode(304);
+        } else {
+            $this->getResponse()
+                ->setHeader('ETag', $eTag)
+                ->setHeader('Content-Type', mime_content_type($filePath), true)
+                ->setHeader('Last-Modified', gmdate('D, d M Y H:i:s', $s['mtime']) . ' GMT');
+
+            readfile($filePath);
+        }
+    }
+}

configuration.php

@@ -88,6 +88,7 @@ namespace Icinga\Module\Icingadb
     $this->provideCssFile('lists.less');
     $this->provideCssFile('mixins.less');
     $this->provideCssFile('widgets.less');
+    $this->provideCssFile('icinga-icons.less');
 
     $this->provideJsFile('action-list.js');
     $this->provideJsFile('migrate.js');

library/Icingadb/Widget/IcingaIcon.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Icinga\Module\Icingadb\Widget;
+
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+
+class IcingaIcon extends BaseHtmlElement
+{
+    protected $tag = 'i';
+
+    /**
+     * Create a icon element
+     *
+     * Creates a icon element from the given name and HTML attributes. The icon element's tag will be <i>. The given
+     * name will be used as automatically added CSS class for the icon element in the format 'iicon-$name'. In addition,
+     * the CSS class 'icon' will be automatically added too.
+     *
+     * @param string           $name       The name of the icon
+     * @param Attributes|array $attributes The HTML attributes for the element
+     */
+    public function __construct($name, $attributes = null)
+    {
+        $this
+            ->getAttributes()
+            ->add('class', ['icon', "iicon-$name"])
+            ->add($attributes);
+    }
+}

library/Icingadb/Widget/ViewModeSwitcher.php

@@ -5,7 +5,6 @@ namespace Icinga\Module\Icingadb\Widget;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
 use ipl\Web\Url;
-use ipl\Web\Widget\Icon;
 use ipl\Web\Widget\Link;
 
 class ViewModeSwitcher extends BaseHtmlElement
@@ -14,9 +13,9 @@ class ViewModeSwitcher extends BaseHtmlElement
 
     /** @var array View mode-icon pairs */
     public static $viewModes = [
-        'minimal'  => 'chat-empty',
-        'common'   => 'th-list',
-        'detailed' => 'chat'
+        'minimal'  => 'minimal',
+        'common'   => 'default',
+        'detailed' => 'detailed'
     ];
 
     /** @var Url */
@@ -76,7 +75,7 @@ class ViewModeSwitcher extends BaseHtmlElement
         foreach (static::$viewModes as $viewMode => $icon) {
             $url = $this->url->with($viewModeParam, $viewMode);
 
-            $link = Html::tag('li', new Link(new Icon($icon), $url));
+            $link = Html::tag('li', new Link(new IcingaIcon($icon), $url));
 
             if ($viewMode === $currentViewMode) {
                 $link->getAttributes()->add('class', 'active');

public/css/icinga-icons.less

@@ -0,0 +1,43 @@
+@font-face {
+  font-family: 'Icinga-Icons';
+  src:  url('../icingadb/static?file=font/Icinga-Icons.eot');
+  src:  url('../icingadb/static?file=font/Icinga-Icons.eot') format('embedded-opentype'),
+  url('../icingadb/static?file=font/Icinga-Icons.ttf') format('truetype'),
+  url('../icingadb/static?file=font/Icinga-Icons.woff') format('woff'),
+  url('../icingadb/static?file=font/Icinga-Icons.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="iicon-"]:before, [class*=" iicon-"]:before {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'Icinga-Icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1em;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+}
+
+.iicon-minimal:before {
+  content: "\e900";
+}
+.iicon-detailed:before {
+  content: "\e901";
+}
+.iicon-default:before {
+  content: "\e902";
+}

public/css/module.less

@@ -68,8 +68,12 @@
     a {
       display: block;
       height: 100%;
-      padding: 0.5em 1em;
+      padding: .3em .6em;
       width: 100%;
+
+      .icon:before {
+        font-size: 16px; // Pixels, because the glyphs get blurry otherwise
+      }
     }
   }
 }

public/font/Icinga-Icons.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="Icinga-Icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="minimal" d="M192.009 831.995c0-35.361-28.665-64.026-64.026-64.026s-64.026 28.665-64.026 64.026c0 35.361 28.665 64.026 64.026 64.026s64.026-28.665 64.026-64.026zM192.009 639.671c0-35.361-28.665-64.026-64.026-64.026s-64.026 28.665-64.026 64.026c0 35.361 28.665 64.026 64.026 64.026s64.026-28.665 64.026-64.026zM192.009 447.671c0-35.361-28.665-64.026-64.026-64.026s-64.026 28.665-64.026 64.026c0 35.361 28.665 64.026 64.026 64.026s64.026-28.665 64.026-64.026zM256.005 863.997h704.001v-64.005h-704.001v64.005zM256.005 479.674h704.001v-64.005h-704.001v64.005zM256.005 671.674h704.001v-64.005h-704.001v64.005zM256.005 287.674h704.001v-64.005h-704.001v64.005zM256.005 95.674h704.001v-64.005h-704.001v64.005zM192.009 255.348c0-35.361-28.665-64.026-64.026-64.026s-64.026 28.665-64.026 64.026c0 35.361 28.665 64.026 64.026 64.026s64.026-28.665 64.026-64.026zM192.009 63.671c0-35.361-28.665-64.026-64.026-64.026s-64.026 28.665-64.026 64.026c0 35.361 28.665 64.026 64.026 64.026s64.026-28.665 64.026-64.026z" />
+<glyph unicode="&#xe901;" glyph-name="detailed" d="M320.007 831.679h639.993v-191.358h-639.993v191.358zM320.007 575.997h639.993v-63.992h-639.993v63.992zM256.014 736.317c0-53.041-42.998-96.039-96.039-96.039s-96.039 42.998-96.039 96.039c0 53.041 42.998 96.039 96.039 96.039s96.039-42.998 96.039-96.039zM256.014 287.992c0-53.041-42.998-96.039-96.039-96.039s-96.039 42.998-96.039 96.039c0 53.041 42.998 96.039 96.039 96.039s96.039-42.998 96.039-96.039zM320.007 384.004h639.993v-192.005h-639.993v192.005zM320.007 128.005h639.993v-63.992h-639.993v63.992z" />
+<glyph unicode="&#xe902;" glyph-name="default" d="M256.015 767.992c0-53.041-42.998-96.039-96.039-96.039s-96.039 42.998-96.039 96.039c0 53.041 42.998 96.039 96.039 96.039s96.039-42.998 96.039-96.039zM384.001 864h576.002v-192.008h-576.002v192.008zM384.001 543.998h576.002v-192.008h-576.002v192.008zM384.001 223.998h576.002v-192.008h-576.002v192.008zM256.015 447.99c0-53.041-42.998-96.039-96.039-96.039s-96.039 42.998-96.039 96.039c0 53.041 42.998 96.039 96.039 96.039s96.039-42.998 96.039-96.039zM256.015 127.99c0-53.041-42.998-96.039-96.039-96.039s-96.039 42.998-96.039 96.039c0 53.041 42.998 96.039 96.039 96.039s96.039-42.998 96.039-96.039z" />
+</font></defs></svg>