N°3581 - Dashlet: Add max-width and tooltip on pills

application/displayblock.class.inc.php

@@ -1020,8 +1020,9 @@ JS
 			$sCountLabel = $aCount['label'];
 			$oPill = PillFactory::MakeForState($sClass, $sStateValue)
 				->SetUrl($sHyperlink)
+				->SetTooltip($sStateLabel)
 				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">$sCountLabel</span>")
-				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--label\">$sStateLabel</span>");
+				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">$sStateLabel</span>");
 			$oBlock->AddSubBlock($oPill);
 		}
 		$aExtraParams['query_params'] = $this->m_oFilter->GetInternalParams();

css/backoffice/components/_pill.scss

@@ -19,6 +19,7 @@
 /* SCSS variables */
 $ibo-pill--margin: 4px 8px !default;
 $ibo-pill--padding: 6px 10px !default;
+$ibo-pill--max-width: 120px !default;
 $ibo-pill--border-radius: $ibo-border-radius-300 !default;
 
 $ibo-pill-new-state-primary-color: $ibo-color-blue-100 !default;
@@ -90,9 +91,8 @@ $ibo-pill-states-colors: (
 
 /* Rules */
 .ibo-pill {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  @extend %ibo-fully-centered-content;
+  max-width: $ibo-pill--max-width;
   margin: $ibo-pill--margin;
   padding: $ibo-pill--padding;
   border-radius: $ibo-pill--border-radius;

css/backoffice/utils/helpers/_misc.scss

@@ -26,6 +26,7 @@
 .ibo-is-fullwidth {
   width: 100%;
 }
+
 /* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
 html.ibo-has-fullscreen-descendant{
 	position: fixed !important;
@@ -80,6 +81,10 @@ body.ibo-has-fullscreen-descendant{
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 }
+.ibo-text-truncated-with-ellipsis{
+  @extend %ibo-text-truncated-with-ellipsis;
+}
+
 %ibo-medallion{
 	position: relative;
 	border-radius: var(--ibo-border-radius-full);

sources/application/UI/Base/Component/Pill/Pill.php

@@ -26,8 +26,10 @@ class Pill extends UIContentBlock
 
 	/** @var string */
 	protected $sColor;
-	/** @var string URL to go to if the pill is clicked */
+	/** @var null|string URL to go to if the pill is clicked */
 	protected $sUrl;
+	/** @var null|string Text to display as a tooltip */
+	protected $sTooltip;
 
 	/**
 	 * Pill constructor.
@@ -38,7 +40,6 @@ class Pill extends UIContentBlock
 	{
 		parent::__construct();
 		$this->SetColor($sColor);
-		$this->SetUrl('');
 	}
 
 	/**
@@ -62,9 +63,10 @@ class Pill extends UIContentBlock
 	}
 
 	/**
-	 * @return string
+	 * @see static::$sUrl
+	 * @return null|string
 	 */
-	public function GetUrl(): string
+	public function GetUrl(): ?string
 	{
 		return $this->sUrl;
 	}
@@ -72,6 +74,7 @@ class Pill extends UIContentBlock
 	/**
 	 * @param string $sUrl
 	 *
+	 * @see static::$sUrl
 	 * @return $this
 	 */
 	public function SetUrl(string $sUrl)
@@ -82,10 +85,42 @@ class Pill extends UIContentBlock
 	}
 
 	/**
+	 * @see static::$sUrl
 	 * @return bool
 	 */
 	public function HasUrl(): bool
 	{
 		return !empty($this->sUrl);
 	}
+
+	/**
+	 * @see static::$sTooltip
+	 * @return string|null
+	 */
+	public function GetTooltip(): ?string
+	{
+		return $this->sTooltip;
+	}
+
+	/**
+	 * @param string $sTooltip
+	 *
+	 * @see static::$sTooltip
+	 * @return $this
+	 */
+	public function SetTooltip(string $sTooltip)
+	{
+		$this->sTooltip = $sTooltip;
+
+		return $this;
+	}
+
+	/**
+	 * @see static::$sTooltip
+	 * @return bool
+	 */
+	public function HasTooltip(): bool
+	{
+		return !empty($this->sTooltip);
+	}
 }

templates/base/components/pill/layout.html.twig

@@ -4,7 +4,8 @@
 <{{ sTagName }} id="{{ oUIBlock.GetId() }}"
     {% if oUIBlock.HasUrl() %}href="{{ oUIBlock.GetUrl()|raw }}"{% endif %}
     class="ibo-pill ibo-is-{{ oUIBlock.GetColor() }}"
-    data-role="ibo-pill">
+    data-role="ibo-pill"
+    {% if oUIBlock.HasTooltip() %}data-tooltip-content="{{ oUIBlock.GetTooltip() }}" data-tooltip-show-delay="500"{% endif %}>
     {% for oSubBlock in oUIBlock.GetSubBlocks() %}
         {{ render_block(oSubBlock, {aPage: aPage}) }}
     {% endfor %}