From f782c3019c59bb9d12375a63af7a05bc4eeedb46 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 6 May 2020 21:40:18 -0400
Subject: [PATCH] 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).
---
 .../discourse/app/components/composer-body.js          |  5 +++--
 .../discourse/app/components/topic-navigation.js       | 10 +++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-body.js b/app/assets/javascripts/discourse/app/components/composer-body.js
index 83792801aae..1f0f661f338 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 7c96ccf00cf..614e144f5f7 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");
     }