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) {
|
||||
this.drawFullHeader(colors);
|
||||
this.drawPills(colors, height * 0.15);
|
||||
|
||||
if (this.get('step.fieldsById.homepage_style.value') === "latest") {
|
||||
this.drawPills(colors, height * 0.15);
|
||||
this.renderLatest(ctx, colors, width, height);
|
||||
} else {
|
||||
this.drawPills(colors, height * 0.15, { categories: true });
|
||||
this.renderCategories(ctx, colors, width, height);
|
||||
}
|
||||
},
|
||||
|
@ -52,10 +53,7 @@ export default createPreviewComponent(659, 320, {
|
|||
drawLine(0, y);
|
||||
drawLine(width / 2, y);
|
||||
|
||||
|
||||
|
||||
const categoryHeight = height / 6;
|
||||
|
||||
const titles = this.getTitles();
|
||||
|
||||
// Categories
|
||||
|
|
|
@ -139,7 +139,9 @@ export function createPreviewComponent(width, height, obj) {
|
|||
ctx.fillText("\uf002", width - (avatarSize * 3) - (headerMargin * 0.5), avatarSize);
|
||||
},
|
||||
|
||||
drawPills(colors, headerHeight) {
|
||||
drawPills(colors, headerHeight, opts) {
|
||||
opts = opts || {};
|
||||
|
||||
const { ctx } = this;
|
||||
|
||||
const categoriesSize = headerHeight * 2;
|
||||
|
@ -160,20 +162,21 @@ export function createPreviewComponent(width, height, obj) {
|
|||
ctx.fillStyle = colors.primary;
|
||||
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.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.font = `${fontSize}px 'Arial'`;
|
||||
ctx.fillStyle = colors.secondary;
|
||||
let x = (headerMargin * 3.0) + categoriesSize;
|
||||
|
||||
ctx.fillText("Latest", x - (headerMargin * 0.1), headerHeight + (headerMargin * 1.5) + fontSize);
|
||||
ctx.fillText(text, x - (headerMargin * 0.1), headerHeight + (headerMargin * 1.5) + fontSize);
|
||||
|
||||
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);
|
||||
|
||||
x += categoriesSize * 0.4;
|
||||
|
|
|
@ -170,7 +170,10 @@ class Wizard
|
|||
end
|
||||
|
||||
@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('categories')
|
||||
step.add_field(id: 'homepage_preview', type: 'component')
|
||||
|
|
Loading…
Reference in New Issue