Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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).
This commit is contained in:
Penar Musaraj 2020-05-06 21:40:18 -04:00
parent 7052e6f4a1
commit f782c3019c
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/composer-body.js
View File

@ -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();

10
app/assets/javascripts/discourse/app/components/topic-navigation.js
View File

@ -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");
}