FIX: Show "Categories" when you are viewing the categories pills

This commit is contained in:
Robin Ward 2016-09-21 17:34:15 -04:00
parent a95bb6006d
commit 9bba0f3288
3 changed files with 15 additions and 11 deletions

View File

@ -16,11 +16,12 @@ export default createPreviewComponent(659, 320, {
paint(ctx, colors, width, height) { paint(ctx, colors, width, height) {
this.drawFullHeader(colors); this.drawFullHeader(colors);
this.drawPills(colors, height * 0.15);
if (this.get('step.fieldsById.homepage_style.value') === "latest") { if (this.get('step.fieldsById.homepage_style.value') === "latest") {
this.drawPills(colors, height * 0.15);
this.renderLatest(ctx, colors, width, height); this.renderLatest(ctx, colors, width, height);
} else { } else {
this.drawPills(colors, height * 0.15, { categories: true });
this.renderCategories(ctx, colors, width, height); this.renderCategories(ctx, colors, width, height);
} }
}, },
@ -52,10 +53,7 @@ export default createPreviewComponent(659, 320, {
drawLine(0, y); drawLine(0, y);
drawLine(width / 2, y); drawLine(width / 2, y);
const categoryHeight = height / 6; const categoryHeight = height / 6;
const titles = this.getTitles(); const titles = this.getTitles();
// Categories // Categories

View File

@ -139,7 +139,9 @@ export function createPreviewComponent(width, height, obj) {
ctx.fillText("\uf002", width - (avatarSize * 3) - (headerMargin * 0.5), avatarSize); ctx.fillText("\uf002", width - (avatarSize * 3) - (headerMargin * 0.5), avatarSize);
}, },
drawPills(colors, headerHeight) { drawPills(colors, headerHeight, opts) {
opts = opts || {};
const { ctx } = this; const { ctx } = this;
const categoriesSize = headerHeight * 2; const categoriesSize = headerHeight * 2;
@ -160,20 +162,21 @@ export function createPreviewComponent(width, height, obj) {
ctx.fillStyle = colors.primary; ctx.fillStyle = colors.primary;
ctx.fillText("\uf0da", categoriesSize - (headerMargin / 4), headerHeight + (headerMargin * 1.6) + fontSize); ctx.fillText("\uf0da", categoriesSize - (headerMargin / 4), headerHeight + (headerMargin * 1.6) + fontSize);
// pills const text = opts.categories ? "Categories" : "Latest";
const activeWidth = categoriesSize * (opts.categories ? 0.80 : 0.55);
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = colors.quaternary; ctx.fillStyle = colors.quaternary;
ctx.rect((headerMargin * 2)+ categoriesSize, headerHeight + headerMargin, categoriesSize * 0.55, badgeHeight); ctx.rect((headerMargin * 2)+ categoriesSize, headerHeight + headerMargin, activeWidth, badgeHeight);
ctx.fill(); ctx.fill();
ctx.font = `${fontSize}px 'Arial'`; ctx.font = `${fontSize}px 'Arial'`;
ctx.fillStyle = colors.secondary; ctx.fillStyle = colors.secondary;
let x = (headerMargin * 3.0) + categoriesSize; let x = (headerMargin * 3.0) + categoriesSize;
ctx.fillText(text, x - (headerMargin * 0.1), headerHeight + (headerMargin * 1.5) + fontSize);
ctx.fillText("Latest", x - (headerMargin * 0.1), headerHeight + (headerMargin * 1.5) + fontSize);
ctx.fillStyle = colors.primary; ctx.fillStyle = colors.primary;
x += categoriesSize * 0.6; x += categoriesSize * (opts.categories ? 0.8 : 0.6);
ctx.fillText("New", x, headerHeight + (headerMargin * 1.5) + fontSize); ctx.fillText("New", x, headerHeight + (headerMargin * 1.5) + fontSize);
x += categoriesSize * 0.4; x += categoriesSize * 0.4;

View File

@ -170,7 +170,10 @@ class Wizard
end end
@wizard.append_step('homepage') do |step| @wizard.append_step('homepage') do |step|
style = step.add_field(id: 'homepage_style', type: 'dropdown', required: true)
current = SiteSetting.top_menu.starts_with?("categories") ? "categories" : "latest"
style = step.add_field(id: 'homepage_style', type: 'dropdown', required: true, value: current)
style.add_choice('latest') style.add_choice('latest')
style.add_choice('categories') style.add_choice('categories')
step.add_field(id: 'homepage_preview', type: 'component') step.add_field(id: 'homepage_preview', type: 'component')