Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-05 19:11:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX: Accurate sizing for Reply and Share buttons

Browse Source 
We can use `ctx.measureText` when rendering the canvas
to get accurate text widths taking into account fonts etc.
so we can better size the rectangles around these buttons.
This commit is contained in:
Martin Brennan 2024-12-04 14:41:21 +10:00
parent 8d6fa99c29
commit 01f3161a73
No known key found for this signature in database
GPG Key ID: BD981EFEEC8F5675
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js
View File

@ -147,8 +147,12 @@ export default class Index extends PreviewBaseComponent {
ctx.fillText(lines[i], margin + avatarSize + margin, line);
}
ctx.font = `${bodyFontSize}em '${font}'`;
// Share Button
const shareButtonWidth = i18n("wizard.previews.share_button").length * 11;
const shareButtonWidth =
Math.round(ctx.measureText(i18n("wizard.previews.share_button")).width) +
20;
ctx.beginPath();
ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.1);
@ -156,8 +160,8 @@ export default class Index extends PreviewBaseComponent {
ctx.fillStyle =
colors.primary_low ||
darkLightDiff(colors.primary, colors.secondary, 90, 65);
ctx.fill();
ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
ctx.font = `${bodyFontSize}em '${font}'`;
ctx.fillText(
i18n("wizard.previews.share_button"),
margin + 10,
@ -165,7 +169,9 @@ export default class Index extends PreviewBaseComponent {
);
// Reply Button
const replyButtonWidth = i18n("wizard.previews.reply_button").length * 11;
const replyButtonWidth =
Math.round(ctx.measureText(i18n("wizard.previews.reply_button")).width) +
20;
ctx.beginPath();
ctx.rect(
@ -177,7 +183,6 @@ export default class Index extends PreviewBaseComponent {
ctx.fillStyle = colors.tertiary;
ctx.fill();
ctx.fillStyle = colors.secondary;
ctx.font = `${bodyFontSize}em '${font}'`;
ctx.fillText(
i18n("wizard.previews.reply_button"),
shareButtonWidth + margin + 20,