Ensure compatiblity with Icinga/ipl-web#258

library/Icingadb/View/CommentRenderer.php

@@ -18,6 +18,7 @@ use ipl\Html\HtmlElement;
 use ipl\Html\Text;
 use ipl\I18n\Translation;
 use ipl\Web\Common\ItemRenderer;
+use ipl\Web\Widget\Ball;
 use ipl\Web\Widget\Icon;
 use ipl\Web\Widget\Link;
 use ipl\Web\Widget\TimeAgo;
@@ -72,11 +73,11 @@ class CommentRenderer implements ItemRenderer
 
     public function assembleVisual($item, HtmlDocument $visual, string $layout): void
     {
-        $visual->addHtml(new HtmlElement(
-            'div',
-            Attributes::create(['class' => 'user-ball']),
-            Text::create($item->author[0])
-        ));
+        $visual->addHtml(
+            (new Ball($layout === 'minimal' ? Ball::SIZE_BIG : Ball::SIZE_LARGE))
+                ->addAttributes(['class' => 'user-ball'])
+                ->addHtml(Text::create($item->author[0]))
+        );
     }
 
     public function assembleTitle($item, HtmlDocument $title, string $layout): void

library/Icingadb/View/UserRenderer.php

@@ -11,6 +11,7 @@ use ipl\Html\HtmlDocument;
 use ipl\Html\HtmlElement;
 use ipl\Html\Text;
 use ipl\Web\Common\ItemRenderer;
+use ipl\Web\Widget\Ball;
 use ipl\Web\Widget\Link;
 
 /** @implements ItemRenderer<User> */
@@ -23,11 +24,11 @@ class UserRenderer implements ItemRenderer
 
     public function assembleVisual($item, HtmlDocument $visual, string $layout): void
     {
-        $visual->addHtml(new HtmlElement(
-            'div',
-            Attributes::create(['class' => 'user-ball']),
-            Text::create($item->display_name[0])
-        ));
+        $visual->addHtml(
+            (new Ball($layout === 'minimal' ? Ball::SIZE_BIG : Ball::SIZE_LARGE))
+                ->addAttributes(['class' => 'user-ball'])
+                ->addHtml(Text::create($item->display_name[0]))
+        );
     }
 
     public function assembleTitle($item, HtmlDocument $title, string $layout): void

library/Icingadb/View/UsergroupRenderer.php

@@ -11,6 +11,7 @@ use ipl\Html\HtmlDocument;
 use ipl\Html\HtmlElement;
 use ipl\Html\Text;
 use ipl\Web\Common\ItemRenderer;
+use ipl\Web\Widget\Ball;
 use ipl\Web\Widget\Link;
 
 /** @implements ItemRenderer<Usergroup> */
@@ -23,11 +24,11 @@ class UsergroupRenderer implements ItemRenderer
 
     public function assembleVisual($item, HtmlDocument $visual, string $layout): void
     {
-        $visual->addHtml(new HtmlElement(
-            'div',
-            Attributes::create(['class' => 'usergroup-ball']),
-            Text::create($item->display_name[0])
-        ));
+        $visual->addHtml(
+            (new Ball($layout === 'minimal' ? Ball::SIZE_BIG : Ball::SIZE_LARGE))
+                ->addAttributes(['class' => 'usergroup-ball'])
+                ->addHtml(Text::create($item->display_name[0]))
+        );
     }
 
     public function assembleTitle($item, HtmlDocument $title, string $layout): void

library/Icingadb/Widget/ItemTable/StateRowItem.php

@@ -33,9 +33,9 @@ abstract class StateRowItem extends BaseStateRowItem
         $stateBall = new StateBall($this->item->state->getStateText(), StateBall::SIZE_LARGE);
         $stateBall->add($this->item->state->getIcon());
 
-        if ($this->item->state->is_problem && ($this->item->state->is_handled || ! $this->item->state->is_reachable)) {
-            $stateBall->getAttributes()->add('class', 'handled');
-        }
+        $stateBall->setHandled($this->item->state->is_problem && (
+            $this->item->state->is_handled || ! $this->item->state->is_reachable
+        ));
 
         $visual->addHtml($stateBall);
         if ($this->item->state->state_type === 'soft') {

library/Icingadb/Widget/StateChange.php

@@ -91,12 +91,9 @@ class StateChange extends BaseHtmlElement
     protected function assemble()
     {
         $currentStateBall = (new StateBall($this->state, $this->currentStateBallSize))
+            ->setHandled($this->isHandled)
             ->add($this->icon);
 
-        if ($this->isHandled) {
-            $currentStateBall->getAttributes()->add('class', 'handled');
-        }
-
         $previousStateBall = new StateBall($this->previousState, $this->previousStateBallSize);
         if ($this->isRightBiggerThanLeft()) {
             $this->getAttributes()->add('class', 'reversed-state-balls');

public/css/common.less

@@ -35,20 +35,16 @@ div.show-more {
 }
 
 .user-ball {
-  .ball();
-  .ball-size-xl();
   .ball-solid(@gray-semilight);
   font-weight: bold;
-  line-height: 1.75;
   text-transform: uppercase;
+  vertical-align: top; // Avoid the bottom margin of the ball to affect the line height
 }
 
 .usergroup-ball {
-  .ball();
   .ball-outline(@gray);
-  .ball-size-xl();
-  line-height: 1.75;
   text-transform: uppercase;
+  vertical-align: top; // Avoid the bottom margin of the ball to affect the line height
 }
 
 .ack-badge {
@@ -294,6 +290,12 @@ div.show-more {
   }
 }
 
+// user, usergroup and comment balls
+.header-item-layout .visual:has(.ball.ball-size-xl) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 form[name="form_confirm_removal"] {
   text-align: center;
 }