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

UX: Don't let topic progress widget dangle when preview is disabled

This commit is contained in:
Robin Ward 2018-03-08 16:34:19 -05:00
parent 4ad3a258d1
commit 6385c7fcb3
3 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,20 +116,29 @@ export default Ember.Component.extend({
}, },
_dock() { _dock() {
const maximumOffset = $('#topic-bottom').offset(), let maximumOffset = $('#topic-bottom').offset();
composerHeight = $('#reply-control').height() || 0, let composerHeight = $('#reply-control').height() || 0;
$topicProgressWrapper = this.$(), let $topicProgressWrapper = this.$();
offset = window.pageYOffset || $('html').scrollTop(); let offset = window.pageYOffset || $('html').scrollTop();
if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) { if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) {
return; return;
} }
// Right position
let $replyArea = $('#reply-control .reply-area');
if ($replyArea && $replyArea.length) {
let rightPos = $replyArea.offset().left;
$topicProgressWrapper.css('right', `${rightPos}px`);
} else {
$topicProgressWrapper.css('right', `1em`);
}
let isDocked = false; let isDocked = false;
if (maximumOffset) { if (maximumOffset) {
const threshold = maximumOffset.top; let threshold = maximumOffset.top;
const windowHeight = $(window).height(); let windowHeight = $(window).height();
const headerHeight = $('header').outerHeight(true); let headerHeight = $('header').outerHeight(true);
if (this.capabilities.isIOS) { if (this.capabilities.isIOS) {
isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight); isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight);
@ -138,12 +147,12 @@ export default Ember.Component.extend({
} }
} }
const dockPos = $(document).height() - $('#topic-bottom').offset().top; let dockPos = $(document).height() - $('#topic-bottom').offset().top;
if (composerHeight > 0) { if (composerHeight > 0) {
if (isDocked) { if (isDocked) {
$topicProgressWrapper.css('bottom', dockPos); $topicProgressWrapper.css('bottom', dockPos);
} else { } else {
const height = composerHeight + "px"; let height = composerHeight + "px";
if ($topicProgressWrapper.css('bottom') !== height) { if ($topicProgressWrapper.css('bottom') !== height) {
$topicProgressWrapper.css('bottom', height); $topicProgressWrapper.css('bottom', height);
} }

3
app/assets/stylesheets/desktop/topic.scss
View File

@ -76,8 +76,7 @@
#topic-progress-wrapper { #topic-progress-wrapper {
position: fixed; position: fixed;
right: 50%; right: 1em;
width: 0;
bottom: 0; bottom: 0;
z-index: z("timeline"); z-index: z("timeline");
&.docked { &.docked {