mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

move deactivated profile logic to css

manage-followers-section
Mary Kate 2020-08-25 13:47:02 -05:00
rodzic 22abaafd7a
commit d74a1908c7
4 zmienionych plików z 88 dodań i 66 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

74
app/soapbox/features/account/components/header.js
Wyświetl plik

@ -226,7 +226,7 @@ class Header extends ImmutablePureComponent {
const deactivated = account.getIn(['pleroma', 'deactivated'], false); 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'), deactivated: deactivated })}>
<div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}> <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}>
<div className='account__header__info'> <div className='account__header__info'>
{info} {info}
@ -239,48 +239,46 @@ class Header extends ImmutablePureComponent {
<div className='account__header__extra'> <div className='account__header__extra'>
<div className='account__header__avatar'> <div className='account__header__avatar'>
{ !deactivated && <Avatar account={account} size={avatarSize} /> } <Avatar account={account} size={avatarSize} />
</div> </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'))}> <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 &&
@ -290,7 +288,7 @@ class Header extends ImmutablePureComponent {
} }
{ {
me && !deactivated && me &&
<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 &&

42
app/soapbox/features/ui/components/profile_info_panel.js
Wyświetl plik

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

17
app/styles/components/account-header.scss
Wyświetl plik

@ -212,7 +212,22 @@
margin-top: 50px; 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 { .account-timeline {
&__header { &__header {

21
app/styles/components/profile-info-panel.scss
Wyświetl plik

@ -126,14 +126,31 @@
} }
} }
} }
&__deactivated {
display: none;
}
} }
} }
.profile-info-panel.deactivated { .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 { .profile-info-panel__name-content {
text-transform: uppercase; text-transform: uppercase;
} }
.profile-info-panel-content__deactivated {
color: var(--primary-text-color--faint);
display: block;
}
.profile-info-panel__name-content::before { .profile-info-panel__name-content::before {
content: '['; content: '[';
} }
@ -141,8 +158,4 @@
.profile-info-panel__name-content::after { .profile-info-panel__name-content::after {
content: ']'; content: ']';
} }
.profile-info-panel-content__deactivated {
color: var(--primary-text-color--faint);
}
} }