N°3882 - Move DataModel classes fields' style to theme instead of (duplicated) inline CSS

This commit is contained in:
Molkobain
2021-09-21 22:49:41 +02:00
parent 24cedbdebd
commit e2b73995e1
4 changed files with 185 additions and 89 deletions

View File

@@ -906,7 +906,8 @@ CSS;
foreach($aImportsPaths as $sPath)
{
$sFilePath = $sPath.'/'.$sFileURI;
$sAlterableFileURI = $sFileURI;
$sFilePath = $sPath.'/'.$sAlterableFileURI;
$sImportedFile = realpath($sFilePath);
if ($sImportedFile === false){
// Handle shortcut syntax : @import "typo" ;
@@ -914,7 +915,7 @@ CSS;
$sFilePath2 = "$sFilePath.scss";
$sImportedFile = realpath($sFilePath2);
if ($sImportedFile){
self::FindStylesheetFile("$sFileURI.scss", [ $sPath ], $oFindStylesheetObject, $bImports);
self::FindStylesheetFile("$sAlterableFileURI.scss", [ $sPath ], $oFindStylesheetObject, $bImports);
$sImportedFile = false;
}
}
@@ -924,7 +925,7 @@ CSS;
// file matched: _typo.scss
$sShortCut = substr($sFilePath, strrpos($sFilePath, '/') + 1);
$sFilePath = static::ReplaceLastOccurrence($sShortCut, "_$sShortCut.scss", $sFilePath);
$sFileURI = static::ReplaceLastOccurrence($sShortCut, "_$sShortCut.scss", $sFileURI);
$sAlterableFileURI = static::ReplaceLastOccurrence($sShortCut, "_$sShortCut.scss", $sAlterableFileURI);
$sImportedFile = realpath($sFilePath);
}
@@ -932,14 +933,14 @@ CSS;
&& (!$oFindStylesheetObject->AlreadyFetched($sImportedFile)))
{
if ($bImports){
$oFindStylesheetObject->AddImport($sFileURI, $sImportedFile);
$oFindStylesheetObject->AddImport($sAlterableFileURI, $sImportedFile);
}else{
$oFindStylesheetObject->AddStylesheet($sFileURI, $sImportedFile);
$oFindStylesheetObject->AddStylesheet($sAlterableFileURI, $sImportedFile);
}
$oFindStylesheetObject->UpdateLastModified($sImportedFile);
//Regexp matching on all included scss files : @import 'XXX.scss';
$sDirUri = dirname($sFileURI);
$sDirUri = dirname($sAlterableFileURI);
preg_match_all('/@import \s*[\"\']([^\"\']*)\s*[\"\']\s*;/', file_get_contents($sImportedFile), $aMatches);
if ( (is_array($aMatches)) && (count($aMatches)!==0) ){
foreach ($aMatches[1] as $sImportedFile){

View File

@@ -7,7 +7,7 @@
/**
* Class ormStyle
*
* @since 3.0.0
* @since 3.0
*/
class ormStyle
{

View File

@@ -84,6 +84,11 @@ class MFCompiler
protected $sMainPHPCode; // Code that goes into core/main.php
protected $aSnippets;
protected $aRelations;
/**
* @var array Strings containing dynamic CSS definitions for DM classes
* @since 3.0.0
*/
protected $aClassesCSSRules;
protected $sEnvironment;
protected $sCompilationTimeStamp;
@@ -104,6 +109,7 @@ class MFCompiler
$this->sMainPHPCode .= "define('COMPILATION_TIMESTAMP', '".$this->sCompilationTimeStamp."');\n";
$this->aSnippets = array();
$this->aRelations = array();
$this->aClassesCSSRules = [];
}
protected function Log($sText)
@@ -411,9 +417,6 @@ class MFCompiler
}
/** array of strings containing dynamic CSS class definitions */
$aClassesCss = [];
$oClasses = $this->oFactory->ListClasses($sModuleName);
$iClassCount = $oClasses->length;
if ($iClassCount == 0)
@@ -429,7 +432,7 @@ class MFCompiler
$aAllClasses[] = $sClass;
try
{
$sCompiledCode .= $this->CompileClass($oClass, $sTempTargetDir, $sFinalTargetDir, $sRelativeDir, $aClassesCss);
$sCompiledCode .= $this->CompileClass($oClass, $sTempTargetDir, $sFinalTargetDir, $sRelativeDir);
}
catch (DOMFormatException $e)
{
@@ -868,7 +871,17 @@ EOF
return $sPHP;
}
protected function GetPropString($oNode, $sTag, $sDefault = null)
/**
* @param $oNode
* @param string $sTag
* @param string|null $sDefault
* @param bool $bAddQuotes If true, surrounds property value with single quotes and escapes existing single quotes
*
* @return string|null
*
* @since 3.0.0 Add param. $bAddQuotes to be equivalent to {@see self::GetMandatoryPropString} and allow retrieving property without surrounding single quotes
*/
protected function GetPropString($oNode, string $sTag, string $sDefault = null, bool $bAddQuotes = true)
{
$val = $oNode->GetChildText($sTag);
if (is_null($val))
@@ -882,18 +895,23 @@ EOF
$val = $sDefault;
}
}
return "'".str_replace("'", "\\'", $val)."'";
if ($bAddQuotes) {
$val = "'".str_replace("'", "\\'", $val)."'";
}
return $val;
}
/**
* @param $oNode
* @param $sTag
* @param string $sTag
* @param bool $bAddQuotes
*
* @return string
* @throws \DOMFormatException
*/
protected function GetMandatoryPropString($oNode, $sTag, $bAddQuotes = true)
protected function GetMandatoryPropString($oNode, string $sTag, bool $bAddQuotes = true)
{
$val = $oNode->GetChildText($sTag);
if (!is_null($val) && ($val !== ''))
@@ -1084,17 +1102,17 @@ EOF
* @param string $sTempTargetDir
* @param string $sFinalTargetDir
* @param string $sModuleRelativeDir
* @param array $aClassesCss Contains dynamic CSS class definitions
*
* @return string
* @throws \DOMFormatException
*/
protected function CompileClass($oClass, $sTempTargetDir, $sFinalTargetDir, $sModuleRelativeDir, &$aClassesCss)
protected function CompileClass($oClass, $sTempTargetDir, $sFinalTargetDir, $sModuleRelativeDir)
{
$sClass = $oClass->getAttribute('id');
$oProperties = $oClass->GetUniqueElement('properties');
$sPHP = '';
$sCss = ''; // Contains dynamic CSS class definitions
/** @var Contains dynamic CSS class definitions $sCss */
$sCss = '';
// Class caracteristics
//
@@ -1426,20 +1444,37 @@ EOF
$aValues[] = $sCode;
$oStyleNode = $oValue->GetOptionalElement('style');
if ($oStyleNode) {
$sMainColor = $this->GetMandatoryPropString($oStyleNode, 'main_color');
$sSafeCode = utils::GetSafeId($sCode);
$sEnumClass = "ibo-enum--$sClass-$sAttCode-$sSafeCode";
$sEnumClassAlt = "ibo-enum-alt--$sClass-$sAttCode-$sSafeCode";
$sComplementaryColor = $this->GetMandatoryPropString($oStyleNode, 'complementary_color');
$sMainColorForOrm = $this->GetMandatoryPropString($oStyleNode, 'main_color');
$sMainColorForCss = $this->GetMandatoryPropString($oStyleNode, 'main_color', false);
$sMainColorScssVariableName = "\$$sEnumClass--main-color";
$sMainColorCssVariableName = "--$sEnumClass--main-color";
$sComplementaryColorForOrm = $this->GetMandatoryPropString($oStyleNode, 'complementary_color');
$sComplementaryColorForCss = $this->GetMandatoryPropString($oStyleNode, 'complementary_color', false);
$sComplementaryColorScssVariableName = "\$$sEnumClass--complementary-color";
$sComplementaryColorCssVariableName = "--$sEnumClass--complementary-color";
$sDecorationClasses = $this->GetPropString($oStyleNode, 'decoration_classes', '');
$aStyledValues[] = "'$sCode' => new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColor, $sComplementaryColor, $sDecorationClasses)";
$aStyledValues[] = "'$sCode' => new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColorForOrm, $sComplementaryColorForOrm, $sDecorationClasses)";
$sCss .= <<<CSS
$sMainColorScssVariableName: $sMainColorForCss !default;
$sComplementaryColorScssVariableName: $sComplementaryColorForCss !default;
:root {
$sMainColorCssVariableName: #{{$sMainColorScssVariableName}};
$sComplementaryColorCssVariableName: #{{$sComplementaryColorScssVariableName}};
}
.$sEnumClass {
color: $sComplementaryColor;
background-color: $sMainColor;
--ibo-main-color: $sMainColorScssVariableName;
--ibo-complementary-color: $sComplementaryColorScssVariableName;
}
.$sEnumClassAlt {
color: $sMainColor;
--ibo-main-color: $sComplementaryColorScssVariableName;
--ibo-complementary-color: $sMainColorScssVariableName;
}
CSS;
@@ -1451,21 +1486,38 @@ CSS;
$sStyledValues = "[".implode(',', $aStyledValues)."]";
$aParameters['styled_values'] = "$sStyledValues";
}
$oStyleNode = $oField->GetOptionalElement('default_style');
if ($oStyleNode) {
$sMainColor = $this->GetMandatoryPropString($oStyleNode, 'main_color');
$oDefaultStyleNode = $oField->GetOptionalElement('default_style');
if ($oDefaultStyleNode) {
$sEnumClass = "ibo-enum--$sClass-$sAttCode";
$sEnumClassAlt = "ibo-enum-alt--$sClass-$sAttCode";
$sComplementaryColor = $this->GetMandatoryPropString($oStyleNode, 'complementary_color');
$sDecorationClasses = $this->GetPropString($oStyleNode, 'decoration_classes', '');
$aParameters['default_style'] = "new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColor, $sComplementaryColor, $sDecorationClasses)";
$sMainColorForOrm = $this->GetMandatoryPropString($oDefaultStyleNode, 'main_color');
$sMainColorForCss = $this->GetMandatoryPropString($oDefaultStyleNode, 'main_color', false);
$sMainColorScssVariableName = "\$$sEnumClass--main-color";
$sMainColorCssVariableName = "--$sEnumClass--main-color";
$sComplementaryColorForOrm = $this->GetMandatoryPropString($oDefaultStyleNode, 'complementary_color');
$sComplementaryColorForCss = $this->GetMandatoryPropString($oDefaultStyleNode, 'complementary_color', false);
$sComplementaryColorScssVariableName = "\$$sEnumClass--complementary-color";
$sComplementaryColorCssVariableName = "--$sEnumClass--complementary-color";
$sDecorationClasses = $this->GetPropString($oDefaultStyleNode, 'decoration_classes', '');
$aParameters['default_style'] = "new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColorForOrm, $sComplementaryColorForOrm, $sDecorationClasses)";
$sCss .= <<<CSS
$sMainColorScssVariableName: $sMainColorForCss !default;
$sComplementaryColorScssVariableName: $sComplementaryColorForCss !default;
:root {
$sMainColorCssVariableName: #{{$sMainColorScssVariableName}};
$sComplementaryColorCssVariableName: #{{$sComplementaryColorScssVariableName}};
}
.$sEnumClass {
color: $sComplementaryColor;
background-color: $sMainColor;
--ibo-main-color: $sMainColorScssVariableName;
--ibo-complementary-color: $sComplementaryColorScssVariableName;
}
.$sEnumClassAlt {
color: $sMainColor;
--ibo-main-color: $sComplementaryColorScssVariableName;
--ibo-complementary-color: $sMainColorScssVariableName;
}
CSS;
@@ -1488,20 +1540,37 @@ CSS;
$aValues[] = $sCode;
$oStyleNode = $oValue->GetOptionalElement('style');
if ($oStyleNode) {
$sMainColor = $this->GetMandatoryPropString($oStyleNode, 'main_color');
$sSafeCode = utils::GetSafeId($sCode);
$sEnumClass = "ibo-enum--$sClass-$sAttCode-$sSafeCode";
$sEnumClassAlt = "ibo-enum-alt--$sClass-$sAttCode-$sSafeCode";
$sComplementaryColor = $this->GetMandatoryPropString($oStyleNode, 'complementary_color');
$sMainColorForOrm = $this->GetMandatoryPropString($oStyleNode, 'main_color');
$sMainColorForCss = $this->GetMandatoryPropString($oStyleNode, 'main_color', false);
$sMainColorScssVariableName = "\$$sEnumClass--main-color";
$sMainColorCssVariableName = "--$sEnumClass--main-color";
$sComplementaryColorForOrm = $this->GetMandatoryPropString($oStyleNode, 'complementary_color');
$sComplementaryColorForCss = $this->GetMandatoryPropString($oStyleNode, 'complementary_color', false);
$sComplementaryColorScssVariableName = "\$$sEnumClass--complementary-color";
$sComplementaryColorCssVariableName = "--$sEnumClass--complementary-color";
$sDecorationClasses = $this->GetPropString($oStyleNode, 'decoration_classes', '');
$aStyledValues[] = "'$sCode' => new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColor, $sComplementaryColor, $sDecorationClasses)";
$aStyledValues[] = "'$sCode' => new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColorForOrm, $sComplementaryColorForOrm, $sDecorationClasses)";
$sCss .= <<<CSS
$sMainColorScssVariableName: $sMainColorForCss !default;
$sComplementaryColorScssVariableName: $sComplementaryColorForCss !default;
:root {
$sMainColorCssVariableName: #{{$sMainColorScssVariableName}};
$sComplementaryColorCssVariableName: #{{$sComplementaryColorScssVariableName}};
}
.$sEnumClass {
color: $sComplementaryColor;
background-color: $sMainColor;
--ibo-main-color: $sMainColorScssVariableName;
--ibo-complementary-color: $sComplementaryColorScssVariableName;
}
.$sEnumClassAlt {
color: $sMainColor;
--ibo-main-color: $sComplementaryColorScssVariableName;
--ibo-complementary-color: $sMainColorScssVariableName;
}
CSS;
@@ -1513,21 +1582,38 @@ CSS;
$sStyledValues = "[".implode(',', $aStyledValues)."]";
$aParameters['styled_values'] = "$sStyledValues";
}
$oStyleNode = $oField->GetOptionalElement('default_style');
if ($oStyleNode) {
$sMainColor = $this->GetMandatoryPropString($oStyleNode, 'main_color');
$oDefaultStyleNode = $oField->GetOptionalElement('default_style');
if ($oDefaultStyleNode) {
$sEnumClass = "ibo-enum--$sClass-$sAttCode";
$sEnumClassAlt = "ibo-enum-alt--$sClass-$sAttCode";
$sComplementaryColor = $this->GetMandatoryPropString($oStyleNode, 'complementary_color');
$sDecorationClasses = $this->GetPropString($oStyleNode, 'decoration_classes', '');
$aParameters['default_style'] = "new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColor, $sComplementaryColor, $sDecorationClasses)";
$sMainColorForOrm = $this->GetMandatoryPropString($oDefaultStyleNode, 'main_color');
$sMainColorForCss = $this->GetMandatoryPropString($oDefaultStyleNode, 'main_color', false);
$sMainColorScssVariableName = "\$$sEnumClass--main-color";
$sMainColorCssVariableName = "--$sEnumClass--main-color";
$sComplementaryColorForOrm = $this->GetMandatoryPropString($oDefaultStyleNode, 'complementary_color');
$sComplementaryColorForCss = $this->GetMandatoryPropString($oDefaultStyleNode, 'complementary_color', false);
$sComplementaryColorScssVariableName = "\$$sEnumClass--complementary-color";
$sComplementaryColorCssVariableName = "--$sEnumClass--complementary-color";
$sDecorationClasses = $this->GetPropString($oDefaultStyleNode, 'decoration_classes', '');
$aParameters['default_style'] = "new ormStyle('$sEnumClass', '$sEnumClassAlt', $sMainColorForOrm, $sComplementaryColorForOrm, $sDecorationClasses)";
$sCss .= <<<CSS
$sMainColorScssVariableName: $sMainColorForCss !default;
$sComplementaryColorScssVariableName: $sComplementaryColorForCss !default;
:root {
$sMainColorCssVariableName: #{{$sMainColorScssVariableName}};
$sComplementaryColorCssVariableName: #{{$sComplementaryColorScssVariableName}};
}
.$sEnumClass {
color: $sComplementaryColor;
background-color: $sMainColor;
--ibo-main-color: $sMainColorScssVariableName;
--ibo-complementary-color: $sComplementaryColorScssVariableName;
}
.$sEnumClassAlt {
color: $sMainColor;
--ibo-main-color: $sComplementaryColorScssVariableName;
--ibo-complementary-color: $sMainColorScssVariableName;
}
CSS;
@@ -2247,7 +2333,12 @@ EOF
}
}
$aClassesCss[] = $sCss;
if (strlen($sCss) > 0) {
if (array_key_exists($sClass, $this->aClassesCSSRules) === false) {
$this->aClassesCSSRules[$sClass] = '';
}
$this->aClassesCSSRules[$sClass] .= $sCss;
}
return $sPHP;
}
@@ -2884,12 +2975,20 @@ EOF;
);
// Build compiled themes folder
$sThemesDir = $sTempTargetDir.'branding/themes/';
if(!is_dir($sThemesDir))
$sThemesRelDirPath = 'branding/themes/';
$sThemesAbsDirPath = $sTempTargetDir.$sThemesRelDirPath;
if(!is_dir($sThemesAbsDirPath))
{
SetupUtils::builddir($sThemesDir);
SetupUtils::builddir($sThemesAbsDirPath);
}
// Prepare DM CSS rules for inclusion
$sDmStylesheetFilename = 'datamodel-scss-rules.scss';
$sDmStylesheetContent = implode("\n", $this->aClassesCSSRules);
// Here we use a hash instead of the current timestamp because the former changes when running unit tests
$sDmStylesheetId = 'datamodel-scss-rules-'.md5($sDmStylesheetContent);
$this->WriteFile($sThemesAbsDirPath.$sDmStylesheetFilename, $sDmStylesheetContent);
// Parsing themes from DM
$aThemes = array();
/** @var \DOMNodeList $oThemeNodes */
@@ -2925,6 +3024,8 @@ EOF;
}
}
// Stylesheets
// - Manually added in the XML
/** @var \DOMNodeList $oStylesheets */
$oStylesheets = $oTheme->GetNodes('stylesheets/stylesheet');
foreach($oStylesheets as $oStylesheet)
@@ -2933,6 +3034,9 @@ EOF;
$aThemeParameters['stylesheets'][$sStylesheetId] = $oStylesheet->GetText();
}
// - Computed from the DM
$aThemeParameters['stylesheets'][$sDmStylesheetId] = $sThemesRelDirPath.$sDmStylesheetFilename;
$aThemes[$sThemeId] = [
'theme_parameters' => $aThemeParameters,
'precompiled_stylesheet' => $oTheme->GetChildText('precompiled_stylesheet', '')
@@ -2943,6 +3047,7 @@ EOF;
if(empty($aThemes))
{
$aDefaultThemeInfo = ThemeHandler::GetDefaultThemeInformation();
$aDefaultThemeInfo['parameters']['stylesheets'][$sDmStylesheetId] = $sThemesRelDirPath.$sDmStylesheetFilename;
$aThemes[$aDefaultThemeInfo['name']] = $aDefaultThemeInfo['parameters'];
}
@@ -2958,7 +3063,7 @@ EOF;
$aThemeParameters = $aThemeInfos['theme_parameters'];
$sPrecompiledStylesheet = $aThemeInfos['precompiled_stylesheet'];
$sThemeDir = $sThemesDir.$sThemeId;
$sThemeDir = $sThemesAbsDirPath.$sThemeId;
if(!is_dir($sThemeDir))
{
SetupUtils::builddir($sThemeDir);

View File

@@ -38,16 +38,6 @@ class FieldBadgeUIBlockFactory extends AbstractUIBlockFactory
$sHtml .= "<span class=\"ibo-field-badge--decoration\"><i class=\"$sDecorationClasses\"></i></span>";
}
$sHtml .= "<span class=\"ibo-field-badge--label\">$sValue</span>";
// Add custom style
// TODO 3.0 To be removed when compilation supports generated CSS
$sHtml .= <<<HTML
<style>
.$sStyleClass {
color: $sComplementaryColor;
background-color: $sPrimaryColor;
}
</style>
HTML;
}
}
if (!$oBadge) {