Merge pull request #4027 from crazyserver/MOBILE-4565

Mobile 4565

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,9 +570,16 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 }
 
                 if (page.classList.contains('collapsible-header-page-is-frozen')) {
+                    // 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'));
                 const scrollTop = contentScroll.scrollTop;
                 const collapse = progress > 0.5;
@@ -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;
+    }
+
 }

src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html

@@ -1,5 +1,5 @@
 <div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
-    <div [hidden]="!rteEnabled" #editor class="core-rte-editor" role="textbox" contenteditable="true"
+    <div [hidden]="!rteEnabled" #editor class="core-rte-editor" role="textbox" contenteditable="true" [class.empty]="isEmpty"
         [attr.aria-labelledby]="ariaLabelledBy" [attr.data-placeholder-text]="placeholder" (focus)="showToolbar($event)"
         (blur)="hideToolbar($event)" (keydown)="onKeyDown($event)">
     </div>

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).

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;
     }
 
     /**

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;
 }