diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx
index f110bce7a83b77078219b55a4f288481fdd7f1f5..08dfb4793d8a45c2a2097345672ce455015b5cab 100644
--- a/app/javascript/mastodon/components/account.jsx
+++ b/app/javascript/mastodon/components/account.jsx
@@ -8,12 +8,12 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from '../initial_state';
import { RelativeTimestamp } from './relative_timestamp';
-import Skeleton from 'mastodon/components/skeleton';
import { Link } from 'react-router-dom';
import { counterRenderer } from 'mastodon/components/common_counter';
import ShortNumber from 'mastodon/components/short_number';
import classNames from 'classnames';
import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { EmptyAccount } from 'mastodon/components/empty_account';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -77,20 +77,7 @@ class Account extends ImmutablePureComponent {
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
if (!account) {
- return (
- <div className={classNames('account', { 'account--minimal': minimal })}>
- <div className='account__wrapper'>
- <div className='account__display-name'>
- <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
-
- <div>
- <DisplayName />
- <Skeleton width='7ch' />
- </div>
- </div>
- </div>
- </div>
- );
+ return <EmptyAccount size={size} minimal={minimal} />;
}
if (hidden) {
diff --git a/app/javascript/mastodon/components/display_name.tsx b/app/javascript/mastodon/components/display_name.tsx
index d3308ff216ab1a63f39c07f748943b8ae863248b..ce435066d663acfa02208f395f807296ab2a1be5 100644
--- a/app/javascript/mastodon/components/display_name.tsx
+++ b/app/javascript/mastodon/components/display_name.tsx
@@ -8,10 +8,11 @@ import { autoPlayGif } from '../initial_state';
import Skeleton from './skeleton';
interface Props {
- account: Account;
- others: List<Account>;
- localDomain: string;
+ account?: Account;
+ others?: List<Account>;
+ localDomain?: string;
}
+
export class DisplayName extends React.PureComponent<Props> {
handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
currentTarget,
@@ -48,7 +49,15 @@ export class DisplayName extends React.PureComponent<Props> {
render() {
const { others, localDomain } = this.props;
- let displayName: React.ReactNode, suffix: React.ReactNode, account: Account;
+ let displayName: React.ReactNode,
+ suffix: React.ReactNode,
+ account: Account | undefined;
+
+ if (others && others.size > 0) {
+ account = others.first();
+ } else if (this.props.account) {
+ account = this.props.account;
+ }
if (others && others.size > 1) {
displayName = others
@@ -66,13 +75,7 @@ export class DisplayName extends React.PureComponent<Props> {
if (others.size - 2 > 0) {
suffix = `+${others.size - 2}`;
}
- } else if ((others && others.size > 0) || this.props.account) {
- if (others && others.size > 0) {
- account = others.first();
- } else {
- account = this.props.account;
- }
-
+ } else if (account) {
let acct = account.get('acct');
if (acct.indexOf('@') === -1 && localDomain) {
diff --git a/app/javascript/mastodon/components/empty_account.tsx b/app/javascript/mastodon/components/empty_account.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3adb5b20f8ecb580003c3fb3ab809506f04a32e7
--- /dev/null
+++ b/app/javascript/mastodon/components/empty_account.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'mastodon/components/display_name';
+import Skeleton from 'mastodon/components/skeleton';
+
+interface Props {
+ size?: number;
+ minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+ size = 46,
+ minimal = false,
+}) => {
+ return (
+ <div className={classNames('account', { 'account--minimal': minimal })}>
+ <div className='account__wrapper'>
+ <div className='account__display-name'>
+ <div className='account__avatar-wrapper'>
+ <Skeleton width={size} height={size} />
+ </div>
+
+ <div>
+ <DisplayName />
+ <Skeleton width='7ch' />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
diff --git a/app/javascript/mastodon/features/onboarding/follows.jsx b/app/javascript/mastodon/features/onboarding/follows.jsx
index 7cccdefb3d5078863e22f4b1872a82d178bbb625..c96c69055b1a03281e24dd576fe430bcfc92638f 100644
--- a/app/javascript/mastodon/features/onboarding/follows.jsx
+++ b/app/javascript/mastodon/features/onboarding/follows.jsx
@@ -7,7 +7,7 @@ import { fetchSuggestions } from 'mastodon/actions/suggestions';
import { markAsPartial } from 'mastodon/actions/timelines';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Account from 'mastodon/containers/account_container';
-import EmptyAccount from 'mastodon/components/account';
+import { EmptyAccount } from 'mastodon/components/empty_account';
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
import { makeGetAccount } from 'mastodon/selectors';
import { me } from 'mastodon/initial_state';
@@ -31,6 +31,7 @@ class Follows extends React.PureComponent {
suggestions: ImmutablePropTypes.list,
account: ImmutablePropTypes.map,
isLoading: PropTypes.bool,
+ multiColumn: PropTypes.bool,
};
componentDidMount () {
@@ -44,7 +45,7 @@ class Follows extends React.PureComponent {
}
render () {
- const { onBack, isLoading, suggestions, account } = this.props;
+ const { onBack, isLoading, suggestions, account, multiColumn } = this.props;
let loadedContent;
@@ -58,7 +59,7 @@ class Follows extends React.PureComponent {
return (
<Column>
- <ColumnBackButton onClick={onBack} />
+ <ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
<div className='scrollable privacy-policy'>
<div className='column-title'>
@@ -84,4 +85,4 @@ class Follows extends React.PureComponent {
}
-export default connect(mapStateToProps)(Follows);
\ No newline at end of file
+export default connect(mapStateToProps)(Follows);
diff --git a/app/javascript/mastodon/features/onboarding/index.jsx b/app/javascript/mastodon/features/onboarding/index.jsx
index 388734055ee2b028aef7679f54058c148627e337..8b373a014ca0c6bd1fa79d7328517d3682881b7e 100644
--- a/app/javascript/mastodon/features/onboarding/index.jsx
+++ b/app/javascript/mastodon/features/onboarding/index.jsx
@@ -40,6 +40,7 @@ class Onboarding extends ImmutablePureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
account: ImmutablePropTypes.map,
+ multiColumn: PropTypes.bool,
};
state = {
@@ -93,14 +94,14 @@ class Onboarding extends ImmutablePureComponent {
}
render () {
- const { account } = this.props;
+ const { account, multiColumn } = this.props;
const { step, shareClicked } = this.state;
switch(step) {
case 'follows':
- return <Follows onBack={this.handleBackClick} />;
+ return <Follows onBack={this.handleBackClick} multiColumn={multiColumn} />;
case 'share':
- return <Share onBack={this.handleBackClick} />;
+ return <Share onBack={this.handleBackClick} multiColumn={multiColumn} />;
}
return (
diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx
index 5f7cfb8a6b9d097e0c692ed5e419b53238ce4772..82fdada413bd1008191e012e417cc4b23a65c314 100644
--- a/app/javascript/mastodon/features/onboarding/share.jsx
+++ b/app/javascript/mastodon/features/onboarding/share.jsx
@@ -140,17 +140,18 @@ class Share extends React.PureComponent {
static propTypes = {
onBack: PropTypes.func,
account: ImmutablePropTypes.map,
+ multiColumn: PropTypes.bool,
intl: PropTypes.object,
};
render () {
- const { onBack, account, intl } = this.props;
+ const { onBack, account, multiColumn, intl } = this.props;
const url = (new URL(`/@${account.get('username')}`, document.baseURI)).href;
return (
<Column>
- <ColumnBackButton onClick={onBack} />
+ <ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
<div className='scrollable privacy-policy'>
<div className='column-title'>