From 1584033d7a7fc1deb2b644f8c04e4a2f19bb12e3 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 25 May 2016 13:29:47 -0400
Subject: [PATCH] UX: Don't display the timeline on thinner browser widths

---
 .../components/topic-navigation.js.es6        | 26 +++++++++++++++++++
 .../components/topic-progress.js.es6          |  6 ++---
 .../discourse/controllers/topic.js.es6        | 10 -------
 .../discourse/mixins/delegate-actions.js.es6  |  6 +++++
 .../templates/components/topic-navigation.hbs |  1 +
 .../javascripts/discourse/templates/topic.hbs | 20 +++++++-------
 6 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/topic-navigation.js.es6
 create mode 100644 app/assets/javascripts/discourse/mixins/delegate-actions.js.es6
 create mode 100644 app/assets/javascripts/discourse/templates/components/topic-navigation.hbs

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 00000000000..d9138b8f62c
--- /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 d8d61f2ff20..dfd5050195a 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 3e6fbbf6690..89b4b22d815 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 00000000000..ce3e46a56f5
--- /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 00000000000..0fe77daf7eb
--- /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 35048b2c33c..e1394f55047 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -71,16 +71,18 @@
       <section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
         <div class="posts-wrapper">
 
-          {{#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}}