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

Fix layout of "this person is in your contacts" tooltip

Browse source
This commit is contained in:
Evan Hahn 2021-01-11 15:43:21 -06:00 • committed by GitHub
parent dc918aea1d
commit 0a35489696
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

20
ts/components/InContactsIcon.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
@ -17,16 +17,14 @@ export const InContactsIcon = (props: PropsType): JSX.Element => {
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
return (
<span className="module-in-contacts-icon__tooltip">
<Tooltip content={i18n('contactInAddressBook')}>
<span
aria-label={i18n('contactInAddressBook')}
className={classNames('module-in-contacts-icon__icon', className)}
role="img"
tabIndex={0}
/>
</Tooltip>
</span>
<Tooltip content={i18n('contactInAddressBook')}>
<span
aria-label={i18n('contactInAddressBook')}
className={classNames('module-in-contacts-icon__icon', className)}
role="img"
tabIndex={0}
/>
</Tooltip>
);
/* eslint-enable jsx-a11y/no-noninteractive-tabindex */
};

31
ts/components/Tooltip.tsx
View file

@ -1,7 +1,8 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import classNames from 'classnames';
import { noop } from 'lodash';
import { Manager, Reference, Popper } from 'react-popper';
import { Theme, themeClassName } from '../util/theme';
@ -97,7 +98,9 @@ export const Tooltip: React.FC<PropsType> = ({
const showTooltip = isHovering || Boolean(sticky);
const tooltipTheme = theme ? themeClassName(theme) : undefined;
const tooltipThemeClassName = theme
? `module-tooltip--${themeClassName(theme)}`
: undefined;
return (
<Manager>
@ -111,20 +114,18 @@ export const Tooltip: React.FC<PropsType> = ({
<Popper placement={direction}>
{({ arrowProps, placement, ref, style }) =>
showTooltip && (
<div className={tooltipTheme}>
<div
className={classNames('module-tooltip', tooltipThemeClassName)}
ref={ref}
style={style}
data-placement={placement}
>
{content}
<div
className="module-tooltip"
ref={ref}
style={style}
data-placement={placement}
>
{content}
<div
className="module-tooltip-arrow"
ref={arrowProps.ref}
style={arrowProps.style}
/>
</div>
className="module-tooltip-arrow"
ref={arrowProps.ref}
style={arrowProps.style}
/>
</div>
)
}