bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move deactivated profile logic to css

Browse source
This commit is contained in:
Mary Kate 2020-08-25 13:47:02 -05:00
parent 22abaafd7a
commit d74a1908c7
4 changed files with 88 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
app/soapbox/features/account/components/header.js
View file

@ -226,7 +226,7 @@ class Header extends ImmutablePureComponent {
const deactivated = account.getIn(['pleroma', 'deactivated'], false);
return (
<div className={classNames('account__header', { inactive: !!account.get('moved') })}>
<div className={classNames('account__header', { inactive: !!account.get('moved'), deactivated: deactivated })}>
<div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}>
<div className='account__header__info'>
{info}
@ -239,48 +239,46 @@ class Header extends ImmutablePureComponent {
<div className='account__header__extra'>
<div className='account__header__avatar'>
{ !deactivated && <Avatar account={account} size={avatarSize} /> }
<Avatar account={account} size={avatarSize} />
</div>
{ !deactivated &&
<div className='account__header__extra__links'>
<div className='account__header__extra__links'>
<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><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
</NavLink>
<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><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
</NavLink>
<NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
<span>{shortNumberFormat(account.get('following_count'))}</span>
<span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
</NavLink>
<NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
<span>{shortNumberFormat(account.get('following_count'))}</span>
<span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
</NavLink>
<NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
<span>{shortNumberFormat(account.get('followers_count'))}</span>
<span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
</NavLink>
<NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
<span>{shortNumberFormat(account.get('followers_count'))}</span>
<span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
</NavLink>
{
account.get('id') === me &&
<div>
<NavLink
exact activeClassName='active' to={`/@${account.get('acct')}/favorites`}
>
{ /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
<span>•</span>
<span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span>
</NavLink>
<NavLink
exact activeClassName='active' to={`/@${account.get('acct')}/pins`}
>
{ /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
<span>•</span>
<span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span>
</NavLink>
</div>
}
</div>
}
{
account.get('id') === me &&
<div>
<NavLink
exact activeClassName='active' to={`/@${account.get('acct')}/favorites`}
>
{ /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
<span>•</span>
<span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span>
</NavLink>
<NavLink
exact activeClassName='active' to={`/@${account.get('acct')}/pins`}
>
{ /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
<span>•</span>
<span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span>
</NavLink>
</div>
}
</div>
{
isSmallScreen &&
@ -290,7 +288,7 @@ class Header extends ImmutablePureComponent {
}
{
me && !deactivated &&
me &&
<div className='account__header__extra__buttons'>
<ActionButton account={account} />
{account.get('id') !== me &&

42
app/soapbox/features/ui/components/profile_info_panel.js
View file

@ -73,35 +73,31 @@ class ProfileInfoPanel extends ImmutablePureComponent {
<span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
{verified && <VerificationBadge />}
{badge}
{ !deactivated && <small>@{acctFull(account)} {lockedIcon}</small> }
{ <small>@{acctFull(account)} {lockedIcon}</small> }
</h1>
</div>
{ !deactivated &&
<div className='profile-info-panel-content__badges'>
{isAdmin(account) && <Badge slug='admin' title='Admin' />}
{isModerator(account) && <Badge slug='moderator' title='Moderator' />}
{account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
{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'>
<div className='profile-info-panel-content__badges'>
{isAdmin(account) && <Badge slug='admin' title='Admin' />}
{isModerator(account) && <Badge slug='moderator' title='Moderator' />}
{account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
{account.get('acct').includes('@') || <div className='profile-info-panel-content__badges__join-date'>
<Icon id='calendar' />
<FormattedMessage
id='account.deactivated_description' defaultMessage='This account has been deactivated.'
id='account.member_since' defaultMessage='Member since {date}' values={{
date: memberSinceDate,
}}
/>
</div>
}
</div>}
</div>
{ !deactivated &&
<div className='profile-info-panel-content__deactivated'>
<FormattedMessage
id='account.deactivated_description' defaultMessage='This account has been deactivated.'
/>
</div>
{
(account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
<div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />
}

17
app/styles/components/account-header.scss
View file

@ -212,7 +212,22 @@
margin-top: 50px;
}
}
} // end .account__header
}
.account__header.deactivated {
.still-image img,
.still-image canvas {
display: none;
}
.account__header__extra__links,
.account__header__extra__buttons {
display: none;
}
}
// end .account__header
.account-timeline {
&__header {

21
app/styles/components/profile-info-panel.scss
View file

@ -126,14 +126,31 @@
}
}
}
&__deactivated {
display: none;
}
}
}
.profile-info-panel.deactivated {
.profile-info-panel-content__name h1 small,
.profile-info-panel-content__badges__join-date,
.profile-info-panel-content__bio,
.profile-info-panel-content__fields {
display: none;
}
.profile-info-panel__name-content {
text-transform: uppercase;
}
.profile-info-panel-content__deactivated {
color: var(--primary-text-color--faint);
display: block;
}
.profile-info-panel__name-content::before {
content: '[';
}
@ -141,8 +158,4 @@
.profile-info-panel__name-content::after {
content: ']';
}
.profile-info-panel-content__deactivated {
color: var(--primary-text-color--faint);
}
}