Add widget IcingaIcon

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);
+    }
+}

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>