diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php
index 45ad0f830..8784f209c 100644
--- a/application/displayblock.class.inc.php
+++ b/application/displayblock.class.inc.php
@@ -1016,13 +1016,13 @@ JS
$oBlock = new UIContentBlockWithJSRefreshCallback(null, ["ibo-dashlet-header-dynamic--container"]);
foreach ($aStateLabels as $sStateValue => $sStateLabel) {
$aCount = $aCounts[$sStateValue];
- $oBadge = PillFactory::MakeForState($sClass, $sStateValue);
$sHyperlink = $aCount['link'];
$sCountLabel = $aCount['label'];
- $sColor = $oBadge->GetColor();
- $oBadge->AddHtml("");
- $oBadge->AddHtml("");
- $oBlock->AddSubBlock($oBadge);
+ $oPill = PillFactory::MakeForState($sClass, $sStateValue)
+ ->SetUrl($sHyperlink)
+ ->AddHtml("")
+ ->AddHtml("");
+ $oBlock->AddSubBlock($oPill);
}
$aExtraParams['query_params'] = $this->m_oFilter->GetInternalParams();
$aRefreshParams = ['filter' => $this->m_oFilter->ToOQL(), "extra_params" => json_encode($aExtraParams)];
diff --git a/css/backoffice/components/_pill.scss b/css/backoffice/components/_pill.scss
index af2305feb..ce137e1ea 100644
--- a/css/backoffice/components/_pill.scss
+++ b/css/backoffice/components/_pill.scss
@@ -82,7 +82,7 @@ $ibo-pill-states-colors: (
);
@each $sType, $aColors in $ibo-pill-states-colors {
- .ibo-pill-is-#{$sType} {
+ .ibo-pill.ibo-is-#{$sType} {
color: map-get($aColors, 'secondary-color');
background-color: map-get($aColors, 'primary-color');
}
diff --git a/sources/application/UI/Base/Component/Pill/Pill.php b/sources/application/UI/Base/Component/Pill/Pill.php
index 714d031a1..27ef947e8 100644
--- a/sources/application/UI/Base/Component/Pill/Pill.php
+++ b/sources/application/UI/Base/Component/Pill/Pill.php
@@ -20,13 +20,25 @@ use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
*/
class Pill extends UIContentBlock
{
+ // Overloaded constants
+ public const BLOCK_CODE = 'ibo-pill';
+ public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/pill/layout';
+
/** @var string */
protected $sColor;
+ /** @var string URL to go to if the pill is clicked */
+ protected $sUrl;
+ /**
+ * Pill constructor.
+ *
+ * @param string $sColor
+ */
public function __construct(string $sColor)
{
- parent::__construct(null, ["ibo-pill ibo-pill-is-{$sColor}"]);
+ parent::__construct();
$this->SetColor($sColor);
+ $this->SetUrl('');
}
/**
@@ -48,4 +60,32 @@ class Pill extends UIContentBlock
return $this;
}
+
+ /**
+ * @return string
+ */
+ public function GetUrl(): string
+ {
+ return $this->sUrl;
+ }
+
+ /**
+ * @param string $sUrl
+ *
+ * @return $this
+ */
+ public function SetUrl(string $sUrl)
+ {
+ $this->sUrl = $sUrl;
+
+ return $this;
+ }
+
+ /**
+ * @return bool
+ */
+ public function HasUrl(): bool
+ {
+ return !empty($this->sUrl);
+ }
}
\ No newline at end of file
diff --git a/sources/application/UI/Base/Component/Pill/PillFactory.php b/sources/application/UI/Base/Component/Pill/PillFactory.php
index 5208c606b..492535a4d 100644
--- a/sources/application/UI/Base/Component/Pill/PillFactory.php
+++ b/sources/application/UI/Base/Component/Pill/PillFactory.php
@@ -20,7 +20,12 @@ use Combodo\iTop\Application\UI\Helper\UIHelper;
*/
class PillFactory
{
-
+ /**
+ * @param string $sClass
+ * @param string $sStateCode
+ *
+ * @return \Combodo\iTop\Application\UI\Base\Component\Pill\Pill
+ */
public static function MakeForState(string $sClass, string $sStateCode)
{
$sColor = UIHelper::GetColorFromStatus($sClass, $sStateCode);
diff --git a/templates/base/components/badge/layout.html.twig b/templates/base/components/badge/layout.html.twig
deleted file mode 100644
index 9c25fc669..000000000
--- a/templates/base/components/badge/layout.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# @copyright Copyright (C) 2010-2021 Combodo SARL #}
-{# @license http://opensource.org/licenses/AGPL-3.0 #}
-{% extends "base/layouts/content-block/layout.html.twig" %}
\ No newline at end of file
diff --git a/templates/base/components/pill/layout.html.twig b/templates/base/components/pill/layout.html.twig
new file mode 100644
index 000000000..79dccc3f2
--- /dev/null
+++ b/templates/base/components/pill/layout.html.twig
@@ -0,0 +1,11 @@
+{# @copyright Copyright (C) 2010-2021 Combodo SARL #}
+{# @license http://opensource.org/licenses/AGPL-3.0 #}
+{% set sTagName = oUIBlock.HasUrl() ? 'a' : 'span' %}
+<{{ sTagName }} id="{{ oUIBlock.GetId() }}"
+ {% if oUIBlock.HasUrl() %}href="{{ oUIBlock.GetUrl()|raw }}"{% endif %}
+ class="ibo-pill ibo-is-{{ oUIBlock.GetColor() }}"
+ data-role="ibo-pill">
+ {% for oSubBlock in oUIBlock.GetSubBlocks() %}
+ {{ render_block(oSubBlock, {aPage: aPage}) }}
+ {% endfor %}
+{{ sTagName }}>
\ No newline at end of file