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

Modernize DeliveryIssueDialog, fix outline clipping in Modal

Browse source
This commit is contained in:
Scott Nonnenberg 2021-08-02 14:19:18 -07:00 • committed by GitHub
parent 21ffb7c054
commit bcb9d2d2f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 154 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ts/components/AvatarPopup.tsx
View file

@ -5,7 +5,7 @@ import * as React from 'react';
import classNames from 'classnames';
import { Avatar, Props as AvatarProps } from './Avatar';
import { useRestoreFocus } from '../util/hooks';
import { useRestoreFocus } from '../util/hooks/useRestoreFocus';
import { LocalizerType } from '../types/Util';

24
ts/components/Modal.stories.tsx
View file

@ -32,6 +32,18 @@ story.add('Bare bones, long', () => (
</Modal>
));
story.add('Bare bones, long, with button', () => (
<Modal i18n={i18n}>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<Modal.ButtonFooter>
<Button onClick={noop}>Okay</Button>
</Modal.ButtonFooter>
</Modal>
));
story.add('Title, X button, body, and button footer', () => (
<Modal i18n={i18n} title="Hello world" onClose={onClose} hasXButton>
{LOREM_IPSUM}
@ -69,6 +81,18 @@ story.add('Long body with title', () => (
</Modal>
));
story.add('Long body with title and button', () => (
<Modal i18n={i18n} title="Hello world" onClose={onClose}>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<p>{LOREM_IPSUM}</p>
<Modal.ButtonFooter>
<Button onClick={noop}>Okay</Button>
</Modal.ButtonFooter>
</Modal>
));
story.add('Long body with long title and X button', () => (
<Modal
i18n={i18n}

2
ts/components/ShortcutGuide.tsx
View file

@ -3,7 +3,7 @@
import * as React from 'react';
import classNames from 'classnames';
import { useRestoreFocus } from '../util/hooks';
import { useRestoreFocus } from '../util/hooks/useRestoreFocus';
import { LocalizerType } from '../types/Util';
export type Props = {

2
ts/components/conversation/ChatSessionRefreshedDialog.tsx
View file

@ -6,7 +6,7 @@ import classNames from 'classnames';
import { Modal } from '../Modal';
import { useRestoreFocus } from '../../util/hooks';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
import { LocalizerType } from '../../types/Util';

42
ts/components/conversation/DeliveryIssueDialog.tsx
View file

@ -3,12 +3,13 @@
import * as React from 'react';
import { Button, ButtonSize, ButtonVariant } from '../Button';
import { ConversationType } from '../../state/ducks/conversations';
import { Modal } from '../Modal';
import { Intl } from '../Intl';
import { Emojify } from './Emojify';
import { useRestoreFocus } from '../../util/hooks';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
import { LocalizerType } from '../../types/Util';
@ -32,7 +33,7 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
return (
<Modal hasXButton={false} onClose={onClose} i18n={i18n}>
<div className="module-delivery-issue-dialog">
<section>
<div className="module-delivery-issue-dialog__image">
<img
src="images/delivery-issue.svg"
@ -53,24 +54,25 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
i18n={i18n}
/>
</div>
<div className="module-delivery-issue-dialog__buttons">
<button
type="button"
onClick={learnMoreAboutDeliveryIssue}
className="module-delivery-issue-dialog__learn-more-button"
>
{i18n('DeliveryIssue--learnMore')}
</button>
<button
type="button"
onClick={onClose}
ref={focusRef}
className="module-delivery-issue-dialog__close-button"
>
{i18n('Confirmation--confirm')}
</button>
</div>
</div>
</section>
<Modal.ButtonFooter>
<Button
onClick={learnMoreAboutDeliveryIssue}
size={ButtonSize.Medium}
variant={ButtonVariant.Secondary}
>
{i18n('DeliveryIssue--learnMore')}
</Button>
<Button
onClick={onClose}
ref={focusRef}
size={ButtonSize.Medium}
variant={ButtonVariant.Primary}
className="module-delivery-issue-dialog__close-button"
>
{i18n('Confirmation--confirm')}
</Button>
</Modal.ButtonFooter>
</Modal>
);
}

2
ts/components/conversation/ReactionPicker.tsx
View file

@ -6,7 +6,7 @@ import classNames from 'classnames';
import { Emoji } from '../emoji/Emoji';
import { convertShortName } from '../emoji/lib';
import { Props as EmojiPickerProps } from '../emoji/EmojiPicker';
import { useRestoreFocus } from '../../util/hooks';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
import { LocalizerType } from '../../types/Util';
export type RenderEmojiPickerProps = Pick<Props, 'onClose' | 'style'> &

2
ts/components/conversation/ReactionViewer.tsx
View file

@ -7,7 +7,7 @@ import classNames from 'classnames';
import { ContactName } from './ContactName';
import { Avatar, Props as AvatarProps } from '../Avatar';
import { Emoji } from '../emoji/Emoji';
import { useRestoreFocus } from '../../util/hooks';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
import { ConversationType } from '../../state/ducks/conversations';
import { emojiToData, EmojiData } from '../emoji/lib';

2
ts/components/stickers/StickerPicker.tsx
View file

@ -3,7 +3,7 @@
import * as React from 'react';
import classNames from 'classnames';
import { useRestoreFocus } from '../../util/hooks';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
import { StickerPackType, StickerType } from '../../state/ducks/stickers';
import { LocalizerType } from '../../types/Util';

2
ts/components/stickers/StickerPreviewModal.tsx
View file

@ -10,7 +10,7 @@ import { ConfirmationDialog } from '../ConfirmationDialog';
import { LocalizerType } from '../../types/Util';
import { StickerPackType } from '../../state/ducks/stickers';
import { Spinner } from '../Spinner';
import { useRestoreFocus } from '../../util/hooks';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
export type OwnProps = {
readonly onClose: () => unknown;