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

MOBILE-3814 collapsible: Do not collapse main action buttons

main
Pau Ferrer Ocaña 2022-03-07 15:36:56 +01:00
parent 18696269e0
commit 09cd1af733
2 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/core/directives/collapsible-footer.ts
View File

@ -38,6 +38,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
protected element: HTMLElement; protected element: HTMLElement;
protected initialHeight = 0; protected initialHeight = 0;
protected finalHeight = 0;
protected initialPaddingBottom = '0px'; protected initialPaddingBottom = '0px';
protected previousTop = 0; protected previousTop = 0;
protected previousHeight = 0; protected previousHeight = 0;
@ -60,6 +61,12 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
// Set a minimum height value. // Set a minimum height value.
this.initialHeight = this.element.getBoundingClientRect().height || 48; this.initialHeight = this.element.getBoundingClientRect().height || 48;
const moduleNav = this.element.querySelector('core-course-module-navigation');
if (moduleNav) {
this.element.classList.add('has-module-nav');
this.finalHeight = this.initialHeight - (moduleNav.getBoundingClientRect().height);
}
this.previousHeight = this.initialHeight; this.previousHeight = this.initialHeight;
this.content?.style.setProperty('--core-collapsible-footer-max-height', this.initialHeight + 'px'); this.content?.style.setProperty('--core-collapsible-footer-max-height', this.initialHeight + 'px');
@ -134,7 +141,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
this.setBarHeight(this.initialHeight); this.setBarHeight(this.initialHeight);
} else { } else {
let newHeight = this.previousHeight - (scrollDetail.scrollTop - this.previousTop); let newHeight = this.previousHeight - (scrollDetail.scrollTop - this.previousTop);
newHeight = CoreMath.clamp(newHeight, 0, this.initialHeight); newHeight = CoreMath.clamp(newHeight, this.finalHeight, this.initialHeight);
this.setBarHeight(newHeight); this.setBarHeight(newHeight);
} }
@ -151,12 +158,14 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
clearTimeout(this.endAnimationTimeout); clearTimeout(this.endAnimationTimeout);
} }
this.element.classList.toggle('footer-collapsed', height <= 0); const collapsed = height <= this.finalHeight;
this.element.classList.toggle('footer-expanded', height >= this.initialHeight); const expanded = height >= this.initialHeight;
this.element.classList.toggle('footer-collapsed', collapsed);
this.element.classList.toggle('footer-expanded', expanded);
this.content?.style.setProperty('--core-collapsible-footer-height', height + 'px'); this.content?.style.setProperty('--core-collapsible-footer-height', height + 'px');
this.previousHeight = height; this.previousHeight = height;
if (height > 0 && height < this.initialHeight) { if (!collapsed && !expanded) {
// Finish opening or closing the bar. // Finish opening or closing the bar.
this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(height), 500); this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(height), 500);
} }
@ -168,7 +177,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
* @param height Last height used. * @param height Last height used.
*/ */
protected endAnimation(height: number): void { protected endAnimation(height: number): void {
const newHeight = height < this.initialHeight / 2 ? 0 : this.initialHeight; const newHeight = (height - this.finalHeight) < (this.initialHeight - this.finalHeight) / 2
? this.finalHeight
: this.initialHeight;
this.setBarHeight(newHeight); this.setBarHeight(newHeight);
} }

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

@ -1428,6 +1428,16 @@ ion-grid.core-no-grid > ion-row {
--core-collapsible-footer-height: 0; --core-collapsible-footer-height: 0;
opacity: 0; opacity: 0;
} }
&.has-module-nav.footer-collapsed {
--core-collapsible-footer-height: auto;
opacity: 1;
core-course-module-navigation {
height: 0;
opacity: 0;
@include core-transition(all, 200ms);
}
}
&.footer-expanded { &.footer-expanded {
--core-collapsible-footer-height: auto; --core-collapsible-footer-height: auto;
} }