diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js index a91680360f2..537835a85b4 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js @@ -1,5 +1,6 @@ import { action } from "@ember/object"; -import { drawHeader, LOREM } from "../../../lib/preview"; +import { i18n } from "discourse-i18n"; +import { drawHeader } from "../../../lib/preview"; import PreviewBaseComponent from "../styling-preview/-preview-base"; export default class LogoSmall extends PreviewBaseComponent { @@ -34,10 +35,10 @@ export default class LogoSmall extends PreviewBaseComponent { const image = this.image; const headerMargin = headerHeight * 0.2; - const maxWidth = headerHeight - headerMargin * 2.0; let imageWidth = image.width; let ratio = 1.0; + if (imageWidth > maxWidth) { ratio = maxWidth / imageWidth; imageWidth = maxWidth; @@ -52,38 +53,42 @@ export default class LogoSmall extends PreviewBaseComponent { ); const afterLogo = headerMargin * 1.7 + imageWidth; - const fontSize = Math.round(headerHeight * 0.4); + const fontSize = Math.round(headerHeight * 0.3); ctx.font = `Bold ${fontSize}px '${headingFont}'`; ctx.fillStyle = colors.primary; - const title = LOREM.substring(0, 27); + const title = i18n("wizard.homepage_preview.topic_titles.what_books"); ctx.fillText( title, - headerMargin + imageWidth, - headerHeight - fontSize * 1.1 + headerMargin + imageWidth + 10, + headerHeight - fontSize * 1.8 ); const category = this.categories()[0]; const badgeSize = height / 13.0; ctx.beginPath(); ctx.fillStyle = category.color; - ctx.rect(afterLogo, headerHeight * 0.7, badgeSize, badgeSize); + ctx.rect(afterLogo + 2, headerHeight * 0.6, badgeSize, badgeSize); ctx.fill(); ctx.font = `Bold ${badgeSize * 1.2}px '${font}'`; ctx.fillStyle = colors.primary; ctx.fillText( - category.displayName, + category.name, afterLogo + badgeSize * 1.5, - headerHeight * 0.7 + badgeSize * 0.9 + headerHeight * 0.6 + badgeSize * 0.9 ); const LINE_HEIGHT = 12; ctx.font = `${LINE_HEIGHT}px '${font}'`; - const lines = LOREM.split("\n"); - for (let i = 0; i < 10; i++) { - const line = height * 0.55 + i * (LINE_HEIGHT * 1.5); - ctx.fillText(lines[i], afterLogo, line); + const opFirstSentenceLines = i18n( + "wizard.homepage_preview.topic_ops.what_books" + ) + .split(".")[0] + .split("\n"); + for (let i = 0; i < 2; i++) { + const line = height * 0.7 + i * (LINE_HEIGHT * 1.5); + ctx.fillText(opFirstSentenceLines[i], afterLogo, line); } } } diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js index 73359a48f78..b17d8c28af4 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js @@ -1,4 +1,5 @@ -import { darkLightDiff, LOREM } from "../../../lib/preview"; +import { i18n } from "discourse-i18n"; +import { darkLightDiff } from "../../../lib/preview"; import PreviewBaseComponent from "./-preview-base"; export default class HomepagePreview extends PreviewBaseComponent { @@ -85,11 +86,7 @@ export default class HomepagePreview extends PreviewBaseComponent { ctx.font = `Bold ${bodyFontSize * 1.3}em '${font}'`; ctx.fillStyle = colors.primary; ctx.textAlign = "center"; - ctx.fillText( - category.displayName, - boxStartX + boxWidth / 2, - boxStartY + 25 - ); + ctx.fillText(category.name, boxStartX + boxWidth / 2, boxStartY + 25); ctx.textAlign = "left"; if (opts.topics) { @@ -167,16 +164,16 @@ export default class HomepagePreview extends PreviewBaseComponent { drawLine(width / 2, y); // Categories - this.categories().forEach((category) => { + this.categories().forEach((category, idx) => { const textPos = y + categoryHeight * 0.35; ctx.font = `Bold ${bodyFontSize * 1.1}em '${font}'`; ctx.fillStyle = colors.primary; - ctx.fillText(category.displayName, cols[0], textPos); + ctx.fillText(category.name, cols[0], textPos); ctx.font = `${bodyFontSize * 0.8}em '${font}'`; ctx.fillStyle = textColor; ctx.fillText( - titles[0], + titles[idx], cols[0] - margin * 0.25, textPos + categoryHeight * 0.36 ); @@ -263,16 +260,16 @@ export default class HomepagePreview extends PreviewBaseComponent { const titles = this.getTitles(); // Categories - this.categories().forEach((category) => { + this.categories().forEach((category, idx) => { const textPos = y + categoryHeight * 0.35; ctx.font = `Bold ${bodyFontSize * 1.1}em '${font}'`; ctx.fillStyle = colors.primary; - ctx.fillText(category.displayName, cols[0], textPos); + ctx.fillText(category.name, cols[0], textPos); ctx.font = `${bodyFontSize * 0.8}em '${font}'`; ctx.fillStyle = textColor; ctx.fillText( - titles[0], + titles[idx], cols[0] - margin * 0.25, textPos + categoryHeight * 0.36 ); @@ -332,7 +329,7 @@ export default class HomepagePreview extends PreviewBaseComponent { ctx.fillStyle = colors.primary; ctx.fillText( - category.displayName, + category.name, cols[3] + badgeSize * 3, y + topicHeight * 0.76 ); @@ -347,13 +344,20 @@ export default class HomepagePreview extends PreviewBaseComponent { } getTitles() { - return LOREM.split(".") - .slice(0, 8) - .map((t) => t.substring(0, 40)); + return [ + i18n("wizard.homepage_preview.topic_titles.what_books"), + i18n("wizard.homepage_preview.topic_titles.what_movies"), + i18n("wizard.homepage_preview.topic_titles.random_fact"), + i18n("wizard.homepage_preview.topic_titles.tv_show"), + ]; } getDescriptions() { - return LOREM.split("."); + return [ + i18n("wizard.homepage_preview.category_descriptions.icebreakers"), + i18n("wizard.homepage_preview.category_descriptions.news"), + i18n("wizard.homepage_preview.category_descriptions.site_feedback"), + ]; } renderLatest(ctx, colors, font, width, height) { diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js index c474e3da276..f25f06ca302 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js @@ -6,18 +6,9 @@ import { htmlSafe } from "@ember/template"; import { Promise } from "rsvp"; import PreloadStore from "discourse/lib/preload-store"; import getUrl from "discourse-common/lib/get-url"; +import { i18n } from "discourse-i18n"; import { darkLightDiff, drawHeader } from "../../../lib/preview"; -export const LOREM = ` -Lorem ipsum dolor sit amet, -consectetur adipiscing elit. -Nullam eget sem non elit -tincidunt rhoncus. Fusce -velit nisl, porttitor sed -nisl ac, consectetur interdum -metus. Fusce in consequat -augue, vel facilisis felis.`; - const scaled = {}; function canvasFor(image, w, h) { @@ -219,9 +210,18 @@ export default class PreviewBase extends Component { categories() { return [ - { name: "consecteteur", color: "#652D90" }, - { name: "ultrices", color: "#3AB54A" }, - { name: "placerat", color: "#25AAE2" }, + { + name: i18n("wizard.homepage_preview.category_names.icebreakers"), + color: "#652D90", + }, + { + name: i18n("wizard.homepage_preview.category_names.news"), + color: "#3AB54A", + }, + { + name: i18n("wizard.homepage_preview.category_names.site_feedback"), + color: "#25AAE2", + }, ]; } diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js index e0b80cf57ad..cb3e415e814 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js @@ -6,12 +6,6 @@ import { chooseDarker, darkLightDiff } from "../../../lib/preview"; import HomepagePreview from "./-homepage-preview"; import PreviewBaseComponent from "./-preview-base"; -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 class Index extends PreviewBaseComponent { width = 628; height = 322; @@ -145,8 +139,10 @@ export default class Index extends PreviewBaseComponent { ctx.font = `${bodyFontSize}em '${font}'`; let line = 0; - const lines = LOREM.split("\n"); - for (let i = 0; i < 5; i++) { + const lines = i18n("wizard.homepage_preview.topic_ops.what_books").split( + "\n" + ); + for (let i = 0; i < lines.length; i++) { line = height * 0.35 + i * lineHeight; ctx.fillText(lines[i], margin + avatarSize + margin, line); } diff --git a/app/assets/javascripts/discourse/app/static/wizard/lib/preview.js b/app/assets/javascripts/discourse/app/static/wizard/lib/preview.js index fc87e5c9c02..7f1cbb27788 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/lib/preview.js +++ b/app/assets/javascripts/discourse/app/static/wizard/lib/preview.js @@ -1,15 +1,5 @@ /*eslint no-bitwise:0 */ -export const LOREM = ` -Lorem ipsum dolor sit amet, -consectetur adipiscing elit. -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 function parseColor(color) { const m = color.match(/^#([0-9a-f]{6})$/i); if (m) { diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index 3f5a0b45c4b..a5d9e1de154 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -165,6 +165,12 @@ body.wizard { } } + &__field.dropdown-field.dropdown-homepage-style { + .wizard-container__dropdown { + height: auto; + } + } + &__step-form { display: flex; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 368817a5fd9..8c9ecc5e395 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -7377,8 +7377,29 @@ en: regular: "Regular User" previews: - topic_title: "A discussion topic heading" + topic_title: "What books are you reading?" share_button: "Share" reply_button: "Reply" topic_preview: "Topic preview" homepage_preview: "Homepage preview" + + homepage_preview: + topic_titles: + what_books: "What books are you reading?" + what_movies: "What movies have you seen recently?" + random_fact: "Random fact of the day" + tv_show: "Recommend a TV show" + topic_ops: + what_books: | + We all love to read, let's use this topic to share our + current or recent reads. I'm a fantasy fan and I've been + re-reading The Lord of the Rings for the 100th time. + What about you? + category_descriptions: + icebreakers: "Get to know your fellow community members with fun questions." + news: "Discuss the latest news and events." + site_feedback: "Share your thoughts on the community and suggest improvements." + category_names: + icebreakers: "Icebreakers" + news: "News" + site_feedback: "Site Feedback"