mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Tweak avatar badge sizing/placement

Browse source
This commit is contained in:
Evan Hahn 2021-11-20 09:41:48 -06:00 • committed by GitHub
parent 829604dbcf
commit d8b230e348
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 79 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

55
ts/test-electron/components/Avatar_test.tsx
View file

@ -3,9 +3,40 @@
import { assert } from 'chai';
import { _getBadgePlacement } from '../../components/Avatar';
import { _getBadgeSize, _getBadgePlacement } from '../../components/Avatar';
describe('<Avatar>', () => {
describe('_getBadgeSize', () => {
it('returns undefined for sizes under 24px', () => {
assert.isUndefined(_getBadgeSize(1));
assert.isUndefined(_getBadgeSize(23));
});
it('returns 16px for sizes between 24px–36px', () => {
assert.strictEqual(_getBadgeSize(24), 16);
assert.strictEqual(_getBadgeSize(30), 16);
assert.strictEqual(_getBadgeSize(36), 16);
});
it('returns 24px for sizes between 37px–64px', () => {
assert.strictEqual(_getBadgeSize(37), 24);
assert.strictEqual(_getBadgeSize(50), 24);
assert.strictEqual(_getBadgeSize(64), 24);
});
it('returns 36px for sizes between 65px–112px', () => {
assert.strictEqual(_getBadgeSize(65), 36);
assert.strictEqual(_getBadgeSize(100), 36);
assert.strictEqual(_getBadgeSize(112), 36);
});
it('returns ~40% of the size for sizes above 112px (a fallback)', () => {
assert.strictEqual(_getBadgeSize(113), 45);
assert.strictEqual(_getBadgeSize(200), 80);
assert.strictEqual(_getBadgeSize(999), 400);
});
});
describe('_getBadgePlacement', () => {
const check = (
testCases: Map<number, ReturnType<typeof _getBadgePlacement>>
@ -22,21 +53,23 @@ describe('<Avatar>', () => {
it('returns values as specified by designs', () => {
const testCases = new Map([
[28, { size: 16, bottom: -4, right: -2 }],
[36, { size: 16, bottom: -3, right: 0 }],
[40, { size: 24, bottom: -6, right: -4 }],
[48, { size: 24, bottom: -6, right: -4 }],
[56, { size: 24, bottom: -6, right: 0 }],
[80, { size: 36, bottom: -8, right: 0 }],
[88, { size: 36, bottom: -4, right: 3 }],
[28, { bottom: -4, right: -2 }],
[36, { bottom: -3, right: 0 }],
[40, { bottom: -6, right: -4 }],
[48, { bottom: -6, right: -4 }],
[56, { bottom: -6, right: 0 }],
[64, { bottom: -6, right: 0 }],
[80, { bottom: -8, right: 0 }],
[88, { bottom: -4, right: 3 }],
[112, { bottom: -4, right: 3 }],
]);
check(testCases);
});
it('returns fallback values for sizes not specified by designs', () => {
it('returns 0, 0 values for sizes not specified by designs', () => {
const testCases = new Map([
[16, { size: 7, bottom: 0, right: 0 }],
[200, { size: 85, bottom: 0, right: 0 }],
[16, { bottom: 0, right: 0 }],
[200, { bottom: 0, right: 0 }],
]);
check(testCases);
});