From 7e530f6c05ce315c544326b022fb1f7bd87b6fd0 Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Fri, 13 Dec 2024 15:38:28 +1000 Subject: [PATCH] UX: Add descriptions for homepage styles and trim down list I need to delete the old code for previewing the different styles as well. --- .../wizard/components/fields/dropdown.gjs | 3 +++ .../styling-preview/-homepage-preview.js | 14 +++++------ .../fields/styling-preview/-preview-base.js | 23 ++++++++++++------ .../components/homepage-style-selector.js | 11 +++++++++ .../homepage-style-selector-row.hbs | 6 +++++ .../homepage-style-selector-row.js | 5 ++++ app/assets/stylesheets/wizard.scss | 13 ++++++++++ config/locales/server.en.yml | 24 +++++++------------ lib/wizard/builder.rb | 6 ++++- 9 files changed, 74 insertions(+), 31 deletions(-) create mode 100644 app/assets/javascripts/select-kit/addon/components/homepage-style-selector.js create mode 100644 app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.hbs create mode 100644 app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.gjs index 91ddef9a682..4a6f16d4c66 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.gjs +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.gjs @@ -4,6 +4,7 @@ import { action, set } from "@ember/object"; import ColorPalettes from "select-kit/components/color-palettes"; import ComboBox from "select-kit/components/combo-box"; import FontSelector from "select-kit/components/font-selector"; +import HomepageStyleSelector from "select-kit/components/homepage-style-selector"; export default class Dropdown extends Component { constructor() { @@ -41,6 +42,8 @@ export default class Dropdown extends Component { case "body_font": case "heading_font": return FontSelector; + case "homepage_style": + return HomepageStyleSelector; default: return ComboBox; } diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js index a083415c2f8..ee99b9a0111 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js @@ -26,26 +26,26 @@ export default class HomepagePreview extends PreviewBaseComponent { const homepageStyle = this.getHomepageStyle(); - if (homepageStyle === "latest") { - this.drawPills(colors, font, height * 0.15); - this.renderLatest(ctx, colors, font, width, height); + if (homepageStyle === "latest" || homepageStyle === "hot") { + this.drawPills(colors, font, height * 0.15, { homepageStyle }); + this.renderNonCategoryHomepage(ctx, colors, font, width, height); } else if ( ["categories_only", "categories_with_featured_topics"].includes( homepageStyle ) ) { - this.drawPills(colors, font, height * 0.15, { categories: true }); + this.drawPills(colors, font, height * 0.15, { homepageStyle }); this.renderCategories(ctx, colors, font, width, height); } else if ( ["categories_boxes", "categories_boxes_with_topics"].includes( homepageStyle ) ) { - this.drawPills(colors, font, height * 0.15, { categories: true }); + this.drawPills(colors, font, height * 0.15, { homepageStyle }); const topics = homepageStyle === "categories_boxes_with_topics"; this.renderCategoriesBoxes(ctx, colors, font, width, height, { topics }); } else { - this.drawPills(colors, font, height * 0.15, { categories: true }); + this.drawPills(colors, font, height * 0.15, { homepageStyle }); this.renderCategoriesWithTopics(ctx, colors, font, width, height); } } @@ -360,7 +360,7 @@ export default class HomepagePreview extends PreviewBaseComponent { ]; } - renderLatest(ctx, colors, font, width, height) { + renderNonCategoryHomepage(ctx, colors, font, width, height) { const rowHeight = height / 6.6; // accounts for hard-set color variables in solarized themes const textColor = diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js index 91ab091652c..54eb6ebe17d 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js @@ -371,14 +371,27 @@ export default class PreviewBase extends Component { ctx.fill(caretIcon); ctx.restore(); + const categoryHomepage = + opts.homepageStyle !== "hot" && opts.homepageStyle !== "latest"; + // First top menu item - const firstTopMenuItemText = opts.categories + let otherHomepageText; + switch (opts.homepageStyle) { + case "hot": + otherHomepageText = i18n("wizard.homepage_preview.nav_buttons.hot"); + break; + case "latest": + otherHomepageText = i18n("wizard.homepage_preview.nav_buttons.latest"); + break; + } + + const firstTopMenuItemText = categoryHomepage ? i18n("wizard.homepage_preview.nav_buttons.categories") - : i18n("wizard.homepage_preview.nav_buttons.latest"); + : otherHomepageText; + const newText = i18n("wizard.homepage_preview.nav_buttons.new"); const unreadText = i18n("wizard.homepage_preview.nav_buttons.unread"); const topText = i18n("wizard.homepage_preview.nav_buttons.top"); - const hotText = i18n("wizard.homepage_preview.nav_buttons.hot"); ctx.beginPath(); ctx.fillStyle = colors.tertiary; @@ -416,10 +429,6 @@ export default class PreviewBase extends Component { const topTextX = unreadTextX + ctx.measureText(unreadText).width + headerMargin * 2.0; ctx.fillText(topText, topTextX, pillButtonTextY); - - const hotTextX = - topTextX + ctx.measureText(topText).width + headerMargin * 2.0; - ctx.fillText(hotText, hotTextX, pillButtonTextY); } } diff --git a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector.js b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector.js new file mode 100644 index 00000000000..e567bc47eb0 --- /dev/null +++ b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector.js @@ -0,0 +1,11 @@ +import { classNames } from "@ember-decorators/component"; +import ComboBoxComponent from "select-kit/components/combo-box"; +import { pluginApiIdentifiers } from "./select-kit"; + +@classNames("homepage-style-selector") +@pluginApiIdentifiers(["homepage-style-selector"]) +export default class HomepageStyleSelector extends ComboBoxComponent { + modifyComponentForRow() { + return "homepage-style-selector/homepage-style-selector-row"; + } +} diff --git a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.hbs b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.hbs new file mode 100644 index 00000000000..79a16ca4809 --- /dev/null +++ b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.hbs @@ -0,0 +1,6 @@ +
+ {{html-safe this.label}} + {{#if this.item.description}} + {{html-safe this.item.description}} + {{/if}} +
\ No newline at end of file diff --git a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js new file mode 100644 index 00000000000..6304554cb3d --- /dev/null +++ b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js @@ -0,0 +1,5 @@ +import { classNames } from "@ember-decorators/component"; +import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row"; + +@classNames("homepage-style-selector-row") +export default class HomepageStyleSelectorRow extends SelectKitRowComponent {} diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index db4aa52d094..d17f58f6bbf 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -579,6 +579,19 @@ body.wizard { overflow: hidden; } + &__dropdown.homepage-style-selector { + .select-kit-row { + .name { + font-weight: bold; + } + + .desc { + display: block; + margin-top: 0.1em; + } + } + } + &__field.checkbox-field .wizard-container__label { cursor: pointer; display: inline-block; diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index 806d665ce67..3de6508830d 100644 --- a/config/locales/server.en.yml +++ b/config/locales/server.en.yml @@ -5423,25 +5423,17 @@ en: label: "Homepage style" choices: latest: - label: "Latest Topics" + label: "Latest" + description: "Displays the most recently active topics in all categories, helping members stay up-to-date with discussions they care about" hot: - label: "Hot Topics" - categories_only: - label: "Categories Only" - categories_with_featured_topics: - label: "Categories with Featured Topics" + label: "Hot" + description: "Surfaces trending topics by blending recent and overall popularity, showcases what members are talking about in your community right now" categories_and_latest_topics: - label: "Categories and Latest Topics" - categories_and_latest_topics_created_date: - label: "Categories and Latest Topics (sort by topic created date)" - categories_and_top_topics: - label: "Categories and Top Topics" + label: "Categories with latest Topics" + description: "Combines the recently active topics across all categories with a list of categories, their description, and total topics" categories_boxes: - label: "Categories Boxes" - categories_boxes_with_topics: - label: "Categories Boxes with Topics" - subcategories_with_featured_topics: - label: "Subcategories with Featured Topics" + label: "Category boxes" + description: "Displays the categories and their description in a grid, ideal for members to see an overview of the sub-communities of your site" branding: title: "Site logo" diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb index 45d2d5729b9..2d46514d989 100644 --- a/lib/wizard/builder.rb +++ b/lib/wizard/builder.rb @@ -206,7 +206,11 @@ class Wizard show_in_sidebar: true, ) style.add_choice("latest") - CategoryPageStyle.values.each { |page| style.add_choice(page[:value]) } + style.add_choice("hot") + + # Subset of CategoryPageStyle, we don't want to show all the options here. + style.add_choice("categories_and_latest_topics") + style.add_choice("categories_boxes") step.add_field(id: "styling_preview", type: "styling-preview")