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

UX: adds missing wizard icons

Browse Source 
With our recent move to SVG icons, the font file does not work in the wizard. I've opted for path2D, which accepts an SVG path

Path2D is not supported by IE11 but the chances of admins running the wizard on IE11 are practically none. 

https://caniuse.com/#feat=path2d
This commit is contained in:
Joe 2018-12-20 16:25:22 +08:00 committed by Sam
parent 0bc1fa8aa4
commit d7466156ae
1 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/assets/javascripts/wizard/lib/preview.js.es6
View File

@ -151,19 +151,32 @@ export function createPreviewComponent(width, height, obj) {
);
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
const pathScale = headerHeight / 1200;
// search icon SVG path
const searchIcon = new Path2D(
"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
);
ctx.fillText(
"\uf002",
// hamburger icon
const hamburgerIcon = new Path2D(
"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
);
ctx.save(); // Save the previous state for translation and scale
ctx.translate(
width - avatarSize * 3 - headerMargin * 0.5,
avatarSize
avatarSize / 2
);
// need to scale paths otherwise they're too large
ctx.scale(pathScale, pathScale);
ctx.fill(searchIcon);
ctx.restore();
ctx.save();
ctx.translate(
width - avatarSize * 2 - headerMargin * 0.5,
avatarSize / 2
);
ctx.scale(pathScale, pathScale);
ctx.fill(hamburgerIcon);
ctx.restore();
},
drawPills(colors, headerHeight, opts) {
@ -176,37 +189,41 @@ export function createPreviewComponent(width, height, obj) {
const headerMargin = headerHeight * 0.2;
ctx.beginPath();
ctx.fillStyle = darkLightDiff(
colors.primary,
colors.secondary,
90,
-65
);
ctx.strokeStyle = colors.primary;
ctx.lineWidth = 0.5;
ctx.rect(
headerMargin,
headerHeight + headerMargin,
categoriesSize,
badgeHeight
);
ctx.fill();
ctx.stroke();
const fontSize = Math.round(badgeHeight * 0.5);
ctx.font = `${fontSize}px 'Arial'`;
ctx.fillStyle = colors.primary;
ctx.fillText(
"all categories",
headerMargin * 1.5,
headerHeight + headerMargin * 1.42 + fontSize
headerHeight + headerMargin * 1.4 + fontSize
);
ctx.font = "0.9em 'FontAwesome'";
ctx.fillStyle = colors.primary;
ctx.fillText(
"\uf0da",
categoriesSize - headerMargin / 4,
headerHeight + headerMargin * 1.6 + fontSize
const pathScale = badgeHeight / 1000;
// caret icon
const caretIcon = new Path2D(
"M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
);
ctx.save();
ctx.translate(
categoriesSize - headerMargin / 4,
headerHeight + headerMargin + badgeHeight / 4
);
ctx.scale(pathScale, pathScale);
ctx.fill(caretIcon);
ctx.restore();
const text = opts.categories ? "Categories" : "Latest";
const activeWidth = categoriesSize * (opts.categories ? 0.8 : 0.55);