mirror of
https://github.com/Combodo/iTop.git
synced 2026-03-12 12:34:12 +01:00
N°7552 - CKEditor: Fix rendering in the portal
This commit is contained in:
Molkobain
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -17,6 +17,7 @@
|
||||
*/
|
||||
|
||||
@import 'variables.scss';
|
||||
@import '../../../../../js/ckeditor/build/compiled-theme';
|
||||
|
||||
/*!
|
||||
* Combodo portal template v1.0.0
|
||||
@@ -1113,6 +1114,11 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
/*********/
|
||||
/* Forms */
|
||||
/*********/
|
||||
/* - Ensure HTML contents are displayed like in CKEditor */
|
||||
.ipb-is-html-content {
|
||||
@extend .ck-content;
|
||||
}
|
||||
|
||||
.form_field_label > .control-label[data-tooltip-instantiated="true"] {
|
||||
&::after {
|
||||
content: "?";
|
||||
@@ -1746,34 +1752,34 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
||||
}
|
||||
/* CKEditor: Fullscreen */
|
||||
.ck {
|
||||
&.cke-maximized {
|
||||
position: fixed !important; /* !important to overload the inline style */
|
||||
z-index: 1060; /* Above modals z-index (1050), see bootstrap theme */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100% !important; /* !important to overload the inline style */
|
||||
height: 100% !important; /* !important to overload the inline style */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
/* Force text content to take all space available (and scroll when content overflows) */
|
||||
.ck-editor__main {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
.ck-content {
|
||||
height: 100%; /* To force content to occupy whole height, otherwise it fits its content */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* - Avoid page scrollbar on fullscreen */
|
||||
body.cke-maximized {
|
||||
overflow: hidden;
|
||||
}
|
||||
///* CKEditor: Fullscreen */
|
||||
//.ck {
|
||||
// &.cke-maximized {
|
||||
// position: fixed !important; /* !important to overload the inline style */
|
||||
// z-index: 1060; /* Above modals z-index (1050), see bootstrap theme */
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100% !important; /* !important to overload the inline style */
|
||||
// height: 100% !important; /* !important to overload the inline style */
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
//
|
||||
// /* Force text content to take all space available (and scroll when content overflows) */
|
||||
// .ck-editor__main {
|
||||
// flex-grow: 1;
|
||||
// overflow-y: auto;
|
||||
//
|
||||
// .ck-content {
|
||||
// height: 100%; /* To force content to occupy whole height, otherwise it fits its content */
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
///* - Avoid page scrollbar on fullscreen */
|
||||
//body.cke-maximized {
|
||||
// overflow: hidden;
|
||||
//}
|
||||
|
||||
/* DataTables : Selection inputs */
|
||||
.dataTable.table th span.row_input,
|
||||
@@ -1849,23 +1855,3 @@ body.cke-maximized {
|
||||
-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);
|
||||
}
|
||||
|
||||
.ck.fullscreen-mode .ck.ck-content.ck-editor__editable,
|
||||
.ck.fullscreen-mode .ck.ck-editor__main {
|
||||
height: 100% !important;
|
||||
resize: none !important;
|
||||
}
|
||||
.ck.ck-editor.fullscreen-mode {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.ck.ck-editor.fullscreen-style-activated {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
z-index: 99999 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important
|
||||
}
|
||||
2
js/ckeditor/build/ckeditor.js
vendored
2
js/ckeditor/build/ckeditor.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -93,4 +93,4 @@
|
||||
:root{--ck-color-selector-caption-background:#f7f7f7;--ck-color-selector-caption-text:#333;--ck-color-selector-caption-highlighted-background:#fd0}.ck-content .table>figcaption{background-color:var(--ck-color-selector-caption-background);caption-side:top;color:var(--ck-color-selector-caption-text);display:table-caption;font-size:.75em;outline-offset:-1px;padding:.6em;text-align:center;word-break:break-word}@media (forced-colors:active){.ck-content .table>figcaption{background-color:unset;color:unset}}@media (forced-colors:none){.ck.ck-editor__editable .table>figcaption.table__caption_highlighted{animation:ck-table-caption-highlight .6s ease-out}}.ck.ck-editor__editable .table>figcaption.ck-placeholder:before{overflow:hidden;padding-left:inherit;padding-right:inherit;text-overflow:ellipsis;white-space:nowrap}@keyframes ck-table-caption-highlight{0%{background-color:var(--ck-color-selector-caption-highlighted-background)}to{background-color:var(--ck-color-selector-caption-background)}}
|
||||
:root{--ck-color-selector-column-resizer-hover:var(--ck-color-base-active);--ck-table-column-resizer-width:7px;--ck-table-column-resizer-position-offset:calc(var(--ck-table-column-resizer-width)*-0.5 - 0.5px)}.ck-content .table .ck-table-resized{table-layout:fixed}.ck-content .table table{overflow:hidden}.ck-content .table td,.ck-content .table th{overflow-wrap:break-word;position:relative}.ck.ck-editor__editable .table .ck-table-column-resizer{bottom:0;cursor:col-resize;position:absolute;right:var(--ck-table-column-resizer-position-offset);top:0;user-select:none;width:var(--ck-table-column-resizer-width);z-index:var(--ck-z-default)}.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer,.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer{display:none}.ck.ck-editor__editable .table .ck-table-column-resizer:hover,.ck.ck-editor__editable .table .ck-table-column-resizer__active{background-color:var(--ck-color-selector-column-resizer-hover);bottom:-999999px;opacity:.25;top:-999999px}.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer{left:var(--ck-table-column-resizer-position-offset);right:unset}
|
||||
.ck-source-editing-area{overflow:hidden;position:relative}.ck-source-editing-area textarea,.ck-source-editing-area:after{border:1px solid transparent;font-family:monospace;font-size:var(--ck-font-size-normal);line-height:var(--ck-line-height-base);margin:0;padding:var(--ck-spacing-large);white-space:pre-wrap}.ck-source-editing-area:after{content:attr(data-value) " ";display:block;visibility:hidden}.ck-source-editing-area textarea{border-color:var(--ck-color-base-border);border-radius:0;box-sizing:border-box;height:100%;outline:none;overflow:hidden;position:absolute;resize:none;width:100%}.ck-rounded-corners .ck-source-editing-area textarea,.ck-source-editing-area textarea.ck-rounded-corners{border-radius:var(--ck-border-radius);border-top-left-radius:0;border-top-right-radius:0}.ck-source-editing-area textarea:not([readonly]):focus{border:var(--ck-focus-ring);box-shadow:var(--ck-inner-shadow),0 0;outline:none}
|
||||
:root{--ck-color-list-button-on-background:#eff0ef;--ck-color-list-button-on-background-focus:#eff0ef;--ck-color-list-button-hover-background:#eff0ef;--ck-color-list-button-on-text:#000;--ck-color-image-caption-background:transparent;--ck-spacing-small:0.35rem;--ck-ui-component-min-height:1rem;--ck-icon-size:1.3rem;--ck-z-default:9999;--ck-z-panel:calc(var(--ck-z-default) + 999);--ck-z-dialog:calc(var(--ck-z-panel) + 9999);--ck-text-tiny-font-size:0.7rem;--ck-text-small-font-size:0.85rem;--ck-text-big-font-size:1.4rem;--ck-text-huge-font-size:1.8rem}.text-tiny{font-size:var(--ck-text-tiny-font-size)}.text-small{font-size:var(--ck-text-small-font-size)}.text-big{font-size:var(--ck-text-big-font-size)}.text-huge{font-size:var(--ck-text-huge-font-size)}.ck-editor{z-index:0}.ck-content .image img{min-width:inherit}.ck-content .image-style-align-left,.ck-content .image-style-align-right{display:block;float:unset}.ck-content .image-style-align-left{margin-right:0;text-align:left}.ck-content .image-style-align-right{margin-left:0;text-align:right}.ck-content figure table{text-align:initial}.ck-content .table table th{background-color:#f4f4f4}.ck-content .marker-yellow{background-color:#fdfd77}.ck-content .marker-green{background-color:#62f962}.ck-content .marker-pink{background-color:#fc7899}.ck-content .marker-blue{background-color:#72ccfd}
|
||||
:root{--ck-color-list-button-on-background:#eff0ef;--ck-color-list-button-on-background-focus:#eff0ef;--ck-color-list-button-hover-background:#eff0ef;--ck-color-list-button-on-text:#000;--ck-color-image-caption-background:transparent;--ck-spacing-small:0.35rem;--ck-ui-component-min-height:1rem;--ck-icon-size:1.3rem;--ck-z-default:9999;--ck-z-panel:calc(var(--ck-z-default) + 999);--ck-z-dialog:calc(var(--ck-z-panel) + 9999);--ck-text-tiny-font-size:0.7rem;--ck-text-small-font-size:0.85rem;--ck-text-big-font-size:1.4rem;--ck-text-huge-font-size:1.8rem}.text-tiny{font-size:var(--ck-text-tiny-font-size)}.text-small{font-size:var(--ck-text-small-font-size)}.text-big{font-size:var(--ck-text-big-font-size)}.text-huge{font-size:var(--ck-text-huge-font-size)}.ck-editor{z-index:0}.ck-content .image img{margin-left:0;margin-right:0;min-width:inherit}.ck-content .image-style-align-left,.ck-content .image-style-align-right{display:block;float:unset}.ck-content .image-style-align-left{margin-right:0;text-align:left}.ck-content .image-style-align-right{margin-left:0;text-align:right}.ck-content figure{margin-left:0;margin-right:0}.ck-content figure table{text-align:initial}.ck-content .table{margin-left:0;margin-right:0}.ck-content .table table th{background-color:#f4f4f4}.ck-content .marker-yellow{background-color:#fdfd77}.ck-content .marker-green{background-color:#62f962}.ck-content .marker-pink{background-color:#fc7899}.ck-content .marker-blue{background-color:#72ccfd}
|
||||
|
||||
@@ -3,7 +3,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
||||
/**
|
||||
* AppendITopClasses Plugin.
|
||||
*
|
||||
* Appends ibo-is-html-content class
|
||||
* Appends ibo-is-html-content (backoffice) & ipb-is-html-content (portal) classes
|
||||
*/
|
||||
export default class AppendITopClasses extends Plugin {
|
||||
|
||||
@@ -16,11 +16,17 @@ export default class AppendITopClasses extends Plugin {
|
||||
// retrieve editor instance
|
||||
const oEditor = this.editor;
|
||||
|
||||
// appends ibo-is-html-content class
|
||||
// appends ibo-is-html-content (backoffice) & ipb-is-html-content (portal) classes
|
||||
oEditor.editing.view.change( oWriter => {
|
||||
const oRootElement = oEditor.editing.view.document.getRoot();
|
||||
if(oRootElement !== null){
|
||||
oWriter.addClass( 'ibo-is-html-content', oRootElement);
|
||||
// Add the proper class depending on the GUI we are in
|
||||
const sGUIType = document.body.getAttribute('data-gui-type');
|
||||
if (sGUIType === 'backoffice') {
|
||||
oWriter.addClass( 'ibo-is-html-content', oRootElement);
|
||||
} else if (sGUIType === 'portal') {
|
||||
oWriter.addClass('ipb-is-html-content', oRootElement);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -53,9 +53,10 @@
|
||||
}
|
||||
|
||||
/* Figures / images */
|
||||
/* - Avoid text being typed next to the image, only below */
|
||||
.ck-content .image img {
|
||||
min-width: inherit;
|
||||
min-width: inherit; /* Avoid text being typed next to the image, only below */
|
||||
margin-left: 0; /* Avoid image to be centered */
|
||||
margin-right: 0; /* Avoid image to be centered */
|
||||
}
|
||||
.ck-content .image-style-align-left,
|
||||
.ck-content .image-style-align-right {
|
||||
@@ -70,12 +71,22 @@
|
||||
text-align: right;
|
||||
margin-left: 0;
|
||||
}
|
||||
/* - Avoid figures to be centered */
|
||||
.ck-content figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
/* - Avoid tables in figure being align centered */
|
||||
.ck-content figure table {
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
/* - Avoid tables to be centered */
|
||||
.ck-content .table {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
/* - Force header background to an HEX color so it works with emails */
|
||||
.ck-content .table table th {
|
||||
background-color: #F4F4F4;
|
||||
|
||||
@@ -344,7 +344,7 @@ EOF
|
||||
|
||||
// Value
|
||||
$oOutput->AddHtml('<div class="form_field_control">');
|
||||
$oOutput->AddHtml('<div class="form-control-static">')->AddHtml($this->oField->GetDisplayValue(), false)->AddHtml('</div>');
|
||||
$oOutput->AddHtml('<div class="form-control-static ipb-is-html-content">')->AddHtml($this->oField->GetDisplayValue(), false)->AddHtml('</div>');
|
||||
$oOutput->AddHtml('</div>');
|
||||
}
|
||||
|
||||
@@ -564,7 +564,7 @@ JS
|
||||
|
||||
// Opening thread
|
||||
$oOutput->AddHtml(<<<HTML
|
||||
<div class="caselog-thread">
|
||||
<div class="caselog-thread ipb-is-html-content">
|
||||
HTML
|
||||
);
|
||||
// - Header
|
||||
|
||||
Reference in New Issue
Block a user