diff --git a/src/addons/messages/pages/discussion/discussion.page.ts b/src/addons/messages/pages/discussion/discussion.page.ts index 7c4176af1..febd175eb 100644 --- a/src/addons/messages/pages/discussion/discussion.page.ts +++ b/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; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5df6a4cb0..7c361804a 100644 --- a/src/app/app.component.ts +++ b/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) => { + 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); diff --git a/src/core/directives/content.ts b/src/core/directives/content.ts new file mode 100644 index 000000000..e214062bd --- /dev/null +++ b/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: + * + * + */ +@Directive({ + selector: 'ion-content', +}) +export class CoreContentDirective implements OnInit { + + protected element: HTMLIonContentElement; + + constructor(el: ElementRef) { + this.element = el.nativeElement; + } + + /** + * @inheritdoc + */ + async ngOnInit(): Promise { + if (this.element.classList.contains('disable-scroll-y')) { + return; + } + + this.element.scrollEvents = true; + } + +} diff --git a/src/core/directives/directives.module.ts b/src/core/directives/directives.module.ts index 9f518532f..9350f14eb 100644 --- a/src/core/directives/directives.module.ts +++ b/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 {} diff --git a/src/theme/components/collapsible-header.scss b/src/theme/components/collapsible-header.scss index 06eb839e0..41a6f1e03 100644 --- a/src/theme/components/collapsible-header.scss +++ b/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 { diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 2d0a532aa..4f4deceb4 100644 --- a/src/theme/theme.light.scss +++ b/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);