Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Do not use Lorem Ipsum for wizard preview text 

Lipsum looks ugly and techy, let's use some actual
category names and topic titles instead.
This commit is contained in:
Martin Brennan 2024-12-03 15:51:46 +10:00
parent 377380a2f4
commit 8d6fa99c29
No known key found for this signature in database
GPG Key ID: BD981EFEEC8F5675
7 changed files with 84 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js
View File

@ -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);
}
}
}

38
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js
View File

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

26
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
View File

@ -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",
},
];
}

12
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js
View File

@ -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);
}

10
app/assets/javascripts/discourse/app/static/wizard/lib/preview.js
View File

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

6
app/assets/stylesheets/wizard.scss
View File

@ -165,6 +165,12 @@ body.wizard {
}
}
&__field.dropdown-field.dropdown-homepage-style {
.wizard-container__dropdown {
height: auto;
}
}
&__step-form {
display: flex;
}

23
config/locales/client.en.yml
View File

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