diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index f110bce7a..08dfb4793 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 ( -
-
-
-
- -
- - -
-
-
-
- ); + return ; } if (hidden) { diff --git a/app/javascript/mastodon/components/display_name.tsx b/app/javascript/mastodon/components/display_name.tsx index d3308ff21..ce435066d 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; - localDomain: string; + account?: Account; + others?: List; + localDomain?: string; } + export class DisplayName extends React.PureComponent { handleMouseEnter: React.ReactEventHandler = ({ currentTarget, @@ -48,7 +49,15 @@ export class DisplayName extends React.PureComponent { 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 { 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 000000000..3adb5b20f --- /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 = ({ + size = 46, + minimal = false, +}) => { + return ( +
+
+
+
+ +
+ +
+ + +
+
+
+
+ ); +}; diff --git a/app/javascript/mastodon/features/onboarding/follows.jsx b/app/javascript/mastodon/features/onboarding/follows.jsx index 7cccdefb3..c96c69055 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 ( - +
@@ -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 388734055..8b373a014 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 ; + return ; case 'share': - return ; + return ; } return ( diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx index 5f7cfb8a6..82fdada41 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 ( - +