N°3807 Bring back styling to raw HTML content

Bulma minireset (https://github.com/jgthms/bulma/blob/master/sass/base/minireset.sass) was applied everywhere in iTop. This was causing HTML content without any Bulma or iTop 3.0.* CSS classes to render with no styles anymore, not even the default browser's ones. Especially rendering for content styled in CK Editor was problematic...

This commit creates a new `ibo-is-html-content` CSS class (in css/backoffice/utils/helpers/_misc.scss) that just extends the `content` Bulma class (indirection to reduce framework coupling).
This new iTop CSS class is added in :
* AttributeText and its children when format is HTML
* HTML components
* activity entries in HTML format

The class can also be used elsewhere when needed, for example in modules having custom pages that aren't using yet the iTop 3.0.* UI components or CSS classes.
This commit is contained in:
Pierre Goiffon
2021-08-04 09:58:49 +02:00
parent e211633fed
commit 9d0e2fa64a
4 changed files with 11 additions and 3 deletions

View File

@@ -4165,7 +4165,7 @@ class AttributeText extends AttributeString
{
$sValue = self::RenderWikiHtml($sValue, true /* wiki only */);
return "<div class=\"HTML\" $sStyle>".InlineImage::FixUrls($sValue).'</div>';
return "<div class=\"HTML ibo-is-html-content\" $sStyle>".InlineImage::FixUrls($sValue).'</div>';
}
}

View File

@@ -142,6 +142,14 @@ body.ibo-has-fullscreen-descendant {
@extend %ibo-font-code-150;
}
/*
* A single class to handle WYSIWYG generated content, where only HTML tags are available
* See https://bulma.io/documentation/elements/content/
*/
.ibo-is-html-content {
@extend .content;
}
/***********************************************************************/
/* Sticky headers */
/* */

View File

@@ -1 +1 @@
{{ oUIBlock.GetHtml()|raw }}
<div class="ibo-is-html-content">{{ oUIBlock.GetHtml()|raw }}</div>

View File

@@ -1,4 +1,4 @@
{% extends 'base/layouts/activity-panel/activity-entry/layout.html.twig' %}
{% block iboActivityEntryExtraClasses %}ibo-caselog-entry ibo-caselog-entry--entry-for-caselog-{{ oUIBlock.GetCaseLogRank() }}{% endblock %}
{% block iboActivityEntryExtraClasses %}ibo-caselog-entry ibo-caselog-entry--entry-for-caselog-{{ oUIBlock.GetCaseLogRank() }} ibo-is-html-content{% endblock %}
{% block iboActivityEntryExtraDataAttributes %}data-entry-caselog-attribute-code="{{ oUIBlock.GetAttCode() }}"{% endblock %}