diff --git a/app/assets/javascripts/discourse/components/topic-navigation.js.es6 b/app/assets/javascripts/discourse/components/topic-navigation.js.es6 new file mode 100644 index 000000000..d9138b8f6 --- /dev/null +++ b/app/assets/javascripts/discourse/components/topic-navigation.js.es6 @@ -0,0 +1,26 @@ +export default Ember.Component.extend({ + showTimeline: null, + + _checkSize() { + const width = $(window).width(); + this.set('showTimeline', width > 1012); + }, + + didInsertElement() { + this._super(); + + if (!this.site.mobileView) { + $(window).on('resize.discourse-topic-navigation', () => this._checkSize()); + this._checkSize(); + } else { + this.set('showTimeline', false); + } + }, + + willDestroyElement() { + this._super(); + if (!this.site.mobileView) { + $(window).off('resize.discourse-topic-navigation'); + } + } +}); diff --git a/app/assets/javascripts/discourse/components/topic-progress.js.es6 b/app/assets/javascripts/discourse/components/topic-progress.js.es6 index d8d61f2ff..dfd505019 100644 --- a/app/assets/javascripts/discourse/components/topic-progress.js.es6 +++ b/app/assets/javascripts/discourse/components/topic-progress.js.es6 @@ -15,9 +15,9 @@ export default Ember.Component.extend({ (this.get('delegated') || []).forEach(m => this.set(m, m)); }, - @computed('userWantsToJump') - hidden(userWantsToJump) { - return !userWantsToJump && !this.site.mobileView; + @computed('userWantsToJump', 'showTimeline') + hidden(userWantsToJump, showTimeline) { + return !userWantsToJump && showTimeline; }, keyboardTrigger(kbdEvent) { diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6 index 3e6fbbf66..89b4b22d8 100644 --- a/app/assets/javascripts/discourse/controllers/topic.js.es6 +++ b/app/assets/javascripts/discourse/controllers/topic.js.es6 @@ -42,16 +42,6 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, { 'replyToPost' ], - @computed - showTimeline() { - return !this.site.mobileView; - }, - - @computed('showTimeline') - loadingClass(showTimeline) { - return showTimeline ? 'timeline-loading' : undefined; - }, - _titleChanged: function() { const title = this.get('model.title'); if (!Ember.isEmpty(title)) { diff --git a/app/assets/javascripts/discourse/mixins/delegate-actions.js.es6 b/app/assets/javascripts/discourse/mixins/delegate-actions.js.es6 new file mode 100644 index 000000000..ce3e46a56 --- /dev/null +++ b/app/assets/javascripts/discourse/mixins/delegate-actions.js.es6 @@ -0,0 +1,6 @@ +export default Ember.Mixin.create({ + init() { + this._super(); + (this.get('delegated') || []).forEach(m => this.set(m, m)); + }, +}); diff --git a/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs b/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs new file mode 100644 index 000000000..0fe77daf7 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs @@ -0,0 +1 @@ +{{yield showTimeline}} diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs index 35048b2c3..e1394f550 100644 --- a/app/assets/javascripts/discourse/templates/topic.hbs +++ b/app/assets/javascripts/discourse/templates/topic.hbs @@ -71,16 +71,18 @@
- {{#if showTimeline}} - {{topic-timeline topic=model - enteredIndex=enteredIndex - loading=model.postStream.loading - delegated=topicDelegated}} - {{else}} - {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}} - {{/if}} + {{#topic-navigation as |showTimeline|}} + {{#if showTimeline}} + {{topic-timeline topic=model + enteredIndex=enteredIndex + loading=model.postStream.loading + delegated=topicDelegated}} + {{else}} + {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}} + {{/if}} - {{topic-progress topic=model delegated=topicDelegated}} + {{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}} + {{/topic-navigation}} {{conditional-loading-spinner condition=model.postStream.loadingAbove}}