* Add some explanation to the mute modal dialog * Remove `isSubmitting` from mute modal code, this wasn't used * Refactor block modal Signed-off-by: Thibaut Girka <thib@sitedethib.com> * Refactor SCSS a bit * Put mute modal toggle to the same side as in the report dialog for consistency * Reword mute explanation * Fix mute explanation styling * Left-align all text in mute confirmation modalmaster^2
@@ -1,6 +1,7 @@ | |||||
import api, { getLinks } from '../api'; | import api, { getLinks } from '../api'; | ||||
import { fetchRelationships } from './accounts'; | import { fetchRelationships } from './accounts'; | ||||
import { importFetchedAccounts } from './importer'; | import { importFetchedAccounts } from './importer'; | ||||
import { openModal } from './modal'; | |||||
export const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST'; | export const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST'; | ||||
export const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS'; | export const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS'; | ||||
@@ -10,6 +11,8 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST'; | |||||
export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS'; | export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS'; | ||||
export const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL'; | export const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL'; | ||||
export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL'; | |||||
export function fetchBlocks() { | export function fetchBlocks() { | ||||
return (dispatch, getState) => { | return (dispatch, getState) => { | ||||
dispatch(fetchBlocksRequest()); | dispatch(fetchBlocksRequest()); | ||||
@@ -83,3 +86,14 @@ export function expandBlocksFail(error) { | |||||
error, | error, | ||||
}; | }; | ||||
}; | }; | ||||
export function initBlockModal(account) { | |||||
return dispatch => { | |||||
dispatch({ | |||||
type: BLOCKS_INIT_MODAL, | |||||
account, | |||||
}); | |||||
dispatch(openModal('BLOCK')); | |||||
}; | |||||
} |
@@ -1,4 +1,3 @@ | |||||
import React from 'react'; | |||||
import { connect } from 'react-redux'; | import { connect } from 'react-redux'; | ||||
import Status from '../components/status'; | import Status from '../components/status'; | ||||
import { makeGetStatus } from '../selectors'; | import { makeGetStatus } from '../selectors'; | ||||
@@ -15,7 +14,6 @@ import { | |||||
pin, | pin, | ||||
unpin, | unpin, | ||||
} from '../actions/interactions'; | } from '../actions/interactions'; | ||||
import { blockAccount } from '../actions/accounts'; | |||||
import { | import { | ||||
muteStatus, | muteStatus, | ||||
unmuteStatus, | unmuteStatus, | ||||
@@ -24,9 +22,10 @@ import { | |||||
revealStatus, | revealStatus, | ||||
} from '../actions/statuses'; | } from '../actions/statuses'; | ||||
import { initMuteModal } from '../actions/mutes'; | import { initMuteModal } from '../actions/mutes'; | ||||
import { initBlockModal } from '../actions/blocks'; | |||||
import { initReport } from '../actions/reports'; | import { initReport } from '../actions/reports'; | ||||
import { openModal } from '../actions/modal'; | import { openModal } from '../actions/modal'; | ||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | |||||
import { defineMessages, injectIntl } from 'react-intl'; | |||||
import { boostModal, deleteModal } from '../initial_state'; | import { boostModal, deleteModal } from '../initial_state'; | ||||
import { showAlertForError } from '../actions/alerts'; | import { showAlertForError } from '../actions/alerts'; | ||||
@@ -35,10 +34,8 @@ const messages = defineMessages({ | |||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, | deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, | ||||
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, | redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, | ||||
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' }, | redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' }, | ||||
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, | |||||
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, | replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, | ||||
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, | replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, | ||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' }, | |||||
}); | }); | ||||
const makeMapStateToProps = () => { | const makeMapStateToProps = () => { | ||||
@@ -138,16 +135,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ | |||||
onBlock (status) { | onBlock (status) { | ||||
const account = status.get('account'); | const account = status.get('account'); | ||||
dispatch(openModal('CONFIRM', { | |||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, | |||||
confirm: intl.formatMessage(messages.blockConfirm), | |||||
onConfirm: () => dispatch(blockAccount(account.get('id'))), | |||||
secondary: intl.formatMessage(messages.blockAndReport), | |||||
onSecondary: () => { | |||||
dispatch(blockAccount(account.get('id'))); | |||||
dispatch(initReport(account, status)); | |||||
}, | |||||
})); | |||||
dispatch(initBlockModal(account)); | |||||
}, | }, | ||||
onReport (status) { | onReport (status) { | ||||
@@ -5,7 +5,6 @@ import Header from '../components/header'; | |||||
import { | import { | ||||
followAccount, | followAccount, | ||||
unfollowAccount, | unfollowAccount, | ||||
blockAccount, | |||||
unblockAccount, | unblockAccount, | ||||
unmuteAccount, | unmuteAccount, | ||||
pinAccount, | pinAccount, | ||||
@@ -16,6 +15,7 @@ import { | |||||
directCompose, | directCompose, | ||||
} from '../../../actions/compose'; | } from '../../../actions/compose'; | ||||
import { initMuteModal } from '../../../actions/mutes'; | import { initMuteModal } from '../../../actions/mutes'; | ||||
import { initBlockModal } from '../../../actions/blocks'; | |||||
import { initReport } from '../../../actions/reports'; | import { initReport } from '../../../actions/reports'; | ||||
import { openModal } from '../../../actions/modal'; | import { openModal } from '../../../actions/modal'; | ||||
import { blockDomain, unblockDomain } from '../../../actions/domain_blocks'; | import { blockDomain, unblockDomain } from '../../../actions/domain_blocks'; | ||||
@@ -25,9 +25,7 @@ import { List as ImmutableList } from 'immutable'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, | unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, | ||||
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, | |||||
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, | blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, | ||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' }, | |||||
}); | }); | ||||
const makeMapStateToProps = () => { | const makeMapStateToProps = () => { | ||||
@@ -64,16 +62,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ | |||||
if (account.getIn(['relationship', 'blocking'])) { | if (account.getIn(['relationship', 'blocking'])) { | ||||
dispatch(unblockAccount(account.get('id'))); | dispatch(unblockAccount(account.get('id'))); | ||||
} else { | } else { | ||||
dispatch(openModal('CONFIRM', { | |||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, | |||||
confirm: intl.formatMessage(messages.blockConfirm), | |||||
onConfirm: () => dispatch(blockAccount(account.get('id'))), | |||||
secondary: intl.formatMessage(messages.blockAndReport), | |||||
onSecondary: () => { | |||||
dispatch(blockAccount(account.get('id'))); | |||||
dispatch(initReport(account)); | |||||
}, | |||||
})); | |||||
dispatch(initBlockModal(account)); | |||||
} | } | ||||
}, | }, | ||||
@@ -1,4 +1,3 @@ | |||||
import React from 'react'; | |||||
import { connect } from 'react-redux'; | import { connect } from 'react-redux'; | ||||
import DetailedStatus from '../components/detailed_status'; | import DetailedStatus from '../components/detailed_status'; | ||||
import { makeGetStatus } from '../../../selectors'; | import { makeGetStatus } from '../../../selectors'; | ||||
@@ -15,7 +14,6 @@ import { | |||||
pin, | pin, | ||||
unpin, | unpin, | ||||
} from '../../../actions/interactions'; | } from '../../../actions/interactions'; | ||||
import { blockAccount } from '../../../actions/accounts'; | |||||
import { | import { | ||||
muteStatus, | muteStatus, | ||||
unmuteStatus, | unmuteStatus, | ||||
@@ -24,9 +22,10 @@ import { | |||||
revealStatus, | revealStatus, | ||||
} from '../../../actions/statuses'; | } from '../../../actions/statuses'; | ||||
import { initMuteModal } from '../../../actions/mutes'; | import { initMuteModal } from '../../../actions/mutes'; | ||||
import { initBlockModal } from '../../../actions/blocks'; | |||||
import { initReport } from '../../../actions/reports'; | import { initReport } from '../../../actions/reports'; | ||||
import { openModal } from '../../../actions/modal'; | import { openModal } from '../../../actions/modal'; | ||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | |||||
import { defineMessages, injectIntl } from 'react-intl'; | |||||
import { boostModal, deleteModal } from '../../../initial_state'; | import { boostModal, deleteModal } from '../../../initial_state'; | ||||
import { showAlertForError } from '../../../actions/alerts'; | import { showAlertForError } from '../../../actions/alerts'; | ||||
@@ -35,10 +34,8 @@ const messages = defineMessages({ | |||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, | deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, | ||||
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, | redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, | ||||
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' }, | redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' }, | ||||
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, | |||||
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, | replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, | ||||
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, | replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, | ||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' }, | |||||
}); | }); | ||||
const makeMapStateToProps = () => { | const makeMapStateToProps = () => { | ||||
@@ -138,16 +135,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ | |||||
onBlock (status) { | onBlock (status) { | ||||
const account = status.get('account'); | const account = status.get('account'); | ||||
dispatch(openModal('CONFIRM', { | |||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, | |||||
confirm: intl.formatMessage(messages.blockConfirm), | |||||
onConfirm: () => dispatch(blockAccount(account.get('id'))), | |||||
secondary: intl.formatMessage(messages.blockAndReport), | |||||
onSecondary: () => { | |||||
dispatch(blockAccount(account.get('id'))); | |||||
dispatch(initReport(account, status)); | |||||
}, | |||||
})); | |||||
dispatch(initBlockModal(account)); | |||||
}, | }, | ||||
onReport (status) { | onReport (status) { | ||||
@@ -23,7 +23,6 @@ import { | |||||
mentionCompose, | mentionCompose, | ||||
directCompose, | directCompose, | ||||
} from '../../actions/compose'; | } from '../../actions/compose'; | ||||
import { blockAccount } from '../../actions/accounts'; | |||||
import { | import { | ||||
muteStatus, | muteStatus, | ||||
unmuteStatus, | unmuteStatus, | ||||
@@ -32,6 +31,7 @@ import { | |||||
revealStatus, | revealStatus, | ||||
} from '../../actions/statuses'; | } from '../../actions/statuses'; | ||||
import { initMuteModal } from '../../actions/mutes'; | import { initMuteModal } from '../../actions/mutes'; | ||||
import { initBlockModal } from '../../actions/blocks'; | |||||
import { initReport } from '../../actions/reports'; | import { initReport } from '../../actions/reports'; | ||||
import { makeGetStatus } from '../../selectors'; | import { makeGetStatus } from '../../selectors'; | ||||
import { ScrollContainer } from 'react-router-scroll-4'; | import { ScrollContainer } from 'react-router-scroll-4'; | ||||
@@ -39,7 +39,7 @@ import ColumnBackButton from '../../components/column_back_button'; | |||||
import ColumnHeader from '../../components/column_header'; | import ColumnHeader from '../../components/column_header'; | ||||
import StatusContainer from '../../containers/status_container'; | import StatusContainer from '../../containers/status_container'; | ||||
import { openModal } from '../../actions/modal'; | import { openModal } from '../../actions/modal'; | ||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | |||||
import { defineMessages, injectIntl } from 'react-intl'; | |||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import { HotKeys } from 'react-hotkeys'; | import { HotKeys } from 'react-hotkeys'; | ||||
import { boostModal, deleteModal } from '../../initial_state'; | import { boostModal, deleteModal } from '../../initial_state'; | ||||
@@ -52,13 +52,11 @@ const messages = defineMessages({ | |||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, | deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, | ||||
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, | redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, | ||||
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' }, | redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' }, | ||||
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, | |||||
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' }, | revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' }, | ||||
hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' }, | hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' }, | ||||
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' }, | detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' }, | ||||
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, | replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, | ||||
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, | replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, | ||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' }, | |||||
}); | }); | ||||
const makeMapStateToProps = () => { | const makeMapStateToProps = () => { | ||||
@@ -296,19 +294,9 @@ class Status extends ImmutablePureComponent { | |||||
} | } | ||||
handleBlockClick = (status) => { | handleBlockClick = (status) => { | ||||
const { dispatch, intl } = this.props; | |||||
const { dispatch } = this.props; | |||||
const account = status.get('account'); | const account = status.get('account'); | ||||
dispatch(openModal('CONFIRM', { | |||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, | |||||
confirm: intl.formatMessage(messages.blockConfirm), | |||||
onConfirm: () => dispatch(blockAccount(account.get('id'))), | |||||
secondary: intl.formatMessage(messages.blockAndReport), | |||||
onSecondary: () => { | |||||
dispatch(blockAccount(account.get('id'))); | |||||
dispatch(initReport(account, status)); | |||||
}, | |||||
})); | |||||
dispatch(initBlockModal(account)); | |||||
} | } | ||||
handleReport = (status) => { | handleReport = (status) => { | ||||
@@ -0,0 +1,103 @@ | |||||
import React from 'react'; | |||||
import { connect } from 'react-redux'; | |||||
import PropTypes from 'prop-types'; | |||||
import { injectIntl, FormattedMessage } from 'react-intl'; | |||||
import { makeGetAccount } from '../../../selectors'; | |||||
import Button from '../../../components/button'; | |||||
import { closeModal } from '../../../actions/modal'; | |||||
import { blockAccount } from '../../../actions/accounts'; | |||||
import { initReport } from '../../../actions/reports'; | |||||
const makeMapStateToProps = () => { | |||||
const getAccount = makeGetAccount(); | |||||
const mapStateToProps = state => ({ | |||||
account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])), | |||||
}); | |||||
return mapStateToProps; | |||||
}; | |||||
const mapDispatchToProps = dispatch => { | |||||
return { | |||||
onConfirm(account) { | |||||
dispatch(blockAccount(account.get('id'))); | |||||
}, | |||||
onBlockAndReport(account) { | |||||
dispatch(blockAccount(account.get('id'))); | |||||
dispatch(initReport(account)); | |||||
}, | |||||
onClose() { | |||||
dispatch(closeModal()); | |||||
}, | |||||
}; | |||||
}; | |||||
export default @connect(makeMapStateToProps, mapDispatchToProps) | |||||
@injectIntl | |||||
class BlockModal extends React.PureComponent { | |||||
static propTypes = { | |||||
account: PropTypes.object.isRequired, | |||||
onClose: PropTypes.func.isRequired, | |||||
onBlockAndReport: PropTypes.func.isRequired, | |||||
onConfirm: PropTypes.func.isRequired, | |||||
intl: PropTypes.object.isRequired, | |||||
}; | |||||
componentDidMount() { | |||||
this.button.focus(); | |||||
} | |||||
handleClick = () => { | |||||
this.props.onClose(); | |||||
this.props.onConfirm(this.props.account); | |||||
} | |||||
handleSecondary = () => { | |||||
this.props.onClose(); | |||||
this.props.onBlockAndReport(this.props.account); | |||||
} | |||||
handleCancel = () => { | |||||
this.props.onClose(); | |||||
} | |||||
setRef = (c) => { | |||||
this.button = c; | |||||
} | |||||
render () { | |||||
const { account } = this.props; | |||||
return ( | |||||
<div className='modal-root__modal block-modal'> | |||||
<div className='block-modal__container'> | |||||
<p> | |||||
<FormattedMessage | |||||
id='confirmations.block.message' | |||||
defaultMessage='Are you sure you want to block {name}?' | |||||
values={{ name: <strong>@{account.get('acct')}</strong> }} | |||||
/> | |||||
</p> | |||||
</div> | |||||
<div className='block-modal__action-bar'> | |||||
<Button onClick={this.handleCancel} className='block-modal__cancel-button'> | |||||
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /> | |||||
</Button> | |||||
<Button onClick={this.handleSecondary} className='confirmation-modal__secondary-button'> | |||||
<FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block & Report' /> | |||||
</Button> | |||||
<Button onClick={this.handleClick} ref={this.setRef}> | |||||
<FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' /> | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
); | |||||
} | |||||
} |
@@ -13,6 +13,7 @@ import ConfirmationModal from './confirmation_modal'; | |||||
import FocalPointModal from './focal_point_modal'; | import FocalPointModal from './focal_point_modal'; | ||||
import { | import { | ||||
MuteModal, | MuteModal, | ||||
BlockModal, | |||||
ReportModal, | ReportModal, | ||||
EmbedModal, | EmbedModal, | ||||
ListEditor, | ListEditor, | ||||
@@ -25,6 +26,7 @@ const MODAL_COMPONENTS = { | |||||
'BOOST': () => Promise.resolve({ default: BoostModal }), | 'BOOST': () => Promise.resolve({ default: BoostModal }), | ||||
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), | 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), | ||||
'MUTE': MuteModal, | 'MUTE': MuteModal, | ||||
'BLOCK': BlockModal, | |||||
'REPORT': ReportModal, | 'REPORT': ReportModal, | ||||
'ACTIONS': () => Promise.resolve({ default: ActionsModal }), | 'ACTIONS': () => Promise.resolve({ default: ActionsModal }), | ||||
'EMBED': EmbedModal, | 'EMBED': EmbedModal, | ||||
@@ -11,7 +11,6 @@ import { toggleHideNotifications } from '../../../actions/mutes'; | |||||
const mapStateToProps = state => { | const mapStateToProps = state => { | ||||
return { | return { | ||||
isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']), | |||||
account: state.getIn(['mutes', 'new', 'account']), | account: state.getIn(['mutes', 'new', 'account']), | ||||
notifications: state.getIn(['mutes', 'new', 'notifications']), | notifications: state.getIn(['mutes', 'new', 'notifications']), | ||||
}; | }; | ||||
@@ -38,7 +37,6 @@ export default @connect(mapStateToProps, mapDispatchToProps) | |||||
class MuteModal extends React.PureComponent { | class MuteModal extends React.PureComponent { | ||||
static propTypes = { | static propTypes = { | ||||
isSubmitting: PropTypes.bool.isRequired, | |||||
account: PropTypes.object.isRequired, | account: PropTypes.object.isRequired, | ||||
notifications: PropTypes.bool.isRequired, | notifications: PropTypes.bool.isRequired, | ||||
onClose: PropTypes.func.isRequired, | onClose: PropTypes.func.isRequired, | ||||
@@ -81,11 +79,16 @@ class MuteModal extends React.PureComponent { | |||||
values={{ name: <strong>@{account.get('acct')}</strong> }} | values={{ name: <strong>@{account.get('acct')}</strong> }} | ||||
/> | /> | ||||
</p> | </p> | ||||
<div> | |||||
<label htmlFor='mute-modal__hide-notifications-checkbox'> | |||||
<p className='mute-modal__explanation'> | |||||
<FormattedMessage | |||||
id='confirmations.mute.explanation' | |||||
defaultMessage='This will hide posts from them and posts mentioning them, but it will still allow them to see your posts follow you.' | |||||
/> | |||||
</p> | |||||
<div className='setting-toggle'> | |||||
<Toggle id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} /> | |||||
<label className='setting-toggle__label' htmlFor='mute-modal__hide-notifications-checkbox'> | |||||
<FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' /> | <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' /> | ||||
{' '} | |||||
<Toggle id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} /> | |||||
</label> | </label> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -106,6 +106,10 @@ export function MuteModal () { | |||||
return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal'); | return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal'); | ||||
} | } | ||||
export function BlockModal () { | |||||
return import(/* webpackChunkName: "modals/block_modal" */'../components/block_modal'); | |||||
} | |||||
export function ReportModal () { | export function ReportModal () { | ||||
return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal'); | return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal'); | ||||
} | } | ||||
@@ -0,0 +1,22 @@ | |||||
import Immutable from 'immutable'; | |||||
import { | |||||
BLOCKS_INIT_MODAL, | |||||
} from '../actions/blocks'; | |||||
const initialState = Immutable.Map({ | |||||
new: Immutable.Map({ | |||||
account_id: null, | |||||
}), | |||||
}); | |||||
export default function mutes(state = initialState, action) { | |||||
switch (action.type) { | |||||
case BLOCKS_INIT_MODAL: | |||||
return state.withMutations((state) => { | |||||
state.setIn(['new', 'account_id'], action.account.get('id')); | |||||
}); | |||||
default: | |||||
return state; | |||||
} | |||||
} |
@@ -15,6 +15,7 @@ import settings from './settings'; | |||||
import push_notifications from './push_notifications'; | import push_notifications from './push_notifications'; | ||||
import status_lists from './status_lists'; | import status_lists from './status_lists'; | ||||
import mutes from './mutes'; | import mutes from './mutes'; | ||||
import blocks from './blocks'; | |||||
import reports from './reports'; | import reports from './reports'; | ||||
import contexts from './contexts'; | import contexts from './contexts'; | ||||
import compose from './compose'; | import compose from './compose'; | ||||
@@ -51,6 +52,7 @@ const reducers = { | |||||
settings, | settings, | ||||
push_notifications, | push_notifications, | ||||
mutes, | mutes, | ||||
blocks, | |||||
reports, | reports, | ||||
contexts, | contexts, | ||||
compose, | compose, | ||||
@@ -7,7 +7,6 @@ import { | |||||
const initialState = Immutable.Map({ | const initialState = Immutable.Map({ | ||||
new: Immutable.Map({ | new: Immutable.Map({ | ||||
isSubmitting: false, | |||||
account: null, | account: null, | ||||
notifications: true, | notifications: true, | ||||
}), | }), | ||||
@@ -17,7 +16,6 @@ export default function mutes(state = initialState, action) { | |||||
switch (action.type) { | switch (action.type) { | ||||
case MUTES_INIT_MODAL: | case MUTES_INIT_MODAL: | ||||
return state.withMutations((state) => { | return state.withMutations((state) => { | ||||
state.setIn(['new', 'isSubmitting'], false); | |||||
state.setIn(['new', 'account'], action.account); | state.setIn(['new', 'account'], action.account); | ||||
state.setIn(['new', 'notifications'], true); | state.setIn(['new', 'notifications'], true); | ||||
}); | }); | ||||
@@ -310,6 +310,7 @@ html { | |||||
.boost-modal, | .boost-modal, | ||||
.confirmation-modal, | .confirmation-modal, | ||||
.mute-modal, | .mute-modal, | ||||
.block-modal, | |||||
.report-modal, | .report-modal, | ||||
.embed-modal, | .embed-modal, | ||||
.error-modal, | .error-modal, | ||||
@@ -326,6 +327,7 @@ html { | |||||
.boost-modal__action-bar, | .boost-modal__action-bar, | ||||
.confirmation-modal__action-bar, | .confirmation-modal__action-bar, | ||||
.mute-modal__action-bar, | .mute-modal__action-bar, | ||||
.block-modal__action-bar, | |||||
.onboarding-modal__paginator, | .onboarding-modal__paginator, | ||||
.error-modal__footer { | .error-modal__footer { | ||||
background: darken($ui-base-color, 6%); | background: darken($ui-base-color, 6%); | ||||
@@ -4533,7 +4533,8 @@ a.status-card.compact:hover { | |||||
.confirmation-modal, | .confirmation-modal, | ||||
.report-modal, | .report-modal, | ||||
.actions-modal, | .actions-modal, | ||||
.mute-modal { | |||||
.mute-modal, | |||||
.block-modal { | |||||
background: lighten($ui-secondary-color, 8%); | background: lighten($ui-secondary-color, 8%); | ||||
color: $inverted-text-color; | color: $inverted-text-color; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
@@ -4587,7 +4588,8 @@ a.status-card.compact:hover { | |||||
.boost-modal__action-bar, | .boost-modal__action-bar, | ||||
.confirmation-modal__action-bar, | .confirmation-modal__action-bar, | ||||
.mute-modal__action-bar { | |||||
.mute-modal__action-bar, | |||||
.block-modal__action-bar { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
background: $ui-secondary-color; | background: $ui-secondary-color; | ||||
@@ -4615,11 +4617,13 @@ a.status-card.compact:hover { | |||||
font-size: 14px; | font-size: 14px; | ||||
} | } | ||||
.mute-modal { | |||||
.mute-modal, | |||||
.block-modal { | |||||
line-height: 24px; | line-height: 24px; | ||||
} | } | ||||
.mute-modal .react-toggle { | |||||
.mute-modal .react-toggle, | |||||
.block-modal .react-toggle { | |||||
vertical-align: middle; | vertical-align: middle; | ||||
} | } | ||||
@@ -4830,33 +4834,35 @@ a.status-card.compact:hover { | |||||
} | } | ||||
.confirmation-modal__action-bar, | .confirmation-modal__action-bar, | ||||
.mute-modal__action-bar { | |||||
.confirmation-modal__secondary-button, | |||||
.confirmation-modal__cancel-button, | |||||
.mute-modal__cancel-button { | |||||
background-color: transparent; | |||||
color: $lighter-text-color; | |||||
font-size: 14px; | |||||
font-weight: 500; | |||||
&:hover, | |||||
&:focus, | |||||
&:active { | |||||
color: darken($lighter-text-color, 4%); | |||||
} | |||||
} | |||||
.mute-modal__action-bar, | |||||
.block-modal__action-bar { | |||||
.confirmation-modal__secondary-button { | .confirmation-modal__secondary-button { | ||||
flex-shrink: 1; | flex-shrink: 1; | ||||
} | } | ||||
} | } | ||||
.confirmation-modal__secondary-button, | |||||
.confirmation-modal__cancel-button, | |||||
.mute-modal__cancel-button, | |||||
.block-modal__cancel-button { | |||||
background-color: transparent; | |||||
color: $lighter-text-color; | |||||
font-size: 14px; | |||||
font-weight: 500; | |||||
&:hover, | |||||
&:focus, | |||||
&:active { | |||||
color: darken($lighter-text-color, 4%); | |||||
} | |||||
} | |||||
.confirmation-modal__container, | .confirmation-modal__container, | ||||
.mute-modal__container, | .mute-modal__container, | ||||
.block-modal__container, | |||||
.report-modal__target { | .report-modal__target { | ||||
padding: 30px; | padding: 30px; | ||||
font-size: 16px; | font-size: 16px; | ||||
text-align: center; | |||||
strong { | strong { | ||||
font-weight: 500; | font-weight: 500; | ||||
@@ -4869,6 +4875,31 @@ a.status-card.compact:hover { | |||||
} | } | ||||
} | } | ||||
.confirmation-modal__container, | |||||
.report-modal__target { | |||||
text-align: center; | |||||
} | |||||
.block-modal, | |||||
.mute-modal { | |||||
&__explanation { | |||||
margin-top: 20px; | |||||
} | |||||
.setting-toggle { | |||||
margin-top: 20px; | |||||
margin-bottom: 24px; | |||||
display: flex; | |||||
align-items: center; | |||||
&__label { | |||||
color: $inverted-text-color; | |||||
margin: 0; | |||||
margin-left: 8px; | |||||
} | |||||
} | |||||
} | |||||
.report-modal__target { | .report-modal__target { | ||||
padding: 15px; | padding: 15px; | ||||