discourse/app/assets/javascripts/wizard/components/theme-preview.js.es6

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

125 lines
3.1 KiB
Plaintext
Raw Normal View History

import discourseComputed from "discourse-common/utils/decorators";
import { observes } from "discourse-common/utils/decorators";
2016-09-17 04:12:56 +08:00
import {
createPreviewComponent,
darkLightDiff,
chooseDarker,
2016-09-17 04:39:12 +08:00
LOREM
2016-09-17 04:12:56 +08:00
} from "wizard/lib/preview";
export default createPreviewComponent(305, 165, {
2016-09-02 23:42:14 +08:00
logo: null,
2016-09-17 04:12:56 +08:00
avatar: null,
2016-09-02 23:42:14 +08:00
classNameBindings: ["isSelected"],
@discourseComputed("selectedId", "colorsId")
isSelected(selectedId, colorsId) {
return selectedId === colorsId;
},
click() {
this.onChange(this.colorsId);
},
@observes("step.fieldsById.base_scheme_id.value")
2016-09-17 04:12:56 +08:00
themeChanged() {
this.triggerRepaint();
},
2016-09-02 23:42:14 +08:00
images() {
return {
logo: this.wizard.getLogoUrl(),
avatar: "/images/wizard/trout.png"
};
2016-09-02 23:42:14 +08:00
},
2016-09-17 04:12:56 +08:00
paint(ctx, colors, width, height) {
const headerHeight = height * 0.3;
2016-09-02 23:42:14 +08:00
this.drawFullHeader(colors);
2016-09-02 23:42:14 +08:00
const margin = width * 0.04;
const avatarSize = height * 0.2;
const lineHeight = height / 9.5;
2016-09-02 23:42:14 +08:00
// Draw a fake topic
this.scaleImage(
this.avatar,
margin,
headerHeight + height * 0.085,
avatarSize,
avatarSize
);
2016-09-02 23:42:14 +08:00
const titleFontSize = headerHeight / 44;
2016-09-02 23:42:14 +08:00
ctx.beginPath();
ctx.fillStyle = colors.primary;
ctx.font = `bold ${titleFontSize}em 'Arial'`;
ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3);
2016-09-02 23:42:14 +08:00
const bodyFontSize = height / 220.0;
2016-09-21 22:43:43 +08:00
ctx.font = `${bodyFontSize}em 'Arial'`;
2016-09-02 23:42:14 +08:00
let line = 0;
const lines = LOREM.split("\n");
for (let i = 0; i < 4; i++) {
line = height * 0.35 + i * lineHeight;
2016-09-02 23:42:14 +08:00
ctx.fillText(lines[i], margin + avatarSize + margin, line);
}
// Share Button
ctx.beginPath();
ctx.rect(margin, line + lineHeight, width * 0.14, 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 'Arial'`;
ctx.fillText(
I18n.t("wizard.previews.share_button"),
margin + width / 55,
line + lineHeight * 1.85
);
2016-09-02 23:42:14 +08:00
// Reply Button
ctx.beginPath();
ctx.rect(
margin * 2 + width * 0.14,
line + lineHeight,
width * 0.14,
height * 0.14
);
2016-09-02 23:42:14 +08:00
ctx.fillStyle = colors.tertiary;
ctx.fill();
ctx.fillStyle = colors.secondary;
2016-09-21 22:43:43 +08:00
ctx.font = `${bodyFontSize}em 'Arial'`;
ctx.fillText(
I18n.t("wizard.previews.reply_button"),
margin * 2 + width * 0.14 + width / 55,
line + lineHeight * 1.85
);
2016-09-02 23:42:14 +08:00
// Draw Timeline
2016-09-17 04:12:56 +08:00
const timelineX = width * 0.8;
2016-09-02 23:42:14 +08:00
ctx.beginPath();
ctx.strokeStyle = colors.tertiary;
ctx.lineWidth = 0.5;
2016-09-17 04:12:56 +08:00
ctx.moveTo(timelineX, height * 0.3);
ctx.lineTo(timelineX, height * 0.7);
2016-09-02 23:42:14 +08:00
ctx.stroke();
// Timeline
ctx.beginPath();
ctx.strokeStyle = colors.tertiary;
ctx.lineWidth = 2;
2016-09-17 04:12:56 +08:00
ctx.moveTo(timelineX, height * 0.3);
ctx.lineTo(timelineX, height * 0.4);
2016-09-02 23:42:14 +08:00
ctx.stroke();
2016-09-21 22:43:43 +08:00
ctx.font = `Bold ${bodyFontSize}em Arial`;
2016-09-02 23:42:14 +08:00
ctx.fillStyle = colors.primary;
2016-09-17 04:12:56 +08:00
ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
2016-09-02 23:42:14 +08:00
}
});