FEATURE: Separate base and heading font site_settings (#10807)

FEATURE: Separate base and heading font site_settings (#10807)

Allows site administrators to pick different fonts for headings in the wizard and in their site settings. Also correctly displays the header logos in wizard previews.

diff --git a/app/assets/javascripts/wizard/components/font-preview.js b/app/assets/javascripts/wizard/components/font-preview.js
index 1a5d71b..fef9fa5 100644
--- a/app/assets/javascripts/wizard/components/font-preview.js
+++ b/app/assets/javascripts/wizard/components/font-preview.js
@@ -1,30 +1,26 @@
 import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
 import { observes } from "discourse-common/utils/decorators";
 import {
   createPreviewComponent,
   darkLightDiff,
   chooseDarker,
-  LOREM,
 } from "wizard/lib/preview";
 
-export default createPreviewComponent(305, 165, {
+const LOREM = `
+Lorem ipsum dolor sit amet, consectetur adipiscing.
+Nullam eget sem non elit tincidunt rhoncus. Fusce
+velit nisl, porttitor sed nisl ac, consectetur interdum
+metus. Fusce in consequat augue, vel facilisis felis.`;
+
+export default createPreviewComponent(659, 320, {
   logo: null,
   avatar: null,
 
-  classNameBindings: ["isSelected"],
-
-  @discourseComputed("selectedId", "fontId")
-  isSelected(selectedId, fontId) {
-    return selectedId === fontId;
-  },
-
-  click() {
-    this.onChange(this.fontId);
-  },
-
-  @observes("step.fieldsById.base_scheme_id.value")
-  themeChanged() {
+  @observes(
+    "step.fieldsById.body_font.value",
+    "step.fieldsById.heading_font.value"
+  )
+  fontChanged() {
     this.triggerRepaint();
   },
 
@@ -35,47 +31,44 @@ export default createPreviewComponent(305, 165, {
     };
   },
 
-  paint(ctx, colors, font, width, height) {
+  paint({ ctx, colors, font, headingFont, width, height }) {
     const headerHeight = height * 0.3;
-    this.drawFullHeader(colors, font);
+
+    this.drawFullHeader(colors, headingFont, this.logo);
 
     const margin = width * 0.04;
     const avatarSize = height * 0.2;
-    const lineHeight = height / 9.5;
+    const lineHeight = height / 11;
 
     // Draw a fake topic
     this.scaleImage(
       this.avatar,
       margin,
-      headerHeight + height * 0.085,
+      headerHeight + height * 0.11,
       avatarSize,
       avatarSize
     );
 
-    const titleFontSize = headerHeight / 44;
+    const titleFontSize = headerHeight / 55;
 
     ctx.beginPath();
     ctx.fillStyle = colors.primary;
-    ctx.font = `bold ${titleFontSize}em '${font}'`;
-    ctx.fillText(
-      I18n.t("wizard.previews.font_title", { font }),
-      margin,
-      height * 0.3
-    );
+    ctx.font = `bold ${titleFontSize}em '${headingFont}'`;
+    ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3);
 
-    const bodyFontSize = height / 220.0;
+    const bodyFontSize = height / 330.0;
     ctx.font = `${bodyFontSize}em '${font}'`;
 
     let line = 0;
     const lines = LOREM.split("\n");
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < 5; i++) {
       line = height * 0.35 + i * lineHeight;
       ctx.fillText(lines[i], margin + avatarSize + margin, line);
     }
 
     // Share Button
     ctx.beginPath();
-    ctx.rect(margin, line + lineHeight, width * 0.14, height * 0.14);
+    ctx.rect(margin, line + lineHeight, width * 0.1, height * 0.12);
     ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65);
     ctx.fill();
     ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
@@ -89,10 +82,10 @@ export default createPreviewComponent(305, 165, {
     // Reply Button
     ctx.beginPath();
     ctx.rect(
-      margin * 2 + width * 0.14,
+      margin + width * 0.12,
       line + lineHeight,
-      width * 0.14,
-      height * 0.14
+      width * 0.1,
+      height * 0.12
     );
     ctx.fillStyle = colors.tertiary;
     ctx.fill();
@@ -100,12 +93,12 @@ export default createPreviewComponent(305, 165, {
     ctx.font = `${bodyFontSize}em '${font}'`;
     ctx.fillText(
       I18n.t("wizard.previews.reply_button"),
-      margin * 2 + width * 0.14 + width / 55,
+      margin + width * 0.12 + width / 55,
       line + lineHeight * 1.85
     );
 
     // Draw Timeline
-    const timelineX = width * 0.8;
+    const timelineX = width * 0.86;
     ctx.beginPath();
     ctx.strokeStyle = colors.tertiary;
     ctx.lineWidth = 0.5;
diff --git a/app/assets/javascripts/wizard/components/font-previews.js b/app/assets/javascripts/wizard/components/font-previews.js
deleted file mode 100644
index 65c8d2f..0000000
--- a/app/assets/javascripts/wizard/components/font-previews.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Component from "@ember/component";
-export default Component.extend({
-  actions: {
-    changed(value) {
-      this.set("field.value", value);
-    },
-  },
-});
diff --git a/app/assets/javascripts/wizard/components/homepage-preview.js b/app/assets/javascripts/wizard/components/homepage-preview.js
index 898ef40..8848ebd 100644
--- a/app/assets/javascripts/wizard/components/homepage-preview.js
+++ b/app/assets/javascripts/wizard/components/homepage-preview.js
@@ -21,8 +21,8 @@ export default createPreviewComponent(659, 320, {
     };
   },
 
-  paint(ctx, colors, font, width, height) {
-    this.drawFullHeader(colors, font);
+  paint({ ctx, colors, font, width, height }) {
+    this.drawFullHeader(colors, font, this.logo);
 
     if (this.get("step.fieldsById.homepage_style.value") === "latest") {
       this.drawPills(colors, font, height * 0.15);
diff --git a/app/assets/javascripts/wizard/components/image-preview-favicon.js b/app/assets/javascripts/wizard/components/image-preview-favicon.js
index 06884b0..82b0e95 100644
--- a/app/assets/javascripts/wizard/components/image-preview-favicon.js
+++ b/app/assets/javascripts/wizard/components/image-preview-favicon.js
@@ -14,7 +14,8 @@ export default createPreviewComponent(371, 124, {
     return { tab: "/images/wizard/tab.png", image: this.get("field.value") };
   },
 
-  paint(ctx, colors, font, width, height) {
+  paint(options) {
+    const { ctx, width, height } = options;
     this.scaleImage(this.tab, 0, 0, width, height);
     this.scaleImage(this.image, 40, 25, 30, 30);
 
diff --git a/app/assets/javascripts/wizard/components/image-preview-large-icon.js b/app/assets/javascripts/wizard/components/image-preview-large-icon.js
index b687d6a..0d7c86a 100644
--- a/app/assets/javascripts/wizard/components/image-preview-large-icon.js
+++ b/app/assets/javascripts/wizard/components/image-preview-large-icon.js
@@ -17,7 +17,8 @@ export default createPreviewComponent(325, 125, {
     };
   },
 
-  paint(ctx, colors, font, width, height) {
+  paint(options) {
+    const { width, height } = options;
     this.scaleImage(this.image, 10, 8, 87, 87);
     this.scaleImage(this.ios, 0, 0, width, height);
   },
diff --git a/app/assets/javascripts/wizard/components/image-preview-logo-small.js b/app/assets/javascripts/wizard/components/image-preview-logo-small.js
index ec18f0f..ba55380 100644
--- a/app/assets/javascripts/wizard/components/image-preview-logo-small.js
+++ b/app/assets/javascripts/wizard/components/image-preview-logo-small.js
@@ -13,7 +13,8 @@ export default createPreviewComponent(375, 100, {
     return { image: this.get("field.value") };
   },
 
-  paint(ctx, colors, font, width, height) {
+  paint(options) {
+    const { ctx, colors, font, headingFont, width, height } = options;
     const headerHeight = height / 2;
 
     drawHeader(ctx, colors, width, headerHeight);
@@ -39,7 +40,8 @@ export default createPreviewComponent(375, 100, {
 
     const afterLogo = headerMargin * 1.7 + imageWidth;
     const fontSize = Math.round(headerHeight * 0.4);
-    ctx.font = `Bold ${fontSize}px '${font}'`;
+
+    ctx.font = `Bold ${fontSize}px '${headingFont}'`;
     ctx.fillStyle = colors.primary;
     const title = LOREM.substring(0, 27);
     ctx.fillText(
diff --git a/app/assets/javascripts/wizard/components/image-preview-logo.js b/app/assets/javascripts/wizard/components/image-preview-logo.js
index f5d9417..acad280 100644
--- a/app/assets/javascripts/wizard/components/image-preview-logo.js
+++ b/app/assets/javascripts/wizard/components/image-preview-logo.js

[... diff too long, it was truncated ...]

GitHub sha: a4356b99

This commit appears in #10807 which was approved by eviltrout. It was merged by pmusaraj.