mirror of
https://github.com/mastodon/mastodon
synced 2024-12-12 05:38:19 +09:00
Improve how the list entry Account component looks when target is blocked/follow is requested
This commit is contained in:
parent
99fe89026c
commit
6cf44ca92c
@ -8,7 +8,9 @@ import { defineMessages, injectIntl } from 'react-intl';
|
|||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }
|
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||||
|
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
|
||||||
|
unblock: { id: 'account.unblock', defaultMessage: 'Unblock' }
|
||||||
});
|
});
|
||||||
|
|
||||||
const outerStyle = {
|
const outerStyle = {
|
||||||
@ -42,7 +44,9 @@ const Account = React.createClass({
|
|||||||
account: ImmutablePropTypes.map.isRequired,
|
account: ImmutablePropTypes.map.isRequired,
|
||||||
me: React.PropTypes.number.isRequired,
|
me: React.PropTypes.number.isRequired,
|
||||||
onFollow: React.PropTypes.func.isRequired,
|
onFollow: React.PropTypes.func.isRequired,
|
||||||
withNote: React.PropTypes.bool
|
onBlock: React.PropTypes.func.isRequired,
|
||||||
|
withNote: React.PropTypes.bool,
|
||||||
|
intl: React.PropTypes.object.isRequired
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps () {
|
getDefaultProps () {
|
||||||
@ -57,6 +61,10 @@ const Account = React.createClass({
|
|||||||
this.props.onFollow(this.props.account);
|
this.props.onFollow(this.props.account);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleBlock () {
|
||||||
|
this.props.onBlock(this.props.account);
|
||||||
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { account, me, withNote, intl } = this.props;
|
const { account, me, withNote, intl } = this.props;
|
||||||
|
|
||||||
@ -70,10 +78,18 @@ const Account = React.createClass({
|
|||||||
note = <div style={noteStyle}>{account.get('note')}</div>;
|
note = <div style={noteStyle}>{account.get('note')}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (account.get('id') !== me && account.get('relationship', null) != null) {
|
if (account.get('id') !== me && account.get('relationship', null) !== null) {
|
||||||
const following = account.getIn(['relationship', 'following']);
|
const following = account.getIn(['relationship', 'following']);
|
||||||
|
const requested = account.getIn(['relationship', 'requested']);
|
||||||
|
const blocking = account.getIn(['relationship', 'blocking']);
|
||||||
|
|
||||||
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
|
if (requested) {
|
||||||
|
buttons = <IconButton disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} />
|
||||||
|
} else if (blocking) {
|
||||||
|
buttons = <IconButton active={true} icon='unlock-alt' title={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
|
||||||
|
} else {
|
||||||
|
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -3,7 +3,9 @@ import { makeGetAccount } from '../selectors';
|
|||||||
import Account from '../components/account';
|
import Account from '../components/account';
|
||||||
import {
|
import {
|
||||||
followAccount,
|
followAccount,
|
||||||
unfollowAccount
|
unfollowAccount,
|
||||||
|
blockAccount,
|
||||||
|
unblockAccount
|
||||||
} from '../actions/accounts';
|
} from '../actions/accounts';
|
||||||
|
|
||||||
const makeMapStateToProps = () => {
|
const makeMapStateToProps = () => {
|
||||||
@ -24,6 +26,14 @@ const mapDispatchToProps = (dispatch) => ({
|
|||||||
} else {
|
} else {
|
||||||
dispatch(followAccount(account.get('id')));
|
dispatch(followAccount(account.get('id')));
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onBlock (account) {
|
||||||
|
if (account.getIn(['relationship', 'blocking'])) {
|
||||||
|
dispatch(unblockAccount(account.get('id')));
|
||||||
|
} else {
|
||||||
|
dispatch(blockAccount(account.get('id')));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -25,7 +25,17 @@ const imageStyle = {
|
|||||||
maxHeight: '80vh'
|
maxHeight: '80vh'
|
||||||
};
|
};
|
||||||
|
|
||||||
const preloader = () => <LoadingIndicator />;
|
const loadingStyle = {
|
||||||
|
background: '#373b4a',
|
||||||
|
width: '400px',
|
||||||
|
paddingBottom: '120px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const preloader = () => (
|
||||||
|
<div style={loadingStyle}>
|
||||||
|
<LoadingIndicator />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
const Modal = React.createClass({
|
const Modal = React.createClass({
|
||||||
|
|
||||||
|
@ -126,7 +126,7 @@ class Account < ApplicationRecord
|
|||||||
def save_with_optional_avatar!
|
def save_with_optional_avatar!
|
||||||
save!
|
save!
|
||||||
rescue ActiveRecord::RecordInvalid => invalid
|
rescue ActiveRecord::RecordInvalid => invalid
|
||||||
if invalid.record.errors[:avatar_file_size] || invalid[:avatar_content_type]
|
if invalid.record.errors[:avatar_file_size] || invalid.record.errors[:avatar_content_type]
|
||||||
self.avatar = nil
|
self.avatar = nil
|
||||||
retry
|
retry
|
||||||
end
|
end
|
||||||
|
Loading…
Reference in New Issue
Block a user