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

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

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

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