Merge pull request #379 from ThibG/glitch-soc/features/improved-account-header
Port #6627 and #6636 to glitch-soc flavour
This commit is contained in:
commit
701c1f410d
3 changed files with 36 additions and 0 deletions
|
@ -15,6 +15,7 @@ const messages = defineMessages({
|
||||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
|
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
|
||||||
|
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
|
||||||
});
|
});
|
||||||
|
|
||||||
@injectIntl
|
@injectIntl
|
||||||
|
@ -23,6 +24,7 @@ export default class Header extends ImmutablePureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
account: ImmutablePropTypes.map,
|
account: ImmutablePropTypes.map,
|
||||||
onFollow: PropTypes.func.isRequired,
|
onFollow: PropTypes.func.isRequired,
|
||||||
|
onBlock: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -35,11 +37,21 @@ export default class Header extends ImmutablePureComponent {
|
||||||
|
|
||||||
let displayName = account.get('display_name_html');
|
let displayName = account.get('display_name_html');
|
||||||
let info = '';
|
let info = '';
|
||||||
|
let mutingInfo = '';
|
||||||
let actionBtn = '';
|
let actionBtn = '';
|
||||||
|
|
||||||
if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
|
if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
|
||||||
info = <span className='account--follows-info'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>;
|
info = <span className='account--follows-info'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>;
|
||||||
}
|
}
|
||||||
|
else if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
|
||||||
|
info = <span className='account--follows-info'><FormattedMessage id='account.blocked' defaultMessage='Blocked' /></span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (me !== account.get('id') && account.getIn(['relationship', 'muting'])) {
|
||||||
|
mutingInfo = <span className='account--muting-info'><FormattedMessage id='account.muted' defaultMessage='Muted' /></span>;
|
||||||
|
} else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
|
||||||
|
mutingInfo = <span className='account--muting-info'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain hidden' /></span>;
|
||||||
|
}
|
||||||
|
|
||||||
if (me !== account.get('id')) {
|
if (me !== account.get('id')) {
|
||||||
if (account.getIn(['relationship', 'requested'])) {
|
if (account.getIn(['relationship', 'requested'])) {
|
||||||
|
@ -54,6 +66,12 @@ export default class Header extends ImmutablePureComponent {
|
||||||
<IconButton size={26} icon={account.getIn(['relationship', 'following']) ? 'user-times' : 'user-plus'} active={account.getIn(['relationship', 'following'])} title={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />
|
<IconButton size={26} icon={account.getIn(['relationship', 'following']) ? 'user-times' : 'user-plus'} active={account.getIn(['relationship', 'following'])} title={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
} else if (account.getIn(['relationship', 'blocking'])) {
|
||||||
|
actionBtn = (
|
||||||
|
<div className='account--action-button'>
|
||||||
|
<IconButton size={26} icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -78,6 +96,7 @@ export default class Header extends ImmutablePureComponent {
|
||||||
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
||||||
|
|
||||||
{info}
|
{info}
|
||||||
|
{mutingInfo}
|
||||||
{actionBtn}
|
{actionBtn}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -76,6 +76,7 @@ export default class Header extends ImmutablePureComponent {
|
||||||
<InnerHeader
|
<InnerHeader
|
||||||
account={account}
|
account={account}
|
||||||
onFollow={this.handleFollow}
|
onFollow={this.handleFollow}
|
||||||
|
onBlock={this.handleBlock}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ActionBar
|
<ActionBar
|
||||||
|
|
|
@ -357,6 +357,22 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account--muting-info {
|
||||||
|
color: $primary-text-color;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 10px;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
background-color: rgba($base-overlay-background, 0.4);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.account--action-button {
|
.account--action-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
|
Loading…
Reference in a new issue