From 78d91b1daf39b34c04c9865578f9f1101064995d Mon Sep 17 00:00:00 2001 From: Vinoth Kannan Date: Mon, 30 Jul 2018 14:13:00 +0530 Subject: [PATCH] UX: Changes in top categories of hamburger menu (#6200) --- .../widgets/hamburger-categories.js.es6 | 24 ++++----------- .../discourse/widgets/hamburger-menu.js.es6 | 30 +++++++++---------- .../stylesheets/common/base/menu-panel.scss | 8 ----- app/serializers/current_user_serializer.rb | 4 +-- config/locales/client.en.yml | 2 +- config/locales/server.en.yml | 2 ++ config/site_settings.yml | 4 +++ .../widgets/hamburger-menu-test.js.es6 | 14 ++++++--- 8 files changed, 39 insertions(+), 49 deletions(-) diff --git a/app/assets/javascripts/discourse/widgets/hamburger-categories.js.es6 b/app/assets/javascripts/discourse/widgets/hamburger-categories.js.es6 index af0c7be0ba..d8c3daae92 100644 --- a/app/assets/javascripts/discourse/widgets/hamburger-categories.js.es6 +++ b/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; } }); diff --git a/app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6 index ef84b58788..3c90d646fe 100644 --- a/app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6 +++ b/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) { diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 0d11ebb4f8..18c5083e8d 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/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); diff --git a/app/serializers/current_user_serializer.rb b/app/serializers/current_user_serializer.rb index a2fffd2187..0b801b0942 100644 --- a/app/serializers/current_user_serializer.rb +++ b/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 diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 1d36c4c642..fc13eed978 100644 --- a/config/locales/client.en.yml +++ b/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 diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index 2677e0f166..8c85dc3f75 100644 --- a/config/locales/server.en.yml +++ b/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)." diff --git a/config/site_settings.yml b/config/site_settings.yml index a6a2a26346..1aabd59c5d 100644 --- a/config/site_settings.yml +++ b/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' diff --git a/test/javascripts/widgets/hamburger-menu-test.js.es6 b/test/javascripts/widgets/hamburger-menu-test.js.es6 index 04d30f5369..e5434af35a 100644 --- a/test/javascripts/widgets/hamburger-menu-test.js.es6 +++ b/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()