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

N°7655 - Handle highlightjs styles in fronts styles and force it to apply over inlined styles

Browse Source
This commit is contained in:
Stephen Abello
2024-07-24 11:21:05 +02:00
parent c5727d366f
commit 4680b6a497
10 changed files with 218 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/backoffice/vendors/_all.scss vendored
View File

@@ -8,6 +8,7 @@
@import "../../../node_modules/bulma-scss/utilities/all";
@import "../../../node_modules/bulma-scss/base/all";
@import "../../../node_modules/bulma-scss/elements/content";
@import "highlightjs";
@import "ckeditor/all";
@import "c3";
@import "tippy";

45
css/backoffice/vendors/_highlightjs.scss vendored Normal file
View File

@@ -0,0 +1,45 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import "../../common/vendors/_highlightjs";
// Backoffice specific variables
$ibo-vendors-highlightjs--padding: 0.9rem !default;
$ibo-vendors-highlightjs--box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4) !default;
$ibo-vendors-highlightjs--border-radius: $ibo-border-radius-300 !default;
$ibo-vendors-highlightjs--code--padding-x: 5px !default;
$ibo-vendors-highlightjs--code--padding-y: 3px !default;
$ibo-vendors-highlightjs--background-color: #282b2e !default;
$ibo-vendors-highlightjs--color: #e0e2e4 !default;
$ibo-vendors-highlightjs--keyword--color: #93c763 !default;
$ibo-vendors-highlightjs--number--color: #ffcd22 !default;
$ibo-vendors-highlightjs--attribute--color: #668bb0 !default;
$ibo-vendors-highlightjs--regexp--color: #d39745 !default;
$ibo-vendors-highlightjs--meta--color: #557182 !default;
$ibo-vendors-highlightjs--tag--color: #8cbbad !default;
$ibo-vendors-highlightjs--string--color: #ec7600 !default;
$ibo-vendors-highlightjs--comment--color: #818e96 !default;
$ibo-vendors-highlightjs--selector-class--color: #A082BD !default;
$ibo-vendors-highlightjs--code--color: white !default;
// Override common variables
$common-vendors-highlightjs--padding: $ibo-vendors-highlightjs--padding;
$common-vendors-highlightjs--box-shadow: $ibo-vendors-highlightjs--box-shadow;
$common-vendors-highlightjs--border-radius: $ibo-vendors-highlightjs--border-radius;
$common-vendors-highlightjs--code--padding-x: $ibo-vendors-highlightjs--code--padding-x;
$common-vendors-highlightjs--code--padding-y: $ibo-vendors-highlightjs--code--padding-y;
$common-vendors-highlightjs--background-color: $ibo-vendors-highlightjs--background-color;
$common-vendors-highlightjs--color: $ibo-vendors-highlightjs--color;
$common-vendors-highlightjs--keyword--color: $ibo-vendors-highlightjs--keyword--color;
$common-vendors-highlightjs--number--color: $ibo-vendors-highlightjs--number--color;
$common-vendors-highlightjs--attribute--color: $ibo-vendors-highlightjs--attribute--color;
$common-vendors-highlightjs--regexp--color: $ibo-vendors-highlightjs--regexp--color;
$common-vendors-highlightjs--meta--color: $ibo-vendors-highlightjs--meta--color;
$common-vendors-highlightjs--tag--color: $ibo-vendors-highlightjs--tag--color;
$common-vendors-highlightjs--string--color: $ibo-vendors-highlightjs--string--color;
$common-vendors-highlightjs--comment--color: $ibo-vendors-highlightjs--comment--color;
$common-vendors-highlightjs--selector-class--color: $ibo-vendors-highlightjs--selector-class--color;
$common-vendors-highlightjs--code--color: $ibo-vendors-highlightjs--code--color;

28
css/backoffice/vendors/ckeditor/_overloads.scss vendored
View File

@@ -4,24 +4,12 @@
*/
/* SCSS variables */
$ibo-vendors-highlightjs--padding: 0.9rem !default;
$ibo-vendors-highlightjs--border-radius: $ibo-border-radius-300 !default;
//$ibo-vendors-ckeditor--autocomplete-panel--border: none !default;
//$ibo-vendors-ckeditor--autocomplete-panel--border-radius: $ibo-border-radius-300 !default;
//$ibo-vendors-ckeditor--autocomplete-panel--background-color: $ibo-color-white-100 !default;
//
//$ibo-vendors-ckeditor--autocomplete-item-image--size: 25px !default;
//$ibo-vendors-ckeditor--autocomplete-item-image--margin-right: 0.5rem !default;
//$ibo-vendors-ckeditor--autocomplete-item-image--background-color: $ibo-color-blue-100 !default;
//$ibo-vendors-ckeditor--autocomplete-item-image--border: 1px solid $ibo-color-grey-600 !default;
//
//$ibo-vendors-ckeditor--autocomplete-item-title--text-color: #3A3A3A !default;
$ibo-vendors-ckeditor--ck-content--text-color: $ibo-color-grey-900 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--padding: 0 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--code--background-color: $ibo-color-grey-900 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--code--color: $ibo-color-white-100 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--code--padding: $ibo-vendors-highlightjs--padding !default;
/* - Following SCSS variables are only there to overlaod the CSS3 variables of CKEditor (see `src/resources/styles/default-theme.css` in CKEditor) */
$ibo-vendors-ckeditor--ck-color-list-button-on-background: $ibo-color-grey-200 !default;
$ibo-vendors-ckeditor--ck-color-list-button-on-background-focus: $ibo-color-grey-200 !default;
@@ -97,16 +85,4 @@ $ibo-vendors-ckeditor--ck-mentions--item--padding-y: $ibo-spacing-200 !default;
line-height: $ibo-vendors-ckeditor--ck-mentions--item--line-height;
padding: $ibo-vendors-ckeditor--ck-mentions--item--padding-y $ibo-vendors-ckeditor--ck-mentions--item--padding-x !important; /* Important in order to overload the CKE native rule */
}
}
/* Highlight JS */
.hljs {
padding: $ibo-vendors-highlightjs--padding !important;
box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
border-radius: $ibo-vendors-highlightjs--border-radius;
white-space: pre-wrap;
}
.ibo-hljs-container{
padding: 0 !important;
}
}

120
css/common/vendors/_highlightjs.scss vendored Normal file
View File

@@ -0,0 +1,120 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
$common-vendors-highlightjs--padding: 0.9rem !default;
$common-vendors-highlightjs--box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4) !default;
$common-vendors-highlightjs--border-radius: 4px !default;
$common-vendors-highlightjs--code--padding-x: 5px !default;
$common-vendors-highlightjs--code--padding-y: 3px !default;
$common-vendors-highlightjs--background-color: #282b2e !default;
$common-vendors-highlightjs--color: #e0e2e4 !default;
$common-vendors-highlightjs--keyword--color: #93c763 !default;
$common-vendors-highlightjs--number--color: #ffcd22 !default;
$common-vendors-highlightjs--attribute--color: #668bb0 !default;
$common-vendors-highlightjs--regexp--color: #d39745 !default;
$common-vendors-highlightjs--meta--color: #557182 !default;
$common-vendors-highlightjs--tag--color: #8cbbad !default;
$common-vendors-highlightjs--string--color: #ec7600 !default;
$common-vendors-highlightjs--comment--color: #818e96 !default;
$common-vendors-highlightjs--selector-class--color: #A082BD !default;
$common-vendors-highlightjs--code--color: white !default;
// Highlight.js stylesheets
/* Highlight JS */
.hljs {
}
.common-hljs-container{
padding: 0 !important;
border: none !important;
}
pre code.hljs {
display: block;
overflow-x: auto;
padding: $common-vendors-highlightjs--padding !important;
}
code.hljs {
padding: $common-vendors-highlightjs--code--padding-y $common-vendors-highlightjs--code--padding-x !important;
}
/**
* Obsidian style
* ported by Alexander Marenin (http://github.com/ioncreature)
*/
.hljs {
box-shadow: $common-vendors-highlightjs--box-shadow !important;
border-radius: $common-vendors-highlightjs--border-radius !important;
white-space: pre-wrap;
border: none !important;
color: $common-vendors-highlightjs--color !important;
background: $common-vendors-highlightjs--background-color !important;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-selector-id {
color: $common-vendors-highlightjs--keyword--color !important;
}
.hljs-number {
color: $common-vendors-highlightjs--number--color !important;
}
.hljs-attribute {
color: $common-vendors-highlightjs--attribute--color
}
.hljs-regexp,
.hljs-link {
color: $common-vendors-highlightjs--regexp--color !important;
}
.hljs-meta {
color: $common-vendors-highlightjs--meta--color !important;
}
.hljs-tag,
.hljs-name,
.hljs-bullet,
.hljs-subst,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: $common-vendors-highlightjs--tag--color !important;
}
.hljs-string,
.hljs-symbol {
color: $common-vendors-highlightjs--string--color !important;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: $common-vendors-highlightjs--comment--color !important;
}
.hljs-selector-class {
color: $common-vendors-highlightjs--selector-class--color !important;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold
}
.hljs-code,
.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-section {
color: $common-vendors-highlightjs--code--color !important;
}

2
datamodels/2.x/itop-portal-base/portal/public/css/portal.css
View File

File diff suppressed because one or more lines are too long

26
datamodels/2.x/itop-portal-base/portal/public/css/portal.scss
View File

@@ -18,6 +18,8 @@
@import 'variables.scss';
@import '../../../../../js/ckeditor/build/compiled-theme';
@import '../../../../../css/common/vendors/_highlightjs.scss';
/*!
* Combodo portal template v1.0.0
@@ -1827,3 +1829,27 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($state-danger-border, 10);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($state-danger-border, 10);
}
/*****************************************************/
/* Redefine highlightjs variables */
/******************************************************/
$common-vendors-highlightjs--padding: $ipb-vendors-highlightjs--padding;
$common-vendors-highlightjs--box-shadow: $ipb-vendors-highlightjs--box-shadow;
$common-vendors-highlightjs--border-radius: $ipb-vendors-highlightjs--border-radius;
$common-vendors-highlightjs--code--padding-x: $ipb-vendors-highlightjs--code--padding-x;
$common-vendors-highlightjs--code--padding-y: $ipb-vendors-highlightjs--code--padding-y;
$common-vendors-highlightjs--background-color: $ipb-vendors-highlightjs--background-color;
$common-vendors-highlightjs--color: $ipb-vendors-highlightjs--color;
$common-vendors-highlightjs--keyword--color: $ipb-vendors-highlightjs--keyword--color;
$common-vendors-highlightjs--number--color: $ipb-vendors-highlightjs--number--color;
$common-vendors-highlightjs--attribute--color: $ipb-vendors-highlightjs--attribute--color;
$common-vendors-highlightjs--regexp--color: $ipb-vendors-highlightjs--regexp--color;
$common-vendors-highlightjs--meta--color: $ipb-vendors-highlightjs--meta--color;
$common-vendors-highlightjs--tag--color: $ipb-vendors-highlightjs--tag--color;
$common-vendors-highlightjs--string--color: $ipb-vendors-highlightjs--string--color;
$common-vendors-highlightjs--comment--color: $ipb-vendors-highlightjs--comment--color;
$common-vendors-highlightjs--selector-class--color: $ipb-vendors-highlightjs--selector-class--color;
$common-vendors-highlightjs--code--color: $ipb-vendors-highlightjs--code--color;

21
datamodels/2.x/itop-portal-base/portal/public/css/variables.scss
View File

@@ -957,3 +957,24 @@ $messaging-4th-peer-primary-color: $white !default;
$messaging-4th-peer-secondary-color: $gray-dark !default;
$messaging-5th-peer-primary-color: $white !default;
$messaging-5th-peer-secondary-color: $gray-dark !default;
// HighlightJS
$ipb-vendors-highlightjs--padding: 0.9rem !default;
$ipb-vendors-highlightjs--box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4) !default;
$ipb-vendors-highlightjs--border-radius: 4px !default;
$ipb-vendors-highlightjs--code--padding-x: 5px !default;
$ipb-vendors-highlightjs--code--padding-y: 3px !default;
$ipb-vendors-highlightjs--background-color: #282b2e !default;
$ipb-vendors-highlightjs--color: #e0e2e4 !default;
$ipb-vendors-highlightjs--keyword--color: #93c763 !default;
$ipb-vendors-highlightjs--number--color: #ffcd22 !default;
$ipb-vendors-highlightjs--attribute--color: #668bb0 !default;
$ipb-vendors-highlightjs--regexp--color: #d39745 !default;
$ipb-vendors-highlightjs--meta--color: #557182 !default;
$ipb-vendors-highlightjs--tag--color: #8cbbad !default;
$ipb-vendors-highlightjs--string--color: #ec7600 !default;
$ipb-vendors-highlightjs--comment--color: #818e96 !default;
$ipb-vendors-highlightjs--selector-class--color: #A082BD !default;
$ipb-vendors-highlightjs--code--color: white !default;

1
datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
View File

@@ -50,7 +50,6 @@
<link href="{{ app['combodo.absolute_url'] ~ 'css/selectize.default.css'|add_itop_version }}" rel="stylesheet">
<link href="{{ app['combodo.absolute_url'] ~ 'node_modules/magnific-popup/dist/magnific-popup.css'|add_itop_version }}" rel="stylesheet">
<link href="{{ app['combodo.absolute_url'] ~ 'node_modules/c3/c3.min.css'|add_itop_version }}" rel="stylesheet">
<link href="{{ app['combodo.absolute_url'] ~ 'js/highlight/styles/obsidian.min.css'|add_itop_version }}" rel="stylesheet">
{# - Bootstrap theme #}
<link href="{{ app['combodo.absolute_url'] ~ app['combodo.portal.instance.conf'].properties.themes.bootstrap|add_itop_version }}" rel="stylesheet" id="css_bootstrap_theme">
{# - Portal adjustments for BS theme #}

4
js/pages/backoffice/toolbox.js
View File

@@ -155,7 +155,7 @@ const CombodoBackofficeToolbox = {
} else {
oCodeElements.each(function (iIdx, oElem) {
hljs.highlightBlock(oElem);
$(oElem).parent().addClass('ibo-hljs-container');
$(oElem).parent().addClass('common-hljs-container');
});
}
}
@@ -168,7 +168,7 @@ const CombodoBackofficeToolbox = {
} else {
oCodeElements.each(function (iIdx, oElem) {
hljs.highlightBlock(oElem);
$(oElem).parent().addClass('ibo-hljs-container');
$(oElem).parent().addClass('common-hljs-container');
});
}
}

1
sources/Application/UI/Base/Component/Input/RichText/RichText.php
View File

@@ -25,7 +25,6 @@ class RichText extends UIBlock
'js/highlight/highlight.min.js',
];
public const DEFAULT_CSS_FILES_REL_PATH = [
'js/highlight/styles/obsidian.min.css',
];
/**