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

MOBILE-3811 core: Improve collapsible header animation

main
Pau Ferrer Ocaña 2022-01-18 14:44:43 +01:00
parent c7e3e68a94
commit e3daf3738c
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/components/split-view/split-view.ts
View File

@ -141,14 +141,12 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
* Another manual solution is to add scroll-y=false on the ion-contents outside the split view.
*/
protected disableScrollOnParent(): void {
let outerContent = this.element.nativeElement.parentElement?.closest('ion-content');
while (outerContent) {
const outerContent = this.element.nativeElement.parentElement?.closest('ion-content');
if (outerContent) {
if (outerContent?.getAttribute('scroll-y') != 'false' && !outerContent?.classList.contains(disabledScrollClass)) {
outerContent.classList.add(disabledScrollClass);
this.disabledScrollOuterContents.push(outerContent);
}
outerContent = outerContent.parentElement?.closest('ion-content');
}
}

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

@ -44,7 +44,7 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
protected contentSubHeadingFontSize = 0;
protected subHeadingStartDifference = 0;
constructor(el: ElementRef) {
constructor(el: ElementRef<HTMLIonHeaderElement>) {
this.header = el.nativeElement;
this.loadingObserver = CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, async (data) => {
@ -122,6 +122,11 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
}
this.titleTopDifference = contentH1.getBoundingClientRect().top - headerH1.getBoundingClientRect().top;
if (this.titleTopDifference <= 0) {
this.cannotCollapse();
return;
}
// Split view part.
const contentAux = this.header.parentElement?.querySelector<HTMLElement>('ion-content.disable-scroll-y');
@ -210,7 +215,9 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
this.content.scrollEvents = true;
this.content.addEventListener('ionScroll', (e: CustomEvent<ScrollDetail>): void => {
this.onScroll(title, contentH1, contentSubHeading, e.detail);
if (e.target == this.content) {
this.onScroll(title, contentH1, contentSubHeading, e.detail);
}
});
}
@ -234,6 +241,8 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
this.header.classList.toggle('core-header-collapsed', collapsed);
title.classList.toggle('collapsible-title-collapsed', collapsed);
title.classList.toggle('collapsible-title-collapse-started', scrollDetail.scrollTop > 0);
title.classList.toggle('collapsible-title-collapse-nowrap', progress > 0.5);
title.style.setProperty('--collapse-opacity', (1 - progress) +'');
if (collapsed) {
contentH1.style.transform = 'translateX(-' + this.h1StartDifference + 'px)';

11
src/theme/theme.base.scss
View File

@ -1257,21 +1257,26 @@ ion-app.md .collapsible-title h1 {
}
.collapsible-title.collapsible-title-collapsed {
ion-label, h1, h2, .subheading {
ion-label, h1, h2, ion-row, ion-col, .subheading {
opacity: 0;
}
}
.collapsible-title.collapsible-title-collapse-started {
* {
opacity: 0;
opacity: var(--collapse-opacity, 0);
}
ion-label, h1, h2, .subheading {
ion-label, h1, h2, ion-row, ion-col, .subheading {
opacity: 1;
}
}
.collapsible-title.collapsible-title-collapse-nowrap {
h1, h2, .subheading {
max-width: var(--max-width);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}