From 52a3d62a4497fd8d9b7eea011ed6e394d690ff16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Mar 2022 14:33:19 +0100
Subject: [PATCH] MOBILE-3814 collapsible: Fix collapsible footer scroll change
 problem

---
 src/core/directives/collapsible-footer.ts | 25 ++++++++++++++++-------
 src/theme/theme.base.scss                 |  2 +-
 src/theme/theme.light.scss                |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/core/directives/collapsible-footer.ts b/src/core/directives/collapsible-footer.ts
index 4f87f379f..976e65827 100644
--- a/src/core/directives/collapsible-footer.ts
+++ b/src/core/directives/collapsible-footer.ts
@@ -39,7 +39,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
     protected initialPaddingBottom = '0px';
     protected previousTop = 0;
     protected previousHeight = 0;
-    protected stickTimeout?: number;
+    protected endAnimationTimeout?: number;
     protected content?: HTMLIonContentElement | null;
     protected loadingChangedListener?: CoreEventObserver;
 
@@ -60,6 +60,8 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
         this.initialHeight = this.element.getBoundingClientRect().height || 48;
         this.previousHeight = this.initialHeight;
 
+        this.content?.style.setProperty('--core-collapsible-footer-max-height', this.initialHeight + 'px');
+
         this.setBarHeight(this.initialHeight);
     }
 
@@ -88,7 +90,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
         this.initialPaddingBottom = this.content.style.getPropertyValue('--padding-bottom') || this.initialPaddingBottom;
         this.content.style.setProperty(
             '--padding-bottom',
-            `calc(${this.initialPaddingBottom} + var(--core-collapsible-footer-height, 0px))`,
+            `calc(${this.initialPaddingBottom} + var(--core-collapsible-footer-max-height, 0px))`,
         );
 
         const scroll = await this.content.getScrollElement();
@@ -143,8 +145,8 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
      * @param height The new bar height.
      */
     protected setBarHeight(height: number): void {
-        if (this.stickTimeout) {
-            clearTimeout(this.stickTimeout);
+        if (this.endAnimationTimeout) {
+            clearTimeout(this.endAnimationTimeout);
         }
 
         this.element.classList.toggle('footer-collapsed', height <= 0);
@@ -154,12 +156,21 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
 
         if (height > 0 && height < this.initialHeight) {
             // Finish opening or closing the bar.
-            const newHeight = height < this.initialHeight / 2 ? 0 : this.initialHeight;
-
-            this.stickTimeout = window.setTimeout(() => this.setBarHeight(newHeight), 500);
+            this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(height), 500);
         }
     }
 
+    /**
+     * End of animation when not scrolling.
+     *
+     * @param height Last height used.
+     */
+    protected endAnimation(height: number): void {
+        const newHeight = height < this.initialHeight / 2 ? 0 : this.initialHeight;
+
+        this.setBarHeight(newHeight);
+    }
+
     /**
      * @inheritdoc
      */
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 4268084bb..e39774de1 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1111,7 +1111,7 @@ ion-fab[core-fab] {
 }
 
 ion-content.has-collapsible-footer ion-fab {
-    bottom: calc(var(--core-navigation-height, 0px) + 10px);
+    bottom: calc(var(--core-collapsible-footer-height, 0px) + 10px);
     @include core-transition(all, 200ms);
 }
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 6b1c9f16b..2d0a532aa 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -319,7 +319,7 @@
     --core-courseimage-on-course-size: 72px;
     --core-courseimage-radius: var(--medium-radius);
 
-    --core-navigation-height: 48px;
+    --core-collapsible-footer-height: 48px;
     --core-navigation-background: var(--contrast-background);
 
     --core-collapsible-footer-background: var(--contrast-background);