MOBILE-3814 style: Apply shadow to header when scrolled

src/addons/messages/pages/discussion/discussion.page.ts

@@ -499,13 +499,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
      */
     protected setNewMessagesBadge(addMessages: number): void {
         if (this.newMessages == 0 && addMessages > 0) {
-            // Setup scrolling.
-            this.content!.scrollEvents = true;
-
             this.scrollFunction();
-        } else if (this.newMessages > 0 && addMessages == 0) {
-            // Remove scrolling.
-            this.content!.scrollEvents = false;
         }
 
         this.newMessages = addMessages;

src/app/app.component.ts

@@ -14,7 +14,7 @@
 
 import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { IonRouterOutlet } from '@ionic/angular';
-import { BackButtonEvent } from '@ionic/core';
+import { BackButtonEvent, ScrollDetail } from '@ionic/core';
 
 import { CoreLang } from '@services/lang';
 import { CoreLoginHelper } from '@features/login/services/login-helper';
@@ -89,6 +89,12 @@ export class AppComponent implements OnInit, AfterViewInit {
             }
         });
 
+        // Listen to scroll to add style when scroll is not 0.
+        win.addEventListener('ionScroll', ({ detail, target }: CustomEvent<ScrollDetail>) => {
+            const header = (target as HTMLElement).closest('.ion-page')?.querySelector('ion-header');
+            header?.classList.toggle('core-header-shadow', detail.scrollTop > 0);
+        });
+
         // Listen for session expired events.
         CoreEvents.on(CoreEvents.SESSION_EXPIRED, (data) => {
             CoreLoginHelper.sessionExpired(data);

src/core/directives/content.ts

@@ -0,0 +1,46 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Directive, ElementRef, OnInit } from '@angular/core';
+
+/**
+ * Directive to enabled scroll events on ALL scrollable ion-content.
+ *
+ * Example usage:
+ *
+ * <ion-content>
+ */
+@Directive({
+    selector: 'ion-content',
+})
+export class CoreContentDirective implements OnInit {
+
+    protected element: HTMLIonContentElement;
+
+    constructor(el: ElementRef) {
+        this.element = el.nativeElement;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    async ngOnInit(): Promise<void> {
+        if (this.element.classList.contains('disable-scroll-y')) {
+            return;
+        }
+
+        this.element.scrollEvents = true;
+    }
+
+}

src/core/directives/directives.module.ts

@@ -31,6 +31,7 @@ import { CoreCollapsibleHeaderDirective } from './collapsible-header';
 import { CoreSwipeNavigationDirective } from './swipe-navigation';
 import { CoreCollapsibleItemDirective } from './collapsible-item';
 import { CoreCollapsibleFooterDirective } from './collapsible-footer';
+import { CoreContentDirective } from './content';
 
 @NgModule({
     declarations: [
@@ -51,6 +52,7 @@ import { CoreCollapsibleFooterDirective } from './collapsible-footer';
         CoreSwipeNavigationDirective,
         CoreCollapsibleItemDirective,
         CoreCollapsibleFooterDirective,
+        CoreContentDirective,
     ],
     exports: [
         CoreAutoFocusDirective,
@@ -70,6 +72,7 @@ import { CoreCollapsibleFooterDirective } from './collapsible-footer';
         CoreSwipeNavigationDirective,
         CoreCollapsibleItemDirective,
         CoreCollapsibleFooterDirective,
+        CoreContentDirective,
     ],
 })
 export class CoreDirectivesModule {}

src/theme/components/collapsible-header.scss

@@ -8,6 +8,9 @@
     --collapsible-header-floating-title-width: 0px;
     --collapsible-header-floating-title-x-delta: 0px;
     --collapsible-header-floating-title-width-delta: 0px;
+    ion-header.core-header-shadow {
+        --core-header-shadow: none;
+    }
 
     .collapsible-header-expanded {
         overflow: hidden;
@@ -34,6 +37,10 @@
 
     }
 
+    &.is-active.is-collapsed.is-within-content ion-header.core-header-shadow {
+        --core-header-shadow: var(--scroll-shadow-bottom, none);
+    }
+
     &.is-active {
 
         .collapsible-header-expanded {

src/theme/theme.light.scss

@@ -85,6 +85,10 @@
 
     --contrast-background: white;
 
+    --drop-shadow: 0, 0, 0, 0.5;
+    --scroll-shadow-bottom: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
+    --scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
+
     --ion-text-color: var(--text-color);
     --ion-text-color-rgb: #{$text-color-rgb};
     --subdued-text-color: var(--medium);
@@ -138,27 +142,38 @@
     --core-header-toolbar-border-color: var(--stroke);
     --core-header-toolbar-color: var(--text-color);
     --core-header-toolbar-height: 48px;
+    --core-header-shadow: none;
     html.ios {
         --core-header-toolbar-height: 48px;
     }
 
-    ion-header ion-toolbar {
-        --color: var(--core-header-toolbar-color);
-        --background: var(--core-header-toolbar-background);
-        --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
-        --border-color: var(--core-header-toolbar-border-color);
+    ion-header {
+        filter: var(--core-header-shadow, none);
+        -webkit-filter: var(--core-header-shadow, none);
 
-        ion-button {
-            --ion-toolbar-color: var(--core-header-toolbar-color);
+        ion-toolbar {
             --color: var(--core-header-toolbar-color);
-        }
+            --background: var(--core-header-toolbar-background);
+            --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
+            --border-color: var(--core-header-toolbar-border-color);
 
-        ion-spinner {
-            --ion-color-base: var(--core-header-toolbar-color);
-            --color: var(--core-header-toolbar-color);
+            ion-button {
+                --ion-toolbar-color: var(--core-header-toolbar-color);
+                --color: var(--core-header-toolbar-color);
+            }
+
+            ion-spinner {
+                --ion-color-base: var(--core-header-toolbar-color);
+                --color: var(--core-header-toolbar-color);
+            }
         }
     }
 
+
+    ion-header.core-header-shadow {
+        --core-header-shadow: var(--scroll-shadow-bottom, none);
+    }
+
     ion-header::after {
         display: none;
     }
@@ -343,10 +358,6 @@
     --addon-forum-border-color: var(--stroke);
     --addon-forum-highlight-color: var(--light);
 
-    --drop-shadow: 0, 0, 0, 0.5;
-    --scroll-shadow-bottom: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-    --scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-
     --core-question-correct-color: var(--success-shade);
     --core-question-correct-color-bg: var(--success-tint);
     --core-question-incorrect-color: var(--danger);