From dacaae9d8dd585a0af5db81676703ae5f6d65440 Mon Sep 17 00:00:00 2001 From: raviks789 <33730024+raviks789@users.noreply.github.com> Date: Thu, 11 Aug 2022 17:36:57 +0200 Subject: [PATCH] Handle long item names --- configuration.php | 1 + .../Businessprocess/Renderer/Breadcrumb.php | 7 ++- .../Renderer/TileRenderer/NodeTile.php | 11 +++- .../Businessprocess/Renderer/TreeRenderer.php | 2 +- .../Web/Component/BpDashboardTile.php | 4 +- .../Web/Component/Dashboard.php | 2 + public/css/mixins.less | 10 +++ public/css/module.less | 63 +++++++++++++++++-- 8 files changed, 89 insertions(+), 11 deletions(-) create mode 100644 public/css/mixins.less diff --git a/configuration.php b/configuration.php index 6ef510e7..838702c5 100644 --- a/configuration.php +++ b/configuration.php @@ -62,3 +62,4 @@ $this->provideJsFile('vendor/Sortable.js'); $this->provideJsFile('behavior/sortable.js'); $this->provideJsFile('vendor/jquery.fn.sortable.js'); +$this->provideCssFile('mixins.less'); diff --git a/library/Businessprocess/Renderer/Breadcrumb.php b/library/Businessprocess/Renderer/Breadcrumb.php index b0f986b0..abfb5c4d 100644 --- a/library/Businessprocess/Renderer/Breadcrumb.php +++ b/library/Businessprocess/Renderer/Breadcrumb.php @@ -8,6 +8,7 @@ use ipl\Html\BaseHtmlElement; use ipl\Html\Html; use ipl\Web\Widget\Icon; +use ipl\Html\HtmlElement; class Breadcrumb extends BaseHtmlElement { @@ -42,7 +43,11 @@ public static function create(Renderer $renderer) ) )); $breadcrumb->add(Html::tag('li')->add( - Html::tag('a', ['href' => $bpUrl], $bp->getTitle()) + Html::tag( + 'a', + ['href' => $bpUrl], + HtmlElement::create('span', ['class' => 'text', 'title' => $bp->getTitle()], $bp->getTitle()) + ) )); $path = $renderer->getCurrentPath(); diff --git a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php index 1ca46c76..ee1e7a12 100644 --- a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php +++ b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php @@ -12,6 +12,7 @@ use ipl\Html\BaseHtmlElement; use ipl\Html\Html; use ipl\Web\Widget\Icon; +use ipl\Html\HtmlElement; use ipl\Web\Widget\StateBall; class NodeTile extends BaseHtmlElement @@ -87,6 +88,14 @@ public function render() if (! $node instanceof ImportedNode || $node->getBpConfig()->hasNode($node->getName())) { $link = $this->getMainNodeLink(); if ($renderer->isBreadcrumb()) { + $link->setContent( + HtmlElement::create( + 'span', + ['class' => ['text', 'process-title'], 'title' => $link->getContent()], + $link->getContent() + ) + ); + $state = strtolower($node->getStateName()); if ($node->isHandled()) { $state = $state . ' handled'; @@ -182,7 +191,7 @@ protected function getMainNodeLink() $node->getAlias() ?? $node->getName() ); } else { - $link = Html::tag('a', ['href' => $url], $node->getAlias()); + $link = Html::tag('a', ['href' => $url, 'title' => $node->getAlias()], $node->getAlias()); } return $link; diff --git a/library/Businessprocess/Renderer/TreeRenderer.php b/library/Businessprocess/Renderer/TreeRenderer.php index 308d6285..7c23df4e 100644 --- a/library/Businessprocess/Renderer/TreeRenderer.php +++ b/library/Businessprocess/Renderer/TreeRenderer.php @@ -218,7 +218,7 @@ public function renderNode(BpConfig $bp, Node $node, $path = array()) $summary->add($this->getNodeIcons($node, $path)); - $summary->add(Html::tag('span', null, $node->getAlias())); + $summary->add(Html::tag('span', ['class' => 'text'], $node->getAlias())); if ($node instanceof BpNode) { $summary->add(Html::tag('span', ['class' => 'op'], $node->operatorHtml())); diff --git a/library/Businessprocess/Web/Component/BpDashboardTile.php b/library/Businessprocess/Web/Component/BpDashboardTile.php index 9a4a0f64..6c7f6603 100644 --- a/library/Businessprocess/Web/Component/BpDashboardTile.php +++ b/library/Businessprocess/Web/Component/BpDashboardTile.php @@ -22,8 +22,8 @@ public function __construct(BpConfig $bp, $title, $description, $icon, $url, $ur 'div', ['class' => 'bp-link', 'data-base-target' => '_main'], (new Link(new Icon($icon), Url::fromPath($url, $urlParams ?: []), $attributes)) - ->add(Html::tag('span', ['class' => 'header'], $title)) - ->add($description) + ->add(Html::tag('span', ['class' => ['header', 'text'], 'title' => $title], $title)) + ->add(Html::tag('span', ['class' => 'text', 'title' => $description], $description)) )); $tiles = Html::tag('div', ['class' => 'bp-root-tiles']); diff --git a/library/Businessprocess/Web/Component/Dashboard.php b/library/Businessprocess/Web/Component/Dashboard.php index e78c46c0..203c8474 100644 --- a/library/Businessprocess/Web/Component/Dashboard.php +++ b/library/Businessprocess/Web/Component/Dashboard.php @@ -11,7 +11,9 @@ use Icinga\Module\Businessprocess\State\MonitoringState; use Icinga\Module\Businessprocess\Storage\Storage; use ipl\Html\BaseHtmlElement; +use ipl\Html\FormattedString; use ipl\Html\Html; +use ipl\Html\HtmlElement; class Dashboard extends BaseHtmlElement { diff --git a/public/css/mixins.less b/public/css/mixins.less new file mode 100644 index 00000000..22b01faf --- /dev/null +++ b/public/css/mixins.less @@ -0,0 +1,10 @@ +.line-clamp(@numOfLines: 2) when (@numOfLines > 1) { + display: -webkit-box; + -webkit-line-clamp: @numOfLines; + -webkit-box-orient: vertical; +} + +.text-ellipsis() { + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/public/css/module.less b/public/css/module.less index 65abdfd6..ec84929d 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -181,6 +181,13 @@ ul.bp { > span { font-size: 1.25em; + &.text { + flex: 1 1 auto; + width: 0; + .text-ellipsis(); + white-space: nowrap; + } + &.op { padding: .1em .5em; border-radius: .5em; @@ -344,6 +351,10 @@ ul.broken-files { } .bp-link { + .text { + .line-clamp(2); + } + > a { text-decoration: none; color: @gray; @@ -354,6 +365,14 @@ ul.broken-files { > span.header { color: @text-color; + + .header-id { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } } } } @@ -450,7 +469,8 @@ td > a > .state-badges { .tiles > div { color: @text-color-on-icinga-blue; width: 12em; - display: inline-block; + display: flex; + flex-direction: column; float: left; vertical-align: top; margin-right: 0.2em; @@ -464,11 +484,8 @@ td > a > .state-badges { } .state-badges { - position: absolute; - bottom: 0; - right: 0; + text-align: end; margin: 0.5em; - text-align: center; font-size: 0.5em; } @@ -484,12 +501,17 @@ td > a > .state-badges { > a, .missing-node-msg { display: block; + } + + > a { text-decoration: none; font-size: 0.7em; text-align: center; - padding: 1em 1em 0; + padding: 0 1em; font-weight: bold; word-wrap: break-word; + .text-ellipsis(); + .line-clamp(2); } .missing-node-msg { @@ -639,6 +661,7 @@ td > a > .state-badges { color: @icinga-blue; margin: 0; font-size: 1.2em; + max-width: 10em; text-decoration: none; padding-left: 2em; line-height: 2.5em; @@ -742,6 +765,22 @@ td > a > .state-badges { text-decoration: underline; } +.text { + display: block; + .text-ellipsis(); +} + +.breadcrumb li a { + .process-title { + margin-top: -2.5em; + margin-left: 1.2em; + } + + .text { + white-space: nowrap; + } +} + #layout.twocols, #layout.layout-minimal, div.compact { .breadcrumb { font-size: 0.833em; @@ -750,6 +789,18 @@ td > a > .state-badges { /** END of breadcrumb **/ +.tiles .process-node { + justify-content: space-between; +} + +.tiles .monitored-node { + padding-bottom: 1.5em; + + > a { + margin-top: auto; + margin-bottom: auto; + } +} ul.error, ul.warning { padding: 0;