Merge pull request #385 from ThibG/glitch-soc/features/port-reports-ui-changes

Port reports ui changes to glitch-soc flavour
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
David Yip 2018-03-16 17:13:09 -05:00 committed by GitHub
commit 50f56ba375
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 193 additions and 33 deletions

View File

@ -10,6 +10,7 @@ export const REPORT_SUBMIT_FAIL = 'REPORT_SUBMIT_FAIL';
export const REPORT_STATUS_TOGGLE = 'REPORT_STATUS_TOGGLE'; export const REPORT_STATUS_TOGGLE = 'REPORT_STATUS_TOGGLE';
export const REPORT_COMMENT_CHANGE = 'REPORT_COMMENT_CHANGE'; export const REPORT_COMMENT_CHANGE = 'REPORT_COMMENT_CHANGE';
export const REPORT_FORWARD_CHANGE = 'REPORT_FORWARD_CHANGE';
export function initReport(account, status) { export function initReport(account, status) {
return dispatch => { return dispatch => {
@ -45,6 +46,7 @@ export function submitReport() {
account_id: getState().getIn(['reports', 'new', 'account_id']), account_id: getState().getIn(['reports', 'new', 'account_id']),
status_ids: getState().getIn(['reports', 'new', 'status_ids']), status_ids: getState().getIn(['reports', 'new', 'status_ids']),
comment: getState().getIn(['reports', 'new', 'comment']), comment: getState().getIn(['reports', 'new', 'comment']),
forward: getState().getIn(['reports', 'new', 'forward']),
}).then(response => { }).then(response => {
dispatch(closeModal()); dispatch(closeModal());
dispatch(submitReportSuccess(response.data)); dispatch(submitReportSuccess(response.data));
@ -78,3 +80,10 @@ export function changeReportComment(comment) {
comment, comment,
}; };
}; };
export function changeReportForward(forward) {
return {
type: REPORT_FORWARD_CHANGE,
forward,
};
};

View File

@ -2,6 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import noop from 'lodash/noop';
import StatusContent from 'flavours/glitch/components/status_content';
import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
import Bundle from 'flavours/glitch/features/ui/components/bundle';
export default class StatusCheckBox extends React.PureComponent { export default class StatusCheckBox extends React.PureComponent {
@ -14,18 +18,50 @@ export default class StatusCheckBox extends React.PureComponent {
render () { render () {
const { status, checked, onToggle, disabled } = this.props; const { status, checked, onToggle, disabled } = this.props;
const content = { __html: status.get('contentHtml') }; let media = null;
if (status.get('reblog')) { if (status.get('reblog')) {
return null; return null;
} }
if (status.get('media_attachments').size > 0) {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const video = status.getIn(['media_attachments', 0]);
media = (
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{Component => (
<Component
preview={video.get('preview_url')}
src={video.get('url')}
width={239}
height={110}
inline
sensitive={status.get('sensitive')}
onOpenVideo={noop}
/>
)}
</Bundle>
);
} else {
media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
{Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={noop} />}
</Bundle>
);
}
}
return ( return (
<div className='status-check-box'> <div className='status-check-box'>
<div <div className='status-check-box__status'>
className='status__content' <StatusContent
dangerouslySetInnerHTML={content} status={status}
media={media}
/> />
</div>
<div className='status-check-box-toggle'> <div className='status-check-box-toggle'>
<Toggle checked={checked} onChange={onToggle} disabled={disabled} /> <Toggle checked={checked} onChange={onToggle} disabled={disabled} />

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { changeReportComment, submitReport } from 'flavours/glitch/actions/reports'; import { changeReportComment, changeReportForward, submitReport } from 'flavours/glitch/actions/reports';
import { refreshAccountTimeline } from 'flavours/glitch/actions/timelines'; import { refreshAccountTimeline } from 'flavours/glitch/actions/timelines';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
@ -10,8 +10,11 @@ import StatusCheckBox from 'flavours/glitch/features/report/containers/status_ch
import { OrderedSet } from 'immutable'; import { OrderedSet } from 'immutable';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import Button from 'flavours/glitch/components/button'; import Button from 'flavours/glitch/components/button';
import Toggle from 'react-toggle';
import IconButton from '../../../components/icon_button';
const messages = defineMessages({ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' }, placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
submit: { id: 'report.submit', defaultMessage: 'Submit' }, submit: { id: 'report.submit', defaultMessage: 'Submit' },
}); });
@ -26,6 +29,7 @@ const makeMapStateToProps = () => {
isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']), isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
account: getAccount(state, accountId), account: getAccount(state, accountId),
comment: state.getIn(['reports', 'new', 'comment']), comment: state.getIn(['reports', 'new', 'comment']),
forward: state.getIn(['reports', 'new', 'forward']),
statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])), statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])),
}; };
}; };
@ -42,14 +46,19 @@ export default class ReportModal extends ImmutablePureComponent {
account: ImmutablePropTypes.map, account: ImmutablePropTypes.map,
statusIds: ImmutablePropTypes.orderedSet.isRequired, statusIds: ImmutablePropTypes.orderedSet.isRequired,
comment: PropTypes.string.isRequired, comment: PropTypes.string.isRequired,
forward: PropTypes.bool,
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
handleCommentChange = (e) => { handleCommentChange = e => {
this.props.dispatch(changeReportComment(e.target.value)); this.props.dispatch(changeReportComment(e.target.value));
} }
handleForwardChange = e => {
this.props.dispatch(changeReportForward(e.target.checked));
}
handleSubmit = () => { handleSubmit = () => {
this.props.dispatch(submitReport()); this.props.dispatch(submitReport());
} }
@ -65,26 +74,25 @@ export default class ReportModal extends ImmutablePureComponent {
} }
render () { render () {
const { account, comment, intl, statusIds, isSubmitting } = this.props; const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props;
if (!account) { if (!account) {
return null; return null;
} }
const domain = account.get('acct').split('@')[1];
return ( return (
<div className='modal-root__modal report-modal'> <div className='modal-root__modal report-modal'>
<div className='report-modal__target'> <div className='report-modal__target'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} /> <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
</div> </div>
<div className='report-modal__container'> <div className='report-modal__container'>
<div className='report-modal__statuses'>
<div>
{statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
</div>
</div>
<div className='report-modal__comment'> <div className='report-modal__comment'>
<p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:' /></p>
<textarea <textarea
className='setting-text light' className='setting-text light'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}
@ -92,11 +100,26 @@ export default class ReportModal extends ImmutablePureComponent {
onChange={this.handleCommentChange} onChange={this.handleCommentChange}
disabled={isSubmitting} disabled={isSubmitting}
/> />
{domain && (
<div>
<p><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
<div className='setting-toggle'>
<Toggle id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
<label htmlFor='report-forward' className='setting-toggle__label'><FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /></label>
</div> </div>
</div> </div>
)}
<Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} />
</div>
<div className='report-modal__action-bar'> <div className='report-modal__statuses'>
<Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /> <div>
{statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
</div>
</div>
</div> </div>
</div> </div>
); );

View File

@ -6,6 +6,7 @@ import {
REPORT_CANCEL, REPORT_CANCEL,
REPORT_STATUS_TOGGLE, REPORT_STATUS_TOGGLE,
REPORT_COMMENT_CHANGE, REPORT_COMMENT_CHANGE,
REPORT_FORWARD_CHANGE,
} from 'flavours/glitch/actions/reports'; } from 'flavours/glitch/actions/reports';
import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable'; import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable';
@ -15,6 +16,7 @@ const initialState = ImmutableMap({
account_id: null, account_id: null,
status_ids: ImmutableSet(), status_ids: ImmutableSet(),
comment: '', comment: '',
forward: false,
}), }),
}); });
@ -42,6 +44,8 @@ export default function reports(state = initialState, action) {
}); });
case REPORT_COMMENT_CHANGE: case REPORT_COMMENT_CHANGE:
return state.setIn(['new', 'comment'], action.comment); return state.setIn(['new', 'comment'], action.comment);
case REPORT_FORWARD_CHANGE:
return state.setIn(['new', 'forward'], action.forward);
case REPORT_SUBMIT_REQUEST: case REPORT_SUBMIT_REQUEST:
return state.setIn(['new', 'isSubmitting'], true); return state.setIn(['new', 'isSubmitting'], true);
case REPORT_SUBMIT_FAIL: case REPORT_SUBMIT_FAIL:

View File

@ -476,8 +476,7 @@
.boost-modal__action-bar, .boost-modal__action-bar,
.favourite-modal__action-bar, .favourite-modal__action-bar,
.confirmation-modal__action-bar, .confirmation-modal__action-bar,
.mute-modal__action-bar, .mute-modal__action-bar {
.report-modal__action-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: $ui-secondary-color; background: $ui-secondary-color;
@ -523,21 +522,103 @@
vertical-align: middle; vertical-align: middle;
} }
.report-modal {
width: 90vw;
max-width: 700px;
}
.report-modal__container {
display: flex;
border-top: 1px solid $ui-secondary-color;
@media screen and (max-width: 480px) {
flex-wrap: wrap;
overflow-y: auto;
}
}
.report-modal__statuses, .report-modal__statuses,
.report-modal__comment { .report-modal__comment {
padding: 10px; box-sizing: border-box;
width: 50%;
@media screen and (max-width: 480px) {
width: 100%;
}
} }
.report-modal__statuses { .report-modal__statuses {
flex: 1 1 auto;
min-height: 20vh; min-height: 20vh;
max-height: 40vh; max-height: 40vh;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@media screen and (max-width: 480px) {
max-height: 10vh;
}
} }
.report-modal__comment { .report-modal__comment {
padding: 20px;
border-right: 1px solid $ui-secondary-color;
max-width: 320px;
p {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
}
.setting-text { .setting-text {
margin-top: 10px; display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $ui-base-color;
background: $white;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
margin-bottom: 20px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
}
}
.setting-toggle {
margin-top: 20px;
margin-bottom: 24px;
&__label {
color: $ui-base-color;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
padding: 10px;
max-width: 100%;
order: 2;
.setting-toggle {
margin-bottom: 4px;
}
}
}
.report-modal__target {
padding: 20px;
.media-modal__close {
top: 19px;
right: 15px;
} }
} }

View File

@ -8,7 +8,6 @@
padding: 0 12px; padding: 0 12px;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: $primary-text-color;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
overflow: visible; overflow: visible;
@ -319,18 +318,26 @@
border-bottom: 1px solid $ui-secondary-color; border-bottom: 1px solid $ui-secondary-color;
display: flex; display: flex;
.status__content { .status-check-box__status {
flex: 1 1 auto; margin: 10px 0 10px 10px;
padding: 10px; flex: 1;
overflow: hidden;
text-overflow: ellipsis; .media-gallery {
white-space: nowrap; max-width: 250px;
}
.status__content { .status__content {
color: #3a3a3a; padding: 0;
a { white-space: normal;
color: #005aa9;
} }
.video-player {
margin-top: 8px;
max-width: 250px;
}
.media-gallery__item-thumbnail {
cursor: default;
} }
} }
} }