treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Split `EmptyAccount` out of `Account` component 

Partial port of b8a2430642 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-new
Emelia Smith 2023-05-11 07:55:10 +02:00 committed by Claire
parent 32ec0d2472
commit b8cbaba283
2 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/flavours/glitch/components/account.jsx
View File

@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import { counterRenderer } from 'flavours/glitch/components/common_counter'; import { counterRenderer } from 'flavours/glitch/components/common_counter';
import ShortNumber from 'flavours/glitch/components/short_number'; import ShortNumber from 'flavours/glitch/components/short_number';
import classNames from 'classnames'; import classNames from 'classnames';
import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
import { me } from '../initial_state'; import { me } from '../initial_state';
@ -81,20 +81,7 @@ class Account extends ImmutablePureComponent {
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
if (!account) { if (!account) {
return ( return <EmptyAccount size={size} minimal={minimal} />;
<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>
);
} }
if (hidden) { if (hidden) {

33
app/javascript/flavours/glitch/components/empty_account.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import classNames from 'classnames';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Skeleton } from 'flavours/glitch/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>
);
};