From d797436786ad9e6adf6dc7254bae2722cc8a8a5c Mon Sep 17 00:00:00 2001 From: Anne-Catherine <57360138+accognet@users.noreply.github.com> Date: Thu, 31 Aug 2023 14:37:37 +0200 Subject: [PATCH] =?UTF-8?q?N=C2=B06555=20-=20Add=20class=20description=20i?= =?UTF-8?q?n=20tooltip=20of=20Dashlet=20badge=20(#504)=20cheery=20pick=20f?= =?UTF-8?q?rom=20branch=20develop=20due=20to=20target=20branch=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- application/displayblock.class.inc.php | 4 ++ .../components/dashlet/_dashlet-badge.scss | 33 ++++++++++------ .../Base/Component/Dashlet/DashletBadge.php | 38 +++++++++++++++++++ .../dashlet/dashlet-badge.html.twig | 11 +++++- 4 files changed, 74 insertions(+), 12 deletions(-) diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php index e79d94161..6c4fda610 100644 --- a/application/displayblock.class.inc.php +++ b/application/displayblock.class.inc.php @@ -1246,6 +1246,10 @@ JS } else { $oBlock = DashletFactory::MakeForDashletBadge($sClassIconUrl, $sHyperlink, $iCount, $sClassLabel, null, null, $aRefreshParams); } + $sClassDescription = MetaModel::GetClassDescription($sClass); + if (utils::IsNotNullOrEmptyString($sClassDescription)) { + $oBlock->SetClassDescription($sClassDescription); + } return $oBlock; } diff --git a/css/backoffice/components/dashlet/_dashlet-badge.scss b/css/backoffice/components/dashlet/_dashlet-badge.scss index eda128e97..f95a2cc1c 100644 --- a/css/backoffice/components/dashlet/_dashlet-badge.scss +++ b/css/backoffice/components/dashlet/_dashlet-badge.scss @@ -20,6 +20,8 @@ $ibo-dashlet-badge--icon--size: 48px !default; $ibo-dashlet-badge--action-icon--margin-right: $ibo-spacing-300 !default; +$ibo-dashlet-badge--body--tooltip-title--margin-bottom: $ibo-spacing-500 !default; + /* CSS variables (can be changed directly from the browser) */ :root { --ibo-dashlet-badge--min-width: #{$ibo-dashlet-badge--min-width}; @@ -74,18 +76,27 @@ $ibo-dashlet-badge--action-icon--margin-right: $ibo-spacing-300 !default; @extend %ibo-hyperlink-inherited-colors; } } -.ibo-dashlet-badge--action-list-count{ - margin-right: $ibo-dashlet-badge--action-list-count--margin-right; - @extend %ibo-font-ral-bol-450; + +.ibo-dashlet-badge--action-list-count { + margin-right: $ibo-dashlet-badge--action-list-count--margin-right; + @extend %ibo-font-ral-bol-450; } -.ibo-dashlet-badge--action-list-label{ - display: inline-block; - @extend %ibo-text-truncated-with-ellipsis; + +.ibo-dashlet-badge--action-list-label { + display: inline-block; + @extend %ibo-text-truncated-with-ellipsis; } -.ibo-dashlet-badge--action-create{ - @extend %ibo-baseline-centered-content; - @extend %ibo-font-size-150; + +.ibo-dashlet-badge--action-create { + @extend %ibo-baseline-centered-content; + @extend %ibo-font-size-150; } -.ibo-dashlet-badge--action-create-icon{ - margin-right: $ibo-dashlet-badge--action-icon--margin-right; + +.ibo-dashlet-badge--action-create-icon { + margin-right: $ibo-dashlet-badge--action-icon--margin-right; +} + +.ibo-dashlet-badge--body--tooltip-title { + @extend %ibo-font-weight-600; + margin-bottom: $ibo-dashlet-badge--body--tooltip-title--margin-bottom; } diff --git a/sources/Application/UI/Base/Component/Dashlet/DashletBadge.php b/sources/Application/UI/Base/Component/Dashlet/DashletBadge.php index 12e2722cb..d92fb05f2 100644 --- a/sources/Application/UI/Base/Component/Dashlet/DashletBadge.php +++ b/sources/Application/UI/Base/Component/Dashlet/DashletBadge.php @@ -9,6 +9,7 @@ namespace Combodo\iTop\Application\UI\Base\Component\Dashlet; use Combodo\iTop\Application\UI\Base\tJSRefreshCallback; +use utils; class DashletBadge extends DashletContainer { @@ -29,6 +30,11 @@ class DashletBadge extends DashletContainer protected $iCount; /** @var string */ protected $sClassLabel; + /** + * @var string + * @since 3.1.1 3.2.0 + */ + protected $sClassDescription; /** @var string */ protected $sCreateActionUrl; @@ -62,6 +68,7 @@ class DashletBadge extends DashletContainer $this->sCreateActionUrl = $sCreateActionUrl; $this->sCreateActionLabel = $sCreateActionLabel; $this->aRefreshParams = $aRefreshParams; + $this->sClassDescription = ''; } @@ -185,6 +192,37 @@ class DashletBadge extends DashletContainer return $this; } + /** + * @return string + * @since 3.1.1 3.2.0 + */ + public function GetClassDescription(): string + { + return $this->sClassDescription; + } + + /** + * @param string $sClassDescription + * + * @return DashletBadge + * @since 3.1.1 3.2.0 + */ + public function SetClassDescription(string $sClassDescription) + { + $this->sClassDescription = $sClassDescription; + + return $this; + } + + /** + * @return bool + * @since 3.1.1 + */ + public function HasClassDescription(): bool + { + return utils::IsNotNullOrEmptyString($this->sClassDescription); + } + public function GetJSRefresh(): string { return "$('#".$this->sId."').block(); diff --git a/templates/base/components/dashlet/dashlet-badge.html.twig b/templates/base/components/dashlet/dashlet-badge.html.twig index 74096e9ee..52ea2d2de 100644 --- a/templates/base/components/dashlet/dashlet-badge.html.twig +++ b/templates/base/components/dashlet/dashlet-badge.html.twig @@ -3,7 +3,16 @@ {% apply spaceless %}
+ {% if oUIBlock.HasClassDescription() %} + {# Display both class name and description as the name could be truncated if too long #} + data-tooltip-content="{{ '
'|escape }}{{ oUIBlock.GetClassLabel() }}{{ '
'|escape }}{{ oUIBlock.GetClassDescription() }}{{ '
'|escape }}" + data-tooltip-html-enabled="true" + {% else %} + {# Display only class name as it could be truncated if too long #} + data-tooltip-content="{{ oUIBlock.GetClassLabel() }}" + {% endif %} + {# Delay display to avoid having all tooltips appearing when mouse is just passing through the tabs #} + data-tooltip-show-delay="300">
{# Mind the empty "alt" attribute https://www.w3.org/WAI/tutorials/images/decorative/ #}