Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Add descriptions for homepage styles and trim down list 

I need to delete the old code for previewing the different
styles as well.
This commit is contained in:
Martin Brennan 2024-12-13 15:38:28 +10:00
parent 2cb49ed6a4
commit 7e530f6c05
No known key found for this signature in database
GPG Key ID: BD981EFEEC8F5675
9 changed files with 74 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.gjs
View File

@ -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;
}

14
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js
View File

@ -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 =

23
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
View File

@ -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);
}
}

11
app/assets/javascripts/select-kit/addon/components/homepage-style-selector.js Normal file
View File

@ -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";
}
}

6
app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.hbs Normal file
View File

@ -0,0 +1,6 @@
<div class="texts">
<span class="name">{{html-safe this.label}}</span>
{{#if this.item.description}}
<span class="desc">{{html-safe this.item.description}}</span>
{{/if}}
</div>

5
app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js Normal file
View File

@ -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 {}

13
app/assets/stylesheets/wizard.scss
View File

@ -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;

24
config/locales/server.en.yml
View File

@ -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"

6
lib/wizard/builder.rb
View File

@ -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")