UX: move vertical admin plugin nav to horizontal overflow nav (#20319)

app/assets/javascripts/admin/addon/controllers/admin-plugins.js

@@ -1,4 +1,3 @@
-import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import { inject as service } from "@ember/service";
 
@@ -24,14 +23,6 @@ export default Controller.extend({
       .filter(Boolean);
   },
 
-  @action
-  toggleMenu() {
-    const adminDetail = document.querySelector(".admin-detail");
-    ["mobile-closed", "mobile-open"].forEach((state) => {
-      adminDetail.classList.toggle(state);
-    });
-  },
-
   routeExists(routeName) {
     try {
       this.router.urlFor(routeName);

app/assets/javascripts/admin/addon/templates/plugins.hbs

@@ -1,33 +1,20 @@
 <div class="admin-controls">
-  <div class="controls">
-    <DButton
-      @action={{action "toggleMenu"}}
-      @class="menu-toggle"
-      @icon="bars"
-    />
-
-    {{#if this.currentUser.admin}}
-      <DButton
-        @label="admin.plugins.change_settings"
-        @icon="cog"
-        @class="btn-default settings-button"
-        @action={{route-action "showSettings"}}
-      />
-    {{/if}}
-  </div>
-</div>
-
-<div class="admin-nav pull-left">
-  <ul class="nav nav-stacked">
+  <HorizontalOverflowNav @className="main-nav nav plugin-nav">
     <NavItem @route="adminPlugins.index" @label="admin.plugins.title" />
-
     {{#each this.adminRoutes as |route|}}
       <NavItem @route={{route.full_location}} @label={{route.label}} />
     {{/each}}
-  </ul>
+    {{#if this.currentUser.admin}}
+      <NavItem
+        @route="adminSiteSettingsCategory"
+        @label="admin.plugins.change_settings"
+        @routeParam="plugins"
+      />
+    {{/if}}
+  </HorizontalOverflowNav>
 </div>
 
-<div class="admin-detail pull-left mobile-closed">
+<div class="admin-container">
   {{#each this.brokenAdminRoutes as |route|}}
     <div class="alert alert-error">
       {{i18n "admin.plugins.broken_route" name=(i18n route.label)}}

app/assets/javascripts/discourse/tests/acceptance/admin-plugins-test.js

@@ -44,7 +44,7 @@ acceptance("Admin - Plugins", function (needs) {
     );
 
     assert.true(
-      exists(".admin-plugins .admin-detail .alert-error"),
+      exists(".admin-plugins .admin-container .alert-error"),
       "displays an error for unknown routes"
     );
   });

app/assets/stylesheets/common/admin/admin_base.scss

@@ -538,11 +538,6 @@ $mobile-breakpoint: 700px;
       a.active {
         background: var(--primary-medium);
       }
-      &:last-of-type {
-        > a {
-          margin-right: 25px;
-        }
-      }
     }
   }
   h1 {
@@ -625,6 +620,12 @@ $mobile-breakpoint: 700px;
     display: inline-block;
     margin-right: 5px;
   }
+
+  .horizontal-overflow-nav__scroll-right,
+  .horizontal-overflow-nav__scroll-left {
+    --fade-color: var(--primary-low-rgb);
+    background: var(--primary-low);
+  }
 }
 
 .badges,

app/assets/stylesheets/common/components/horizontal-overflow-nav.scss

@@ -26,6 +26,7 @@
 .horizontal-overflow-nav__scroll-right,
 .horizontal-overflow-nav__scroll-left {
   --fade-width: 1.5em;
+  --fade-color: var(--secondary-rgb); // must be RGB for gradient
   opacity: 1;
   position: absolute;
   z-index: 2;
@@ -56,8 +57,8 @@
     width: var(--fade-width);
     background: linear-gradient(
       to left,
-      rgba(var(--secondary-rgb), 1),
-      rgba(var(--secondary-rgb), 0)
+      rgba(var(--fade-color), 1),
+      rgba(var(--fade-color), 0)
     );
   }
 }
@@ -71,8 +72,8 @@
     width: var(--fade-width);
     background: linear-gradient(
       to right,
-      rgba(var(--secondary-rgb), 1),
-      rgba(var(--secondary-rgb), 0)
+      rgba(var(--fade-color), 1),
+      rgba(var(--fade-color), 0)
     );
   }
 }

config/locales/client.en.yml

@@ -4840,7 +4840,7 @@ en:
         enabled: "Enabled?"
         is_enabled: "Y"
         not_enabled: "N"
-        change_settings: "Change Settings"
+        change_settings: "Plugin Settings"
         change_settings_short: "Settings"
         howto: "How do I install plugins?"
         official: "Official Plugin"