diff --git a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png index a9133c576..8bb8198cc 100644 Binary files a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png and b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png differ diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 704595af4..6b45337da 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -547,15 +547,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest return; } - const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight; + const frozen = this.isFrozen(contentScroll); - let frozen = false; - if (this.isWithinContent) { - frozen = scrollableHeight <= scrollingHeight; - } else { - const collapsedHeight = expandedHeaderHeight - (expandedHeader.clientHeight ?? 0); - frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight; - } const progress = frozen ? 0 : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1); @@ -577,7 +570,14 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest } if (page.classList.contains('collapsible-header-page-is-frozen')) { - return; + // Check it has to be frozen. + const frozen = this.isFrozen(contentScroll); + + if (frozen) { + return; + } + + page.classList.toggle('collapsible-header-page-is-frozen', frozen); } const progress = parseFloat(page.style.getPropertyValue('--collapsible-header-progress')); @@ -598,4 +598,28 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest ); } + /** + * Check if the header is frozen. + * + * @param contentScroll Content scroll element. + * @returns Whether the header is frozen or not. + */ + protected isFrozen(contentScroll: HTMLElement): boolean { + const scrollingHeight = this.scrollingHeight ?? 0; + const expandedHeaderClientHeight = this.expandedHeader?.clientHeight ?? 0; + const expandedHeaderHeight = this.expandedHeaderHeight ?? 0; + + const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight; + + let frozen = false; + if (this.isWithinContent) { + frozen = scrollableHeight <= scrollingHeight; + } else { + const collapsedHeight = expandedHeaderHeight - (expandedHeaderClientHeight); + frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight; + } + + return frozen; + } + } diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html index 6b476e077..8c519d6da 100644 --- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html +++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html @@ -1,5 +1,5 @@
-
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index f0880e535..954c8dbd2 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -1,6 +1,5 @@ @use "theme/globals" as *; :host { - --placeholder-color: var(--ion-placeholder-color); --toobar-background: var(--white); --button-color: var(--ion-text-color); --button-active-color: var(--gray-300); @@ -80,11 +79,14 @@ max-width: 95%; width: auto; } + &.empty:before, &:empty:before { content: attr(data-placeholder-text); display: block; color: var(--placeholder-color); - font-weight: bold; + position: absolute; + opacity: var(--placeholder-opacity); + user-select: none; } // Make empty elements selectable (to move the cursor). diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts index 3ef93383a..d35076d14 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts @@ -156,6 +156,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit, ol: 'false', }; + isEmpty = true; + swiperOpts: SwiperOptions = { modules: [IonicSlides], slidesPerView: 6, @@ -590,13 +592,17 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit, */ protected isNullOrWhiteSpace(value: string | null | undefined): boolean { if (value === null || value === undefined) { + this.isEmpty = true; + return true; } value = value.replace(/[\n\r]/g, ''); value = value.split(' ').join(''); - return value.length === 0; + this.isEmpty = value.length === 0; + + return this.isEmpty; } /** diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 7b3806c8c..453907b59 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -890,7 +890,8 @@ td { ion-input, ion-input input, -ion-textarea { +ion-textarea, +core-rich-text-editor { --placeholder-color: var(--ion-placeholder-color); --placeholder-opacity: .65; }