UX: Support for displaying wrench alongside progress bar

app/assets/javascripts/discourse/components/topic-admin-menu-button.js.es6

@@ -1,10 +1,11 @@
 import MountWidget from 'discourse/components/mount-widget';
 
 export default MountWidget.extend({
+  classNames: 'topic-admin-menu-button-container',
   tagName: 'span',
   widget: "topic-admin-menu-button",
 
   buildArgs() {
-    return this.getProperties('topic', 'fixed', 'openUpwards');
+    return this.getProperties('topic', 'fixed', 'openUpwards', 'rightSide');
   }
 });

app/assets/javascripts/discourse/templates/components/topic-progress.hbs

@@ -1,3 +1,5 @@
+{{yield}}
+
 {{#if showBackButton}}
   <div class='progress-back-container'>
     {{d-button label="topic.timeline.back" class="btn-primary progress-back" action="goBack" icon="arrow-down"}}

app/assets/javascripts/discourse/templates/topic.hbs

@@ -71,24 +71,24 @@
       </div>
 
       {{#topic-navigation topic=model jumpToIndex=(action "jumpToIndex") as |info|}}
-        {{#if info.renderAdminMenuButton}}
-          {{topic-admin-menu-button
-            topic=model
-            fixed="true"
-            toggleMultiSelect=(action "toggleMultiSelect")
-            deleteTopic=(action "deleteTopic")
-            recoverTopic=(action "recoverTopic")
-            toggleClosed=(action "toggleClosed")
-            toggleArchived=(action "toggleArchived")
-            toggleVisibility=(action "toggleVisibility")
-            showTopicStatusUpdate=(action "topicRouteAction" "showTopicStatusUpdate")
-            showFeatureTopic=(action "topicRouteAction" "showFeatureTopic")
-            showChangeTimestamp=(action "topicRouteAction" "showChangeTimestamp")
-            convertToPublicTopic=(action "convertToPublicTopic")
-            convertToPrivateMessage=(action "convertToPrivateMessage")}}
-        {{/if}}
-
         {{#if info.renderTimeline}}
+          {{#if info.renderAdminMenuButton}}
+            {{topic-admin-menu-button
+              topic=model
+              fixed="true"
+              toggleMultiSelect=(action "toggleMultiSelect")
+              deleteTopic=(action "deleteTopic")
+              recoverTopic=(action "recoverTopic")
+              toggleClosed=(action "toggleClosed")
+              toggleArchived=(action "toggleArchived")
+              toggleVisibility=(action "toggleVisibility")
+              showTopicStatusUpdate=(action "topicRouteAction" "showTopicStatusUpdate")
+              showFeatureTopic=(action "topicRouteAction" "showFeatureTopic")
+              showChangeTimestamp=(action "topicRouteAction" "showChangeTimestamp")
+              convertToPublicTopic=(action "convertToPublicTopic")
+              convertToPrivateMessage=(action "convertToPrivateMessage")}}
+          {{/if}}
+
           {{topic-timeline
             topic=model
             prevEvent=info.prevEvent
@@ -113,11 +113,29 @@
             convertToPublicTopic=(action "convertToPublicTopic")
             convertToPrivateMessage=(action "convertToPrivateMessage")}}
         {{else}}
-          {{topic-progress
+          {{#topic-progress
             prevEvent=info.prevEvent
             topic=model
             expanded=info.topicProgressExpanded
             jumpToPost=(action "jumpToPost")}}
+            {{#if info.renderAdminMenuButton}}
+              {{topic-admin-menu-button
+                topic=model
+                openUpwards="true"
+                rightSide="true"
+                toggleMultiSelect=(action "toggleMultiSelect")
+                deleteTopic=(action "deleteTopic")
+                recoverTopic=(action "recoverTopic")
+                toggleClosed=(action "toggleClosed")
+                toggleArchived=(action "toggleArchived")
+                toggleVisibility=(action "toggleVisibility")
+                showTopicStatusUpdate=(action "topicRouteAction" "showTopicStatusUpdate")
+                showFeatureTopic=(action "topicRouteAction" "showFeatureTopic")
+                showChangeTimestamp=(action "topicRouteAction" "showChangeTimestamp")
+                convertToPublicTopic=(action "convertToPublicTopic")
+                convertToPrivateMessage=(action "convertToPrivateMessage")}}
+            {{/if}}
+          {{/topic-progress}}
         {{/if}}
       {{/topic-navigation}}
 

app/assets/javascripts/discourse/widgets/topic-admin-menu.js.es6

@@ -28,19 +28,26 @@ createWidget('topic-admin-menu-button', {
     if (!this.currentUser || !this.currentUser.get('canManageTopic')) { return; }
 
     const result = [];
-    result.push(this.attach('button', {
+
-      className: 'btn ' + (attrs.fixed ? " show-topic-admin" : ""),
+    // We don't show the button when expanded on the right side
-      title: 'topic_admin_menu',
+    if (!(attrs.rightSide && state.expanded)) {
-      icon: 'wrench',
+      result.push(this.attach('button', {
-      action: 'showAdminMenu',
+        className: 'btn ' + (attrs.fixed ? " show-topic-admin" : ""),
-      sendActionEvent: true
+        title: 'topic_admin_menu',
-    }));
+        icon: 'wrench',
+        action: 'showAdminMenu',
+        sendActionEvent: true
+      }));
+    }
 
     if (state.expanded) {
-      result.push(this.attach('topic-admin-menu', { position: state.position,
+      result.push(this.attach('topic-admin-menu', {
-                                                    fixed: attrs.fixed,
+        position: state.position,
-                                                    topic: attrs.topic,
+        fixed: attrs.fixed,
-                                                    openUpwards: attrs.openUpwards }));
+        topic: attrs.topic,
+        openUpwards: attrs.openUpwards,
+        rightSide: attrs.rightSide
+      }));
     }
 
     return result;
@@ -69,10 +76,20 @@ createWidget('topic-admin-menu-button', {
 export default createWidget('topic-admin-menu', {
   tagName: 'div.popup-menu.topic-admin-popup-menu',
 
+  buildClasses(attrs) {
+    if (attrs.rightSide) {
+      return 'right-side';
+    }
+  },
+
   buildAttributes(attrs) {
-    const { top, left, outerHeight } = attrs.position;
+    let { top, left, outerHeight } = attrs.position;
     const position = attrs.fixed ? 'fixed' : 'absolute';
 
+    if (attrs.rightSide) {
+      return;
+    }
+
     if (attrs.openUpwards) {
       const documentHeight = $(document).height();
       const mainHeight = $('#main').height();

app/assets/stylesheets/common/base/topic.scss

@@ -21,6 +21,30 @@
   }
 }
 
+#topic-progress-wrapper {
+  .topic-admin-menu-button-container {
+    position: relative;
+    right: 37px;
+    top: 35px;
+
+    .widget-button {
+      height: 35px;
+    }
+  }
+
+  .topic-admin-popup-menu.right-side {
+    position: relative;
+    right: 35px;
+  }
+}
+
+#topic-progress-wrapper.docked {
+  .topic-admin-popup-menu.right-side {
+    right: 40px;
+  }
+}
+
+
 #topic-title {
   .title-wrapper {
     float: left;

app/assets/stylesheets/mobile/topic.scss

@@ -211,9 +211,3 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
     margin-right: 0;
   }
 }
-
-.show-topic-admin {
-  bottom: 0px;
-  right: 150px;
-  top: inherit;
-}