N°3791 - Panel: Use style defined in the DM for classes

Note that for now, semantic colors cannot be used directly in a <main_color> or <complementary_color> tag. Only valid CSS color (hexa, hsla, ...)
This commit is contained in:
Molkobain
2021-09-26 13:58:48 +02:00
parent 21545da062
commit 3214ae91c7
5 changed files with 327 additions and 85 deletions

View File

@@ -11,39 +11,48 @@
*/
class ormStyle
{
/** @var string */
/** @var string|null */
protected $sMainColor;
/** @var string */
/** @var string|null */
protected $sComplementaryColor;
/** @var string CSS class with color and background-color */
/** @var string|null CSS class with color and background-color */
protected $sStyleClass;
/** @var string CSS class with only color */
/** @var string|null CSS class with only color */
protected $sAltStyleClass;
/** @var string */
/** @var string|null */
protected $sDecorationClasses;
/** @var string Relative path (from current environment) to the icon */
/** @var string|null Relative path (from current environment) to the icon */
protected $sIcon;
/**
* ormStyle constructor.
*
* @param string $sStyleClass
* @param string $sAltStyleClass
* @param string|null $sStyleClass
* @param string|null $sAltStyleClass
* @param string|null $sMainColor
* @param string|null $sComplementaryColor
* @param string|null $sDecorationClasses
* @param string|null $sIcon
*/
public function __construct(string $sStyleClass, string $sAltStyleClass, string $sMainColor = null, string $sComplementaryColor = null, string $sDecorationClasses = null, string $sIcon = null)
public function __construct(?string $sStyleClass = null, ?string $sAltStyleClass = null, ?string $sMainColor = null, ?string $sComplementaryColor = null, ?string $sDecorationClasses = null, ?string $sIcon = null)
{
$this->sMainColor = $sMainColor;
$this->sComplementaryColor = $sComplementaryColor;
$this->sStyleClass = $sStyleClass;
$this->sAltStyleClass = $sAltStyleClass;
$this->sDecorationClasses = $sDecorationClasses;
$this->SetMainColor($sMainColor);
$this->SetComplementaryColor($sComplementaryColor);
$this->SetStyleClass($sStyleClass);
$this->SetAltStyleClass($sAltStyleClass);
$this->SetDecorationClasses($sDecorationClasses);
$this->SetIcon($sIcon);
}
/**
* @see static::$sMainColor
* @return bool
*/
public function HasMainColor(): bool
{
return strlen($this->sMainColor) > 0;
}
/**
* @return string
*/
@@ -59,10 +68,19 @@ class ormStyle
*/
public function SetMainColor(?string $sMainColor)
{
$this->sMainColor = $sMainColor;
$this->sMainColor = (strlen($sMainColor) === 0) ? null : $sMainColor;
return $this;
}
/**
* @see static::$sComplementaryColor
* @return bool
*/
public function HasComplementaryColor(): bool
{
return strlen($this->sComplementaryColor) > 0;
}
/**
* @return string
*/
@@ -78,14 +96,33 @@ class ormStyle
*/
public function SetComplementaryColor(?string $sComplementaryColor)
{
$this->sComplementaryColor = $sComplementaryColor;
$this->sComplementaryColor = (strlen($sComplementaryColor) === 0) ? null : $sComplementaryColor;
return $this;
}
/**
* @see static::$sMainColor
* @see static::$sComplementaryColor
* @return bool
*/
public function HasAtLeastOneColor(): bool
{
return $this->HasMainColor() || $this->HasComplementaryColor();
}
/**
* @see static::$sStyleClass
* @return bool
*/
public function HasStyleClass(): bool
{
return strlen($this->sStyleClass) > 0;
}
/**
* @return string
*/
public function GetStyleClass(): string
public function GetStyleClass(): ?string
{
return $this->sStyleClass;
}
@@ -95,16 +132,25 @@ class ormStyle
*
* @return $this
*/
public function SetStyleClass(string $sStyleClass)
public function SetStyleClass(?string $sStyleClass)
{
$this->sStyleClass = $sStyleClass;
$this->sStyleClass = (strlen($sStyleClass) === 0) ? null : $sStyleClass;
return $this;
}
/**
* @see static::$sAltStyleClass
* @return bool
*/
public function HasAltStyleClass(): bool
{
return strlen($this->sAltStyleClass) > 0;
}
/**
* @return string
*/
public function GetAltStyleClass(): string
public function GetAltStyleClass(): ?string
{
return $this->sAltStyleClass;
}
@@ -114,12 +160,21 @@ class ormStyle
*
* @return $this
*/
public function SetAltStyleClass(string $sAltStyleClass)
public function SetAltStyleClass(?string $sAltStyleClass)
{
$this->sAltStyleClass = $sAltStyleClass;
$this->sAltStyleClass = (strlen($sAltStyleClass) === 0) ? null : $sAltStyleClass;
return $this;
}
/**
* @see static::$sDecorationClasses
* @return bool
*/
public function HasDecorationClasses(): bool
{
return strlen($this->sDecorationClasses) > 0;
}
/**
* @return string
*/
@@ -135,10 +190,19 @@ class ormStyle
*/
public function SetDecorationClasses(?string $sDecorationClasses)
{
$this->sDecorationClasses = $sDecorationClasses;
$this->sDecorationClasses = (strlen($sDecorationClasses) === 0) ? null : $sDecorationClasses;
return $this;
}
/**
* @see static::$sIcon
* @return bool
*/
public function HasIcon(): bool
{
return strlen($this->sIcon) > 0;
}
/**
* @param string|null $sIcon
*

View File

@@ -2254,10 +2254,6 @@ EOF
}
}
// CSS classes representing the element (regular and alternative)
$sCssRegularClass = "ibo-dm-$sElementType--$sClass$sCssClassSuffix";
$sCssAlternativeClass = "ibo-dm-$sElementType-alt--$sClass$sCssClassSuffix";
// Retrieve colors (optional depending on the element)
if ($sElementType === self::ENUM_STYLE_HOST_ELEMENT_TYPE_CLASS) {
$sMainColorForOrm = $this->GetPropString($oNode, 'main_color', null);
@@ -2282,6 +2278,7 @@ EOF
}
$bHasMainColor = is_null($sMainColorForCss) === false;
$bHasComplementaryColor = is_null($sComplementaryColorForCss) === false;
$bHasAtLeastOneColor = $bHasMainColor || $bHasComplementaryColor;
// Optional decoration classes
$sDecorationClasses = $this->GetPropString($oNode, 'decoration_classes', null);
@@ -2297,12 +2294,19 @@ EOF
$sIconRelPath = "'$sModuleRelDir/$sIconRelPath'";
}
// CSS classes representing the element (regular and alternative)
$sCssRegularClass = "ibo-dm-$sElementType--$sClass$sCssClassSuffix";
$sCssRegularClassForOrm = $bHasAtLeastOneColor ? "'$sCssRegularClass'" : "null";
$sCssAlternativeClass = "ibo-dm-$sElementType-alt--$sClass$sCssClassSuffix";
$sCssAlternativeClassForOrm = $bHasAtLeastOneColor ? "'$sCssAlternativeClass'" : "null";
// Generate ormStyle instantiation
$aData['orm_style_instantiation'] = "$sOrmStylePrefix new ormStyle('$sCssRegularClass', '$sCssAlternativeClass', $sMainColorForOrm, $sComplementaryColorForOrm, $sDecorationClasses, $sIconRelPath)";
$aData['orm_style_instantiation'] = "$sOrmStylePrefix new ormStyle($sCssRegularClassForOrm, $sCssAlternativeClassForOrm, $sMainColorForOrm, $sComplementaryColorForOrm, $sDecorationClasses, $sIconRelPath)";
// Generate SCSS declaration
$sScss = "";
if ($bHasMainColor || $bHasComplementaryColor) {
if ($bHasAtLeastOneColor) {
if ($bHasMainColor) {
$sMainColorScssVariableName = "\$$sCssRegularClass--main-color";
$sMainColorCssVariableName = "--$sCssRegularClass--main-color";
@@ -2316,9 +2320,6 @@ EOF
$sCssAlternativeClassComplementaryColorDeclaration = "--ibo-complementary-color: $sMainColorScssVariableName;";
} else {
$sMainColorScssVariableName = null;
$sMainColorCssVariableName = null;
$sMainColorScssVariableDeclaration = null;
$sCssRegularClassMainColorDeclaration = null;
@@ -2338,9 +2339,6 @@ EOF
$sCssAlternativeClassMainColorDeclaration = "--ibo-main-color: $sComplementaryColorScssVariableName;";
} else {
$sComplementaryColorScssVariableName = null;
$sComplementaryColorCssVariableName = null;
$sComplementaryScssVariableDeclaration = null;
$sComplementaryCssVariableDeclaration = null;

View File

@@ -434,10 +434,10 @@ class Panel extends UIContentBlock
*/
public function SetColorFromOrmStyle(ormStyle $oStyle)
{
if (strlen($oStyle->GetStyleClass()) === 0) {
$this->SetColorFromColorSemantic(static::DEFAULT_COLOR_SCHEME);
} else {
if ($oStyle->HasStyleClass()) {
$this->SetCSSColorClass($oStyle->GetStyleClass());
} else {
$this->SetColorFromColorSemantic(static::DEFAULT_COLOR_SCHEME);
}
return $this;

View File

@@ -296,7 +296,8 @@ class MetaModelTest extends ItopDataTestCase
public function GetClassStyleProvider()
{
return [
'Organization' => ['Organization', 'ibo-dm-class--Organization', 'ibo-dm-class-alt--Organization', null, 'itop-structure/../../images/icons/icons8-organization.svg'],
'Class with no color, only icon' => ['Organization', null, null, null, 'itop-structure/../../images/icons/icons8-organization.svg'],
'Class with colors and icon' => ['Contact', 'ibo-dm-class--Contact', 'ibo-dm-class-alt--Contact', null, 'itop-structure/../../images/icons/icons8-customer.svg'],
];
}

View File

@@ -21,75 +21,254 @@ class ormStyleTest extends ItopTestCase
{
/**
* @param string $sRegularClass
* @param string $sAlternativeClass
* @param string|null $sMainColor
* @param string|null $sComplementaryColor
* @param string|null $sDecorationClasses
* @param string|null $sIconRelPath
* @param string $sSetterName
* @param string $sGetterName
* @param mixed $expectedAfterInstantiation
* @param mixed $inputValue
* @param mixed $expectedValueAfterSetter
*
* @covers ormStyle::GetStyleClass
* @covers ormStyle::GetAltStyleClass
* @covers ormStyle::GetMainColor
* @covers ormStyle::GetComplementaryColor
* @covers ormStyle::GetDecorationClasses
* @covers ormStyle::GetIconAsRelPath
* @covers ormStyle::SetStyleClass
* @covers ormStyle::SetAltStyleClass
* @covers ormStyle::SetMainColor
* @covers ormStyle::HasMainColor
* @covers ormStyle::GetComplementaryColor
* @covers ormStyle::SetComplementaryColor
* @covers ormStyle::HasComplementaryColor
* @covers ormStyle::GetStyleClass
* @covers ormStyle::SetStyleClass
* @covers ormStyle::HasStyleClass
* @covers ormStyle::GetAltStyleClass
* @covers ormStyle::SetAltStyleClass
* @covers ormStyle::HasAltStyleClass
* @covers ormStyle::GetDecorationClasses
* @covers ormStyle::SetDecorationClasses
* @covers ormStyle::SetIcon
* @covers ormStyle::HasDecorationClasses
*
* @dataProvider BaseSetsProvider
*/
public function testNonAlteringMethods(string $sRegularClass, string $sAlternativeClass, ?string $sMainColor, ?string $sComplementaryColor, ?string $sDecorationClasses, ?string $sIconRelPath)
public function testPropertiesThatShouldNotBeAnAEmptyString(string $sSetterName, string $sGetterName, $expectedAfterInstantiation, $inputValue, $expectedValueAfterSetter)
{
$oStyle = new ormStyle($sRegularClass, $sAlternativeClass, $sMainColor, $sComplementaryColor, $sDecorationClasses, $sIconRelPath);
$oStyle = new ormStyle();
// Test getters straight from instantiation
$this->assertEquals($sRegularClass, $oStyle->GetStyleClass());
$this->assertEquals($sAlternativeClass, $oStyle->GetAltStyleClass());
$this->assertEquals($sMainColor, $oStyle->GetMainColor());
$this->assertEquals($sComplementaryColor, $oStyle->GetComplementaryColor());
$this->assertEquals($sDecorationClasses, $oStyle->GetDecorationClasses());
$this->assertEquals($sIconRelPath, $oStyle->GetIconAsRelPath());
// Note: Use of assertTrue instead of assertEquals, otherwise it considers null to be equals to ""
$this->assertTrue($oStyle->$sGetterName() === $expectedAfterInstantiation);
// Test that setters don't change passed value
$oStyle->SetStyleClass($sRegularClass);
$this->assertEquals($sRegularClass, $oStyle->GetStyleClass());
$oStyle->$sSetterName($inputValue);
// Note: Use of assertTrue instead of assertEquals, otherwise it considers null to be equals to ""
$this->assertTrue($oStyle->$sGetterName() === $expectedValueAfterSetter);
}
$oStyle->SetAltStyleClass($sAlternativeClass);
$this->assertEquals($sAlternativeClass, $oStyle->GetAltStyleClass());
$oStyle->SetMainColor($sMainColor);
$this->assertEquals($sMainColor, $oStyle->GetMainColor());
$oStyle->SetComplementaryColor($sComplementaryColor);
$this->assertEquals($sComplementaryColor, $oStyle->GetComplementaryColor());
$oStyle->SetDecorationClasses($sDecorationClasses);
$this->assertEquals($sDecorationClasses, $oStyle->GetDecorationClasses());
$oStyle->SetIcon($sIconRelPath);
$this->assertEquals($sIconRelPath, $oStyle->GetIconAsRelPath());
public function BaseSetsProvider(): array
{
return [
'Main color as hexa color' => [
'SetMainColor',
'GetMainColor',
null,
'#ABCDEF',
'#ABCDEF',
],
'Main color as empty string' => [
'SetMainColor',
'GetMainColor',
null,
'',
null,
],
'Main color as null' => [
'SetMainColor',
'GetMainColor',
null,
null,
null,
],
'Main color not present' => [
'SetMainColor',
'HasMainColor',
false,
null,
false,
],
'Main color present' => [
'SetMainColor',
'HasMainColor',
false,
'#ABCDEF',
true,
],
'Complementary color as hexa color' => [
'SetComplementaryColor',
'GetComplementaryColor',
null,
'#ABCDEF',
'#ABCDEF',
],
'Complementary color as empty string' => [
'SetComplementaryColor',
'GetComplementaryColor',
null,
'',
null,
],
'Complementary color as null' => [
'SetComplementaryColor',
'GetComplementaryColor',
null,
null,
null,
],
'Complementary color not present' => [
'SetComplementaryColor',
'HasComplementaryColor',
false,
null,
false,
],
'Complementary color present' => [
'SetComplementaryColor',
'HasComplementaryColor',
false,
'#ABCDEF',
true,
],
'At least main color present' => [
'SetMainColor',
'HasAtLeastOneColor',
false,
'#ABCDEF',
true,
],
'At least complementary color present' => [
'SetComplementaryColor',
'HasAtLeastOneColor',
false,
'#ABCDEF',
true,
],
'Style class as CSS class' => [
'SetStyleClass',
'GetStyleClass',
null,
'foo-css-class',
'foo-css-class',
],
'Style class as empty string' => [
'SetStyleClass',
'GetStyleClass',
null,
'',
null,
],
'Style class as null' => [
'SetStyleClass',
'GetStyleClass',
null,
null,
null,
],
'Style class not present' => [
'SetStyleClass',
'HasComplementaryColor',
false,
null,
false,
],
'Style class present' => [
'SetStyleClass',
'HasStyleClass',
false,
'foo-css-class',
true,
],
'Alt style class as CSS class' => [
'SetAltStyleClass',
'GetAltStyleClass',
null,
'foo-css-class',
'foo-css-class',
],
'Alt style class as empty string' => [
'SetAltStyleClass',
'GetAltStyleClass',
null,
'',
null,
],
'Alt style class as null' => [
'SetAltStyleClass',
'GetAltStyleClass',
null,
null,
null,
],
'Alt style class not present' => [
'SetAltStyleClass',
'HasAltStyleClass',
false,
null,
false,
],
'Alt style class present' => [
'SetAltStyleClass',
'HasAltStyleClass',
false,
'foo-css-class',
true,
],
'Decoration classes as CSS classes' => [
'SetMainColor',
'GetMainColor',
null,
'fas fa-user',
'fas fa-user',
],
'Decoration classes as empty string' => [
'SetMainColor',
'GetMainColor',
null,
'',
null,
],
'Decoration classes as null' => [
'SetMainColor',
'GetMainColor',
null,
null,
null,
],
'Decoration classes not present' => [
'SetDecorationClasses',
'HasDecorationClasses',
false,
null,
false,
],
'Decoration classes present' => [
'SetDecorationClasses',
'HasDecorationClasses',
false,
'fas fa-user',
true,
],
];
}
/**
* @param string $sRegularClass
* @param string $sAlternativeClass
* @param string|null $sRegularClass
* @param string|null $sAlternativeClass
* @param string|null $sMainColor
* @param string|null $sComplementaryColor
* @param string|null $sDecorationClasses
* @param string|null $sIconRelPath
*
* @covers ormStyle::GetIconAsAbsUrl
*
* @dataProvider BaseSetsProvider
*
* @throws \Exception
* @covers ormStyle::GetIconAsAbsUrl
*
* @dataProvider GetIconAsAbsUrlProvider
*
*/
public function testGetIconAsAbsUrl(string $sRegularClass, string $sAlternativeClass, ?string $sMainColor, ?string $sComplementaryColor, ?string $sDecorationClasses, ?string $sIconRelPath)
public function testGetIconAsAbsUrl(?string $sRegularClass, ?string $sAlternativeClass, ?string $sMainColor, ?string $sComplementaryColor, ?string $sDecorationClasses, ?string $sIconRelPath)
{
$oStyle = new ormStyle($sRegularClass, $sAlternativeClass, $sMainColor, $sComplementaryColor, $sDecorationClasses, $sIconRelPath);
@@ -97,7 +276,7 @@ class ormStyleTest extends ItopTestCase
$this->assertEquals($sExpectedIconAbsUrl, $oStyle->GetIconAsAbsUrl());
}
public function BaseSetsProvider(): array
public function GetIconAsAbsUrlProvider(): array
{
return [
'Complete style with icon from /images folder' => [