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({ 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,11 +78,19 @@ 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']);
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} />; buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
} }
}
return ( return (
<div style={outerStyle}> <div style={outerStyle}>

View file

@ -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')));
}
} }
}); });

View file

@ -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({

View file

@ -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