Avatar defaults and colors
This commit is contained in:
parent
a001882d58
commit
12d2b1bf7c
140 changed files with 4212 additions and 1084 deletions
122
ts/types/Avatar.ts
Normal file
122
ts/types/Avatar.ts
Normal file
|
@ -0,0 +1,122 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { AvatarColorType } from './Colors';
|
||||
import { strictAssert } from '../util/assert';
|
||||
|
||||
export const PersonalAvatarIcons = [
|
||||
'abstract_01',
|
||||
'abstract_02',
|
||||
'abstract_03',
|
||||
'cat',
|
||||
'dog',
|
||||
'fox',
|
||||
'tucan',
|
||||
'pig',
|
||||
'dinosour',
|
||||
'sloth',
|
||||
'incognito',
|
||||
'ghost',
|
||||
] as const;
|
||||
|
||||
export const GroupAvatarIcons = [
|
||||
'balloon',
|
||||
'book',
|
||||
'briefcase',
|
||||
'celebration',
|
||||
'drink',
|
||||
'football',
|
||||
'heart',
|
||||
'house',
|
||||
'melon',
|
||||
'soccerball',
|
||||
'sunset',
|
||||
'surfboard',
|
||||
] as const;
|
||||
|
||||
type GroupAvatarIconType = typeof GroupAvatarIcons[number];
|
||||
|
||||
type PersonalAvatarIconType = typeof PersonalAvatarIcons[number];
|
||||
|
||||
export type AvatarIconType = GroupAvatarIconType | PersonalAvatarIconType;
|
||||
|
||||
export type AvatarDataType = {
|
||||
id: number | string;
|
||||
buffer?: ArrayBuffer;
|
||||
color?: AvatarColorType;
|
||||
icon?: AvatarIconType;
|
||||
imagePath?: string;
|
||||
text?: string;
|
||||
};
|
||||
|
||||
export type DeleteAvatarFromDiskActionType = (
|
||||
avatarData: AvatarDataType,
|
||||
conversationId?: string
|
||||
) => unknown;
|
||||
|
||||
export type ReplaceAvatarActionType = (
|
||||
curr: AvatarDataType,
|
||||
prev?: AvatarDataType,
|
||||
conversationId?: string
|
||||
) => unknown;
|
||||
|
||||
export type SaveAvatarToDiskActionType = (
|
||||
avatarData: AvatarDataType,
|
||||
conversationId?: string
|
||||
) => unknown;
|
||||
|
||||
const groupIconColors = [
|
||||
'A180',
|
||||
'A120',
|
||||
'A110',
|
||||
'A170',
|
||||
'A100',
|
||||
'A210',
|
||||
'A100',
|
||||
'A180',
|
||||
'A120',
|
||||
'A110',
|
||||
'A130',
|
||||
'A210',
|
||||
];
|
||||
|
||||
const personalIconColors = [
|
||||
'A130',
|
||||
'A120',
|
||||
'A170',
|
||||
'A190',
|
||||
'A140',
|
||||
'A190',
|
||||
'A120',
|
||||
'A160',
|
||||
'A130',
|
||||
'A180',
|
||||
'A210',
|
||||
'A100',
|
||||
];
|
||||
|
||||
strictAssert(
|
||||
groupIconColors.length === GroupAvatarIcons.length &&
|
||||
personalIconColors.length === PersonalAvatarIcons.length,
|
||||
'colors.length !== icons.length'
|
||||
);
|
||||
|
||||
const groupDefaultAvatars = GroupAvatarIcons.map((icon, index) => ({
|
||||
id: index,
|
||||
color: groupIconColors[index],
|
||||
icon,
|
||||
}));
|
||||
|
||||
const personalDefaultAvatars = PersonalAvatarIcons.map((icon, index) => ({
|
||||
id: index,
|
||||
color: personalIconColors[index],
|
||||
icon,
|
||||
}));
|
||||
|
||||
export function getDefaultAvatars(isGroup?: boolean): Array<AvatarDataType> {
|
||||
if (isGroup) {
|
||||
return groupDefaultAvatars;
|
||||
}
|
||||
|
||||
return personalDefaultAvatars;
|
||||
}
|
|
@ -1,21 +1,94 @@
|
|||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
export const AvatarColors = [
|
||||
'crimson',
|
||||
'vermilion',
|
||||
'burlap',
|
||||
'forest',
|
||||
'wintergreen',
|
||||
'teal',
|
||||
'blue',
|
||||
'indigo',
|
||||
'violet',
|
||||
'plum',
|
||||
'taupe',
|
||||
'steel',
|
||||
'ultramarine',
|
||||
] as const;
|
||||
export const AvatarColorMap = new Map([
|
||||
[
|
||||
'A100',
|
||||
{
|
||||
bg: '#e3e3fe',
|
||||
fg: '#3838f5',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A110',
|
||||
{
|
||||
bg: '#dde7fc',
|
||||
fg: '#1251d3',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A120',
|
||||
{
|
||||
bg: '#d8e8f0',
|
||||
fg: '#086da0',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A130',
|
||||
{
|
||||
bg: '#cde4cd',
|
||||
fg: '#067906',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A140',
|
||||
{
|
||||
bg: '#eae0fd',
|
||||
fg: '#661aff',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A150',
|
||||
{
|
||||
bg: '#f5e3fe',
|
||||
fg: '#9f00f0',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A160',
|
||||
{
|
||||
bg: '#f6d8ec',
|
||||
fg: '#b8057c',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A170',
|
||||
{
|
||||
bg: '#f5d7d7',
|
||||
fg: '#be0404',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A180',
|
||||
{
|
||||
bg: '#fef5d0',
|
||||
fg: '#836b01',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A190',
|
||||
{
|
||||
bg: '#eae6d5',
|
||||
fg: '#7d6f40',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A200',
|
||||
{
|
||||
bg: '#d2d2dc',
|
||||
fg: '#4f4f6d',
|
||||
},
|
||||
],
|
||||
[
|
||||
'A210',
|
||||
{
|
||||
bg: '#d7d7d9',
|
||||
fg: '#5c5c5c',
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
export const AvatarColors = Array.from(AvatarColorMap.keys());
|
||||
|
||||
export const ConversationColors = [
|
||||
'ultramarine',
|
||||
|
@ -90,6 +163,7 @@ export type CustomColorType = {
|
|||
};
|
||||
|
||||
export type AvatarColorType = typeof AvatarColors[number];
|
||||
|
||||
export type ConversationColorType =
|
||||
| typeof ConversationColors[number]
|
||||
| 'custom';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue