composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°3882 - Header dynamic: Pills now shows the real color from the DM

Browse Source
This commit is contained in:
Molkobain
2021-09-23 09:25:16 +02:00
parent 197864ff83
commit 1cb100b010
13 changed files with 139 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/backoffice/blocks-integrations/_field-badge-within-datatable.scss
View File

@@ -1,4 +1,4 @@
/*!
/*
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/

7
css/backoffice/components/_pill.scss
View File

@@ -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 */
}
}

1
css/backoffice/utils/_all.scss
View File

@@ -4,5 +4,6 @@
*/
@import "variables/all";
@import "functions/all";
@import "mixins/all";
@import "helpers/all";

6
css/backoffice/utils/functions/_all.scss Normal file
View File

@@ -0,0 +1,6 @@
/*
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import "color";

18
css/backoffice/utils/functions/_color.scss Normal file
View File

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

1
css/backoffice/utils/variables/colors/_all.scss
View File

@@ -3,6 +3,7 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import "base";
@import "base-palette";
@import "semantic-palette";
@import "lifecycle-palette";

2
css/backoffice/utils/variables/colors/_base-palette.scss
View File

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

9
css/backoffice/utils/variables/colors/_base.scss Normal file
View File

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

8
setup/compiler.class.inc.php
View File

@@ -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 {

38
sources/application/UI/Base/Component/Pill/Pill.php
View File

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

14
sources/application/UI/Base/Component/Pill/PillFactory.php
View File

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

105
sources/application/UI/Helper/UIHelper.php
View File

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

2
templates/base/components/pill/layout.html.twig
View File

@@ -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() %}