Merge pull request #149 from Icinga/utilize-ipl-web-fonts

Utilize ipl web fonts
2026-02-19 02:27:57 -05:00 · 2020-12-02 10:58:36 +01:00 · 2020-12-02 10:58:36 +01:00 · 3acbe8db13
commit 3acbe8db13
parent 93a8a0a5cb eb09ebd4ec
10 changed files with 13 additions and 97 deletions
--- a/configuration.php
+++ b/configuration.php
@ -229,7 +229,6 @@ 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');
--- a/library/Icingadb/Widget/Detail/QuickActions.php
+++ b/library/Icingadb/Widget/Detail/QuickActions.php
@ -14,6 +14,7 @@ use Icinga\Module\Monitoring\Forms\Command\Object\RemoveAcknowledgementCommandFo
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
 use ipl\Html\HtmlString;
+use ipl\Web\Widget\Icon;

 class QuickActions extends BaseHtmlElement
 {
@ -47,7 +48,7 @@ class QuickActions extends BaseHtmlElement
                $this->assembleAction(
                    'acknowledge',
                    t('Acknowledge'),
-                    'icon-edit',
+                    'edit',
                    t('Acknowledge this problem, suppress all future notifications for it and tag it as being handled')
                );
            }
@ -70,7 +71,7 @@ class QuickActions extends BaseHtmlElement
            $this->assembleAction(
                'addComment',
                t('Comment', 'verb'),
-                'icon-comment-empty',
+                'comment',
                t('Add a new comment')
            );
        }
@ -79,7 +80,7 @@ class QuickActions extends BaseHtmlElement
            $this->assembleAction(
                'sendCustomNotification',
                t('Notification'),
-                'icon-bell',
+                'bell',
                t('Send a custom notification')
            );
        }
@ -88,7 +89,7 @@ class QuickActions extends BaseHtmlElement
            $this->assembleAction(
                'scheduleDowntime',
                t('Downtime'),
-                'icon-plug',
+                'plug',
                t('Schedule a downtime to suppress all problem notifications within a specific period of time')
            );
        }
@ -103,7 +104,7 @@ class QuickActions extends BaseHtmlElement
            $this->assembleAction(
                'scheduleCheck',
                t('Reschedule'),
-                'icon-calendar-empty',
+                'calendar',
                t('Schedule the next active check at a different time than the current one')
            );
        }
@ -112,7 +113,7 @@ class QuickActions extends BaseHtmlElement
            $this->assembleAction(
                'processCheckresult',
                t('Process check result'),
-                'icon-edit',
+                'edit',
                sprintf(
                    t('Submit a one time or so called passive result for the %s check'),
                    $this->object->checkcommand
@ -133,7 +134,7 @@ class QuickActions extends BaseHtmlElement
                'data-no-icinga-ajax' => true
            ],
            [
-                Html::tag('i', ['class' => $icon]),
+                new Icon($icon),
                $label
            ]
        );
--- a/library/Icingadb/Widget/IcingaIcon.php
+++ b/library/Icingadb/Widget/IcingaIcon.php
@ -1,31 +0,0 @@
-<?php
-
-/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */
-
-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);
-    }
-}
--- a/library/Icingadb/Widget/ViewModeSwitcher.php
+++ b/library/Icingadb/Widget/ViewModeSwitcher.php
@ -7,6 +7,7 @@ namespace Icinga\Module\Icingadb\Widget;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
 use ipl\Web\Url;
+use ipl\Web\Widget\IcingaIcon;
 use ipl\Web\Widget\Link;

 class ViewModeSwitcher extends BaseHtmlElement
--- a/public/css/common.less
+++ b/public/css/common.less
@ -1,5 +1,9 @@
 /* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */

+@exports: {
+  @iplWebAssets: "../lib/icinga/ipl";
+};
+
 & > .content.full-width {
  padding-left: 0;
  padding-right: 0;
--- a/public/css/icinga-icons.less
+++ b/public/css/icinga-icons.less
@ -1,45 +0,0 @@
-/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */
-
-@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";
-}
--- a/public/font/Icinga-Icons.eot
+++ b/public/font/Icinga-Icons.eot
--- a/public/font/Icinga-Icons.svg
+++ b/public/font/Icinga-Icons.svg
@ -1,13 +0,0 @@
-<?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>
--- a/public/font/Icinga-Icons.ttf
+++ b/public/font/Icinga-Icons.ttf
--- a/public/font/Icinga-Icons.woff
+++ b/public/font/Icinga-Icons.woff