FIX: Show "Categories" when you are viewing the categories pills
This commit is contained in:
parent
a95bb6006d
commit
9bba0f3288
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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')
|
||||||
|
|
Loading…
Reference in New Issue