From 72b2feb6979e80e2897ed0e487b9478a471ec23f Mon Sep 17 00:00:00 2001 From: Molkobain Date: Thu, 18 Mar 2021 11:46:33 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B03581=20-=20Dashlet:=20Add=20max-width=20?= =?UTF-8?q?and=20tooltip=20on=20pills?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- application/displayblock.class.inc.php | 3 +- css/backoffice/components/_pill.scss | 6 +-- css/backoffice/utils/helpers/_misc.scss | 5 +++ .../UI/Base/Component/Pill/Pill.php | 43 +++++++++++++++++-- .../base/components/pill/layout.html.twig | 3 +- 5 files changed, 51 insertions(+), 9 deletions(-) diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php index 8784f209c..9e36b4df6 100644 --- a/application/displayblock.class.inc.php +++ b/application/displayblock.class.inc.php @@ -1020,8 +1020,9 @@ JS $sCountLabel = $aCount['label']; $oPill = PillFactory::MakeForState($sClass, $sStateValue) ->SetUrl($sHyperlink) + ->SetTooltip($sStateLabel) ->AddHtml("$sCountLabel") - ->AddHtml("$sStateLabel"); + ->AddHtml("$sStateLabel"); $oBlock->AddSubBlock($oPill); } $aExtraParams['query_params'] = $this->m_oFilter->GetInternalParams(); diff --git a/css/backoffice/components/_pill.scss b/css/backoffice/components/_pill.scss index ce137e1ea..801117482 100644 --- a/css/backoffice/components/_pill.scss +++ b/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; diff --git a/css/backoffice/utils/helpers/_misc.scss b/css/backoffice/utils/helpers/_misc.scss index 02ec4e40c..a26aa7590 100644 --- a/css/backoffice/utils/helpers/_misc.scss +++ b/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); diff --git a/sources/application/UI/Base/Component/Pill/Pill.php b/sources/application/UI/Base/Component/Pill/Pill.php index 27ef947e8..3d20ba321 100644 --- a/sources/application/UI/Base/Component/Pill/Pill.php +++ b/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); + } } \ No newline at end of file diff --git a/templates/base/components/pill/layout.html.twig b/templates/base/components/pill/layout.html.twig index 79dccc3f2..945c97fdc 100644 --- a/templates/base/components/pill/layout.html.twig +++ b/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 %}