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

DEV: Remove unused wizard code (#17016) 

`theme-preview` component and `colorsId`/`fontId` usage.
This commit is contained in:
Jarek Radosz 2022-06-06 21:01:47 +02:00 committed by GitHub
parent 54e42b124a
commit 79f5a7750c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
app/assets/javascripts/wizard/components/theme-preview.js
View File

@ -1,127 +0,0 @@
import {
LOREM,
chooseDarker,
createPreviewComponent,
darkLightDiff,
} from "wizard/lib/preview";
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import I18n from "I18n";
export default createPreviewComponent(305, 165, {
logo: null,
avatar: null,
classNameBindings: ["isSelected"],
@discourseComputed("selectedId", "colorsId")
isSelected(selectedId, colorsId) {
return selectedId === colorsId;
},
click() {
this.onChange(this.colorsId);
},
@observes("step.fieldsById.base_scheme_id.value")
themeChanged() {
this.triggerRepaint();
},
images() {
return {
logo: this.wizard.getLogoUrl(),
avatar: "/images/wizard/trout.png",
};
},
paint({ ctx, colors, font, headingFont, width, height }) {
const headerHeight = height * 0.3;
this.drawFullHeader(colors, headingFont, this.logo);
const margin = width * 0.04;
const avatarSize = height * 0.2;
const lineHeight = height / 9.5;
// Draw a fake topic
this.scaleImage(
this.avatar,
margin,
headerHeight + height * 0.085,
avatarSize,
avatarSize
);
const titleFontSize = headerHeight / 44;
ctx.beginPath();
ctx.fillStyle = colors.primary;
ctx.font = `bold ${titleFontSize}em '${headingFont}'`;
ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3);
const bodyFontSize = height / 220.0;
ctx.font = `${bodyFontSize}em '${font}'`;
let line = 0;
const lines = LOREM.split("\n");
for (let i = 0; i < 4; i++) {
line = height * 0.35 + i * lineHeight;
ctx.fillText(lines[i], margin + avatarSize + margin, line);
}
// Share Button
const shareButtonWidth = I18n.t("wizard.previews.share_button").length * 9;
ctx.beginPath();
ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.14);
ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65);
ctx.fill();
ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
ctx.font = `${bodyFontSize}em '${font}'`;
ctx.fillText(
I18n.t("wizard.previews.share_button"),
margin + 8,
line + lineHeight * 1.85
);
// Reply Button
const replyButtonWidth = I18n.t("wizard.previews.reply_button").length * 9;
ctx.beginPath();
ctx.rect(
shareButtonWidth + margin + 10,
line + lineHeight,
replyButtonWidth,
height * 0.14
);
ctx.fillStyle = colors.tertiary;
ctx.fill();
ctx.fillStyle = colors.secondary;
ctx.font = `${bodyFontSize}em '${font}'`;
ctx.fillText(
I18n.t("wizard.previews.reply_button"),
shareButtonWidth + margin + 18,
line + lineHeight * 1.85
);
// Draw Timeline
const timelineX = width * 0.8;
ctx.beginPath();
ctx.strokeStyle = colors.tertiary;
ctx.lineWidth = 0.5;
ctx.moveTo(timelineX, height * 0.3);
ctx.lineTo(timelineX, height * 0.7);
ctx.stroke();
// Timeline
ctx.beginPath();
ctx.strokeStyle = colors.tertiary;
ctx.lineWidth = 2;
ctx.moveTo(timelineX, height * 0.3);
ctx.lineTo(timelineX, height * 0.4);
ctx.stroke();
ctx.font = `Bold ${bodyFontSize}em ${font}`;
ctx.fillStyle = colors.primary;
ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
},
});

8
app/assets/javascripts/wizard/lib/preview.js
View File

@ -96,7 +96,7 @@ export function createPreviewComponent(width, height, obj) {
return false;
}
const colorsArray = this.wizard.getCurrentColors(this.colorsId);
const colorsArray = this.wizard.currentColors;
if (!colorsArray) {
return;
}
@ -107,11 +107,7 @@ export function createPreviewComponent(width, height, obj) {
colors[name] = `#${c.hex}`;
});
const font = this.wizard.getCurrentFont(this.fontId);
const headingFont = this.wizard.getCurrentFont(
this.fontId,
"heading_font"
);
const { font, headingFont } = this.wizard;
if (!font) {
return;
}

57
app/assets/javascripts/wizard/models/wizard.js
View File

@ -25,63 +25,30 @@ const Wizard = EmberObject.extend(Evented, {
return logoStep.get("fieldsById.logo.value");
},
// A bit clunky, but get the current colors from the appropriate step
getCurrentColors(schemeId) {
get currentColors() {
const colorStep = this.steps.findBy("id", "styling");
if (!colorStep) {
return this.current_color_scheme;
}
const themeChoice = colorStep.get("fieldsById.color_scheme");
const themeChoice = colorStep.fieldsById.color_scheme;
if (!themeChoice) {
return;
}
const themeId = schemeId ? schemeId : themeChoice.get("value");
if (!themeId) {
return;
}
const choices = themeChoice.get("choices");
if (!choices) {
return;
}
const option = choices.findBy("id", themeId);
if (!option) {
return;
}
return option.data.colors;
return themeChoice.choices?.findBy("id", themeChoice.value)?.data.colors;
},
getCurrentFont(fontId, type = "body_font") {
const fontsStep = this.steps.findBy("id", "styling");
if (!fontsStep) {
return;
}
get font() {
const fontChoice = this.steps.findBy("id", "styling")?.fieldsById
?.body_font;
return fontChoice.choices?.findBy("id", fontChoice.value)?.label;
},
const fontChoice = fontsStep.get(`fieldsById.${type}`);
if (!fontChoice) {
return;
}
const choiceId = fontId ? fontId : fontChoice.get("value");
if (!choiceId) {
return;
}
const choices = fontChoice.get("choices");
if (!choices) {
return;
}
const option = choices.findBy("id", choiceId);
if (!option) {
return;
}
return option.label;
get headingFont() {
const fontChoice = this.steps.findBy("id", "styling")?.fieldsById
?.heading_font;
return fontChoice.choices?.findBy("id", fontChoice.value)?.label;
},
});