From 7dd913b0ddb830727af25becacaf8bd3d8d66f14 Mon Sep 17 00:00:00 2001 From: Molkobain Date: Wed, 22 May 2024 15:12:37 +0200 Subject: [PATCH] =?UTF-8?q?N=C2=B05298=20-=20Fix=20CKEditor=20fullscreen?= =?UTF-8?q?=20style=20and=20theme=20integration=20in=20the=20backoffice?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../utils/variables/_typography.scss | 1 + css/backoffice/vendors/_ckeditor.scss | 79 +++++++++++++------ css/ckeditor/contents.css | 34 -------- 3 files changed, 56 insertions(+), 58 deletions(-) delete mode 100644 css/ckeditor/contents.css diff --git a/css/backoffice/utils/variables/_typography.scss b/css/backoffice/utils/variables/_typography.scss index f5260121e..3a4a90516 100644 --- a/css/backoffice/utils/variables/_typography.scss +++ b/css/backoffice/utils/variables/_typography.scss @@ -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 */ diff --git a/css/backoffice/vendors/_ckeditor.scss b/css/backoffice/vendors/_ckeditor.scss index b6cb9c08d..c6e13e494 100644 --- a/css/backoffice/vendors/_ckeditor.scss +++ b/css/backoffice/vendors/_ckeditor.scss @@ -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; diff --git a/css/ckeditor/contents.css b/css/ckeditor/contents.css deleted file mode 100644 index 57811fe9d..000000000 --- a/css/ckeditor/contents.css +++ /dev/null @@ -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%; -} \ No newline at end of file