composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-17 22:39:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°6555 - Add class description in tooltip of Dashlet badge (#504)

Browse Source 
cheery pick from branch develop due to target branch error
This commit is contained in:
Anne-Catherine
2023-08-31 14:37:37 +02:00
committed by acognet
parent b508c0d983
commit d797436786
4 changed files with 74 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
application/displayblock.class.inc.php
View File

@@ -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;
}

33
css/backoffice/components/dashlet/_dashlet-badge.scss
View File

@@ -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;
}

38
sources/Application/UI/Base/Component/Dashlet/DashletBadge.php
View File

@@ -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();

11
templates/base/components/dashlet/dashlet-badge.html.twig
View File

@@ -3,7 +3,16 @@
{% apply spaceless %}
<div class="ibo-dashlet-badge--body{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" id="{{ oUIBlock.GetId() }}"
data-role="ibo-dashlet-badge--body"
data-tooltip-content="{{ oUIBlock.GetClassLabel() }}">
{% if oUIBlock.HasClassDescription() %}
{# Display both class name and description as the name could be truncated if too long #}
data-tooltip-content="{{ '<div class="ibo-dashlet-badge--body--tooltip-title">'|escape }}{{ oUIBlock.GetClassLabel() }}{{ '</div><div class="ibo-dashlet-badge--body--tooltip-description">'|escape }}{{ oUIBlock.GetClassDescription() }}{{ '</div>'|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">
<div class="ibo-dashlet-badge--icon-container">
{# Mind the empty "alt" attribute https://www.w3.org/WAI/tutorials/images/decorative/ #}
<img class="ibo-dashlet-badge--icon" src="{{ oUIBlock.GetClassIconUrl() }}" alt="">