Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-14 08:19:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change design of modal loading and error screens in web UI

Browse Source 
Port 7f2cfcccab to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2024-11-29 08:50:08 +01:00
committed by Claire
parent 170f76c82c
commit 64fc79cbc2
7 changed files with 117 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
View File

@@ -27,7 +27,6 @@ import BundleContainer from '../containers/bundle_container';
import ActionsModal from './actions_modal';
import AudioModal from './audio_modal';
import { BoostModal } from './boost_modal';
import BundleModalError from './bundle_modal_error';
import {
ConfirmationModal,
ConfirmDeleteStatusModal,
@@ -44,7 +43,7 @@ import { FavouriteModal } from './favourite_modal';
import FocalPointModal from './focal_point_modal';
import ImageModal from './image_modal';
import MediaModal from './media_modal';
import ModalLoading from './modal_loading';
import { ModalPlaceholder } from './modal_placeholder';
import VideoModal from './video_modal';
export const MODAL_COMPONENTS = {
@@ -109,14 +108,16 @@ export default class ModalRoot extends PureComponent {
this.setState({ backgroundColor: color });
};
renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
renderLoading = () => {
const { onClose } = this.props;
return <ModalPlaceholder loading onClose={onClose} />;
};
renderError = (props) => {
const { onClose } = this.props;
return <BundleModalError {...props} onClose={onClose} />;
return <ModalPlaceholder {...props} onClose={onClose} />;
};
handleClose = (ignoreFocus = false) => {
@@ -141,7 +142,7 @@ export default class ModalRoot extends PureComponent {
<Base backgroundColor={backgroundColor} onClose={props && props.noClose ? this.noop : this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}>
{visible && (
<>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => {
const ref = typeof SpecificComponent !== 'function' ? this.setModalRef : undefined;
return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={ref} />;