Avatar defaults and colors
This commit is contained in:
parent
a001882d58
commit
12d2b1bf7c
140 changed files with 4212 additions and 1084 deletions
60
ts/components/BetterAvatarBubble.tsx
Normal file
60
ts/components/BetterAvatarBubble.tsx
Normal file
|
@ -0,0 +1,60 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { CSSProperties, MouseEvent, ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { AvatarColorType } from '../types/Colors';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
|
||||
export type PropsType = {
|
||||
children?: ReactNode;
|
||||
color?: AvatarColorType;
|
||||
i18n: LocalizerType;
|
||||
isSelected?: boolean;
|
||||
onDelete?: (ev: MouseEvent) => unknown;
|
||||
onSelect: () => unknown;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
export const BetterAvatarBubble = ({
|
||||
children,
|
||||
color,
|
||||
i18n,
|
||||
isSelected,
|
||||
onDelete,
|
||||
onSelect,
|
||||
style,
|
||||
}: PropsType): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
{
|
||||
BetterAvatarBubble: true,
|
||||
'BetterAvatarBubble--selected': isSelected,
|
||||
},
|
||||
color && `BetterAvatarBubble--${color}`
|
||||
)}
|
||||
onKeyDown={ev => {
|
||||
if (ev.key === 'Enter') {
|
||||
onSelect();
|
||||
}
|
||||
}}
|
||||
onClick={onSelect}
|
||||
role="button"
|
||||
style={style}
|
||||
tabIndex={0}
|
||||
>
|
||||
{onDelete && (
|
||||
<button
|
||||
aria-label={i18n('delete')}
|
||||
className="BetterAvatarBubble__delete"
|
||||
onClick={onDelete}
|
||||
tabIndex={-1}
|
||||
type="button"
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue