moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'approval-ui-improvements' into 'develop' 

Admin: improve approval UI for mobile, display snackbar messages

See merge request soapbox-pub/soapbox-fe!408
This commit is contained in:
Alex Gleason 2020-12-31 17:08:40 +00:00
parent fab4fb80ab a0c24dbbcc
commit b38dfda4be
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/soapbox/features/admin/awaiting_approval.js
View File

@ -8,10 +8,13 @@ import Column from '../ui/components/column';
import IconButton from 'soapbox/components/icon_button'; import IconButton from 'soapbox/components/icon_button';
import ScrollableList from 'soapbox/components/scrollable_list'; import ScrollableList from 'soapbox/components/scrollable_list';
import { fetchUsers, deleteUsers, approveUsers } from 'soapbox/actions/admin'; import { fetchUsers, deleteUsers, approveUsers } from 'soapbox/actions/admin';
import snackbar from 'soapbox/actions/snackbar';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' }, heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
emptyMessage: { id: 'admin.awaiting_approval.empty_message', defaultMessage: 'There is nobody waiting for approval. When a new user signs up, you can review them here.' }, emptyMessage: { id: 'admin.awaiting_approval.empty_message', defaultMessage: 'There is nobody waiting for approval. When a new user signs up, you can review them here.' },
approved: { id: 'admin.awaiting_approval.approved_message', defaultMessage: '{acct} was approved!' },
rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },
}); });
const mapStateToProps = state => { const mapStateToProps = state => {
@ -43,16 +46,22 @@ class AwaitingApproval extends ImmutablePureComponent {
} }
handleApprove = nickname => { handleApprove = nickname => {
const { dispatch } = this.props; const { dispatch, intl } = this.props;
return e => { return e => {
dispatch(approveUsers([nickname])); dispatch(approveUsers([nickname])).then(() => {
const message = intl.formatMessage(messages.approved, { acct: `@${nickname}` });
dispatch(snackbar.success(message));
}).catch(() => {});
}; };
} }
handleReject = nickname => { handleReject = nickname => {
const { dispatch } = this.props; const { dispatch, intl } = this.props;
return e => { return e => {
dispatch(deleteUsers([nickname])); dispatch(deleteUsers([nickname])).then(() => {
const message = intl.formatMessage(messages.rejected, { acct: `@${nickname}` });
dispatch(snackbar.info(message));
}).catch(() => {});
}; };
} }
@ -70,8 +79,8 @@ class AwaitingApproval extends ImmutablePureComponent {
<blockquote className='unapproved-account__reason'>{user.get('registration_reason')}</blockquote> <blockquote className='unapproved-account__reason'>{user.get('registration_reason')}</blockquote>
</div> </div>
<div className='unapproved-account__actions'> <div className='unapproved-account__actions'>
<IconButton icon='check' onClick={this.handleApprove(user.get('nickname'))} /> <IconButton icon='check' size={22} onClick={this.handleApprove(user.get('nickname'))} />
<IconButton icon='close' onClick={this.handleReject(user.get('nickname'))} /> <IconButton icon='close' size={22} onClick={this.handleReject(user.get('nickname'))} />
</div> </div>
</div> </div>
))} ))}

6
app/styles/components/admin.scss
View File

@ -85,9 +85,13 @@
&__actions { &__actions {
margin-left: auto; margin-left: auto;
padding-left: 20px;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
padding-left: 20px;
button.icon-button:nth-child(n+2) {
padding-left: 10px;
}
} }
} }