Fix avatar from name to support lowercase
This commit is contained in:
parent
e3750ef471
commit
72d1695612
5 changed files with 13 additions and 9 deletions
|
@ -78,7 +78,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
|
||||||
transition: font-size 100ms ease-out;
|
transition: font-size 100ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,6 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
|
||||||
transition: font-size 30ms linear;
|
transition: font-size 30ms linear;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -17,7 +16,6 @@
|
||||||
&__measure {
|
&__measure {
|
||||||
inset-inline-start: -9999;
|
inset-inline-start: -9999;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
text-transform: uppercase;
|
|
||||||
top: -9999;
|
top: -9999;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
@ -23,9 +23,18 @@ describe('getInitials', () => {
|
||||||
assert.strictEqual(getInitials('Bo'), 'B');
|
assert.strictEqual(getInitials('Bo'), 'B');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('returns lowercase initials for lowercase names', () => {
|
||||||
|
assert.strictEqual(getInitials('alice'), 'a');
|
||||||
|
assert.strictEqual(getInitials('foo bar'), 'fb');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns initials for lowercase with uppercase names', () => {
|
||||||
|
assert.strictEqual(getInitials('foo Bar'), 'fB');
|
||||||
|
assert.strictEqual(getInitials('Foo bar'), 'Fb');
|
||||||
|
});
|
||||||
|
|
||||||
[
|
[
|
||||||
'Foo Bar',
|
'Foo Bar',
|
||||||
'foo bar',
|
|
||||||
'F Bar',
|
'F Bar',
|
||||||
'Foo B',
|
'Foo B',
|
||||||
'FB',
|
'FB',
|
||||||
|
@ -38,7 +47,6 @@ describe('getInitials', () => {
|
||||||
'Foo "Qux" Bar',
|
'Foo "Qux" Bar',
|
||||||
'Foo-Qux Bar',
|
'Foo-Qux Bar',
|
||||||
'Foo Bar-Qux',
|
'Foo Bar-Qux',
|
||||||
"Foo b'Arr",
|
|
||||||
].forEach(name => {
|
].forEach(name => {
|
||||||
it(`returns 'FB' for '${name}'`, () => {
|
it(`returns 'FB' for '${name}'`, () => {
|
||||||
assert.strictEqual(getInitials(name), 'FB');
|
assert.strictEqual(getInitials(name), 'FB');
|
||||||
|
|
|
@ -101,15 +101,14 @@ export async function avatarDataToBytes(
|
||||||
);
|
);
|
||||||
} else if (color && text) {
|
} else if (color && text) {
|
||||||
const { bg, fg } = getAvatarColor(color);
|
const { bg, fg } = getAvatarColor(color);
|
||||||
const textToWrite = text.toLocaleUpperCase();
|
|
||||||
|
|
||||||
setCanvasBackground(bg, context, canvas);
|
setCanvasBackground(bg, context, canvas);
|
||||||
context.fillStyle = fg;
|
context.fillStyle = fg;
|
||||||
const font = await getFont(textToWrite);
|
const font = await getFont(text);
|
||||||
context.font = font;
|
context.font = font;
|
||||||
context.textBaseline = 'middle';
|
context.textBaseline = 'middle';
|
||||||
context.textAlign = 'center';
|
context.textAlign = 'center';
|
||||||
context.fillText(textToWrite, CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 30);
|
context.fillText(text, CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 30);
|
||||||
} else if (color && icon) {
|
} else if (color && icon) {
|
||||||
const iconPath = `images/avatars/avatar_${icon}.svg`;
|
const iconPath = `images/avatars/avatar_${icon}.svg`;
|
||||||
await drawImage(iconPath, context, canvas);
|
await drawImage(iconPath, context, canvas);
|
||||||
|
|
|
@ -22,7 +22,7 @@ export function getInitials(name?: string): string | undefined {
|
||||||
return parsedName;
|
return parsedName;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parts = parsedName.toUpperCase().split(' ');
|
const parts = parsedName.split(' ');
|
||||||
const partsLen = parts.length;
|
const partsLen = parts.length;
|
||||||
|
|
||||||
return partsLen === 1
|
return partsLen === 1
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue