From d400fe66238122aa92f2a6dd77695df33fbee451 Mon Sep 17 00:00:00 2001 From: Arpit Jalan Date: Mon, 6 Jan 2025 09:25:25 +0530 Subject: [PATCH] FEATURE: add new setting to select view for category page on mobile (#30519) --- .../discovery/categories-display.gjs | 9 ++---- .../tests/acceptance/categories-test.js | 26 ++++++++++++++- app/controllers/categories_controller.rb | 8 +++-- app/models/mobile_category_page_style.rb | 32 +++++++++++++++++++ config/locales/server.en.yml | 2 ++ config/site_settings.yml | 4 +++ 6 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 app/models/mobile_category_page_style.rb diff --git a/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs b/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs index d0c6c24c8b1..3804743a991 100644 --- a/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs +++ b/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs @@ -13,11 +13,6 @@ import PluginOutlet from "discourse/components/plugin-outlet"; import SubcategoriesWithFeaturedTopics from "discourse/components/subcategories-with-featured-topics"; import { MAX_UNOPTIMIZED_CATEGORIES } from "discourse/lib/constants"; -const mobileCompatibleViews = [ - "categories_with_featured_topics", - "subcategories_with_featured_topics", -]; - const subcategoryComponents = { boxes_with_featured_topics: CategoriesBoxesWithTopics, boxes: CategoriesBoxes, @@ -57,8 +52,8 @@ export default class CategoriesDisplay extends Component { get style() { let style = this.siteSettings.desktop_category_page_style; - if (this.site.mobileView && !mobileCompatibleViews.includes(style)) { - style = mobileCompatibleViews[0]; + if (this.site.mobileView) { + style = this.siteSettings.mobile_category_page_style; } if (this.site.categories.length > MAX_UNOPTIMIZED_CATEGORIES) { style = "categories_only"; diff --git a/app/assets/javascripts/discourse/tests/acceptance/categories-test.js b/app/assets/javascripts/discourse/tests/acceptance/categories-test.js index 3964d78cbf5..c7ec26f7bf3 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/categories-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/categories-test.js @@ -107,7 +107,7 @@ acceptance( function (needs) { needs.mobileView(); needs.settings({ - desktop_category_page_style: "subcategories_with_featured_topics", + mobile_category_page_style: "subcategories_with_featured_topics", }); test("basic functionality", async function (assert) { @@ -127,6 +127,30 @@ acceptance( } ); +acceptance( + "Categories - 'categories_boxes_with_topics' (mobile)", + function (needs) { + needs.mobileView(); + needs.settings({ + mobile_category_page_style: "categories_boxes_with_topics", + }); + + test("basic functionality", async function (assert) { + await visit("/categories"); + assert + .dom( + "div.category-box-inner .category-box-heading a.parent-box-link[href='/c/dev/7']" + ) + .exists("shows boxes for top-level category"); + assert + .dom( + "div.category-box-inner .featured-topics li[data-topic-id='11994']" + ) + .exists("shows featured topics in boxes"); + }); + } +); + acceptance("Categories - preloadStore handling", function () { const styles = [ "categories_only", diff --git a/app/controllers/categories_controller.rb b/app/controllers/categories_controller.rb index db9bcaa0f54..109a4c7a1ec 100644 --- a/app/controllers/categories_controller.rb +++ b/app/controllers/categories_controller.rb @@ -621,15 +621,19 @@ class CategoriesController < ApplicationController end include_topics = - view_context.mobile_view? || params[:include_topics] || + params[:include_topics] || (parent_category && parent_category.subcategory_list_includes_topics?) || SiteSetting.desktop_category_page_style == "categories_with_featured_topics" || SiteSetting.desktop_category_page_style == "subcategories_with_featured_topics" || SiteSetting.desktop_category_page_style == "categories_boxes_with_topics" || - SiteSetting.desktop_category_page_style == "categories_with_top_topics" + SiteSetting.desktop_category_page_style == "categories_with_top_topics" || + SiteSetting.mobile_category_page_style == "categories_with_featured_topics" || + SiteSetting.mobile_category_page_style == "categories_boxes_with_topics" || + SiteSetting.mobile_category_page_style == "subcategories_with_featured_topics" include_subcategories = SiteSetting.desktop_category_page_style == "subcategories_with_featured_topics" || + SiteSetting.mobile_category_page_style == "subcategories_with_featured_topics" || params[:include_subcategories] == "true" category_options = { diff --git a/app/models/mobile_category_page_style.rb b/app/models/mobile_category_page_style.rb new file mode 100644 index 00000000000..28b54431a34 --- /dev/null +++ b/app/models/mobile_category_page_style.rb @@ -0,0 +1,32 @@ +# frozen_string_literal: true + +require "enum_site_setting" + +class MobileCategoryPageStyle < EnumSiteSetting + def self.valid_value?(val) + values.any? { |v| v[:value].to_s == val.to_s } + end + + def self.values + @values ||= [ + { name: "category_page_style.categories_only", value: "categories_only" }, + { + name: "category_page_style.categories_with_featured_topics", + value: "categories_with_featured_topics", + }, + { name: "category_page_style.categories_boxes", value: "categories_boxes" }, + { + name: "category_page_style.categories_boxes_with_topics", + value: "categories_boxes_with_topics", + }, + { + name: "category_page_style.subcategories_with_featured_topics", + value: "subcategories_with_featured_topics", + }, + ] + end + + def self.translate_names? + true + end +end diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index cacd9c17be2..baa5826586c 100644 --- a/config/locales/server.en.yml +++ b/config/locales/server.en.yml @@ -2237,6 +2237,7 @@ en: min_title_similar_length: "The minimum length of a title before it will be checked for similar topics." desktop_category_page_style: "This setting determines the visual layout of the /categories page on desktop. It includes options such as displaying subcategories with featured topics, showing the latest topics, or presenting top topics. The chosen style will influence how users interact and navigate through categories on the site." + mobile_category_page_style: "This setting determines the visual layout of the /categories page on mobile." category_colors: "A list of hexadecimal color values allowed for categories." default_dark_mode_color_scheme_id: "The color palette used when in dark mode." dark_mode_none: "None" @@ -3017,6 +3018,7 @@ en: delete_user_max_post_age: "" delete_user_self_max_post_count: "" desktop_category_page_style: "" + mobile_category_page_style: "" detailed_404: "" detect_custom_avatars: "" digest_logo: "" diff --git a/config/site_settings.yml b/config/site_settings.yml index 1c6a0c8063d..8dbad54a119 100644 --- a/config/site_settings.yml +++ b/config/site_settings.yml @@ -283,6 +283,10 @@ basic: client: true enum: "CategoryPageStyle" default: "categories_and_latest_topics" + mobile_category_page_style: + client: true + enum: "MobileCategoryPageStyle" + default: "categories_with_featured_topics" category_colors: client: true type: list