[Glitch] Add follow request banner on account header
Port 70415714f1
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
parent
c459625119
commit
0912fb736d
|
@ -0,0 +1,37 @@
|
|||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Icon from 'flavours/glitch/components/icon';
|
||||
|
||||
export default class FollowRequestNote extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, onAuthorize, onReject } = this.props;
|
||||
|
||||
return (
|
||||
<div className='follow-request-banner'>
|
||||
<div className='follow-request-banner__message'>
|
||||
<FormattedMessage id='account.requested_follow' defaultMessage='{name} has requested to follow you' values={{ name: <bdi><strong dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi> }} />
|
||||
</div>
|
||||
|
||||
<div className='follow-request-banner__action'>
|
||||
<button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
|
||||
<Icon id='check' fixedWidth />
|
||||
<FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
|
||||
</button>
|
||||
|
||||
<button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
|
||||
<Icon id='times' fixedWidth />
|
||||
<FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -13,6 +13,7 @@ import Button from 'flavours/glitch/components/button';
|
|||
import { NavLink } from 'react-router-dom';
|
||||
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
|
||||
import AccountNoteContainer from '../containers/account_note_container';
|
||||
import FollowRequestNoteContainer from '../containers/follow_request_note_container';
|
||||
import { PERMISSION_MANAGE_USERS } from 'flavours/glitch/permissions';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
|
@ -314,6 +315,8 @@ class Header extends ImmutablePureComponent {
|
|||
|
||||
return (
|
||||
<div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
|
||||
{!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && <FollowRequestNoteContainer account={account} />}
|
||||
|
||||
<div className='account__header__image'>
|
||||
<div className='account__header__info'>
|
||||
{info}
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
import { connect } from 'react-redux';
|
||||
import FollowRequestNote from '../components/follow_request_note';
|
||||
import { authorizeFollowRequest, rejectFollowRequest } from 'flavours/glitch/actions/accounts';
|
||||
|
||||
const mapDispatchToProps = (dispatch, { account }) => ({
|
||||
onAuthorize () {
|
||||
dispatch(authorizeFollowRequest(account.get('id')));
|
||||
},
|
||||
|
||||
onReject () {
|
||||
dispatch(rejectFollowRequest(account.get('id')));
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps)(FollowRequestNote);
|
|
@ -1,3 +1,6 @@
|
|||
import {
|
||||
NOTIFICATIONS_UPDATE,
|
||||
} from '../actions/notifications';
|
||||
import {
|
||||
ACCOUNT_FOLLOW_SUCCESS,
|
||||
ACCOUNT_FOLLOW_REQUEST,
|
||||
|
@ -12,6 +15,8 @@ import {
|
|||
ACCOUNT_PIN_SUCCESS,
|
||||
ACCOUNT_UNPIN_SUCCESS,
|
||||
RELATIONSHIPS_FETCH_SUCCESS,
|
||||
FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
|
||||
FOLLOW_REQUEST_REJECT_SUCCESS,
|
||||
} from 'flavours/glitch/actions/accounts';
|
||||
import {
|
||||
DOMAIN_BLOCK_SUCCESS,
|
||||
|
@ -44,6 +49,12 @@ const initialState = ImmutableMap();
|
|||
|
||||
export default function relationships(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case FOLLOW_REQUEST_AUTHORIZE_SUCCESS:
|
||||
return state.setIn([action.id, 'followed_by'], true).setIn([action.id, 'requested_by'], false);
|
||||
case FOLLOW_REQUEST_REJECT_SUCCESS:
|
||||
return state.setIn([action.id, 'followed_by'], false).setIn([action.id, 'requested_by'], false);
|
||||
case NOTIFICATIONS_UPDATE:
|
||||
return action.notification.type === 'follow_request' ? state.setIn([action.notification.account.id, 'requested_by'], true) : state;
|
||||
case ACCOUNT_FOLLOW_REQUEST:
|
||||
return state.getIn([action.id, 'following']) ? state : state.setIn([action.id, action.locked ? 'requested' : 'following'], true);
|
||||
case ACCOUNT_FOLLOW_FAIL:
|
||||
|
|
|
@ -756,3 +756,37 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moved-account-banner,
|
||||
.follow-request-banner {
|
||||
padding: 20px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
&__message {
|
||||
color: $darker-text-color;
|
||||
padding: 8px 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
&__action {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detailed-status__display-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-request-banner .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -141,6 +141,30 @@
|
|||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.button--confirmation {
|
||||
color: $valid-value-color;
|
||||
border-color: $valid-value-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $valid-value-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.button--destructive {
|
||||
color: $error-value-color;
|
||||
border-color: $error-value-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $error-value-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button--block {
|
||||
|
|
Loading…
Reference in New Issue