UX: Adjustments to topic admin menu on mobile (#9945)

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

@@ -6,6 +6,6 @@ export default MountWidget.extend({
   widget: "topic-admin-menu-button",
 
   buildArgs() {
-    return this.getProperties("topic", "fixed", "openUpwards", "rightSide");
+    return this.getProperties("topic", "openUpwards", "rightSide");
   }
 });

app/assets/javascripts/discourse/app/components/topic-navigation.js

@@ -30,10 +30,7 @@ export default Component.extend(PanEvents, {
     let info = this.info;
 
     if (info.get("topicProgressExpanded")) {
-      info.setProperties({
+      info.set("renderTimeline", true);
-        renderTimeline: true,
-        renderAdminMenuButton: true
-      });
     } else {
       let renderTimeline = !this.site.mobileView;
 
@@ -51,10 +48,7 @@ export default Component.extend(PanEvents, {
         }
       }
 
-      info.setProperties({
+      info.set("renderTimeline", renderTimeline);
-        renderTimeline,
-        renderAdminMenuButton: !renderTimeline
-      });
     }
   },
 

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

@@ -127,24 +127,6 @@
 
       {{#topic-navigation topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
         {{#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=(route-action "showTopicStatusUpdate")
-              showFeatureTopic=(route-action "showFeatureTopic")
-              showChangeTimestamp=(route-action "showChangeTimestamp")
-              resetBumpDate=(action "resetBumpDate")
-              convertToPublicTopic=(action "convertToPublicTopic")
-              convertToPrivateMessage=(action "convertToPrivateMessage")}}
-          {{/if}}
-
           {{topic-timeline
             topic=model
             notificationLevel=model.details.notification_level
@@ -178,24 +160,22 @@
             expanded=info.topicProgressExpanded
             jumpToPost=(action "jumpToPost")}}
             {{plugin-outlet name="before-topic-progress" args=(hash model=model jumpToPost=(action "jumpToPost"))}}
-            {{#if info.renderAdminMenuButton}}
+            {{topic-admin-menu-button
-              {{topic-admin-menu-button
+              topic=model
-                topic=model
+              openUpwards="true"
-                openUpwards="true"
+              rightSide="true"
-                rightSide="true"
+              toggleMultiSelect=(action "toggleMultiSelect")
-                toggleMultiSelect=(action "toggleMultiSelect")
+              deleteTopic=(action "deleteTopic")
-                deleteTopic=(action "deleteTopic")
+              recoverTopic=(action "recoverTopic")
-                recoverTopic=(action "recoverTopic")
+              toggleClosed=(action "toggleClosed")
-                toggleClosed=(action "toggleClosed")
+              toggleArchived=(action "toggleArchived")
-                toggleArchived=(action "toggleArchived")
+              toggleVisibility=(action "toggleVisibility")
-                toggleVisibility=(action "toggleVisibility")
+              showTopicStatusUpdate=(route-action "showTopicStatusUpdate")
-                showTopicStatusUpdate=(route-action "showTopicStatusUpdate")
+              showFeatureTopic=(route-action "showFeatureTopic")
-                showFeatureTopic=(route-action "showFeatureTopic")
+              showChangeTimestamp=(route-action "showChangeTimestamp")
-                showChangeTimestamp=(route-action "showChangeTimestamp")
+              resetBumpDate=(action "resetBumpDate")
-                resetBumpDate=(action "resetBumpDate")
+              convertToPublicTopic=(action "convertToPublicTopic")
-                convertToPublicTopic=(action "convertToPublicTopic")
+              convertToPrivateMessage=(action "convertToPrivateMessage")}}
-                convertToPrivateMessage=(action "convertToPrivateMessage")}}
-            {{/if}}
           {{/topic-progress}}
         {{/if}}
       {{/topic-navigation}}

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

@@ -38,7 +38,6 @@ createWidget("topic-admin-menu-button", {
 
     const menu = this.attach("topic-admin-menu", {
       position: state.position,
-      fixed: attrs.fixed,
       topic: attrs.topic,
       openUpwards: attrs.openUpwards,
       rightSide: !this.site.mobileView && attrs.rightSide,
@@ -54,7 +53,6 @@ createWidget("topic-admin-menu-button", {
         this.attach("button", {
           className:
             "popup-menu-button toggle-admin-menu" +
-            (attrs.fixed ? " show-topic-admin" : "") +
             (attrs.addKeyboardTargetClass ? " keyboard-target-admin-menu" : ""),
           title: "topic_admin_menu",
           icon: "wrench",
@@ -74,10 +72,6 @@ createWidget("topic-admin-menu-button", {
   hideAdminMenu() {
     this.state.expanded = false;
     this.state.position = null;
-
-    if (this.site.mobileView && !this.attrs.rightSide) {
-      $(".header-cloak").css("display", "");
-    }
   },
 
   showAdminMenu(e) {
@@ -101,10 +95,6 @@ createWidget("topic-admin-menu-button", {
       position.left -= MENU_WIDTH - $button.outerWidth();
     }
 
-    if (this.attrs.fixed) {
-      position.left += $button.width() - 203;
-    }
-
     if (this.attrs.openUpwards) {
       if (rtl) {
         position.left -= $button[0].offsetWidth + SPACING;
@@ -115,11 +105,6 @@ createWidget("topic-admin-menu-button", {
       position.top += $button[0].offsetHeight + SPACING;
     }
 
-    if (this.site.mobileView && !this.attrs.rightSide) {
-      const headerCloak = document.querySelector(".header-cloak");
-      if (headerCloak) headerCloak.style.display = "block";
-    }
-
     this.state.position = position;
   },
 
@@ -273,7 +258,7 @@ export default createWidget("topic-admin-menu", {
 
   buildAttributes(attrs) {
     let { top, left, outerHeight } = attrs.position;
-    const position = attrs.fixed || this.site.mobileView ? "fixed" : "absolute";
+    const position = this.site.mobileView ? "fixed" : "absolute";
 
     if (attrs.rightSide) {
       return;
@@ -289,7 +274,7 @@ export default createWidget("topic-admin-menu", {
       }
 
       if (this.site.mobileView) {
-        bottom = 0;
+        bottom = 50;
         left = 0;
       }
 

app/assets/javascripts/discourse/app/widgets/topic-timeline.js

@@ -396,6 +396,15 @@ createWidget("timeline-footer-controls", {
           ["notificationLevel"]
         )
       );
+      if (this.site.mobileView) {
+        controls.push(
+          this.attach("topic-admin-menu-button", {
+            topic,
+            addKeyboardTargetClass: true,
+            openUpwards: true
+          })
+        );
+      }
     }
 
     return controls;

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -24,14 +24,6 @@
   }
 }
 
-.show-topic-admin {
-  position: fixed;
-  top: 120px;
-  right: 10px;
-  z-index: z("dropdown");
-  height: 35px;
-}
-
 .modal-body.feature-topic {
   max-height: 500px;
   input.date-picker {

app/assets/stylesheets/common/printer-friendly.scss

@@ -13,7 +13,6 @@
   #topic-progress-wrapper,
   div.nums,
   ._flyout,
-  .show-topic-admin,
   #topic-progress,
   .quote-controls,
   .topic-status-info,

app/assets/stylesheets/common/topic-timeline.scss

@@ -33,6 +33,7 @@
   &.timeline-fullscreen.show {
     max-height: 700px;
     transition: max-height 0.4s ease-out;
+
     @media screen and (max-height: 425px) {
       max-height: 75vh;
     }
@@ -58,7 +59,7 @@
     right: 0;
     border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
     box-shadow: shadow("composer");
-    padding-top: 20px;
+    padding: 20px 0px;
     z-index: z("fullscreen");
     @media screen and (max-height: 425px) {
       padding-top: 10px;
@@ -119,21 +120,21 @@
       .timeline-footer-controls {
         display: none;
         position: absolute;
-        bottom: 10px;
+        bottom: 20px;
         left: 10px;
 
         button,
         .btn-group {
-          float: none;
-          display: inline-block;
           margin-bottom: 0;
           margin-right: 15px;
-          position: static;
+        }
+
+        .widget-component-connector {
+          vertical-align: top;
         }
       }
       .timeline-scrollarea-wrapper {
         display: table-cell;
-        padding-bottom: 20px;
         padding-right: 1.5em;
         width: 100px;
       }

app/assets/stylesheets/mobile/menu-panel.scss

@@ -11,6 +11,7 @@
   left: 0;
   display: none;
   touch-action: pan-y pinch-zoom;
+
   &.animate {
     transition: opacity 0.2s ease-out;
   }