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

UX: Wider canvas buttons in wizard (#11124)

Browse Source
This commit is contained in:
Penar Musaraj 2020-11-05 09:55:35 -05:00 committed by GitHub
parent d508545954
commit 707ed01f33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/javascripts/wizard/components/font-preview.js
View File

@ -38,7 +38,7 @@ export default createPreviewComponent(659, 320, {
this.drawFullHeader(colors, headingFont, this.logo);
}
const margin = width * 0.04;
const margin = 20;
const avatarSize = height * 0.2;
const lineHeight = height / 11;
@ -69,25 +69,29 @@ export default createPreviewComponent(659, 320, {
}
// Share Button
const shareButtonWidth = I18n.t("wizard.previews.share_button").length * 11;
ctx.beginPath();
ctx.rect(margin, line + lineHeight, width * 0.1, height * 0.12);
ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.1);
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 + width / 55,
line + lineHeight * 1.85
margin + 10,
line + lineHeight * 1.7
);
// Reply Button
const replyButtonWidth = I18n.t("wizard.previews.reply_button").length * 11;
ctx.beginPath();
ctx.rect(
margin + width * 0.12,
shareButtonWidth + margin + 10,
line + lineHeight,
width * 0.1,
height * 0.12
replyButtonWidth,
height * 0.1
);
ctx.fillStyle = colors.tertiary;
ctx.fill();
@ -95,8 +99,8 @@ export default createPreviewComponent(659, 320, {
ctx.font = `${bodyFontSize}em '${font}'`;
ctx.fillText(
I18n.t("wizard.previews.reply_button"),
margin + width * 0.12 + width / 55,
line + lineHeight * 1.85
shareButtonWidth + margin + 20,
line + lineHeight * 1.7
);
// Draw Timeline

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

@ -71,24 +71,27 @@ export default createPreviewComponent(305, 165, {
}
// Share Button
const shareButtonWidth = I18n.t("wizard.previews.share_button").length * 9;
ctx.beginPath();
ctx.rect(margin, line + lineHeight, width * 0.14, height * 0.14);
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 + width / 55,
margin + 8,
line + lineHeight * 1.85
);
// Reply Button
const replyButtonWidth = I18n.t("wizard.previews.reply_button").length * 9;
ctx.beginPath();
ctx.rect(
margin * 2 + width * 0.14,
shareButtonWidth + margin + 10,
line + lineHeight,
width * 0.14,
replyButtonWidth,
height * 0.14
);
ctx.fillStyle = colors.tertiary;
@ -97,7 +100,7 @@ export default createPreviewComponent(305, 165, {
ctx.font = `${bodyFontSize}em '${font}'`;
ctx.fillText(
I18n.t("wizard.previews.reply_button"),
margin * 2 + width * 0.14 + width / 55,
shareButtonWidth + margin + 18,
line + lineHeight * 1.85
);