UX: Changes in top categories of hamburger menu (#6200)

app/assets/javascripts/discourse/widgets/hamburger-categories.js.es6

@@ -51,14 +51,15 @@ export default createWidget("hamburger-categories", {
 
   html(attrs) {
     const href = Discourse.getURL("/categories");
+    let title = I18n.t("filters.categories.title");
+    if (attrs.moreCount > 0) {
+      title += I18n.t("categories.more", { count: attrs.moreCount });
+    }
+
     let result = [
       h(
         "li.heading",
-        h(
-          "a.d-link.categories-link",
-          { attributes: { href } },
-          I18n.t("filters.categories.title")
-        )
+        h("a.d-link.categories-link", { attributes: { href } }, title)
       )
     ];
 
@@ -70,19 +71,6 @@ export default createWidget("hamburger-categories", {
       categories.map(c => this.attach("hamburger-category", c))
     );
 
-    if (attrs.showMore) {
-      result = result.concat(
-        h(
-          "li.footer",
-          h(
-            "a.d-link.more-link",
-            { attributes: { href } },
-            I18n.t("categories.more")
-          )
-        )
-      );
-    }
-
     return result;
   }
 });

app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6

@@ -176,28 +176,28 @@ export default createWidget("hamburger-menu", {
   },
 
   listCategories() {
-    const maxCategoriesToDisplay = 6;
+    const maxCategoriesToDisplay = this.siteSettings
+      .hamburger_menu_categories_count;
     const categoriesList = this.site.get("categoriesByCount");
-    let categories = [];
-    let showMore = categoriesList.length > maxCategoriesToDisplay;
+    let categories = categoriesList.slice();
 
     if (this.currentUser) {
       let categoryIds = this.currentUser.get("top_category_ids") || [];
-      categoryIds = categoryIds.concat(categoriesList.map(c => c.id)).uniq();
-
-      showMore = categoryIds.length > maxCategoriesToDisplay;
-      categoryIds = categoryIds.slice(0, maxCategoriesToDisplay);
-
-      categories = categoryIds.map(id => {
-        return categoriesList.find(c => c.id === id);
+      let i = 0;
+      categoryIds.forEach(id => {
+        const category = categories.find(c => c.id === id);
+        if (category) {
+          categories = categories.filter(c => c.id !== id);
+          categories.splice(i, 0, category);
+          i += 1;
+        }
       });
-      categories = categories.filter(c => c);
-    } else {
-      showMore = categoriesList.length > maxCategoriesToDisplay;
-      categories = categoriesList.slice(0, maxCategoriesToDisplay);
     }
 
-    return this.attach("hamburger-categories", { categories, showMore });
+    const moreCount = categories.length - maxCategoriesToDisplay;
+    categories = categories.slice(0, maxCategoriesToDisplay);
+
+    return this.attach("hamburger-categories", { categories, moreCount });
   },
 
   footerLinks(prioritizeFaq, faqUrl) {

app/assets/stylesheets/common/base/menu-panel.scss

@@ -108,14 +108,6 @@
     }
   }
 
-  .category-links {
-    .footer {
-      clear: both;
-      display: block;
-      padding: 0.25em 0.5em;
-    }
-  }
-
   // note these topic counts only appear for anons in the category hamburger drop down
   b.topics-count {
     color: dark-light-choose($primary-medium, $secondary-medium);

app/serializers/current_user_serializer.rb

@@ -2,8 +2,6 @@ require_dependency 'new_post_manager'
 
 class CurrentUserSerializer < BasicUserSerializer
 
-  MAX_TOP_CATEGORIES_COUNT = 6.freeze
-
   attributes :name,
              :unread_notifications,
              :unread_private_messages,
@@ -169,7 +167,7 @@ class CurrentUserSerializer < BasicUserSerializer
           WHEN notification_level = 4 THEN 3
         END")
       .pluck(:category_id)
-      .slice(0, MAX_TOP_CATEGORIES_COUNT)
+      .slice(0, SiteSetting.hamburger_menu_categories_count)
   end
 
   def dismissed_banner_key

config/locales/client.en.yml

@@ -571,7 +571,7 @@ en:
       topic_stat_sentence:
         one: "%{count} new topic in the past %{unit}."
         other: "%{count} new topics in the past %{unit}."
-      more: "more"
+      more: " (%{count} more) ..."
 
     ip_lookup:
       title: IP Address Lookup

config/locales/server.en.yml

@@ -1655,6 +1655,8 @@ en:
 
     suppress_uncategorized_badge: "Don't show the badge for uncategorized topics in topic lists."
 
+    hamburger_menu_categories_count: "How many categories can be displayed in the hamburger menu."
+
     permalink_normalizations: "Apply the following regex before matching permalinks, for example: /(topic.*)\\?.*/\\1 will strip query strings from topic routes. Format is regex+string use \\1 etc. to access captures"
 
     global_notice: "Display an URGENT, EMERGENCY global banner notice to all visitors, change to blank to hide it (HTML allowed)."

config/site_settings.yml

@@ -1415,6 +1415,10 @@ uncategorized:
     client: true
     default: true
 
+  hamburger_menu_categories_count:
+    client: true
+    default: 8
+
   slug_generation_method:
     default: 'ascii'
     enum: 'SlugSetting'

test/javascripts/widgets/hamburger-menu-test.js.es6

@@ -2,7 +2,6 @@ import { moduleForWidget, widgetTest } from "helpers/widget-test";
 
 moduleForWidget("hamburger-menu");
 
-const maxCategoriesToDisplay = 6;
 const topCategoryIds = [2, 3, 1];
 
 widgetTest("prioritize faq", {
@@ -128,10 +127,17 @@ widgetTest("general links", {
   }
 });
 
+let maxCategoriesToDisplay;
+
 widgetTest("top categories - anonymous", {
   template: '{{mount-widget widget="hamburger-menu"}}',
   anonymous: true,
 
+  beforeEach() {
+    this.siteSettings.hamburger_menu_categories_count = 8;
+    maxCategoriesToDisplay = this.siteSettings.hamburger_menu_categories_count;
+  },
+
   test(assert) {
     const count = this.site.get("categoriesByCount").length;
     const maximum =
@@ -144,15 +150,15 @@ widgetTest("top categories", {
   template: '{{mount-widget widget="hamburger-menu"}}',
 
   beforeEach() {
+    this.siteSettings.hamburger_menu_categories_count = 8;
+    maxCategoriesToDisplay = this.siteSettings.hamburger_menu_categories_count;
     this.currentUser.set("top_category_ids", topCategoryIds);
   },
 
   test(assert) {
     assert.equal(find(".category-link").length, maxCategoriesToDisplay);
 
-    const categoriesList = this.site
-      .get("categoriesByCount")
-      .reject(c => c.parent_category_id);
+    const categoriesList = this.site.get("categoriesByCount");
     let ids = topCategoryIds
       .concat(categoriesList.map(c => c.id))
       .uniq()