mirror of https://github.com/mastodon/mastodon
Change design of modal loading and error screens in web UI (#33092)
Eugen Rochko
3 months ago
committed by
GitHub
parent
eef8d2c855
commit
7f2cfcccab
@ -0,0 +1,22 @@
|
||||
import { useHovering } from '@/hooks/useHovering';
|
||||
import { autoPlayGif } from 'mastodon/initial_state';
|
||||
|
||||
export const GIF: React.FC<{
|
||||
src: string;
|
||||
staticSrc: string;
|
||||
className: string;
|
||||
animate?: boolean;
|
||||
}> = ({ src, staticSrc, className, animate = autoPlayGif }) => {
|
||||
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
|
||||
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
src={hovering || animate ? src : staticSrc}
|
||||
alt=''
|
||||
role='presentation'
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,56 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
|
||||
|
||||
import { IconButton } from '../../../components/icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
|
||||
retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
|
||||
close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
class BundleModalError extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onRetry: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
handleRetry = () => {
|
||||
this.props.onRetry();
|
||||
};
|
||||
|
||||
render () {
|
||||
const { onClose, intl: { formatMessage } } = this.props;
|
||||
|
||||
// Keep the markup in sync with <ModalLoading />
|
||||
// (make sure they have the same dimensions)
|
||||
return (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
<IconButton title={formatMessage(messages.retry)} icon='refresh' iconComponent={RefreshIcon} onClick={this.handleRetry} size={64} />
|
||||
{formatMessage(messages.error)}
|
||||
</div>
|
||||
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className='error-modal__nav onboarding-modal__skip'
|
||||
>
|
||||
{formatMessage(messages.close)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(BundleModalError);
|
||||
@ -1,18 +0,0 @@
|
||||
import { LoadingIndicator } from '../../../components/loading_indicator';
|
||||
|
||||
// Keep the markup in sync with <BundleModalError />
|
||||
// (make sure they have the same dimensions)
|
||||
const ModalLoading = () => (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
<LoadingIndicator />
|
||||
</div>
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button className='error-modal__nav onboarding-modal__skip' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default ModalLoading;
|
||||
@ -0,0 +1,61 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Button } from 'mastodon/components/button';
|
||||
import { GIF } from 'mastodon/components/gif';
|
||||
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
||||
|
||||
export const ModalPlaceholder: React.FC<{
|
||||
loading: boolean;
|
||||
onClose: (arg0: string | undefined, arg1: boolean) => void;
|
||||
onRetry?: () => void;
|
||||
}> = ({ loading, onClose, onRetry }) => {
|
||||
const handleClose = useCallback(() => {
|
||||
onClose(undefined, false);
|
||||
}, [onClose]);
|
||||
|
||||
const handleRetry = useCallback(() => {
|
||||
if (onRetry) onRetry();
|
||||
}, [onRetry]);
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal modal-placeholder' aria-busy={loading}>
|
||||
{loading ? (
|
||||
<LoadingIndicator />
|
||||
) : (
|
||||
<div className='modal-placeholder__error'>
|
||||
<GIF
|
||||
src='/oops.gif'
|
||||
staticSrc='/oops.png'
|
||||
className='modal-placeholder__error__image'
|
||||
/>
|
||||
|
||||
<div className='modal-placeholder__error__message'>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='bundle_modal_error.message'
|
||||
defaultMessage='Something went wrong while loading this screen.'
|
||||
/>
|
||||
</p>
|
||||
|
||||
<div className='modal-placeholder__error__message__actions'>
|
||||
<Button onClick={handleRetry}>
|
||||
<FormattedMessage
|
||||
id='bundle_modal_error.retry'
|
||||
defaultMessage='Try again'
|
||||
/>
|
||||
</Button>
|
||||
<Button onClick={handleClose} className='button button-tertiary'>
|
||||
<FormattedMessage
|
||||
id='bundle_modal_error.close'
|
||||
defaultMessage='Close'
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue