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°7601 - Avoid image to float along side text when editing, which will render differently in read-only / notifications

Browse Source
This commit is contained in:
Molkobain
2024-06-27 22:16:53 +02:00
parent de17664c49
commit fff95fcebd
8 changed files with 67 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/backoffice/components/_field.scss
View File

@@ -195,8 +195,6 @@ $ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default;
/* Hack to force a table to fit its container without overflow (see N°2127) */
/* Note that along with with, we now display a "expand" icon on large fields so we can have a better view of its content */
.HTML {
@extend .ibo-vendors-ckeditor--display-content;
table {
table-layout: fixed;
width: 100%;

1
css/backoffice/layout/activity-panel/_caselog-entry.scss
View File

@@ -18,7 +18,6 @@ $ibo-caselog-entry--main-information--decoration--width: 3px !default;
display: none;
}
.ibo-activity-entry--main-information-content{
@extend .ibo-vendors-ckeditor--display-content;
}
/* Highlight color */

21
css/backoffice/utils/helpers/_text-decoration.scss
View File

@@ -19,6 +19,9 @@ $ibo-hyperlink-text-decoration--on-hover: $ibo-hyperlink-text-decoration !defaul
$ibo-hyperlink-color--on-active: $ibo-color-primary-900 !default;
$ibo-hyperlink-text-decoration--on-active: $ibo-hyperlink-text-decoration !default;
$ibo-figure--spacing-x: 2em !default; /* Mind that this matches Bulma rule for figure */
$ibo-figure--spacing-y: 2em !default;
/* CSS variables */
:root{
--ibo-hyperlink-color: #{$ibo-hyperlink-color};
@@ -132,4 +135,22 @@ $ibo-hyperlink-text-decoration--on-active: $ibo-hyperlink-text-decoration !defau
code:not(.hljs) {
color: inherit;
}
p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
figure {
display: inline-block; /* So the figure doesn't take all width and can be aligned on the left */
margin-left: $ibo-figure--spacing-x !important; /* !important to overload the CKE inline style */
margin-right: $ibo-figure--spacing-x !important; /* !important to overload the CKE inline style */
&:not(:last-child) {
margin-bottom: $ibo-figure--spacing-y !important; /* !important to overload the CKE inline style */
}
&:not(:first-child) {
margin-top: $ibo-figure--spacing-y !important; /* !important to overload the CKE inline style */
}
}
}

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

@@ -19,14 +19,17 @@ $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;
$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;
$ibo-vendors-ckeditor--ck-color-list-button-hover-background: $ibo-color-grey-200 !default;
$ibo-vendors-ckeditor--ck-color-list-button-on-text: $ibo-color-grey-900 !default;
$ibo-vendors-ckeditor--ck-text-tiny-font-size: $ibo-font-size-20 !default;
$ibo-vendors-ckeditor--ck-text-small-font-size: $ibo-font-size-50 !default;
$ibo-vendors-ckeditor--ck-text-big-font-size: $ibo-font-size-200 !default;
$ibo-vendors-ckeditor--ck-text-huge-font-size: $ibo-font-size-350 !default;
$ibo-vendors-ckeditor--ck-color-image-caption-text: $ibo-color-grey-900 !default;
/* CSS3 variables */
.ck {
@@ -34,10 +37,13 @@ $ibo-vendors-ckeditor--ck-text-huge-font-size: $ibo-font-size-350;
--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-color-image-caption-text: #{$ibo-vendors-ckeditor--ck-color-image-caption-text};
}
/* Base style */
@@ -132,17 +138,3 @@ ul.cke_autocomplete_panel{
@extend %ibo-font-weight-700;
}
}
.ibo-vendors-ckeditor--display-content{
.cke_editable{
line-height: 1.4;
}
figure{
border: solid 1px #ccc;
border-radius: 2px;
}
p{
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}

2
js/ckeditor/build/ckeditor.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/ckeditor/build/ckeditor.js.map
View File

File diff suppressed because one or more lines are too long

9
js/ckeditor/src/resources/console-theme.css
View File

@@ -1,9 +0,0 @@
/* mention list ui customization */
: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: black;
--ck-z-default: 9999;
}

35
js/ckeditor/src/resources/styles/default-theme.css
View File

@@ -1,9 +1,17 @@
/* mention list ui customization */
/**
* This file contains CKEditor 5 default theme styles.
* "Default theme" means common styles for all GUIs (backoffice, portal, ...)
*
* Any style specific for the backoffice should be in the backoffice theme (e.g. "css/backoffice/vendors/_ckeditor.scss)
* Any style specific for the portal should be in the portal theme (e.g. "datamodels/2.x/itop-portal-base/portal/public/css/portal.scss")
*/
: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: black;
--ck-color-image-caption-background: transparent;
/* Toolbar buttons / components downsize for better integration with UIs */
--ck-spacing-small: 0.35rem;
@@ -19,8 +27,7 @@
--ck-text-huge-font-size: 1.8rem;
}
/** text size classes */
/* Text size classes */
.text-tiny {
font-size: var(--ck-text-tiny-font-size);
}
@@ -37,8 +44,7 @@
font-size: var(--ck-text-huge-font-size);
}
/** marker classes */
/* Marker classes */
.marker-yellow {
background-color: var(--ck-highlight-marker-yellow);
}
@@ -53,4 +59,23 @@
.marker-blue {
background-color: var(--ck-highlight-marker-blue);
}
/* Figures / images */
/* - Avoid text being typed next to the image, only below */
.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 {
text-align: left;
margin-right: 0;
}
.ck-content .image-style-align-right {
text-align: right;
margin-left: 0;
}