FIX: Improve topic timeline calculation logic

FIX: Improve topic timeline calculation logic

Followup to 999e2ff5

Switching between the topic timeline and the progress bar was buggy when resizing the composer. The root of the problem is that we can’t know the height of the timeline once it’s hidden from view.

This uses a magic number for the calucation, which in this case is necessary. Additionally, the calculation now takes place when the resizing of the composer ends (previously, it was triggered when dragging was started, which caused issues when resizing slowly).

diff --git a/app/assets/javascripts/discourse/app/components/composer-body.js b/app/assets/javascripts/discourse/app/components/composer-body.js
index 8379280..1f0f661 100644
--- a/app/assets/javascripts/discourse/app/components/composer-body.js
+++ b/app/assets/javascripts/discourse/app/components/composer-body.js
@@ -128,12 +128,13 @@ export default Component.extend(KeyEnterEscape, {
       throttle(this, performDrag, event, THROTTLE_RATE);
     }).bind(this);
 
-    const endDrag = () => {
+    const endDrag = (() => {
+      this.appEvents.trigger("composer:resize-ended");
       $document.off(DRAG_EVENTS, throttledPerformDrag);
       $document.off(END_EVENTS, endDrag);
       $composer.removeClass("clear-transitions");
       $composer.focus();
-    };
+    }).bind(this);
 
     $grippie.on(START_EVENTS, event => {
       event.preventDefault();
diff --git a/app/assets/javascripts/discourse/app/components/topic-navigation.js b/app/assets/javascripts/discourse/app/components/topic-navigation.js
index 7c96ccf..614e144 100644
--- a/app/assets/javascripts/discourse/app/components/topic-navigation.js
+++ b/app/assets/javascripts/discourse/app/components/topic-navigation.js
@@ -9,7 +9,8 @@ import PanEvents, {
   SWIPE_VELOCITY_THRESHOLD
 } from "discourse/mixins/pan-events";
 
-const MIN_WIDTH_TIMELINE = 924;
+const MIN_WIDTH_TIMELINE = 924,
+  MIN_HEIGHT_TIMELINE = 325;
 
 export default Component.extend(PanEvents, {
   composerOpen: null,
@@ -39,7 +40,6 @@ export default Component.extend(PanEvents, {
       if (renderTimeline) {
         const width = window.innerWidth,
           composer = document.getElementById("reply-control"),
-          timelineContainer = document.querySelector(".timeline-container"),
           headerContainer = document.querySelector(".d-header"),
           headerHeight = (headerContainer && headerContainer.offsetHeight) || 0;
 
@@ -47,7 +47,7 @@ export default Component.extend(PanEvents, {
           renderTimeline =
             width > MIN_WIDTH_TIMELINE &&
             window.innerHeight - composer.offsetHeight - headerHeight >
-              (timelineContainer ? timelineContainer.offsetHeight : 0);
+              MIN_HEIGHT_TIMELINE;
         }
       }
 
@@ -196,7 +196,7 @@ export default Component.extend(PanEvents, {
         this._checkSize()
       );
       this.appEvents.on("composer:opened", this, this.composerOpened);
-      this.appEvents.on("composer:resized", this, this.composerOpened);
+      this.appEvents.on("composer:resize-ended", this, this.composerOpened);
       this.appEvents.on("composer:closed", this, this.composerClosed);
       $("#reply-control").on("div-resized.discourse-topic-navigation", () =>
         this._checkSize()
@@ -219,7 +219,7 @@ export default Component.extend(PanEvents, {
     if (!this.site.mobileView) {
       $(window).off("resize.discourse-topic-navigation");
       this.appEvents.off("composer:opened", this, this.composerOpened);
-      this.appEvents.off("composer:resized", this, this.composerOpened);
+      this.appEvents.off("composer:resize-ended", this, this.composerOpened);
       this.appEvents.off("composer:closed", this, this.composerClosed);
       $("#reply-control").off("div-resized.discourse-topic-navigation");
     }

GitHub sha: f782c301