tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change public accounts pages to mount the web UI

Browse Source 
Port 839f893168 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2022-10-20 14:35:29 +02:00
committed by Claire
parent 6013eeea4c
commit 9363e5c24e
47 changed files with 164 additions and 1104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js
View File

@ -2,10 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import Column from './column';
import ColumnHeader from './column_header';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header';
import IconButton from 'flavours/glitch/components/icon_button';
import { Helmet } from 'react-helmet';
const messages = defineMessages({
title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
@ -18,6 +18,7 @@ class BundleColumnError extends React.Component {
static propTypes = {
onRetry: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
multiColumn: PropTypes.bool,
}
handleRetry = () => {
@ -25,16 +26,25 @@ class BundleColumnError extends React.Component {
}
render () {
const { intl: { formatMessage } } = this.props;
const { multiColumn, intl: { formatMessage } } = this.props;
return (
<Column>
<ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
<ColumnBackButtonSlim />
<Column bindToDocument={!multiColumn} label={formatMessage(messages.title)}>
<ColumnHeader
icon='exclamation-circle'
title={formatMessage(messages.title)}
showBackButton
multiColumn={multiColumn}
/>
<div className='error-column'>
<IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
{formatMessage(messages.body)}
</div>
<Helmet>
<meta name='robots' content='noindex' />
</Helmet>
</Column>
);
}

6
app/javascript/flavours/glitch/features/ui/components/column_loading.js
View File

@ -10,6 +10,7 @@ export default class ColumnLoading extends ImmutablePureComponent {
static propTypes = {
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
icon: PropTypes.string,
multiColumn: PropTypes.bool,
};
static defaultProps = {
@ -18,10 +19,11 @@ export default class ColumnLoading extends ImmutablePureComponent {
};
render() {
let { title, icon } = this.props;
let { title, icon, multiColumn } = this.props;
return (
<Column>
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} placeholder />
<ColumnHeader icon={icon} title={title} multiColumn={multiColumn} focusable={false} placeholder />
<div className='scrollable' />
</Column>
);

4
app/javascript/flavours/glitch/features/ui/components/columns_area.js
View File

@ -140,11 +140,11 @@ class ColumnsArea extends ImmutablePureComponent {
}
renderLoading = columnId => () => {
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading multiColumn />;
}
renderError = (props) => {
return <BundleColumnError {...props} />;
return <BundleColumnError multiColumn {...props} />;
}
render () {

21
app/javascript/flavours/glitch/features/ui/components/modal_root.js
View File

@ -13,10 +13,8 @@ import FavouriteModal from './favourite_modal';
import AudioModal from './audio_modal';
import DoodleModal from './doodle_modal';
import ConfirmationModal from './confirmation_modal';
import SubscribedLanguagesModal from 'flavours/glitch/features/subscribed_languages_modal';
import FocalPointModal from './focal_point_modal';
import DeprecatedSettingsModal from './deprecated_settings_modal';
import InteractionModal from 'flavours/glitch/features/interaction_modal';
import {
OnboardingModal,
MuteModal,
@ -29,7 +27,10 @@ import {
PinnedAccountsEditor,
CompareHistoryModal,
FilterModal,
InteractionModal,
SubscribedLanguagesModal,
} from 'flavours/glitch/features/ui/util/async-components';
import { Helmet } from 'react-helmet';
const MODAL_COMPONENTS = {
'MEDIA': () => Promise.resolve({ default: MediaModal }),
@ -53,8 +54,8 @@ const MODAL_COMPONENTS = {
'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor,
'COMPARE_HISTORY': CompareHistoryModal,
'FILTER': FilterModal,
'SUBSCRIBED_LANGUAGES': () => Promise.resolve({ default: SubscribedLanguagesModal }),
'INTERACTION': () => Promise.resolve({ default: InteractionModal }),
'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal,
'INTERACTION': InteractionModal,
};
export default class ModalRoot extends React.PureComponent {
@ -119,9 +120,15 @@ export default class ModalRoot extends React.PureComponent {
return (
<Base backgroundColor={backgroundColor} onClose={this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}>
{visible && (
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
</BundleContainer>
<>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
</BundleContainer>
<Helmet>
<meta name='robots' content='noindex' />
</Helmet>
</>
)}
</Base>
);

4
app/javascript/flavours/glitch/features/ui/index.js
View File

@ -210,8 +210,8 @@ class SwitchingColumnsArea extends React.PureComponent {
<WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
<WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
<WrappedRoute path={['/@:acct/followers', '/accounts/:id/followers']} component={Followers} content={children} />
<WrappedRoute path={['/@:acct/following', '/accounts/:id/following']} component={Following} content={children} />
<WrappedRoute path={['/accounts/:id/followers', '/users/:acct/followers', '/@:acct/followers']} component={Followers} content={children} />
<WrappedRoute path={['/accounts/:id/following', '/users/:acct/following', '/@:acct/following']} component={Following} content={children} />
<WrappedRoute path={['/@:acct/media', '/accounts/:id/media']} component={AccountGallery} content={children} />
<WrappedRoute path='/@:acct/:statusId' exact component={Status} content={children} />
<WrappedRoute path='/@:acct/:statusId/reblogs' component={Reblogs} content={children} />

8
app/javascript/flavours/glitch/features/ui/util/async-components.js
View File

@ -182,6 +182,14 @@ export function Explore () {
return import(/* webpackChunkName: "flavours/glitch/async/explore" */'flavours/glitch/features/explore');
}
export function InteractionModal () {
return import(/*webpackChunkName: "flavours/glitch/async/modals/interaction_modal" */'flavours/glitch/features/interaction_modal');
}
export function SubscribedLanguagesModal () {
return import(/*webpackChunkName: "flavours/glitch/async/modals/subscribed_languages_modal" */'flavours/glitch/features/subscribed_languages_modal');
}
export function About () {
return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about');
}

4
app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js
View File

@ -53,7 +53,9 @@ export class WrappedRoute extends React.Component {
}
renderLoading = () => {
return <ColumnLoading />;
const { multiColumn } = this.props;
return <ColumnLoading multiColumn={multiColumn} />;
}
renderError = (props) => {