From 94555ef9ab0b3fec816d0aa9fa7639570c124200 Mon Sep 17 00:00:00 2001 From: Sukhwinder Dhillon Date: Mon, 7 Aug 2023 13:49:03 +0200 Subject: [PATCH] Use `fontawesome` icons with `ipl\Web\Widget\Icon` class everywhere --- application/controllers/ProcessController.php | 21 ++++++--- library/Businessprocess/BpNode.php | 3 +- library/Businessprocess/HostNode.php | 2 +- library/Businessprocess/Node.php | 9 ++-- .../Businessprocess/Renderer/Breadcrumb.php | 3 +- .../Renderer/TileRenderer/NodeTile.php | 39 ++++++---------- .../Businessprocess/Renderer/TreeRenderer.php | 15 ++++--- library/Businessprocess/ServiceNode.php | 2 +- .../Component/RenderedProcessActionBar.php | 45 ++++++++++++------- public/css/module.less | 17 ++++--- 10 files changed, 87 insertions(+), 69 deletions(-) diff --git a/application/controllers/ProcessController.php b/application/controllers/ProcessController.php index aedbd6db..c735af26 100644 --- a/application/controllers/ProcessController.php +++ b/application/controllers/ProcessController.php @@ -34,6 +34,7 @@ use ipl\Html\Text; use ipl\Web\Control\SortControl; use ipl\Web\Widget\Link; +use ipl\Web\Widget\Icon; class ProcessController extends Controller { @@ -184,7 +185,7 @@ protected function prepareControls($bp, $renderer) 'href' => $this->url()->without('showFullscreen')->without('view'), 'title' => $this->translate('Leave full screen and switch back to normal mode') ], - Html::tag('i', ['class' => 'icon icon-resize-small']) + new Icon('down-left-and-up-right-to-center') )); } @@ -603,10 +604,12 @@ protected function createConfigActionBar(BpConfig $config, $showDiff = false) 'a', [ 'href' => Url::fromPath('businessprocess/process/source', $params), - 'class' => 'icon-doc-text', 'title' => $this->translate('Show source code') ], - $this->translate('Source') + [ + new Icon('file-lines'), + $this->translate('Source'), + ] )); } else { $params = array( @@ -618,10 +621,12 @@ protected function createConfigActionBar(BpConfig $config, $showDiff = false) 'a', [ 'href' => Url::fromPath('businessprocess/process/source', $params), - 'class' => 'icon-flapping', 'title' => $this->translate('Highlight changes') ], - $this->translate('Diff') + [ + new Icon('shuffle'), + $this->translate('Diff') + ] )); } @@ -629,11 +634,13 @@ protected function createConfigActionBar(BpConfig $config, $showDiff = false) 'a', [ 'href' => Url::fromPath('businessprocess/process/download', ['config' => $config->getName()]), - 'class' => 'icon-download', 'target' => '_blank', 'title' => $this->translate('Download process configuration') ], - $this->translate('Download') + [ + new Icon('download'), + $this->translate('Download') + ] )); return $actionBar; diff --git a/library/Businessprocess/BpNode.php b/library/Businessprocess/BpNode.php index ca62cf60..67a26029 100644 --- a/library/Businessprocess/BpNode.php +++ b/library/Businessprocess/BpNode.php @@ -5,6 +5,7 @@ use Icinga\Exception\ConfigurationError; use Icinga\Exception\NotFoundError; use Icinga\Module\Businessprocess\Exception\NestingError; +use ipl\Web\Widget\Icon; class BpNode extends Node { @@ -639,7 +640,7 @@ public function operatorHtml() } } - public function getIcon() + public function getIcon(): Icon { $this->icon = $this->hasParents() ? 'cubes' : 'sitemap'; return parent::getIcon(); diff --git a/library/Businessprocess/HostNode.php b/library/Businessprocess/HostNode.php index ca3f796f..df256303 100644 --- a/library/Businessprocess/HostNode.php +++ b/library/Businessprocess/HostNode.php @@ -31,7 +31,7 @@ class HostNode extends MonitoredNode protected $className = 'host'; - protected $icon = 'host'; + protected $icon = 'laptop'; public function __construct($object) { diff --git a/library/Businessprocess/Node.php b/library/Businessprocess/Node.php index 73236ce6..a5af69b4 100644 --- a/library/Businessprocess/Node.php +++ b/library/Businessprocess/Node.php @@ -4,6 +4,7 @@ use Icinga\Exception\ProgrammingError; use ipl\Html\Html; +use ipl\Web\Widget\Icon; abstract class Node { @@ -463,14 +464,12 @@ public function getObjectClassName() public function getLink() { - return Html::tag('a', ['href' => '#', 'class' => 'toggle'], Html::tag('i', [ - 'class' => 'icon icon-down-dir' - ])); + return Html::tag('a', ['href' => '#', 'class' => 'toggle'], new Icon('caret-down')); } - public function getIcon() + public function getIcon(): Icon { - return Html::tag('i', ['class' => 'icon icon-' . ($this->icon ?: 'attention-circled')]); + return new Icon($this->icon ?? 'circle-exclamation'); } public function operatorHtml() diff --git a/library/Businessprocess/Renderer/Breadcrumb.php b/library/Businessprocess/Renderer/Breadcrumb.php index 56c41aa3..b0f986b0 100644 --- a/library/Businessprocess/Renderer/Breadcrumb.php +++ b/library/Businessprocess/Renderer/Breadcrumb.php @@ -7,6 +7,7 @@ use Icinga\Module\Businessprocess\Web\Url; use ipl\Html\BaseHtmlElement; use ipl\Html\Html; +use ipl\Web\Widget\Icon; class Breadcrumb extends BaseHtmlElement { @@ -37,7 +38,7 @@ public static function create(Renderer $renderer) 'href' => Url::fromPath('businessprocess'), 'title' => mt('businessprocess', 'Show Overview') ], - Html::tag('i', ['class' => 'icon icon-home']) + new Icon('house') ) )); $breadcrumb->add(Html::tag('li')->add( diff --git a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php index ec934c09..1ca46c76 100644 --- a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php +++ b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php @@ -4,12 +4,10 @@ use Icinga\Date\DateFormatter; use Icinga\Module\Businessprocess\BpNode; -use Icinga\Module\Businessprocess\HostNode; use Icinga\Module\Businessprocess\ImportedNode; use Icinga\Module\Businessprocess\MonitoredNode; use Icinga\Module\Businessprocess\Node; use Icinga\Module\Businessprocess\Renderer\Renderer; -use Icinga\Module\Businessprocess\ServiceNode; use Icinga\Web\Url; use ipl\Html\BaseHtmlElement; use ipl\Html\Html; @@ -202,14 +200,14 @@ protected function addDetailsActions() 'href' => $url->with('mode', 'tile'), 'title' => mt('businessprocess', 'Show tiles for this subtree') ], - Html::tag('i', ['class' => 'icon icon-dashboard']) + new Icon('grip') ))->add(Html::tag( 'a', [ 'href' => $url->with('mode', 'tree'), 'title' => mt('businessprocess', 'Show this subtree as a tree') ], - Html::tag('i', ['class' => 'icon icon-sitemap']) + new Icon('sitemap') )); if ($node instanceof ImportedNode) { if ($node->getBpConfig()->hasNode($node->getName())) { @@ -223,7 +221,7 @@ protected function addDetailsActions() 'Show this process as part of its original configuration' ) ], - Html::tag('i', ['class' => 'icon icon-forward']) + new Icon('share') )); } } @@ -238,7 +236,7 @@ protected function addDetailsActions() 'class' => 'node-info', 'title' => sprintf('%s: %s', mt('businessprocess', 'More information'), $url) ], - Html::tag('i', ['class' => 'icon icon-info-circled']) + new Icon('info') ); if (preg_match('#^http(?:s)?://#', $url)) { $link->addAttributes(['target' => '_blank']); @@ -246,20 +244,11 @@ protected function addDetailsActions() $this->actions()->add($link); } } else { - // $url = $this->makeMonitoredNodeUrl($node); - if ($node instanceof ServiceNode) { - $this->actions()->add(Html::tag( - 'a', - ['href' => $node->getUrl(), 'data-base-target' => '_next'], - Html::tag('i', ['class' => 'icon icon-service']) - )); - } elseif ($node instanceof HostNode) { - $this->actions()->add(Html::tag( - 'a', - ['href' => $node->getUrl(), 'data-base-target' => '_next'], - Html::tag('i', ['class' => 'icon icon-host']) - )); - } + $this->actions()->add(Html::tag( + 'a', + ['href' => $node->getUrl(), 'data-base-target' => '_next'], + $node->getIcon() + )); } if ($node->isAcknowledged()) { @@ -299,7 +288,7 @@ protected function addActionLinks() 'Show the business impact of this node by simulating a specific state' ) ], - Html::tag('i', ['class' => 'icon icon-magic']) + new Icon('wand-magic-sparkles') )); $this->actions()->add(Html::tag( @@ -310,7 +299,7 @@ protected function addActionLinks() ->with('editmonitorednode', $this->node->getName()), 'title' => mt('businessprocess', 'Modify this monitored node') ], - Html::tag('i', ['class' => 'icon icon-edit']) + new Icon('edit') )); } @@ -327,7 +316,7 @@ protected function addActionLinks() ->with('editnode', $this->node->getName()), 'title' => mt('businessprocess', 'Modify this business process node') ], - Html::tag('i', ['class' => 'icon icon-edit']) + new Icon('edit') )); $addUrl = $baseUrl->with([ @@ -341,7 +330,7 @@ protected function addActionLinks() 'href' => $addUrl, 'title' => mt('businessprocess', 'Add a new sub-node to this business process') ], - Html::tag('i', ['class' => 'icon icon-plus']) + new Icon('plus') )); } } @@ -358,7 +347,7 @@ protected function addActionLinks() 'href' => $baseUrl->with($params), 'title' => mt('businessprocess', 'Delete this node') ], - Html::tag('i', ['class' => 'icon icon-cancel']) + new Icon('xmark') )); } } diff --git a/library/Businessprocess/Renderer/TreeRenderer.php b/library/Businessprocess/Renderer/TreeRenderer.php index c9dd218f..308d6285 100644 --- a/library/Businessprocess/Renderer/TreeRenderer.php +++ b/library/Businessprocess/Renderer/TreeRenderer.php @@ -120,7 +120,7 @@ public function getNodeIcons(Node $node, array $path = null, BpNode $parent = nu { $icons = []; if (empty($path) && $node instanceof BpNode) { - $icons[] = Html::tag('i', ['class' => 'icon icon-sitemap']); + $icons[] = new Icon('sitemap'); } else { $icons[] = $node->getIcon(); } @@ -137,7 +137,7 @@ public function getNodeIcons(Node $node, array $path = null, BpNode $parent = nu ]); if ($node->isAcknowledged()) { - $icons[] = Html::tag('i', ['class' => 'icon icon-ok']); + $icons[] = new Icon('check'); } elseif ($node->isInDowntime()) { $icons[] = new Icon('plug'); } @@ -157,7 +157,8 @@ public function getOverriddenState($fakeState, Node $node) ) ]) ); - $overriddenState->add(Html::tag('i', ['class' => 'icon icon-right-small'])); + + $overriddenState->add(new Icon('arrow-right')); $overriddenState->add( (new StateBall(strtolower($node->getStateName($fakeState)), StateBall::SIZE_MEDIUM)) ->addAttributes([ @@ -232,7 +233,7 @@ public function renderNode(BpConfig $bp, Node $node, $path = array()) $summary->add($this->getActionIcons($bp, $node)); } elseif ($differentConfig) { $summary->add($this->actionIcon( - 'forward', + 'share', $this->getSourceUrl($node)->addParams(['mode' => 'tree'])->getAbsoluteUrl(), mt('businessprocess', 'Show this process as part of its original configuration') )->addAttributes(['data-base-target' => '_next'])); @@ -331,7 +332,7 @@ protected function createEditAction(BpConfig $bp, BpNode $node) protected function createSimulationAction(BpConfig $bp, Node $node) { return $this->actionIcon( - 'magic', + 'wand-magic-sparkles', $this->getUrl()->with(array( //'config' => $bp->getName(), 'action' => 'simulation', @@ -345,7 +346,7 @@ protected function createInfoAction(BpNode $node) { $url = $node->getInfoUrl(); return $this->actionIcon( - 'help', + 'question', $url, sprintf('%s: %s', mt('businessprocess', 'More information'), $url) )->addAttributes(['target' => '_blank']); @@ -360,7 +361,7 @@ protected function actionIcon($icon, $url, $title) 'title' => $title, 'class' => 'action-link' ], - Html::tag('i', ['class' => 'icon icon-' . $icon]) + new Icon($icon) ); } diff --git a/library/Businessprocess/ServiceNode.php b/library/Businessprocess/ServiceNode.php index 09df484d..cba6acfb 100644 --- a/library/Businessprocess/ServiceNode.php +++ b/library/Businessprocess/ServiceNode.php @@ -15,7 +15,7 @@ class ServiceNode extends MonitoredNode protected $className = 'service'; - protected $icon = 'service'; + protected $icon = 'gear'; public function __construct($object) { diff --git a/library/Businessprocess/Web/Component/RenderedProcessActionBar.php b/library/Businessprocess/Web/Component/RenderedProcessActionBar.php index 6f192dca..7ad6ad6f 100644 --- a/library/Businessprocess/Web/Component/RenderedProcessActionBar.php +++ b/library/Businessprocess/Web/Component/RenderedProcessActionBar.php @@ -8,6 +8,7 @@ use Icinga\Module\Businessprocess\Renderer\TreeRenderer; use Icinga\Web\Url; use ipl\Html\Html; +use ipl\Web\Widget\Icon; class RenderedProcessActionBar extends ActionBar { @@ -34,8 +35,8 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur } $link->add([ - Html::tag('i', ['class' => 'icon icon-dashboard' . ($renderer instanceof TreeRenderer ? '' : ' active')]), - Html::tag('i', ['class' => 'icon icon-sitemap' . ($renderer instanceof TreeRenderer ? ' active' : '')]) + new Icon('grip', ['class' => $renderer instanceof TreeRenderer ? null : 'active']), + new Icon('sitemap', ['class' => $renderer instanceof TreeRenderer ? 'active' : null]) ]); $this->add( @@ -50,9 +51,11 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur 'data-base-target' => '_main', 'href' => $url->with('showFullscreen', true), 'title' => mt('businessprocess', 'Switch to fullscreen mode'), - 'class' => 'icon-resize-full-alt' ], - mt('businessprocess', 'Fullscreen') + [ + new Icon('maximize'), + mt('businessprocess', 'Fullscreen') + ] )); $hasChanges = $config->hasSimulations() || $config->hasBeenChanged(); @@ -66,8 +69,7 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur 'Imported processes can only be changed in their original configuration' ) ]); - $span->add(Html::tag('i', ['class' => 'icon icon-lock'])) - ->add(mt('businessprocess', 'Editing Locked')); + $span->add([new Icon('lock'), mt('businessprocess', 'Editing Locked')]); $this->add($span); } else { $this->add(Html::tag( @@ -75,9 +77,11 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur [ 'href' => $url->with('unlocked', true), 'title' => mt('businessprocess', 'Click to unlock editing for this process'), - 'class' => 'icon-lock' ], - mt('businessprocess', 'Unlock Editing') + [ + new Icon('lock'), + mt('businessprocess', 'Unlock Editing') + ] )); } } elseif (! $hasChanges) { @@ -86,9 +90,11 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur [ 'href' => $url->without('unlocked')->without('action'), 'title' => mt('businessprocess', 'Click to lock editing for this process'), - 'class' => 'icon-lock-open' ], - mt('businessprocess', 'Lock Editing') + [ + new Icon('lock-open'), + mt('businessprocess', 'Lock Editing') + ] )); } @@ -100,9 +106,11 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur 'data-base-target' => '_next', 'href' => Url::fromPath('businessprocess/process/config', $this->currentProcessParams($url)), 'title' => mt('businessprocess', 'Modify this process'), - 'class' => 'icon-wrench' ], - mt('businessprocess', 'Config') + [ + new Icon('wrench'), + mt('businessprocess', 'Config') + ] )); } else { $this->add(Html::tag( @@ -113,9 +121,11 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur 'editnode' => $url->getParam('node') ])->getAbsoluteUrl(), 'title' => mt('businessprocess', 'Modify this process'), - 'class' => 'icon-wrench' ], - mt('businessprocess', 'Config') + [ + new Icon('wrench'), + mt('businessprocess', 'Config') + ] )); } } @@ -126,9 +136,12 @@ public function __construct(BpConfig $config, Renderer $renderer, Auth $auth, Ur [ 'href' => $url->with('action', 'add'), 'title' => mt('businessprocess', 'Add a new business process node'), - 'class' => 'icon-plus button-link' + 'class' => 'button-link' ], - mt('businessprocess', 'Add Node') + [ + new Icon('plus'), + mt('businessprocess', 'Add Node') + ] )); } } diff --git a/public/css/module.less b/public/css/module.less index 3129db9c..65abdfd6 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -132,14 +132,11 @@ ul.bp { } li { - i.icon-service { + > .icon, + summary > .icon { opacity: .75; } - i.icon-sitemap { - opacity: .8; - } - span.state-ball ~ i:last-of-type { margin-right: 0; } @@ -260,6 +257,16 @@ ul.bp { .overridden-state { margin-left: auto; margin-right: 1em; + + i.icon { + font-size: 0.75em; + line-height: 0.08333em; + vertical-align: 0.125em; + + &::before { + margin: 0 .3em; + } + } } }