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

Let users customize the preferred reaction palette

Browse source
This commit is contained in:
Evan Hahn 2021-09-09 11:29:01 -05:00 • committed by GitHub
parent 7a5385e00a
commit f28456c160
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1788 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

50
ts/components/emoji/EmojiPicker.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2019-2020 Signal Messenger, LLC
// Copyright 2019-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -34,6 +34,7 @@ export type OwnProps = {
readonly skinTone?: number;
readonly onSetSkinTone?: (tone: number) => unknown;
readonly recentEmojis?: Array<string>;
readonly onClickSettings?: () => unknown;
readonly onClose?: () => unknown;
};
@ -70,6 +71,7 @@ export const EmojiPicker = React.memo(
onSetSkinTone,
recentEmojis = [],
style,
onClickSettings,
onClose,
}: Props,
ref
@ -383,24 +385,38 @@ export const EmojiPicker = React.memo(
</div>
)}
<footer className="module-emoji-picker__footer">
{[0, 1, 2, 3, 4, 5].map(tone => (
{Boolean(onClickSettings) && (
<button
aria-label={i18n('CustomizingPreferredReactions__title')}
className="module-emoji-picker__button module-emoji-picker__button--footer module-emoji-picker__button--settings"
onClick={onClickSettings}
title={i18n('CustomizingPreferredReactions__title')}
type="button"
key={tone}
data-tone={tone}
onClick={handlePickTone}
title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
className={classNames(
'module-emoji-picker__button',
'module-emoji-picker__button--footer',
selectedTone === tone
? 'module-emoji-picker__button--selected'
: null
)}
>
<Emoji shortName="hand" skinTone={tone} size={20} />
</button>
))}
/>
)}
<div className="module-emoji-picker__footer__skin-tones">
{[0, 1, 2, 3, 4, 5].map(tone => (
<button
type="button"
key={tone}
data-tone={tone}
onClick={handlePickTone}
title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
className={classNames(
'module-emoji-picker__button',
'module-emoji-picker__button--footer',
selectedTone === tone
? 'module-emoji-picker__button--selected'
: null
)}
>
<Emoji shortName="hand" skinTone={tone} size={20} />
</button>
))}
</div>
{Boolean(onClickSettings) && (
<div className="module-emoji-picker__footer__settings-spacer" />
)}
</footer>
</div>
);