IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UI: update "latest" canvas layout in wizard

Browse Source
This commit is contained in:
Penar Musaraj 2019-01-18 09:56:39 -05:00
parent 457e6c7b37
commit f8f281cdad
1 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/wizard/components/homepage-preview.js.es6
View File

@ -358,7 +358,7 @@ export default createPreviewComponent(659, 320, {
}, },
renderLatest(ctx, colors, width, height) { renderLatest(ctx, colors, width, height) {
const rowHeight = height / 10.0; const rowHeight = height / 6.6;
const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50); const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
const bodyFontSize = height / 440.0; const bodyFontSize = height / 440.0;
@ -379,7 +379,7 @@ export default createPreviewComponent(659, 320, {
ctx.stroke(); ctx.stroke();
}; };
const cols = [0.02, 0.5, 0.65, 0.8, 0.87, 0.93].map(c => c * width); const cols = [0.02, 0.66, 0.8, 0.87, 0.93].map(c => c * width);
// Headings // Headings
const headingY = height * 0.33; const headingY = height * 0.33;
@ -387,11 +387,10 @@ export default createPreviewComponent(659, 320, {
ctx.fillStyle = textColor; ctx.fillStyle = textColor;
ctx.font = `${bodyFontSize * 0.9}em 'Arial'`; ctx.font = `${bodyFontSize * 0.9}em 'Arial'`;
ctx.fillText("Topic", cols[0], headingY); ctx.fillText("Topic", cols[0], headingY);
ctx.fillText("Category", cols[1], headingY); ctx.fillText("Users", cols[1], headingY);
ctx.fillText("Users", cols[2], headingY); ctx.fillText("Replies", cols[2], headingY);
ctx.fillText("Replies", cols[3], headingY); ctx.fillText("Views", cols[3], headingY);
ctx.fillText("Views", cols[4], headingY); ctx.fillText("Activity", cols[4], headingY);
ctx.fillText("Activity", cols[5], headingY);
// Topics // Topics
let y = headingY + rowHeight / 2.6; let y = headingY + rowHeight / 2.6;
@ -401,39 +400,39 @@ export default createPreviewComponent(659, 320, {
ctx.font = `${bodyFontSize}em 'Arial'`; ctx.font = `${bodyFontSize}em 'Arial'`;
ctx.lineWidth = 1; ctx.lineWidth = 1;
this.getTitles().forEach(title => { this.getTitles().forEach(title => {
const textPos = y + rowHeight * 0.7; const textPos = y + rowHeight * 0.4;
ctx.fillStyle = textColor; ctx.fillStyle = textColor;
ctx.fillText(title, cols[0], textPos); ctx.fillText(title, cols[0], textPos);
const category = this.categories()[0]; const category = this.categories()[0];
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = category.color; ctx.fillStyle = category.color;
const badgeSize = rowHeight * 0.2; const badgeSize = rowHeight * 0.15;
ctx.font = `Bold ${bodyFontSize * 0.5}em 'Arial'`; ctx.font = `Bold ${bodyFontSize * 0.75}em 'Arial'`;
ctx.rect(cols[1], y + rowHeight * 0.5, badgeSize, badgeSize); ctx.rect(cols[0] + 4, y + rowHeight * 0.6, badgeSize, badgeSize);
ctx.fill(); ctx.fill();
ctx.fillStyle = colors.primary; ctx.fillStyle = colors.primary;
ctx.fillText( ctx.fillText(
category.name, category.name,
cols[1] + badgeSize * 1.5, cols[0] + badgeSize * 2,
y + rowHeight * 0.65 y + rowHeight * 0.73
); );
this.scaleImage( this.scaleImage(
this.avatar, this.avatar,
cols[2], cols[1],
y + rowHeight * 0.3, y + rowHeight * 0.25,
rowHeight * 0.5, rowHeight * 0.5,
rowHeight * 0.5 rowHeight * 0.5
); );
ctx.fillStyle = textColor; ctx.fillStyle = textColor;
ctx.font = `${bodyFontSize}em 'Arial'`; ctx.font = `${bodyFontSize}em 'Arial'`;
for (let j = 3; j <= 5; j++) { for (let j = 2; j <= 4; j++) {
ctx.fillText( ctx.fillText(
j === 5 ? "1h" : Math.floor(Math.random() * 90) + 10, j === 5 ? "1h" : Math.floor(Math.random() * 90) + 10,
cols[j] + margin, cols[j] + margin,
y + rowHeight * 0.7 y + rowHeight * 0.6
); );
} }
drawLine(y + rowHeight * 1); drawLine(y + rowHeight * 1);