diff options
Diffstat (limited to 'app/assets/javascripts/components/features')
11 files changed, 283 insertions, 38 deletions
diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx index fe110954d..a2ab8172b 100644 --- a/app/assets/javascripts/components/features/account/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx @@ -11,7 +11,8 @@ const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, block: { id: 'account.block', defaultMessage: 'Block' }, follow: { id: 'account.follow', defaultMessage: 'Follow' }, - block: { id: 'account.block', defaultMessage: 'Block' } + block: { id: 'account.block', defaultMessage: 'Block' }, + report: { id: 'account.report', defaultMessage: 'Report' } }); const outerDropdownStyle = { @@ -32,7 +33,9 @@ const ActionBar = React.createClass({ me: React.PropTypes.number.isRequired, onFollow: React.PropTypes.func, onBlock: React.PropTypes.func.isRequired, - onMention: React.PropTypes.func.isRequired + onMention: React.PropTypes.func.isRequired, + onReport: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired }, mixins: [PureRenderMixin], @@ -54,6 +57,10 @@ const ActionBar = React.createClass({ menu.push({ text: intl.formatMessage(messages.block), action: this.props.onBlock }); } + if (account.get('id') !== me) { + menu.push({ text: intl.formatMessage(messages.report), action: this.props.onReport }); + } + return ( <div className='account__action-bar'> <div style={outerDropdownStyle}> diff --git a/app/assets/javascripts/components/features/account_timeline/components/header.jsx b/app/assets/javascripts/components/features/account_timeline/components/header.jsx index ff3e8af2d..0cdfc8b02 100644 --- a/app/assets/javascripts/components/features/account_timeline/components/header.jsx +++ b/app/assets/javascripts/components/features/account_timeline/components/header.jsx @@ -13,7 +13,8 @@ const Header = React.createClass({ me: React.PropTypes.number.isRequired, onFollow: React.PropTypes.func.isRequired, onBlock: React.PropTypes.func.isRequired, - onMention: React.PropTypes.func.isRequired + onMention: React.PropTypes.func.isRequired, + onReport: React.PropTypes.func.isRequired }, mixins: [PureRenderMixin], @@ -30,6 +31,11 @@ const Header = React.createClass({ this.props.onMention(this.props.account, this.context.router); }, + handleReport () { + this.props.onReport(this.props.account); + this.context.router.push('/report'); + }, + render () { const { account, me } = this.props; @@ -50,6 +56,7 @@ const Header = React.createClass({ me={me} onBlock={this.handleBlock} onMention={this.handleMention} + onReport={this.handleReport} /> </div> ); diff --git a/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx b/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx index dca826596..e4ce905fe 100644 --- a/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx +++ b/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx @@ -8,6 +8,7 @@ import { unblockAccount } from '../../../actions/accounts'; import { mentionCompose } from '../../../actions/compose'; +import { initReport } from '../../../actions/reports'; const makeMapStateToProps = () => { const getAccount = makeGetAccount(); @@ -39,6 +40,10 @@ const mapDispatchToProps = dispatch => ({ onMention (account, router) { dispatch(mentionCompose(account, router)); + }, + + onReport (account) { + dispatch(initReport(account)); } }); diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index 46b62964a..9edc01ed7 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -10,7 +10,7 @@ import { debounce } from 'react-decoration'; import UploadButtonContainer from '../containers/upload_button_container'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import Toggle from 'react-toggle'; -import { Motion, spring } from 'react-motion'; +import Collapsable from '../../../components/collapsable'; const messages = defineMessages({ placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, @@ -36,6 +36,8 @@ const ComposeForm = React.createClass({ in_reply_to: ImmutablePropTypes.map, media_count: React.PropTypes.number, me: React.PropTypes.number, + needsPrivacyWarning: React.PropTypes.bool, + mentionedDomains: React.PropTypes.array.isRequired, onChange: React.PropTypes.func.isRequired, onSubmit: React.PropTypes.func.isRequired, onCancelReply: React.PropTypes.func.isRequired, @@ -117,16 +119,29 @@ const ComposeForm = React.createClass({ }, render () { - const { intl } = this.props; - let replyArea = ''; - let publishText = ''; - const disabled = this.props.is_submitting || this.props.is_uploading; + const { intl, needsPrivacyWarning, mentionedDomains } = this.props; + const disabled = this.props.is_submitting || this.props.is_uploading; + + let replyArea = ''; + let publishText = ''; + let privacyWarning = ''; + let reply_to_other = !!this.props.in_reply_to && (this.props.in_reply_to.getIn(['account', 'id']) !== this.props.me); if (this.props.in_reply_to) { replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />; } - let reply_to_other = !!this.props.in_reply_to && (this.props.in_reply_to.getIn(['account', 'id']) !== this.props.me); + if (needsPrivacyWarning) { + privacyWarning = ( + <div className='compose-form__warning'> + <FormattedMessage + id='compose_form.privacy_disclaimer' + defaultMessage='Your private status will be delivered to mentioned users on {domains}. Do you trust {domainsCount, plural, one {that server} other {those servers}} to not leak your status?' + values={{ domains: <strong>{mentionedDomains.join(', ')}</strong>, domainsCount: mentionedDomains.length }} + /> + </div> + ); + } if (this.props.private) { publishText = <span><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>; @@ -136,14 +151,13 @@ const ComposeForm = React.createClass({ return ( <div style={{ padding: '10px' }}> - <Motion defaultStyle={{ opacity: !this.props.spoiler ? 0 : 100, height: !this.props.spoiler ? 50 : 0 }} style={{ opacity: spring(!this.props.spoiler ? 0 : 100), height: spring(!this.props.spoiler ? 0 : 50) }}> - {({ opacity, height }) => - <div className="spoiler-input" style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}> - <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} type="text" className="spoiler-input__input" /> - </div> - } - </Motion> + <Collapsable isVisible={this.props.spoiler} fullHeight={50}> + <div className="spoiler-input"> + <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} type="text" className="spoiler-input__input" /> + </div> + </Collapsable> + {privacyWarning} {replyArea} <AutosuggestTextarea @@ -176,23 +190,19 @@ const ComposeForm = React.createClass({ <span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span> </label> - <Motion defaultStyle={{ opacity: (this.props.private || reply_to_other) ? 0 : 100, height: (this.props.private || reply_to_other) ? 39.5 : 0 }} style={{ opacity: spring((this.props.private || reply_to_other) ? 0 : 100), height: spring((this.props.private || reply_to_other) ? 0 : 39.5) }}> - {({ opacity, height }) => - <label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}> - <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} /> - <span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span> - </label> - } - </Motion> - - <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}> - {({ opacity, height }) => - <label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}> - <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} /> - <span className='compose-form__label__text'><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark media as sensitive' /></span> - </label> - } - </Motion> + <Collapsable isVisible={!(this.props.private || reply_to_other)} fullHeight={39.5}> + <label className='compose-form__label'> + <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} /> + <span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span> + </label> + </Collapsable> + + <Collapsable isVisible={this.props.media_count > 0} fullHeight={39.5}> + <label className='compose-form__label'> + <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} /> + <span className='compose-form__label__text'><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark media as sensitive' /></span> + </label> + </Collapsable> </div> ); } diff --git a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx index c027875cd..2671ea618 100644 --- a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx +++ b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx @@ -19,6 +19,8 @@ const makeMapStateToProps = () => { const getStatus = makeGetStatus(); const mapStateToProps = function (state, props) { + const mentionedUsernamesWithDomains = state.getIn(['compose', 'text']).match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig); + return { text: state.getIn(['compose', 'text']), suggestion_token: state.getIn(['compose', 'suggestion_token']), @@ -34,6 +36,8 @@ const makeMapStateToProps = () => { in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])), media_count: state.getIn(['compose', 'media_attachments']).size, me: state.getIn(['compose', 'me']), + needsPrivacyWarning: state.getIn(['compose', 'private']) && mentionedUsernamesWithDomains !== null, + mentionedDomains: mentionedUsernamesWithDomains !== null ? [...new Set(mentionedUsernamesWithDomains.map(item => item.split('@')[2]))] : [] }; }; diff --git a/app/assets/javascripts/components/features/report/components/status_check_box.jsx b/app/assets/javascripts/components/features/report/components/status_check_box.jsx new file mode 100644 index 000000000..6d976582b --- /dev/null +++ b/app/assets/javascripts/components/features/report/components/status_check_box.jsx @@ -0,0 +1,42 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import emojify from '../../../emoji'; +import Toggle from 'react-toggle'; + +const StatusCheckBox = React.createClass({ + + propTypes: { + status: ImmutablePropTypes.map.isRequired, + checked: React.PropTypes.bool, + onToggle: React.PropTypes.func.isRequired, + disabled: React.PropTypes.bool + }, + + mixins: [PureRenderMixin], + + render () { + const { status, checked, onToggle, disabled } = this.props; + const content = { __html: emojify(status.get('content')) }; + + if (status.get('reblog')) { + return null; + } + + return ( + <div className='status-check-box' style={{ display: 'flex' }}> + <div + className='status__content' + style={{ flex: '1 1 auto', padding: '10px' }} + dangerouslySetInnerHTML={content} + /> + + <div style={{ flex: '0 0 auto', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> + <Toggle checked={checked} onChange={onToggle} disabled={disabled} /> + </div> + </div> + ); + } + +}); + +export default StatusCheckBox; diff --git a/app/assets/javascripts/components/features/report/containers/status_check_box_container.jsx b/app/assets/javascripts/components/features/report/containers/status_check_box_container.jsx new file mode 100644 index 000000000..67ce9d9f3 --- /dev/null +++ b/app/assets/javascripts/components/features/report/containers/status_check_box_container.jsx @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import StatusCheckBox from '../components/status_check_box'; +import { toggleStatusReport } from '../../../actions/reports'; +import Immutable from 'immutable'; + +const mapStateToProps = (state, { id }) => ({ + status: state.getIn(['statuses', id]), + checked: state.getIn(['reports', 'new', 'status_ids'], Immutable.Set()).includes(id) +}); + +const mapDispatchToProps = (dispatch, { id }) => ({ + + onToggle (e) { + dispatch(toggleStatusReport(id, e.target.checked)); + } + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(StatusCheckBox); diff --git a/app/assets/javascripts/components/features/report/index.jsx b/app/assets/javascripts/components/features/report/index.jsx new file mode 100644 index 000000000..3177d28b1 --- /dev/null +++ b/app/assets/javascripts/components/features/report/index.jsx @@ -0,0 +1,130 @@ +import { connect } from 'react-redux'; +import { cancelReport, changeReportComment, submitReport } from '../../actions/reports'; +import { fetchAccountTimeline } from '../../actions/accounts'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Column from '../ui/components/column'; +import Button from '../../components/button'; +import { makeGetAccount } from '../../selectors'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; +import StatusCheckBox from './containers/status_check_box_container'; +import Immutable from 'immutable'; +import ColumnBackButtonSlim from '../../components/column_back_button_slim'; + +const messages = defineMessages({ + heading: { id: 'report.heading', defaultMessage: 'New report' }, + placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' }, + submit: { id: 'report.submit', defaultMessage: 'Submit' } +}); + +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = state => { + const accountId = state.getIn(['reports', 'new', 'account_id']); + + return { + isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']), + account: getAccount(state, accountId), + comment: state.getIn(['reports', 'new', 'comment']), + statusIds: Immutable.OrderedSet(state.getIn(['timelines', 'accounts_timelines', accountId, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])) + }; + }; + + return mapStateToProps; +}; + +const textareaStyle = { + marginBottom: '10px' +}; + +const Report = React.createClass({ + + contextTypes: { + router: React.PropTypes.object + }, + + propTypes: { + isSubmitting: React.PropTypes.bool, + account: ImmutablePropTypes.map, + statusIds: ImmutablePropTypes.list.isRequired, + comment: React.PropTypes.string.isRequired, + dispatch: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired + }, + + mixins: [PureRenderMixin], + + componentWillMount () { + if (!this.props.account) { + this.context.router.replace('/'); + } + }, + + componentDidMount () { + if (!this.props.account) { + return; + } + + this.props.dispatch(fetchAccountTimeline(this.props.account.get('id'))); + }, + + componentWillReceiveProps (nextProps) { + if (this.props.account !== nextProps.account && nextProps.account) { + this.props.dispatch(fetchAccountTimeline(nextProps.account.get('id'))); + } + }, + + handleCommentChange (e) { + this.props.dispatch(changeReportComment(e.target.value)); + }, + + handleSubmit () { + this.props.dispatch(submitReport()); + this.context.router.replace('/'); + }, + + render () { + const { account, comment, intl, statusIds, isSubmitting } = this.props; + + if (!account) { + return null; + } + + return ( + <Column heading={intl.formatMessage(messages.heading)} icon='flag'> + <ColumnBackButtonSlim /> + <div className='report' style={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', boxSizing: 'border-box' }}> + <div className='report__target' style={{ flex: '0 0 auto', padding: '10px' }}> + <FormattedMessage id='report.target' defaultMessage='Reporting' /> + <strong>{account.get('acct')}</strong> + </div> + + <div style={{ flex: '1 1 auto' }} className='scrollable'> + <div> + {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)} + </div> + </div> + + <div style={{ flex: '0 0 160px', padding: '10px' }}> + <textarea + className='report__textarea' + placeholder={intl.formatMessage(messages.placeholder)} + value={comment} + onChange={this.handleCommentChange} + style={textareaStyle} + disabled={isSubmitting} + /> + + <div style={{ marginTop: '10px', overflow: 'hidden' }}> + <div style={{ float: 'right' }}><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div> + </div> + </div> + </div> + </Column> + ); + } + +}); + +export default connect(makeMapStateToProps)(injectIntl(Report)); diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx index 0e92acf55..cc4d5cca4 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -9,7 +9,8 @@ const messages = defineMessages({ mention: { id: 'status.mention', defaultMessage: 'Mention' }, reply: { id: 'status.reply', defaultMessage: 'Reply' }, reblog: { id: 'status.reblog', defaultMessage: 'Reblog' }, - favourite: { id: 'status.favourite', defaultMessage: 'Favourite' } + favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, + report: { id: 'status.report', defaultMessage: 'Report' } }); const ActionBar = React.createClass({ @@ -25,6 +26,7 @@ const ActionBar = React.createClass({ onFavourite: React.PropTypes.func.isRequired, onDelete: React.PropTypes.func.isRequired, onMention: React.PropTypes.func.isRequired, + onReport: React.PropTypes.func, me: React.PropTypes.number.isRequired, intl: React.PropTypes.object.isRequired }, @@ -51,6 +53,11 @@ const ActionBar = React.createClass({ this.props.onMention(this.props.status.get('account'), this.context.router); }, + handleReport () { + this.props.onReport(this.props.status); + this.context.router.push('/report'); + }, + render () { const { status, me, intl } = this.props; @@ -60,6 +67,7 @@ const ActionBar = React.createClass({ menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); } else { menu.push({ text: intl.formatMessage(messages.mention), action: this.handleMentionClick }); + menu.push({ text: intl.formatMessage(messages.report), action: this.handleReport }); } return ( diff --git a/app/assets/javascripts/components/features/status/components/card.jsx b/app/assets/javascripts/components/features/status/components/card.jsx index 1bb281c70..d016212fd 100644 --- a/app/assets/javascripts/components/features/status/components/card.jsx +++ b/app/assets/javascripts/components/features/status/components/card.jsx @@ -53,7 +53,7 @@ const Card = React.createClass({ } return ( - <a href={card.get('url')} className='status-card'> + <a href={card.get('url')} className='status-card' target='_blank' rel='noopener'> {image} <div className='status-card__content' style={contentStyle}> diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index 894fa3176..40c0460a5 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -14,6 +14,7 @@ import { mentionCompose } from '../../actions/compose'; import { deleteStatus } from '../../actions/statuses'; +import { initReport } from '../../actions/reports'; import { makeGetStatus, getStatusAncestors, @@ -65,7 +66,11 @@ const Status = React.createClass({ }, handleFavouriteClick (status) { - this.props.dispatch(favourite(status)); + if (status.get('favourited')) { + this.props.dispatch(unfavourite(status)); + } else { + this.props.dispatch(favourite(status)); + } }, handleReplyClick (status) { @@ -73,7 +78,11 @@ const Status = React.createClass({ }, handleReblogClick (status) { - this.props.dispatch(reblog(status)); + if (status.get('reblogged')) { + this.props.dispatch(unreblog(status)); + } else { + this.props.dispatch(reblog(status)); + } }, handleDeleteClick (status) { @@ -88,6 +97,10 @@ const Status = React.createClass({ this.props.dispatch(openMedia(media, index)); }, + handleReport (status) { + this.props.dispatch(initReport(status.get('account'), status)); + }, + renderChildren (list) { return list.map(id => <StatusContainer key={id} id={id} />); }, @@ -123,7 +136,7 @@ const Status = React.createClass({ {ancestors} <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} /> - <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} /> + <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} onReport={this.handleReport} /> {descendants} </div> |