EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3063 reading-mode: Fix header color when reading mode is enabled

main
Pau Ferrer Ocaña 2024-12-16 12:29:35 +01:00
parent 6a4e9ac2fc
commit 157de8fd8a
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/directives/collapsible-header.ts
View File

@ -100,6 +100,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
constructor(el: ElementRef) { constructor(el: ElementRef) {
this.collapsedHeader = el.nativeElement; this.collapsedHeader = el.nativeElement;
CoreDirectivesRegistry.register(this.collapsedHeader, this);
} }
/** /**

14
src/core/directives/reading-mode.ts
View File

@ -26,6 +26,8 @@ import { CoreWait } from '@singletons/wait';
import { CoreCancellablePromise } from '@classes/cancellable-promise'; import { CoreCancellablePromise } from '@classes/cancellable-promise';
import { CoreModals } from '@services/modals'; import { CoreModals } from '@services/modals';
import { CoreViewer } from '@features/viewer/services/viewer'; import { CoreViewer } from '@features/viewer/services/viewer';
import { CoreDirectivesRegistry } from '@singletons/directives-registry';
import { CoreCollapsibleHeaderDirective } from './collapsible-header';
/** /**
* Directive to add the reading mode to the selected html tag. * Directive to add the reading mode to the selected html tag.
@ -45,6 +47,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
protected renamedStyles: HTMLElement[] = []; protected renamedStyles: HTMLElement[] = [];
protected enabled = false; protected enabled = false;
protected contentEl?: HTMLIonContentElement; protected contentEl?: HTMLIonContentElement;
protected header?: CoreCollapsibleHeaderDirective;
constructor( constructor(
element: ElementRef, element: ElementRef,
@ -76,6 +79,11 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
} }
this.contentEl?.classList.add('core-reading-mode-content'); this.contentEl?.classList.add('core-reading-mode-content');
const header = CoreDirectivesRegistry.resolve(page?.querySelector('ion-header'), CoreCollapsibleHeaderDirective);
if (header) {
this.header = header;
}
const label = Translate.instant('core.viewer.enterreadingmode'); const label = Translate.instant('core.viewer.enterreadingmode');
const button = document.createElement('ion-button'); const button = document.createElement('ion-button');
@ -114,6 +122,8 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
this.enabled = true; this.enabled = true;
CoreViewer.loadReadingModeSettings(); CoreViewer.loadReadingModeSettings();
this.header?.setEnabled(false);
document.body.classList.add('core-reading-mode-enabled'); document.body.classList.add('core-reading-mode-enabled');
// Disable all styles in element. // Disable all styles in element.
@ -153,6 +163,8 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
this.enabled = false; this.enabled = false;
document.body.classList.remove('core-reading-mode-enabled'); document.body.classList.remove('core-reading-mode-enabled');
this.header?.setEnabled(true);
// Enable all styles in element. // Enable all styles in element.
this.disabledStyles.forEach((style) => { this.disabledStyles.forEach((style) => {
style.disabled = false; style.disabled = false;
@ -181,7 +193,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
const exit = await CoreModals.openModal({ const exit = await CoreModals.openModal({
component: CoreReadingModeSettingsModalComponent, component: CoreReadingModeSettingsModalComponent,
initialBreakpoint: 1, initialBreakpoint: 0.5,
breakpoints: [0, 1], breakpoints: [0, 1],
cssClass: 'core-modal-auto-height', cssClass: 'core-modal-auto-height',
}); });