diff --git a/css/backoffice/blocks-integrations/_field-badge-within-datatable.scss b/css/backoffice/blocks-integrations/_field-badge-within-datatable.scss index 43fc98e7d..18d5cd941 100644 --- a/css/backoffice/blocks-integrations/_field-badge-within-datatable.scss +++ b/css/backoffice/blocks-integrations/_field-badge-within-datatable.scss @@ -1,4 +1,4 @@ -/*! +/* * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 */ diff --git a/css/backoffice/components/_pill.scss b/css/backoffice/components/_pill.scss index 4efb95150..05a94285c 100644 --- a/css/backoffice/components/_pill.scss +++ b/css/backoffice/components/_pill.scss @@ -83,4 +83,11 @@ $ibo-pill-states-colors: ( margin: $ibo-pill--margin; padding: $ibo-pill--padding; border-radius: $ibo-pill--border-radius; + + color: var(--ibo-main-color--900); + background-color: var(--ibo-main-color--100); + + &:hover, &:active { + color: inherit; /* Force color to stay as defined in pill instead of being overloaded by anchor's rules */ + } } \ No newline at end of file diff --git a/css/backoffice/utils/_all.scss b/css/backoffice/utils/_all.scss index 9b5cd8b7a..f3295c6d3 100644 --- a/css/backoffice/utils/_all.scss +++ b/css/backoffice/utils/_all.scss @@ -4,5 +4,6 @@ */ @import "variables/all"; +@import "functions/all"; @import "mixins/all"; @import "helpers/all"; \ No newline at end of file diff --git a/css/backoffice/utils/functions/_all.scss b/css/backoffice/utils/functions/_all.scss new file mode 100644 index 000000000..173b30e39 --- /dev/null +++ b/css/backoffice/utils/functions/_all.scss @@ -0,0 +1,6 @@ +/* + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +@import "color"; \ No newline at end of file diff --git a/css/backoffice/utils/functions/_color.scss b/css/backoffice/utils/functions/_color.scss new file mode 100644 index 000000000..9ed68202d --- /dev/null +++ b/css/backoffice/utils/functions/_color.scss @@ -0,0 +1,18 @@ +/* + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +/** + * Adjust the lightness of $sColor to the absolute $fTargetLightness value. + * It is different than lighten() / darken() that shift the current lightness by X% + */ +@function ibo-adjust-lightness($sColor, $fTargetLightness) { + $iHue: hue($sColor); + $fSaturation: saturation($sColor); + $fLightness: lightness($sColor); + $fAlpha: alpha($sColor); + + @return hsla($iHue, $fSaturation, $fTargetLightness, $fAlpha); +} + diff --git a/css/backoffice/utils/variables/colors/_all.scss b/css/backoffice/utils/variables/colors/_all.scss index e31502eef..bc56d42e5 100644 --- a/css/backoffice/utils/variables/colors/_all.scss +++ b/css/backoffice/utils/variables/colors/_all.scss @@ -3,6 +3,7 @@ * @license http://opensource.org/licenses/AGPL-3.0 */ +@import "base"; @import "base-palette"; @import "semantic-palette"; @import "lifecycle-palette"; \ No newline at end of file diff --git a/css/backoffice/utils/variables/colors/_base-palette.scss b/css/backoffice/utils/variables/colors/_base-palette.scss index 2ba5f0057..dfd0638f8 100644 --- a/css/backoffice/utils/variables/colors/_base-palette.scss +++ b/css/backoffice/utils/variables/colors/_base-palette.scss @@ -3,7 +3,7 @@ * @license http://opensource.org/licenses/AGPL-3.0 */ -/* base color palettes */ +/* Base color palettes */ $ibo-color-white-100: hsla(0, 0%, 100%, 1) !default; $ibo-color-white-200: hsla(0, 0%, 94.9%, 1) !default; $ibo-color-transparent: hsla(0, 0%, 100%, 0) !default; diff --git a/css/backoffice/utils/variables/colors/_base.scss b/css/backoffice/utils/variables/colors/_base.scss new file mode 100644 index 000000000..9b80e1415 --- /dev/null +++ b/css/backoffice/utils/variables/colors/_base.scss @@ -0,0 +1,9 @@ +/* + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +/* Base helpers for colors */ +/* - These lightness vars are used to force a certain lightness on HSLA colors */ +$ibo-color-base-lightness-100: 93% !default; +$ibo-color-base-lightness-900: 15% !default; \ No newline at end of file diff --git a/setup/compiler.class.inc.php b/setup/compiler.class.inc.php index dc5610060..af7a1ba91 100644 --- a/setup/compiler.class.inc.php +++ b/setup/compiler.class.inc.php @@ -1470,6 +1470,8 @@ $sComplementaryColorScssVariableName: $sComplementaryColorForCss !default; .$sEnumClass { --ibo-main-color: $sMainColorScssVariableName; + --ibo-main-color--100: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-100); + --ibo-main-color--900: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-900); --ibo-complementary-color: $sComplementaryColorScssVariableName; } .$sEnumClassAlt { @@ -1513,6 +1515,8 @@ $sComplementaryColorScssVariableName: $sComplementaryColorForCss !default; .$sEnumClass { --ibo-main-color: $sMainColorScssVariableName; + --ibo-main-color--100: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-100); + --ibo-main-color--900: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-900); --ibo-complementary-color: $sComplementaryColorScssVariableName; } .$sEnumClassAlt { @@ -1566,6 +1570,8 @@ $sComplementaryColorScssVariableName: $sComplementaryColorForCss !default; .$sEnumClass { --ibo-main-color: $sMainColorScssVariableName; + --ibo-main-color--100: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-100); + --ibo-main-color--900: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-900); --ibo-complementary-color: $sComplementaryColorScssVariableName; } .$sEnumClassAlt { @@ -1609,6 +1615,8 @@ $sComplementaryColorScssVariableName: $sComplementaryColorForCss !default; .$sEnumClass { --ibo-main-color: $sMainColorScssVariableName; + --ibo-main-color--100: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-100); + --ibo-main-color--900: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-900); --ibo-complementary-color: $sComplementaryColorScssVariableName; } .$sEnumClassAlt { diff --git a/sources/application/UI/Base/Component/Pill/Pill.php b/sources/application/UI/Base/Component/Pill/Pill.php index 3d20ba321..d957907e7 100644 --- a/sources/application/UI/Base/Component/Pill/Pill.php +++ b/sources/application/UI/Base/Component/Pill/Pill.php @@ -24,8 +24,8 @@ class Pill extends UIContentBlock public const BLOCK_CODE = 'ibo-pill'; public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/pill/layout'; - /** @var string */ - protected $sColor; + /** @var null|string CSS class that will be used on the block */ + protected $sCSSColorClass; /** @var null|string URL to go to if the pill is clicked */ protected $sUrl; /** @var null|string Text to display as a tooltip */ @@ -34,30 +34,48 @@ class Pill extends UIContentBlock /** * Pill constructor. * - * @param string $sColor + * @param string|null $sSemanticColor Semantic color code such as "success", "failure", "active", ... {@see css/backoffice/components/_pill.scss} */ - public function __construct(string $sColor) + public function __construct(?string $sSemanticColor = null) { parent::__construct(); - $this->SetColor($sColor); + + if (is_null($sSemanticColor) === false) { + $this->SetSemanticColor($sSemanticColor); + } } /** + * @see static::$sCSSColorClass * @return string */ - public function GetColor(): ?string + public function GetCSSColorClass(): ?string { - return $this->sColor; + return $this->sCSSColorClass; } /** - * @param string $sColor + * @param string $sCSSColorClass * + * @see static::$sCSSColorClass + * @return $this + */ + public function SetCSSColorClass(string $sCSSColorClass) + { + $this->sCSSColorClass = $sCSSColorClass; + + return $this; + } + + /** + * @param string $sSemanticColor Semantic color code such as "success", "failure", "active", ... {@see css/backoffice/components/_pill.scss} + * + * @see static::$sCSSColorClass * @return Pill */ - public function SetColor(string $sColor): Pill + public function SetSemanticColor(string $sSemanticColor) { - $this->sColor = $sColor; + $this->sCSSColorClass = 'ibo-is-'.$sSemanticColor; return $this; } diff --git a/sources/application/UI/Base/Component/Pill/PillFactory.php b/sources/application/UI/Base/Component/Pill/PillFactory.php index 492535a4d..cfbaf5958 100644 --- a/sources/application/UI/Base/Component/Pill/PillFactory.php +++ b/sources/application/UI/Base/Component/Pill/PillFactory.php @@ -9,6 +9,7 @@ namespace Combodo\iTop\Application\UI\Base\Component\Pill; use Combodo\iTop\Application\UI\Helper\UIHelper; +use MetaModel; /** * Class PillFactory @@ -25,12 +26,21 @@ class PillFactory * @param string $sStateCode * * @return \Combodo\iTop\Application\UI\Base\Component\Pill\Pill + * @throws \CoreException */ public static function MakeForState(string $sClass, string $sStateCode) { - $sColor = UIHelper::GetColorFromStatus($sClass, $sStateCode); + $oPill = new Pill(); - return new Pill($sColor); + // First we try to apply style defined in the DM if any, otherwise we fallback on the default colors + $oStyle = MetaModel::GetEnumStyle($sClass, MetaModel::GetStateAttributeCode($sClass), $sStateCode); + if ($oStyle !== null) { + $oPill->SetCSSColorClass($oStyle->GetStyleClass()); + } else { + $oPill->SetSemanticColor(UIHelper::GetColorFromStatusCode($sStateCode)); + } + + return $oPill; } } \ No newline at end of file diff --git a/sources/application/UI/Helper/UIHelper.php b/sources/application/UI/Helper/UIHelper.php index afeccfb89..a87686d78 100644 --- a/sources/application/UI/Helper/UIHelper.php +++ b/sources/application/UI/Helper/UIHelper.php @@ -8,10 +8,6 @@ namespace Combodo\iTop\Application\UI\Helper; -use MetaModel; - -// TODO 3.0.0: Delete this class as it is only a temporary helper while code is being reworked. - /** * Class UIHelper * @@ -22,71 +18,62 @@ use MetaModel; */ class UIHelper { - public static function GetColorFromStatus(string $sClass, ?string $sStateCode): string + /** + * @param string $sStateCode Code of the state value + * @param bool $bAllowFallbackIfNoMatch If set to true, a fallback semantic color code will be returned in case of no matching mappping. Otherwise it will return null to indicate there was no match. + * + * @return string|null A semantic status color code (eg. success, pending, failure, neutral, ...) depending on the value's code. Usefull to try to find a semantic match when a class has no style defined on its state attribute. + */ + public static function GetColorFromStatusCode(string $sStateCode, bool $bAllowFallbackIfNoMatch = true): ?string { - // Example on how to get the color for the current status of a class -// $sStatusColor = 'neutral'; -// $sStateAttCode = MetaModel::GetStateAttributeCode($sClass); -// if (strlen($sStateAttCode) == 0) { -// return $sStatusColor; -// } -// -// $oStyle = MetaModel::GetEnumStyle($sClass, $sStateAttCode, $sStateCode); -// if ($oStyle) { -// $sStatusColor = $oStyle->GetMainColor(); -// } -// return $sStatusColor; + $sStatusColor = null; - $sRootClass = MetaModel::GetRootClass($sClass); - switch ($sRootClass) { - case 'Ticket': - // TODO 3.0.0 : Dehardcode this - switch ($sStateCode) { - case 'new': - $sStatusColor = 'new'; - break; + switch ($sStateCode) { + case 'active': + $sStatusColor = 'active'; + break; - case 'waiting_for_approval': - case 'pending': - $sStatusColor = 'waiting'; - break; + case 'inactive': + $sStatusColor = 'inactive'; + break; - case 'escalated_tto': - case 'escalated_ttr': - case 'rejected': - $sStatusColor = 'failure'; - break; + case 'new': + $sStatusColor = 'new'; + break; - case 'resolved': - $sStatusColor = 'success'; - break; + case 'waiting_for_approval': + case 'pending': + $sStatusColor = 'waiting'; + break; - case 'closed': - $sStatusColor = 'frozen'; - break; + case 'escalated_tto': + case 'escalated_ttr': + case 'rejected': + $sStatusColor = 'failure'; + break; - case 'approved': - case 'assigned': - case 'dispatched': - case 'redispatched': - default: - $sStatusColor = 'neutral'; - break; + case 'resolved': + $sStatusColor = 'success'; + break; + + case 'closed': + $sStatusColor = 'frozen'; + break; + + case 'approved': + case 'assigned': + case 'dispatched': + case 'redispatched': + $sStatusColor = 'neutral'; + break; + + default: + if ($bAllowFallbackIfNoMatch) { + $sStatusColor = 'neutral'; } break; - default: - switch ($sStateCode) { - case 'active': - $sStatusColor = 'active'; - break; - case 'inactive': - $sStatusColor = 'inactive'; - break; - default: - $sStatusColor = 'neutral'; - break; - } } + return $sStatusColor; } } \ 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 945c97fdc..c81fa38b0 100644 --- a/templates/base/components/pill/layout.html.twig +++ b/templates/base/components/pill/layout.html.twig @@ -3,7 +3,7 @@ {% 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() }}" + class="ibo-pill {{ oUIBlock.GetCSSColorClass() }}" data-role="ibo-pill" {% if oUIBlock.HasTooltip() %}data-tooltip-content="{{ oUIBlock.GetTooltip() }}" data-tooltip-show-delay="500"{% endif %}> {% for oSubBlock in oUIBlock.GetSubBlocks() %}