moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove info from deactivated account pages

This commit is contained in:
Mary Kate 2020-08-12 13:02:20 -05:00
parent 34bf11f512
commit 9b85b4ad7f
5 changed files with 92 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/soapbox/features/account/components/header.js
View File

@ -221,12 +221,12 @@ class Header extends ImmutablePureComponent {
const menu = this.makeMenu(); const menu = this.makeMenu();
const headerMissing = (account.get('header').indexOf('/headers/original/missing.png') > -1); const headerMissing = (account.get('header').indexOf('/headers/original/missing.png') > -1);
const avatarSize = isSmallScreen ? 90 : 200; const avatarSize = isSmallScreen ? 90 : 200;
const deactivated = account.getIn(['pleroma', 'deactivated'], false);
return ( return (
<div className={classNames('account__header', { inactive: !!account.get('moved') })}> <div className={classNames('account__header', { inactive: !!account.get('moved') })}>
<div className={classNames('account__header__image', { 'account__header__image--none': headerMissing })}> <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}>
<div className='account__header__info'> <div className='account__header__info'>
{info} {info}
</div> </div>
@ -238,56 +238,58 @@ class Header extends ImmutablePureComponent {
<div className='account__header__extra'> <div className='account__header__extra'>
<div className='account__header__avatar'> <div className='account__header__avatar'>
<Avatar account={account} size={avatarSize} /> { !deactivated && <Avatar account={account} size={avatarSize} /> }
</div> </div>
<div className='account__header__extra__links'> { !deactivated &&
<div className='account__header__extra__links'>
<NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}> <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
<span>{shortNumberFormat(account.get('statuses_count'))}</span> <span>{shortNumberFormat(account.get('statuses_count'))}</span>
<span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span> <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
</NavLink> </NavLink>
<NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}> <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
<span>{shortNumberFormat(account.get('following_count'))}</span> <span>{shortNumberFormat(account.get('following_count'))}</span>
<span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span> <span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
</NavLink> </NavLink>
<NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}> <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
<span>{shortNumberFormat(account.get('followers_count'))}</span> <span>{shortNumberFormat(account.get('followers_count'))}</span>
<span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span> <span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
</NavLink> </NavLink>
{ {
account.get('id') === me && account.get('id') === me &&
<div> <div>
<NavLink <NavLink
exact activeClassName='active' to={`/@${account.get('acct')}/favorites`} exact activeClassName='active' to={`/@${account.get('acct')}/favorites`}
> >
{ /* : TODO : shortNumberFormat(account.get('favourite_count')) */ } { /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
<span>•</span> <span>•</span>
<span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span> <span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span>
</NavLink> </NavLink>
<NavLink <NavLink
exact activeClassName='active' to={`/@${account.get('acct')}/pins`} exact activeClassName='active' to={`/@${account.get('acct')}/pins`}
> >
{ /* : TODO : shortNumberFormat(account.get('pinned_count')) */ } { /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
<span>•</span> <span>•</span>
<span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span> <span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span>
</NavLink> </NavLink>
</div> </div>
} }
</div> </div>
}
{ {
isSmallScreen && isSmallScreen &&
<div className='account-mobile-container'> <div className={classNames('account-mobile-container', { 'deactivated': deactivated })}>
<ProfileInfoPanel username={username} account={account} /> <ProfileInfoPanel username={username} account={account} />
</div> </div>
} }
{ {
me && me && !deactivated &&
<div className='account__header__extra__buttons'> <div className='account__header__extra__buttons'>
<ActionButton account={account} /> <ActionButton account={account} />
{account.get('id') !== me && {account.get('id') !== me &&

45
app/soapbox/features/ui/components/profile_info_panel.js
View File

@ -11,10 +11,12 @@ import VerificationBadge from 'soapbox/components/verification_badge';
import Badge from 'soapbox/components/badge'; import Badge from 'soapbox/components/badge';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import { acctFull, isAdmin, isModerator } from 'soapbox/utils/accounts'; import { acctFull, isAdmin, isModerator } from 'soapbox/utils/accounts';
import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' }, linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' }, account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
}); });
const dateFormatOptions = { const dateFormatOptions = {
@ -57,36 +59,47 @@ class ProfileInfoPanel extends ImmutablePureComponent {
const badge = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null; const badge = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
const content = { __html: account.get('note_emojified') }; const content = { __html: account.get('note_emojified') };
const fields = account.get('fields'); const fields = account.get('fields');
const displayNameHtml = { __html: account.get('display_name_html') }; const deactivated = account.getIn(['pleroma', 'deactivated'], false);
const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' }); const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
const verified = account.get('pleroma').get('tags').includes('verified'); const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
return ( return (
<div className='profile-info-panel'> <div className={classNames('profile-info-panel', { 'deactivated': deactivated })} >
<div className='profile-info-panel__content'> <div className='profile-info-panel__content'>
<div className='profile-info-panel-content__name'> <div className='profile-info-panel-content__name'>
<h1> <h1>
<span dangerouslySetInnerHTML={displayNameHtml} /> <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
{verified && <VerificationBadge />} {verified && <VerificationBadge />}
{badge} {badge}
<small>@{acctFull(account)} {lockedIcon}</small> { !deactivated && <small>@{acctFull(account)} {lockedIcon}</small> }
</h1> </h1>
</div> </div>
<div className='profile-info-panel-content__badges'> { !deactivated &&
{isAdmin(account) && <Badge slug='admin' title='Admin' />} <div className='profile-info-panel-content__badges'>
{isModerator(account) && <Badge slug='moderator' title='Moderator' />} {isAdmin(account) && <Badge slug='admin' title='Admin' />}
{account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />} {isModerator(account) && <Badge slug='moderator' title='Moderator' />}
{account.get('acct').includes('@') || <div className='profile-info-panel-content__badges__join-date'> {account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
<Icon id='calendar' /> {account.get('acct').includes('@') || <div className='profile-info-panel-content__badges__join-date'>
<Icon id='calendar' />
<FormattedMessage
id='account.member_since' defaultMessage='Member since {date}' values={{
date: memberSinceDate,
}}
/>
</div>}
</div>
}
{ deactivated &&
<div className='profile-info-panel-content__deactivated'>
<FormattedMessage <FormattedMessage
id='account.member_since' defaultMessage='Member since {date}' values={{ id='account.deactivated_description' defaultMessage='This account has been deactivated.'
date: memberSinceDate,
}}
/> />
</div>} </div>
</div> }
{ {
(account.get('note').length > 0 && account.get('note') !== '<p></p>') && (account.get('note').length > 0 && account.get('note') !== '<p></p>') &&

4
app/styles/components/account-header.scss
View File

@ -207,6 +207,10 @@
padding: 10px 10px 0; padding: 10px 10px 0;
&--nonuser {padding: 10px 10px 15px;} &--nonuser {padding: 10px 10px 15px;}
} }
.account-mobile-container.deactivated {
margin-top: 50px;
}
} }
} // end .account__header } // end .account__header

1
app/styles/components/columns.scss
View File

@ -678,6 +678,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 160px; min-height: 160px;
border-radius: 0 0 10px 10px;
@supports(display: grid) { // hack to fix Chrome <57 @supports(display: grid) { // hack to fix Chrome <57
contain: strict; contain: strict;

18
app/styles/components/profile-info-panel.scss
View File

@ -128,3 +128,21 @@
} }
} }
} }
.profile-info-panel.deactivated {
.profile-info-panel__name-content {
text-transform: uppercase;
}
.profile-info-panel__name-content::before {
content: '[';
}
.profile-info-panel__name-content::after {
content: ']';
}
.profile-info-panel-content__deactivated {
color: var(--primary-text-color--faint);
}
}