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

N°5298 - Fix CKEditor fullscreen style and theme integration in the backoffice

Browse Source
This commit is contained in:
Molkobain
2024-05-22 15:12:37 +02:00
parent 6fb1afaa2f
commit 7dd913b0dd
3 changed files with 56 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/backoffice/utils/variables/_typography.scss
View File

@@ -4,6 +4,7 @@
*/
/* Base size: html font-size 12px */
$ibo-font-size-20: 0.67rem !default; /* 8px */
$ibo-font-size-50: 0.83rem !default; /* 10px */
$ibo-font-size-100: 1rem !default; /* 12px */
$ibo-font-size-150: 1.17rem !default; /* 14px */

79
css/backoffice/vendors/_ckeditor.scss vendored
View File

@@ -3,10 +3,11 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-vendors-ckeditor--toolbar-fullscreen-button--background-color--on-hover: #CCC !default;
$ibo-vendors-ckeditor--toolbar-fullscreen-button--width: 12px !default;
$ibo-vendors-ckeditor--toolbar-fullscreen-button--height: 11px !default;
$ibo-vendors-ckeditor--toolbar-fullscreen-button--border: 1px #A6A6A6 solid !default;
/* SCSS variables */
//$ibo-vendors-ckeditor--toolbar-fullscreen-button--background-color--on-hover: #CCC !default;
//$ibo-vendors-ckeditor--toolbar-fullscreen-button--width: 12px !default;
//$ibo-vendors-ckeditor--toolbar-fullscreen-button--height: 11px !default;
//$ibo-vendors-ckeditor--toolbar-fullscreen-button--border: 1px #A6A6A6 solid !default;
$ibo-vendors-highlightjs--padding: 0.9rem !default;
$ibo-vendors-highlightjs--border-radius: $ibo-border-radius-300 !default;
@@ -22,30 +23,49 @@ $ibo-vendors-ckeditor--autocomplete-item-image--border: 1px solid $ibo-color-gre
$ibo-vendors-ckeditor--autocomplete-item-title--text-color: #3A3A3A !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;
$ibo-vendors-ckeditor--ck-color-list-button-on-background-focus: $ibo-color-grey-200;
$ibo-vendors-ckeditor--ck-color-list-button-hover-background: $ibo-color-grey-200;
$ibo-vendors-ckeditor--ck-color-list-button-on-text: $ibo-color-grey-900;
$ibo-vendors-ckeditor--ck-text-tiny-font-size: $ibo-font-size-20;
$ibo-vendors-ckeditor--ck-text-small-font-size: $ibo-font-size-50;
$ibo-vendors-ckeditor--ck-text-big-font-size: $ibo-font-size-200;
$ibo-vendors-ckeditor--ck-text-huge-font-size: $ibo-font-size-350;
/* CSS3 variables */
.ck {
--ck-color-list-button-on-background: #{$ibo-vendors-ckeditor--ck-color-list-button-on-background};
--ck-color-list-button-on-background-focus: #{$ibo-vendors-ckeditor--ck-color-list-button-on-background-focus};
--ck-color-list-button-hover-background: #{$ibo-vendors-ckeditor--ck-color-list-button-hover-background};
--ck-color-list-button-on-text: #{$ibo-vendors-ckeditor--ck-color-list-button-on-text};
--ck-text-tiny-font-size: #{$ibo-vendors-ckeditor--ck-text-tiny-font-size};
--ck-text-small-font-size: #{$ibo-vendors-ckeditor--ck-text-small-font-size};
--ck-text-big-font-size: #{$ibo-vendors-ckeditor--ck-text-big-font-size};
--ck-text-huge-font-size: #{$ibo-vendors-ckeditor--ck-text-huge-font-size};
}
.ck-editor__editable_inline:not(.ck-comment__input *) {
min-height: 200px;
}
/* Fullscreen button (Combodo custom) */
.ibo-vendors-ckeditor--toolbar-fullscreen-button {
display: none;
}
.cke_toolbox_collapser.cke_toolbox_collapser_min ~ .ibo-vendors-ckeditor--toolbar-fullscreen-button {
display: block;
width: $ibo-vendors-ckeditor--toolbar-fullscreen-button--width;
height: $ibo-vendors-ckeditor--toolbar-fullscreen-button--height;
border: $ibo-vendors-ckeditor--toolbar-fullscreen-button--border;
cursor: pointer;
/* Fullscreen button (Combodo custom plugin) */
.ck.ck-editor.cke-maximized {
position: fixed;
left: 0px;
top:0px;
right: 0px;
bottom: 0px;
z-index: 999;
display: flex;
flex-direction: column;
/* !important so it overrides the .cke_reset_all style */
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
background-image: url('../../../../images/full-screen.png') !important;
&:hover {
background-color: $ibo-vendors-ckeditor--toolbar-fullscreen-button--background-color--on-hover;
}
.ck.ck-editor__main{
flex-grow: 1;
}
.ck-editor__editable_inline:not(.ck-comment__input *){
height: 100%;
}
}
/* Highlight JS */
@@ -60,6 +80,18 @@ $ibo-vendors-ckeditor--autocomplete-item-title--text-color: #3A3A3A !default;
padding: 0 !important;
}
/* Mentions */
.ibo-mention-item{
line-height: 1.6rem;
}
[data-role="object-mention"]{
color: #0782C1;
}
[data-role="object-mention"]:hover{
color: #2b6bb0;
}
/* Mentions in caselogs */
/* Note: Mind the "ul", it allows us to have a more precise rule than the original plugin's CSS so we can override it */
ul.cke_autocomplete_panel{
@@ -95,7 +127,6 @@ ul.cke_autocomplete_panel{
}
}
/* These rules should be the same as those in css/ckeditor/contents.css */
.ibo-vendors-ckeditor--display-content{
.cke_editable{
line-height: 1.4;

34
css/ckeditor/contents.css
View File

@@ -1,34 +0,0 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
.ibo-mention-item{
line-height: 1.6rem;
}
[data-role="object-mention"]{
color: #0782C1;
}
[data-role="object-mention"]:hover{
color: #2b6bb0;
}
.ck.ck-editor.cke-maximized{
position: fixed;
left: 0px;
top:0px;
right: 0px;
bottom: 0px;
z-index: 999;
display: flex;
flex-direction: column;
}
.ck.ck-editor.cke-maximized .ck.ck-editor__main{
flex-grow: 1;
}
.ck.ck-editor.cke-maximized .ck-editor__editable_inline:not(.ck-comment__input *){
height: 100%;
}