mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-12-04 04:42:02 -05:00
109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
import { observes } from 'ember-addons/ember-computed-decorators';
|
|
|
|
import {
|
|
createPreviewComponent,
|
|
loadImage,
|
|
darkLightDiff,
|
|
chooseBrighter,
|
|
drawHeader,
|
|
LOREM
|
|
} from 'wizard/lib/preview';
|
|
|
|
export default createPreviewComponent(659, 320, {
|
|
logo: null,
|
|
avatar: null,
|
|
|
|
@observes('step.fieldsById.theme_id.value')
|
|
themeChanged() {
|
|
this.triggerRepaint();
|
|
},
|
|
|
|
load() {
|
|
return Ember.RSVP.Promise.all([loadImage('/images/wizard/discourse-small.png'),
|
|
loadImage('/images/wizard/trout.png')]).then(result => {
|
|
this.logo = result[0];
|
|
this.avatar = result[1];
|
|
});
|
|
},
|
|
|
|
paint(ctx, colors, width, height) {
|
|
const headerHeight = height * 0.15;
|
|
|
|
drawHeader(ctx, colors, width, headerHeight);
|
|
|
|
const margin = width * 0.02;
|
|
const avatarSize = height * 0.1;
|
|
const lineHeight = height / 19.0;
|
|
|
|
// Logo
|
|
const headerMargin = headerHeight * 0.2;
|
|
const logoHeight = headerHeight - (headerMargin * 2);
|
|
const logoWidth = (logoHeight / this.logo.height) * this.logo.width;
|
|
ctx.drawImage(this.logo, headerMargin, headerMargin, logoWidth, logoHeight);
|
|
|
|
// Top right menu
|
|
ctx.drawImage(this.avatar, width - avatarSize - headerMargin, headerMargin, avatarSize, avatarSize);
|
|
ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 45, 55);
|
|
|
|
const headerFontSize = headerHeight / 44;
|
|
|
|
ctx.font = `${headerFontSize}em FontAwesome`;
|
|
ctx.fillText("\uf0c9", width - (avatarSize * 2) - (headerMargin * 0.5), avatarSize);
|
|
ctx.fillText("\uf002", width - (avatarSize * 3) - (headerMargin * 0.5), avatarSize);
|
|
|
|
// Draw a fake topic
|
|
ctx.drawImage(this.avatar, margin, headerHeight + (height * 0.17), avatarSize, avatarSize);
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = colors.primary;
|
|
ctx.font = `bold ${headerFontSize}em 'Arial'`;
|
|
ctx.fillText("Welcome to Discourse", margin, (height * 0.25));
|
|
|
|
const bodyFontSize = height / 440.0;
|
|
ctx.font = `${bodyFontSize}em 'Arial'`;
|
|
|
|
let line = 0;
|
|
const lines = LOREM.split("\n");
|
|
for (let i=0; i<10; i++) {
|
|
line = (height * 0.3) + (i * lineHeight);
|
|
ctx.fillText(lines[i], margin + avatarSize + margin, line);
|
|
}
|
|
|
|
// Reply Button
|
|
ctx.beginPath();
|
|
ctx.rect(width * 0.57, line + lineHeight, width * 0.1, height * 0.07);
|
|
ctx.fillStyle = colors.tertiary;
|
|
ctx.fill();
|
|
ctx.fillStyle = chooseBrighter(colors.primary, colors.secondary);
|
|
ctx.font = `${bodyFontSize}em 'Arial'`;
|
|
ctx.fillText("Reply", width * 0.595, line + (lineHeight * 1.85));
|
|
|
|
// Icons
|
|
ctx.font = `${bodyFontSize}em FontAwesome`;
|
|
ctx.fillStyle = colors.love;
|
|
ctx.fillText("\uf004", width * 0.48, line + (lineHeight * 1.8));
|
|
ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 65, 55);
|
|
ctx.fillText("\uf040", width * 0.525, line + (lineHeight * 1.8));
|
|
|
|
// 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.6);
|
|
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 Arial`;
|
|
ctx.fillStyle = colors.primary;
|
|
ctx.fillText("1 / 20", timelineX + margin, (height * 0.3) + (margin * 1.5));
|
|
}
|
|
});
|