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

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

@@ -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);
+    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) {

app/assets/javascripts/wizard/lib/preview.js.es6

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

app/assets/stylesheets/wizard.scss

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

config/locales/server.en.yml

@@ -3853,8 +3853,14 @@ en:
             choices:
               latest:
                 label: "Latest Topics"
-              categories:
+              categories_only:
-                label: "Categories"
+                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"

lib/wizard/builder.rb

@@ -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|
+          if updater.fields[:homepage_style] == 'latest'
             top_menu = "latest|new|unread|top|categories"
-          top_menu = "categories|latest|new|unread|top" if updater.fields[:homepage_style] == '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

spec/components/wizard/step_updater_spec.rb

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