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

UX: Have the timeline dock slightly below where the buttons would go

This commit is contained in:
Robin Ward 2016-05-27 15:37:19 -04:00
parent 9609680ba9
commit 06a5df63d3
No known key found for this signature in database
GPG Key ID: 0E091E2B4ED1B83D
3 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/components/topic-timeline.js.es6
View File

@ -4,13 +4,15 @@ import { observes } from 'ember-addons/ember-computed-decorators';
export default MountWidget.extend(Docking, { export default MountWidget.extend(Docking, {
widget: 'topic-timeline-container', widget: 'topic-timeline-container',
dockBottom: null,
dockAt: null, dockAt: null,
buildArgs() { buildArgs() {
return { topic: this.get('topic'), return { topic: this.get('topic'),
topicTrackingState: this.topicTrackingState, topicTrackingState: this.topicTrackingState,
enteredIndex: this.get('enteredIndex'), enteredIndex: this.get('enteredIndex'),
dockAt: this.dockAt }; dockAt: this.dockAt,
dockBottom: this.dockBottom };
}, },
@observes('topic.highest_post_number') @observes('topic.highest_post_number')
@ -25,7 +27,7 @@ export default MountWidget.extend(Docking, {
const topicBottom = $('#topic-bottom').offset().top; const topicBottom = $('#topic-bottom').offset().top;
const $timeline = this.$('.timeline-container'); const $timeline = this.$('.timeline-container');
const timelineHeight = $timeline.height(); const timelineHeight = $timeline.height();
const parentTop = $('.posts-wrapper').offset().top; const footerHeight = $('.timeline-footer-controls').outerHeight(true) || 0;
const tTop = 140; const tTop = 140;
@ -33,10 +35,12 @@ export default MountWidget.extend(Docking, {
const posTop = tTop + info.offset(); const posTop = tTop + info.offset();
const pos = posTop + timelineHeight; const pos = posTop + timelineHeight;
this.dockBottom = false;
if (posTop < topicTop) { if (posTop < topicTop) {
this.dockAt = 0; this.dockAt = topicTop;
} else if (pos > topicBottom) { } else if (pos > topicBottom) {
this.dockAt = topicBottom - timelineHeight - parentTop; this.dockAt = (topicBottom - timelineHeight) + footerHeight;
this.dockBottom = true;
if (this.dockAt < 0) { this.dockAt = 0; } if (this.dockAt < 0) { this.dockAt = 0; }
} else { } else {
this.dockAt = null; this.dockAt = null;

9
app/assets/javascripts/discourse/templates/topic.hbs
View File

@ -66,11 +66,6 @@
<div class='selected-posts {{unless multiSelect 'hidden'}}'> <div class='selected-posts {{unless multiSelect 'hidden'}}'>
{{partial "selected-posts"}} {{partial "selected-posts"}}
</div> </div>
<div class="row">
<section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
<div class="posts-wrapper">
{{#topic-navigation as |showTimeline|}} {{#topic-navigation as |showTimeline|}}
{{#if showTimeline}} {{#if showTimeline}}
{{topic-timeline topic=model {{topic-timeline topic=model
@ -84,6 +79,10 @@
{{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}} {{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}}
{{/topic-navigation}} {{/topic-navigation}}
<div class="row">
<section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
<div class="posts-wrapper">
{{conditional-loading-spinner condition=model.postStream.loadingAbove}} {{conditional-loading-spinner condition=model.postStream.loadingAbove}}
{{plugin-outlet "topic-above-posts"}} {{plugin-outlet "topic-above-posts"}}

8
app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
View File

@ -187,8 +187,12 @@ createWidget('timeline-scrollarea', {
createWidget('topic-timeline-container', { createWidget('topic-timeline-container', {
tagName: 'div.timeline-container', tagName: 'div.timeline-container',
buildClasses(attrs) { buildClasses(attrs) {
if (attrs.dockAt !== null) { if (attrs.dockAt) {
return attrs.dockAt > 0 ? 'timeline-docked timeline-docked-bottom' : 'timeline-docked'; const result = ['timeline-docked'];
if (attrs.dockBottom) {
result.push('timeline-docked-bottom');
}
return result.join(' ');
} }
}, },