diff --git a/app/javascript/flavours/glitch/actions/reports.js b/app/javascript/flavours/glitch/actions/reports.js
index ad4fd18a9..80c3b3280 100644
--- a/app/javascript/flavours/glitch/actions/reports.js
+++ b/app/javascript/flavours/glitch/actions/reports.js
@@ -10,6 +10,7 @@ export const REPORT_SUBMIT_FAIL = 'REPORT_SUBMIT_FAIL';
export const REPORT_STATUS_TOGGLE = 'REPORT_STATUS_TOGGLE';
export const REPORT_COMMENT_CHANGE = 'REPORT_COMMENT_CHANGE';
+export const REPORT_FORWARD_CHANGE = 'REPORT_FORWARD_CHANGE';
export function initReport(account, status) {
return dispatch => {
@@ -45,6 +46,7 @@ export function submitReport() {
account_id: getState().getIn(['reports', 'new', 'account_id']),
status_ids: getState().getIn(['reports', 'new', 'status_ids']),
comment: getState().getIn(['reports', 'new', 'comment']),
+ forward: getState().getIn(['reports', 'new', 'forward']),
}).then(response => {
dispatch(closeModal());
dispatch(submitReportSuccess(response.data));
@@ -78,3 +80,10 @@ export function changeReportComment(comment) {
comment,
};
};
+
+export function changeReportForward(forward) {
+ return {
+ type: REPORT_FORWARD_CHANGE,
+ forward,
+ };
+};
diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js
index cc9232201..d72a0fd07 100644
--- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js
+++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js
@@ -2,6 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
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 {
@@ -14,18 +18,50 @@ export default class StatusCheckBox extends React.PureComponent {
render () {
const { status, checked, onToggle, disabled } = this.props;
- const content = { __html: status.get('contentHtml') };
+ let media = null;
if (status.get('reblog')) {
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 = (
+
+ {Component => (
+
+ )}
+
+ );
+ } else {
+ media = (
+
+ {Component => }
+
+ );
+ }
+ }
+
return (
-
+
+
+
diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.js b/app/javascript/flavours/glitch/features/ui/components/report_modal.js
index b4dc1e3d6..b5fc33d03 100644
--- a/app/javascript/flavours/glitch/features/ui/components/report_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.js
@@ -1,6 +1,6 @@
import React from 'react';
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 PropTypes from 'prop-types';
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 ImmutablePureComponent from 'react-immutable-pure-component';
import Button from 'flavours/glitch/components/button';
+import Toggle from 'react-toggle';
+import IconButton from '../../../components/icon_button';
const messages = defineMessages({
+ close: { id: 'lightbox.close', defaultMessage: 'Close' },
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
submit: { id: 'report.submit', defaultMessage: 'Submit' },
});
@@ -26,6 +29,7 @@ const makeMapStateToProps = () => {
isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
account: getAccount(state, accountId),
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'])),
};
};
@@ -42,14 +46,19 @@ export default class ReportModal extends ImmutablePureComponent {
account: ImmutablePropTypes.map,
statusIds: ImmutablePropTypes.orderedSet.isRequired,
comment: PropTypes.string.isRequired,
+ forward: PropTypes.bool,
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
- handleCommentChange = (e) => {
+ handleCommentChange = e => {
this.props.dispatch(changeReportComment(e.target.value));
}
+ handleForwardChange = e => {
+ this.props.dispatch(changeReportForward(e.target.checked));
+ }
+
handleSubmit = () => {
this.props.dispatch(submitReport());
}
@@ -65,26 +74,25 @@ export default class ReportModal extends ImmutablePureComponent {
}
render () {
- const { account, comment, intl, statusIds, isSubmitting } = this.props;
+ const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props;
if (!account) {
return null;
}
+ const domain = account.get('acct').split('@')[1];
+
return (
+
{account.get('acct')} }} />
-
-
- {statusIds.map(statusId => )}
-
-
-
-
-
-
+ {domain && (
+
+ )}
+
+
+
+
+
+
+ {statusIds.map(statusId => )}
+
+
);
diff --git a/app/javascript/flavours/glitch/reducers/reports.js b/app/javascript/flavours/glitch/reducers/reports.js
index c18fbcdc6..fdcfb14a0 100644
--- a/app/javascript/flavours/glitch/reducers/reports.js
+++ b/app/javascript/flavours/glitch/reducers/reports.js
@@ -6,6 +6,7 @@ import {
REPORT_CANCEL,
REPORT_STATUS_TOGGLE,
REPORT_COMMENT_CHANGE,
+ REPORT_FORWARD_CHANGE,
} from 'flavours/glitch/actions/reports';
import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable';
@@ -15,6 +16,7 @@ const initialState = ImmutableMap({
account_id: null,
status_ids: ImmutableSet(),
comment: '',
+ forward: false,
}),
});
@@ -42,6 +44,8 @@ export default function reports(state = initialState, action) {
});
case REPORT_COMMENT_CHANGE:
return state.setIn(['new', 'comment'], action.comment);
+ case REPORT_FORWARD_CHANGE:
+ return state.setIn(['new', 'forward'], action.forward);
case REPORT_SUBMIT_REQUEST:
return state.setIn(['new', 'isSubmitting'], true);
case REPORT_SUBMIT_FAIL:
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 1ac399fa1..d424b1eda 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -476,8 +476,7 @@
.boost-modal__action-bar,
.favourite-modal__action-bar,
.confirmation-modal__action-bar,
-.mute-modal__action-bar,
-.report-modal__action-bar {
+.mute-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
@@ -523,21 +522,103 @@
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__comment {
- padding: 10px;
+ box-sizing: border-box;
+ width: 50%;
+
+ @media screen and (max-width: 480px) {
+ width: 100%;
+ }
}
.report-modal__statuses {
+ flex: 1 1 auto;
min-height: 20vh;
max-height: 40vh;
overflow-y: auto;
overflow-x: hidden;
+
+ @media screen and (max-width: 480px) {
+ max-height: 10vh;
+ }
}
.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 {
- 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;
}
}
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index ba42703ab..e0c106d9b 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -8,7 +8,6 @@
padding: 0 12px;
font-size: 15px;
line-height: 20px;
- color: $primary-text-color;
word-wrap: break-word;
font-weight: 400;
overflow: visible;
@@ -319,18 +318,26 @@
border-bottom: 1px solid $ui-secondary-color;
display: flex;
- .status__content {
- flex: 1 1 auto;
- padding: 10px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ .status-check-box__status {
+ margin: 10px 0 10px 10px;
+ flex: 1;
+
+ .media-gallery {
+ max-width: 250px;
+ }
.status__content {
- color: #3a3a3a;
- a {
- color: #005aa9;
- }
+ padding: 0;
+ white-space: normal;
+ }
+
+ .video-player {
+ margin-top: 8px;
+ max-width: 250px;
+ }
+
+ .media-gallery__item-thumbnail {
+ cursor: default;
}
}
}