From e9585007353b7795865a92329126c5bce0b78723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Sat, 5 Aug 2017 01:22:01 +0200
Subject: [PATCH] extract 'timeline-controls' and 'timeline-footer-controls'
 widgets

---
 .../discourse/widgets/topic-timeline.js.es6   | 92 ++++++++++++-------
 .../stylesheets/common/topic-timeline.scss    |  4 +
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index eab0694e7d3..06ba9421970 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -270,6 +270,57 @@ createWidget('topic-timeline-container', {
   }
 });
 
+createWidget('timeline-controls', {
+  tagName: 'div.timeline-controls',
+
+  html(attrs) {
+    const controls = [];
+    const { fullScreen, currentUser, topic } = attrs;
+
+    if (!fullScreen && currentUser && currentUser.get('canManageTopic')) {
+      controls.push(this.attach('topic-admin-menu-button', { topic }));
+    }
+
+    return controls;
+  }
+});
+
+createWidget('timeline-footer-controls', {
+  tagName: 'div.timeline-footer-controls',
+
+  html(attrs) {
+    const controls = [];
+    const { currentUser, fullScreen, topic } = attrs;
+
+    if (currentUser && !fullScreen) {
+      if (topic.get('details.can_create_post')) {
+        controls.push(this.attach('button', {
+          className: 'create',
+          icon: 'reply',
+          title: 'topic.reply.help',
+          action: 'replyToPost'
+        }));
+      }
+    }
+
+    if (fullScreen) {
+      controls.push(this.attach('button', {
+        className: 'jump-to-post',
+        title: 'topic.progress.jump_prompt_long',
+        label: 'topic.progress.jump_prompt',
+        action: 'jumpToPostPrompt'
+      }));
+    }
+
+    if (currentUser) {
+      controls.push(this.attach('topic-notifications-button', { topic }));
+    }
+
+    return controls;
+  }
+
+});
+
 export default createWidget('topic-timeline', {
   tagName: 'div.topic-timeline',
 
@@ -317,6 +368,8 @@ export default createWidget('topic-timeline', {
     const stream = attrs.topic.get('postStream.stream');
     const { currentUser } = this;
 
+    attrs["currentUser"] = currentUser;
+
     let result = [];
 
     if (attrs.fullScreen) {
@@ -333,16 +386,14 @@ export default createWidget('topic-timeline', {
 
       if (this.state.excerpt) {
         elems.push(new RawHtml({
-          html: "<div class='post-excerpt'>" + this.state.excerpt + "</div>"
+          html: `<div class='post-excerpt'>${this.state.excerpt}</div>`
         }));
       }
 
       result.push(h('div.title', elems));
     }
 
-    if (!attrs.fullScreen && currentUser && currentUser.get('canManageTopic')) {
-      result.push(h('div.timeline-controls', this.attach('topic-admin-menu-button', { topic })));
-    }
+    result.push(this.attach('timeline-controls', attrs));
 
     if (stream.length < 3) {
       const topicHeight = $('#topic').height();
@@ -365,37 +416,8 @@ export default createWidget('topic-timeline', {
                               action: 'jumpBottom'
                             }))];
 
-    result = result.concat([h('div.timeline-scrollarea-wrapper', scroller)]);
-
-    const controls = [];
-    if (currentUser && !attrs.fullScreen) {
-      if (attrs.topic.get('details.can_create_post')) {
-        controls.push(this.attach('button', {
-          className: 'create',
-          icon: 'reply',
-          title: 'topic.reply.help',
-          action: 'replyToPost'
-        }));
-      }
-
-    }
-
-    if (attrs.fullScreen) {
-      controls.push(this.attach('button', {
-        className: 'jump-to-post',
-        title: 'topic.progress.jump_prompt_long',
-        label: 'topic.progress.jump_prompt',
-        action: 'jumpToPostPrompt'
-      }));
-    }
-
-    if (currentUser) {
-      controls.push(this.attach('topic-notifications-button', { topic }));
-    }
-
-    if (controls.length > 0) {
-      result.push(h('div.timeline-footer-controls', controls));
-    }
+    result.push(h('div.timeline-scrollarea-wrapper', scroller));
+    result.push(this.attach('timeline-footer-controls', attrs));
 
     return result;
   }
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 42869627fd0..afba6f72cd3 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -197,6 +197,10 @@
 
     .timeline-controls {
       margin-bottom: 1em;
+
+      button {
+        margin-right: 0.5em;
+      }
     }
 
     .timeline-footer-controls {