From 9ec56775de5aac28452b3691cbe8cdbe3ee748eb Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 26 May 2016 10:50:01 -0400
Subject: [PATCH] UX: Move buttons to the bottom of the timeline

---
 .../discourse/widgets/topic-timeline.js.es6   | 62 ++++++++++---------
 .../stylesheets/desktop/topic-timeline.scss   |  8 +--
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index 32512d6241..8ad40c1f52 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -210,41 +210,45 @@ export default createWidget('topic-timeline', {
     const { topic } = attrs;
     const createdAt = new Date(topic.created_at);
     const stream = attrs.topic.get('postStream.stream');
+    const { currentUser } = this;
 
     if (stream.length < 3) { return; }
 
-    const controls = [];
-    if (attrs.topic.get('details.can_create_post')) {
-      controls.push(this.attach('button', {
-        className: 'btn btn-primary create',
-        icon: 'reply',
-        label: 'topic.reply.title',
-        action: 'replyToPost'
-      }));
-    }
-
-    const { currentUser } = this;
-    if (currentUser) {
-      controls.push(this.attach('topic-notifications-button', { topic }));
-    }
-
     const rawLabel = relativeAge(new Date(topic.last_posted_at), { addAgo: true, defaultFormat: timelineDate });
-    const result = [ h('div.timeline-controls', controls),
-                     this.attach('link', {
-                       className: 'start-date',
-                       rawLabel: timelineDate(createdAt),
-                       action: 'jumpTop'
-                     }),
-                     this.attach('timeline-scrollarea', attrs),
-                     this.attach('link', {
-                       className: 'now-date',
-                       icon: 'dot-circle-o',
-                       rawLabel,
-                       action: 'jumpBottom'
-                     }) ];
 
+    let result = [];
     if (currentUser && currentUser.get('canManageTopic')) {
-      result.push(h('div.timeline-footer-controls', this.attach('topic-admin-menu-button', { topic })));
+      result.push(h('div.timeline-controls', this.attach('topic-admin-menu-button', { topic })));
+    }
+
+    result = result.concat([this.attach('link', {
+                              className: 'start-date',
+                              rawLabel: timelineDate(createdAt),
+                              action: 'jumpTop'
+                            }),
+                            this.attach('timeline-scrollarea', attrs),
+                            this.attach('link', {
+                              className: 'now-date',
+                              icon: 'dot-circle-o',
+                              rawLabel,
+                              action: 'jumpBottom'
+                            })]);
+
+    if (currentUser) {
+      const controls = [];
+      if (attrs.topic.get('details.can_create_post')) {
+        controls.push(this.attach('button', {
+          className: 'btn btn-primary create',
+          icon: 'reply',
+          label: 'topic.reply.title',
+          action: 'replyToPost'
+        }));
+      }
+
+      if (currentUser) {
+        controls.push(this.attach('topic-notifications-button', { topic }));
+      }
+      result.push(h('div.timeline-footer-controls', controls));
     }
 
     return result;
diff --git a/app/assets/stylesheets/desktop/topic-timeline.scss b/app/assets/stylesheets/desktop/topic-timeline.scss
index 73b2e5a567..538693d48c 100644
--- a/app/assets/stylesheets/desktop/topic-timeline.scss
+++ b/app/assets/stylesheets/desktop/topic-timeline.scss
@@ -17,12 +17,12 @@
     margin-left: 3em;
     width: 150px;
 
-    .timeline-footer-controls {
-      margin-top: 1em;
+    .timeline-controls {
+      margin-bottom: 1em;
     }
 
-    .timeline-controls {
-      margin-bottom: 2em;
+    .timeline-footer-controls {
+      margin-top: 1em;
       line-height: 2.5em;
 
       button {