Improve how the list entry Account component looks when target is blocked/follow is requested

This commit is contained in:
Eugen Rochko 2017-01-16 19:36:32 +01:00
parent 99fe89026c
commit 6cf44ca92c
4 changed files with 43 additions and 7 deletions

View File

@ -8,7 +8,9 @@ import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
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 = {
@ -42,7 +44,9 @@ const Account = React.createClass({
account: ImmutablePropTypes.map.isRequired,
me: React.PropTypes.number.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 () {
@ -57,6 +61,10 @@ const Account = React.createClass({
this.props.onFollow(this.props.account);
},
handleBlock () {
this.props.onBlock(this.props.account);
},
render () {
const { account, me, withNote, intl } = this.props;
@ -70,10 +78,18 @@ const Account = React.createClass({
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 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 (

View File

@ -3,7 +3,9 @@ import { makeGetAccount } from '../selectors';
import Account from '../components/account';
import {
followAccount,
unfollowAccount
unfollowAccount,
blockAccount,
unblockAccount
} from '../actions/accounts';
const makeMapStateToProps = () => {
@ -24,6 +26,14 @@ const mapDispatchToProps = (dispatch) => ({
} else {
dispatch(followAccount(account.get('id')));
}
},
onBlock (account) {
if (account.getIn(['relationship', 'blocking'])) {
dispatch(unblockAccount(account.get('id')));
} else {
dispatch(blockAccount(account.get('id')));
}
}
});

View File

@ -25,7 +25,17 @@ const imageStyle = {
maxHeight: '80vh'
};
const preloader = () => <LoadingIndicator />;
const loadingStyle = {
background: '#373b4a',
width: '400px',
paddingBottom: '120px'
};
const preloader = () => (
<div style={loadingStyle}>
<LoadingIndicator />
</div>
);
const Modal = React.createClass({

View File

@ -126,7 +126,7 @@ class Account < ApplicationRecord
def save_with_optional_avatar!
save!
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
retry
end