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

FEATURE: show category page options on wizard 'homepage' step

This commit is contained in:
Arpit Jalan 2018-06-14 12:01:56 +05:30
parent 4645cf6b28
commit c7ee70941e
6 changed files with 126 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
app/assets/javascripts/wizard/components/homepage-preview.js.es6
View File

@ -20,9 +20,12 @@ export default createPreviewComponent(659, 320, {
if (this.get('step.fieldsById.homepage_style.value') === "latest") {
this.drawPills(colors, height * 0.15);
this.renderLatest(ctx, colors, width, height);
} else {
} else if (["categories_only", "categories_with_featured_topics"].includes(this.get('step.fieldsById.homepage_style.value'))) {
this.drawPills(colors, height * 0.15, { categories: true });
this.renderCategories(ctx, colors, width, height);
} else {
this.drawPills(colors, height * 0.15, { categories: true });
this.renderCategoriesWithTopics(ctx, colors, width, height);
}
},
@ -30,6 +33,89 @@ export default createPreviewComponent(659, 320, {
const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
const margin = height * 0.03;
const bodyFontSize = height / 440.0;
const titles = this.getTitles();
let categoryHeight = height / 6;
const drawLine = (x, y) => {
ctx.beginPath();
ctx.strokeStyle = darkLightDiff(colors.primary, colors.secondary, 90, -75);
ctx.moveTo(margin + x, y);
ctx.lineTo(width - margin, y);
ctx.stroke();
};
const cols = [0.025, 0.45, 0.53, 0.58, 0.94, 0.96].map(c => c * width);
const headingY = height * 0.33;
ctx.font = `${bodyFontSize * 0.9}em 'Arial'`;
ctx.fillStyle = textColor;
ctx.fillText("Category", cols[0], headingY);
if (this.get('step.fieldsById.homepage_style.value') === "categories_only") {
ctx.fillText("Topics", cols[4], headingY);
} else {
ctx.fillText("Topics", cols[1], headingY);
ctx.fillText("Latest", cols[2], headingY);
categoryHeight = height / 5;
}
let y = headingY + (bodyFontSize * 12);
ctx.lineWidth = 2;
drawLine(0, y);
drawLine(width / 2, y);
// Categories
this.categories().forEach(category => {
const textPos = y + (categoryHeight * 0.35);
ctx.font = `Bold ${bodyFontSize * 1.1}em 'Arial'`;
ctx.fillStyle = colors.primary;
ctx.fillText(category.name, cols[0], textPos);
ctx.font = `${bodyFontSize * 0.8}em 'Arial'`;
ctx.fillStyle = textColor;
ctx.fillText(titles[0], cols[0] - (margin * 0.25), textPos + (categoryHeight * 0.36));
ctx.beginPath();
ctx.moveTo(margin, y);
ctx.strokeStyle = category.color;
ctx.lineWidth = 3.5;
ctx.lineTo(margin, y + categoryHeight);
ctx.stroke();
if (this.get('step.fieldsById.homepage_style.value') === "categories_with_featured_topics") {
ctx.font = `${bodyFontSize}em 'Arial'`;
ctx.fillText(Math.floor(Math.random() * 90) + 10, cols[1] + 15, textPos);
} else {
ctx.font = `${bodyFontSize}em 'Arial'`;
ctx.fillText(Math.floor(Math.random() * 90) + 10, cols[5], textPos);
}
y += categoryHeight;
ctx.lineWidth = 1;
drawLine(0, y);
});
// Featured Topics
if (this.get('step.fieldsById.homepage_style.value') === "categories_with_featured_topics") {
const topicHeight = height / 15;
y = headingY + (bodyFontSize * 22);
ctx.lineWidth = 1;
ctx.fillStyle = colors.tertiary;;
titles.forEach(title => {
ctx.font = `${bodyFontSize}em 'Arial'`;
const textPos = y + (topicHeight * 0.35);
ctx.fillStyle = colors.tertiary;;
ctx.fillText(`${title}`, cols[2], textPos);
y += topicHeight;
});
}
},
renderCategoriesWithTopics(ctx, colors, width, height) {
const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
const margin = height * 0.03;
const bodyFontSize = height / 440.0;
const drawLine = (x, y) => {
ctx.beginPath();
@ -39,14 +125,18 @@ export default createPreviewComponent(659, 320, {
ctx.stroke();
};
const cols = [0.025, 0.4, 0.53, 0.58, 0.94].map(c => c * width);
const cols = [0.025, 0.42, 0.53, 0.58, 0.94].map(c => c * width);
const headingY = height * 0.33;
ctx.font = `${bodyFontSize * 0.9}em 'Arial'`;
ctx.fillStyle = textColor;
ctx.fillText("Category", cols[0], headingY);
ctx.fillText("Topics", cols[1], headingY);
ctx.fillText("Latest", cols[2], headingY);
if (this.get('step.fieldsById.homepage_style.value') === "categories_and_latest_topics") {
ctx.fillText("Latest", cols[2], headingY);
} else{
ctx.fillText("Top", cols[2], headingY);
}
let y = headingY + (bodyFontSize * 12);
ctx.lineWidth = 2;
@ -74,12 +164,15 @@ export default createPreviewComponent(659, 320, {
ctx.lineTo(margin, y + categoryHeight);
ctx.stroke();
ctx.font = `${bodyFontSize}em 'Arial'`;
ctx.fillText(Math.floor(Math.random() * 90) + 10, cols[1] + 15, textPos);
y += categoryHeight;
ctx.lineWidth = 1;
drawLine(0, y);
});
// Categories - Latest Topics
// Latest/Top Topics
const topicHeight = height / 8;
const avatarSize = topicHeight * 0.7;
y = headingY + (bodyFontSize * 12);
@ -112,11 +205,10 @@ export default createPreviewComponent(659, 320, {
drawLine(width / 2, y);
});
},
getTitles() {
return LOREM.split(".").slice(0, 7).map(t => t.substring(0, 40));
return LOREM.split(".").slice(0, 8).map(t => t.substring(0, 40));
},
renderLatest(ctx, colors, width, height) {

2
app/assets/javascripts/wizard/lib/preview.js.es6
View File

@ -88,7 +88,7 @@ export function createPreviewComponent(width, height, obj) {
},
categories() {
return [{name: 'consecteteur', color: '#652D90'}, {name: 'ultrices', color: '#3AB54A'}];
return [{name: 'consecteteur', color: '#652D90'}, {name: 'ultrices', color: '#3AB54A'}, {name: 'placerat', color: '#25AAE2'}];
},
scaleImage(image, x, y, w, h) {

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

@ -100,6 +100,12 @@ body.wizard {
}
}
.wizard-step-homepage {
.field-homepage-style {
width: 280px;
}
}
.wizard-column {
position: relative;
z-index: 11;

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

@ -3853,8 +3853,14 @@ en:
choices:
latest:
label: "Latest Topics"
categories:
label: "Categories"
categories_only:
label: "Categories Only"
categories_with_featured_topics:
label: "Categories with Featured Topics"
categories_and_latest_topics:
label: "Categories and Latest Topics"
categories_and_top_topics:
label: "Categories and Top Topics"
emoji:
title: "Emoji"

15
lib/wizard/builder.rb
View File

@ -175,16 +175,23 @@ class Wizard
@wizard.append_step('homepage') do |step|
current = SiteSetting.top_menu.starts_with?("categories") ? "categories" : "latest"
current = SiteSetting.top_menu.starts_with?("categories") ? SiteSetting.desktop_category_page_style : "latest"
style = step.add_field(id: 'homepage_style', type: 'dropdown', required: true, value: current)
style.add_choice('latest')
style.add_choice('categories')
CategoryPageStyle.values.each do |page|
style.add_choice(page[:value])
end
step.add_field(id: 'homepage_preview', type: 'component')
step.on_update do |updater|
top_menu = "latest|new|unread|top|categories"
top_menu = "categories|latest|new|unread|top" if updater.fields[:homepage_style] == 'categories'
if updater.fields[:homepage_style] == 'latest'
top_menu = "latest|new|unread|top|categories"
else
top_menu = "categories|latest|new|unread|top"
updater.update_setting(:desktop_category_page_style, updater.fields[:homepage_style])
end
updater.update_setting(:top_menu, top_menu)
end
end

3
spec/components/wizard/step_updater_spec.rb
View File

@ -252,12 +252,13 @@ describe Wizard::StepUpdater do
context "homepage step" do
it "updates the fields correctly" do
updater = wizard.create_updater('homepage', homepage_style: "categories")
updater = wizard.create_updater('homepage', homepage_style: "categories_and_top_topics")
updater.update
expect(updater).to be_success
expect(wizard.completed_steps?('homepage')).to eq(true)
expect(SiteSetting.top_menu).to eq('categories|latest|new|unread|top')
expect(SiteSetting.desktop_category_page_style).to eq('categories_and_top_topics')
updater = wizard.create_updater('homepage', homepage_style: "latest")
updater.update