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

UX: ensure topic progress indicator isn't floating in very short topics

This commit is contained in:
Régis Hanol 2018-04-20 17:26:50 +02:00
parent 9a55a3e8fd
commit 76474f3156
1 changed files with 20 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/assets/javascripts/discourse/components/topic-progress.js.es6
View File

@ -116,51 +116,31 @@ export default Ember.Component.extend({
}, },
_dock() { _dock() {
const $topicProgressWrapper = this.$(); const $wrapper = this.$();
if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) return; if (!$wrapper || $wrapper.length === 0) return;
// on desktop, we want the topic-progress after the last post const offset = window.pageYOffset || $("html").scrollTop();
// on mobile, we want it right before the end of the last post const progressHeight = this.site.mobileView ? 0 : $("#topic-progress").height();
const progressHeight = this.site.mobileView ? 0 : $("#topic-progress").outerHeight(); const maximumOffset = $("#topic-bottom").offset().top + progressHeight;
const windowHeight = $(window).height();
const composerHeight = $("#reply-control").height() || 0;
const isDocked = offset >= maximumOffset - windowHeight + composerHeight;
const bottom = $("#main").height() - maximumOffset;
const maximumOffset = $('#topic-bottom').offset();
const composerHeight = $('#reply-control').height() || 0;
const offset = window.pageYOffset || $('html').scrollTop();
const $replyArea = $('#reply-control .reply-area');
if ($replyArea && $replyArea.length) {
$topicProgressWrapper.css('right', `${$replyArea.offset().left}px`);
} else {
$topicProgressWrapper.css('right', `1em`);
}
let isDocked = false;
if (maximumOffset) {
const threshold = maximumOffset.top + progressHeight;
const windowHeight = $(window).height();
if (this.capabilities.isIOS) {
const headerHeight = $('header').outerHeight(true);
isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight);
} else {
isDocked = offset >= (threshold - windowHeight + composerHeight);
}
}
const dockPos = $(document).height() - maximumOffset.top - progressHeight;
if (composerHeight > 0) { if (composerHeight > 0) {
if (isDocked) { $wrapper.css("bottom", isDocked ? bottom : composerHeight);
$topicProgressWrapper.css('bottom', dockPos);
} else {
const height = composerHeight + "px";
if ($topicProgressWrapper.css('bottom') !== height) {
$topicProgressWrapper.css('bottom', height);
}
}
} else { } else {
$topicProgressWrapper.css('bottom', isDocked ? dockPos : ''); $wrapper.css("bottom", isDocked ? bottom : "");
}
this.set("docked", isDocked);
const $replyArea = $("#reply-control .reply-area");
if ($replyArea && $replyArea.length > 0) {
$wrapper.css("right", `${$replyArea.offset().left}px`);
} else {
$wrapper.css("right", "1em");
} }
this.set('docked', isDocked);
}, },
click(e) { click(e) {
@ -169,7 +149,6 @@ export default Ember.Component.extend({
} }
}, },
actions: { actions: {
toggleExpansion() { toggleExpansion() {
this.toggleProperty('expanded'); this.toggleProperty('expanded');