Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-27 05:38:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix reaction skin tone picker

Browse Source
This commit is contained in:
Jamie Kyle
2025-04-10 14:50:00 -07:00
committed by GitHub
parent 15f11b8387
commit 7a417ca017
8 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts/components/CallScreen.tsx
View File

@@ -373,7 +373,7 @@ export function CallScreen({
target => {
if (
target instanceof Element &&
target.closest('.FunPopover') != null
target.closest('[data-fun-overlay]') != null
) {
return true;
}

2
ts/components/CustomizingPreferredReactionsModal.tsx
View File

@@ -87,7 +87,7 @@ export function CustomizingPreferredReactionsModal({
target => {
if (
target instanceof Element &&
target.closest('.FunPopover') != null
target.closest('[data-fun-overlay]') != null
) {
return true;
}

2
ts/components/ModalHost.tsx
View File

@@ -71,7 +71,7 @@ export const ModalHost = React.memo(function ModalHostInner({
if (
modalContainer === document.body &&
node instanceof Element &&
node.closest('.module-calling__modal-container, .FunPopover')
node.closest('.module-calling__modal-container, [data-fun-overlay]')
) {
return false;
}

2
ts/components/conversation/TimelineMessage.tsx
View File

@@ -194,7 +194,7 @@ export function TimelineMessage(props: Props): JSX.Element {
target => {
if (
target instanceof Element &&
target.closest('.FunPopover') != null
target.closest('[data-fun-overlay]') != null
) {
return true;
}

4
ts/components/fun/FunSkinTones.tsx
View File

@@ -37,9 +37,9 @@ export function FunSkinTonesList(props: FunSkinTonesListProps): JSX.Element {
aria-label={i18n('icu:FunSkinTones__List')}
className="FunSkinTones__ListBox"
orientation="horizontal"
selectedKeys={props.skinTone != null ? [props.skinTone] : []}
selectedKeys={props.skinTone != null ? [props.skinTone] : undefined}
selectionMode="single"
disallowEmptySelection
disallowEmptySelection={false}
onSelectionChange={handleSelectionChange}
>
<FunSkinTonesListItem

1
ts/components/fun/base/FunGrid.tsx
View File

@@ -161,6 +161,7 @@ export function FunGridHeaderPopover(
): JSX.Element {
return (
<Popover
data-fun-overlay
className="FunGrid__HeaderPopover"
placement="bottom end"
offset={6}

1
ts/components/fun/base/FunPopover.tsx
View File

@@ -16,6 +16,7 @@ export type FunPopoverProps = Readonly<{
export function FunPopover(props: FunPopoverProps): JSX.Element {
return (
<Popover
data-fun-overlay
className={classNames('FunPopover', {
'light-theme': props.theme === ThemeType.light,
'dark-theme': props.theme === ThemeType.dark,

14
ts/components/fun/panels/FunPanelEmojis.tsx
View File

@@ -432,7 +432,6 @@ export function FunPanelEmojis({
i18n={i18n}
open={skinTonePopoverOpen}
onOpenChange={handleSkinTonePopoverOpenChange}
skinTone={fun.emojiSkinToneDefault}
onSelectSkinTone={fun.onEmojiSkinToneDefaultChange}
/>
)}
@@ -597,9 +596,13 @@ const Cell = memo(function Cell(props: CellProps): JSX.Element {
const handleSelectSkinTone = useCallback(
(skinToneSelection: EmojiSkinTone) => {
const variant = getEmojiVariantByParentKeyAndSkinTone(
emojiParent.key,
skinToneSelection
);
onEmojiSkinToneDefaultChange(skinToneSelection);
onSelectEmoji({
variantKey: emojiVariant.key,
variantKey: variant.key,
parentKey: emojiParent.key,
englishShortName: emojiParent.englishShortNameDefault,
skinTone: skinToneSelection,
@@ -607,7 +610,6 @@ const Cell = memo(function Cell(props: CellProps): JSX.Element {
},
[
onEmojiSkinToneDefaultChange,
emojiVariant.key,
emojiParent.key,
emojiParent.englishShortNameDefault,
onSelectEmoji,
@@ -637,6 +639,7 @@ const Cell = memo(function Cell(props: CellProps): JSX.Element {
</FunItemButton>
{emojiHasSkinToneVariants && (
<Popover
data-fun-overlay
isOpen={popoverOpen}
onOpenChange={handlePopoverOpenChange}
triggerRef={popoverTriggerRef}
@@ -661,7 +664,7 @@ const Cell = memo(function Cell(props: CellProps): JSX.Element {
<FunSkinTonesList
i18n={i18n}
emoji={emojiParent.key}
skinTone={skinTone}
skinTone={null}
onSelectSkinTone={handleSelectSkinTone}
/>
</Dialog>
@@ -675,7 +678,6 @@ type SectionSkinToneHeaderPopoverProps = Readonly<{
i18n: LocalizerType;
open: boolean;
onOpenChange: (open: boolean) => void;
skinTone: EmojiSkinTone | null;
onSelectSkinTone: (emojiSkinTone: EmojiSkinTone) => void;
}>;
@@ -706,7 +708,7 @@ function SectionSkinToneHeaderPopover(
<FunSkinTonesList
i18n={i18n}
emoji={emojiParentKeyConstant('\u{270B}')}
skinTone={props.skinTone}
skinTone={null}
onSelectSkinTone={handleSelectSkinTone}
/>
</FunGridHeaderPopover>