diff --git a/client/coral-admin/src/components/CommentDetail.css b/client/coral-admin/src/components/CommentDetail.css index 259d4e1c5..4806b9522 100644 --- a/client/coral-admin/src/components/CommentDetail.css +++ b/client/coral-admin/src/components/CommentDetail.css @@ -1,5 +1,4 @@ .root { - margin-left: 16px; } .headerContainer { @@ -25,6 +24,10 @@ .details { padding: 0 20px 16px; font-size: 12px; + + &:empty { + display: none; + } } .icon { diff --git a/client/coral-admin/src/components/CommentDetails.css b/client/coral-admin/src/components/CommentDetails.css index ff3679cc7..c34a32cb3 100644 --- a/client/coral-admin/src/components/CommentDetails.css +++ b/client/coral-admin/src/components/CommentDetails.css @@ -1,6 +1,6 @@ .root { - margin-top: 10px; - padding-top: 10px; + min-height: 24px; + padding: 0 16px; } .moreDetail { diff --git a/client/coral-admin/src/components/CommentDetails.js b/client/coral-admin/src/components/CommentDetails.js index d984ce0c1..cd504a40f 100644 --- a/client/coral-admin/src/components/CommentDetails.js +++ b/client/coral-admin/src/components/CommentDetails.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import styles from './CommentDetails.css'; import t from 'coral-framework/services/i18n'; import Slot from 'coral-framework/components/Slot'; +import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty'; class CommentDetails extends Component { state = { @@ -32,13 +33,25 @@ class CommentDetails extends Component { return (
- {showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')} + + + {showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')} + + + {showDetail && }
); } diff --git a/client/coral-admin/src/components/FlagDetails.css b/client/coral-admin/src/components/FlagDetails.css deleted file mode 100644 index 302e24858..000000000 --- a/client/coral-admin/src/components/FlagDetails.css +++ /dev/null @@ -1,43 +0,0 @@ - -.info { - vertical-align: middle; - list-style: none; - display: inline-block; - padding: 0; - font-size: 12px; -} - -.detail { - padding: 0; - list-style: none; - font-size: 12px; - font-weight: 500; -} - -.subDetail { - margin-left:10px; - padding: 0; - list-style: none; - font-size: 12px; - font-weight: normal; - color: #888; -} - -.lessDetail { - display: inline-block; - margin-right: 10px; -} - -.username { - color: #393B44; - text-decoration: none; - cursor: pointer; - font-weight: 600; - padding: 2px 5px; - border-radius: 2px; - margin-left: -5px; - transition: background-color 200ms ease; - &:hover { - background-color: #E0E0E0; - } -} diff --git a/client/coral-admin/src/components/FlagDetails.js b/client/coral-admin/src/components/FlagDetails.js deleted file mode 100644 index 74bff8f24..000000000 --- a/client/coral-admin/src/components/FlagDetails.js +++ /dev/null @@ -1,75 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import styles from './FlagDetails.css'; -import t from 'coral-framework/services/i18n'; -import CommentDetail from './CommentDetail'; - -class FlagDetails extends Component { - - render() { - const {actions, viewUserDetail, more} = this.props; - const summaries = actions.reduce((sum, action) => { - if (!(action.reason in sum)) { - sum[action.reason] = {count: 0, userFlagged: false, actions: []}; - } - sum[action.reason].count++; - if (action.user) { - sum[action.reason].userFlagged = true; - } - sum[action.reason].actions.push(action); - return sum; - }, {}); - - const userFlagReasons = Object.keys(summaries).filter((reason) => summaries[reason].userFlagged); - - return ( - - {Object.keys(summaries).map((reason) => -
  • - {reason} {summaries[reason].userFlagged && `(${summaries[reason].count})`} -
  • - )} - - }> - {more && userFlagReasons.length > 0 && ( - - )} -
    - ); - } -} - -FlagDetails.propTypes = { - more: PropTypes.bool, - actions: PropTypes.arrayOf(PropTypes.shape({ - message: PropTypes.string, - user: PropTypes.shape({username: PropTypes.string}) - })).isRequired, - viewUserDetail: PropTypes.func.isRequired, -}; - -export default FlagDetails; diff --git a/client/coral-admin/src/components/UserDetailComment.css b/client/coral-admin/src/components/UserDetailComment.css index d1e2b007a..50e37e28e 100644 --- a/client/coral-admin/src/components/UserDetailComment.css +++ b/client/coral-admin/src/components/UserDetailComment.css @@ -1,4 +1,5 @@ .root { + position: relative; display: block; margin: 0; border-bottom: 1px solid #e0e0e0; diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index 29f3242a1..f8d81ce8b 100644 --- a/client/coral-admin/src/components/UserDetailComment.js +++ b/client/coral-admin/src/components/UserDetailComment.js @@ -70,7 +70,7 @@ class UserDetailComment extends React.Component {
    -

    +

    {t('comment.view_context')} -

    +
    diff --git a/client/coral-admin/src/containers/CommentDetails.js b/client/coral-admin/src/containers/CommentDetails.js index a72a8eee4..cf8c2c307 100644 --- a/client/coral-admin/src/containers/CommentDetails.js +++ b/client/coral-admin/src/containers/CommentDetails.js @@ -5,6 +5,7 @@ import withFragments from 'coral-framework/hocs/withFragments'; const slots = [ 'adminCommentDetailArea', + 'adminCommentMoreDetails', ]; export default withFragments({ diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css index a1862640f..10cc707fb 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.css +++ b/client/coral-admin/src/routes/Moderation/components/Comment.css @@ -58,6 +58,7 @@ font-size: 14px; line-height: 1.5; font-weight: 300; + margin-bottom: 8px; } .body { diff --git a/plugins/talk-plugin-flag-details/client/components/FlagDetails.css b/plugins/talk-plugin-flag-details/client/components/FlagDetails.css index 302e24858..3b59653c2 100644 --- a/plugins/talk-plugin-flag-details/client/components/FlagDetails.css +++ b/plugins/talk-plugin-flag-details/client/components/FlagDetails.css @@ -5,9 +5,11 @@ display: inline-block; padding: 0; font-size: 12px; + margin: 0; } .detail { + margin: 0; padding: 0; list-style: none; font-size: 12px; diff --git a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js index 0d415217d..eadd779d9 100644 --- a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js +++ b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import styles from './FlagDetails.css'; import {t} from 'plugin-api/beta/client/services'; import CommentDetail from 'coral-admin/src/components/CommentDetail'; +import {Slot, IfSlotIsNotEmpty} from 'plugin-api/beta/client/components'; class FlagDetails extends Component { render() { - const {comment: {actions}, viewUserDetail, more} = this.props; + const {comment: {actions}, viewUserDetail, more, data, root, comment} = this.props; const flagActions = actions && actions.filter((a) => a.__typename === 'FlagAction'); const summaries = flagActions.reduce((sum, action) => { @@ -24,6 +25,11 @@ class FlagDetails extends Component { const userFlagReasons = Object.keys(summaries).filter((reason) => summaries[reason].userFlagged); + const queryData = { + root, + comment, + }; + return ( )} + {more && ( + + + + )} ); } diff --git a/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js b/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js index 2ee88d2dd..5c22e66d5 100644 --- a/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js +++ b/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js @@ -4,6 +4,11 @@ import {bindActionCreators} from 'redux'; import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs'; import {viewUserDetail} from 'coral-admin/src/actions/userDetail'; import {connect} from 'react-redux'; +import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils'; + +const slots = [ + 'adminCommentMoreFlagDetails', +]; const mapDispatchToProps = (dispatch) => ({ ...bindActionCreators({ @@ -14,6 +19,12 @@ const mapDispatchToProps = (dispatch) => ({ const enhance = compose( connect(null, mapDispatchToProps), withFragments({ + root: gql` + fragment CoralAdmin_FlagDetails_root on RootQuery { + __typename + ${getSlotFragmentSpreads(slots, 'root')} + } + `, comment: gql` fragment CoralAdmin_FlagDetails_comment on Comment { actions { @@ -28,6 +39,7 @@ const enhance = compose( } } } + ${getSlotFragmentSpreads(slots, 'comment')} } ` }), diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js new file mode 100644 index 000000000..5c98fc29d --- /dev/null +++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js @@ -0,0 +1,10 @@ +import {compose} from 'react-apollo'; +import {excludeIf} from 'plugin-api/beta/client/hocs'; +import ToxicDetail from './ToxicDetail'; +import {isToxic} from '../utils'; + +const enhance = compose( + excludeIf(({comment: {toxicity, actions}}) => toxicity === null || isToxic(actions)), +); + +export default enhance(ToxicDetail); diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js new file mode 100644 index 000000000..a43501ea4 --- /dev/null +++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js @@ -0,0 +1,10 @@ +import {compose} from 'react-apollo'; +import {excludeIf} from 'plugin-api/beta/client/hocs'; +import ToxicDetail from './ToxicDetail'; +import {isToxic} from '../utils'; + +const enhance = compose( + excludeIf(({comment: {toxicity, actions}}) => toxicity === null || !isToxic(actions)), +); + +export default enhance(ToxicDetail); diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js index 28f75de37..78681261a 100644 --- a/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js +++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js @@ -1,5 +1,5 @@ import {compose, gql} from 'react-apollo'; -import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs'; +import {withFragments} from 'plugin-api/beta/client/hocs'; import ToxicDetail from '../components/ToxicDetail'; const enhance = compose( @@ -15,7 +15,6 @@ const enhance = compose( } }`, }), - excludeIf(({comment: {toxicity}, more}) => !more || toxicity === null), ); export default enhance(ToxicDetail); diff --git a/plugins/talk-plugin-toxic-comments/client/index.js b/plugins/talk-plugin-toxic-comments/client/index.js index 1db520891..742e002d1 100644 --- a/plugins/talk-plugin-toxic-comments/client/index.js +++ b/plugins/talk-plugin-toxic-comments/client/index.js @@ -1,13 +1,15 @@ import translations from './translations.yml'; import CheckToxicityHook from './containers/CheckToxicityHook'; import ToxicLabel from './containers/ToxicLabel'; -import ToxicDetail from './containers/ToxicDetail'; +import ToxicCommentDetail from './containers/ToxicCommentDetail'; +import ToxicCommentFlagDetail from './containers/ToxicCommentFlagDetail'; export default { translations, slots: { commentInputDetailArea: [CheckToxicityHook], adminCommentLabels: [ToxicLabel], - adminCommentDetailArea: [ToxicDetail], + adminCommentMoreDetails: [ToxicCommentDetail], + adminCommentMoreFlagDetails: [ToxicCommentFlagDetail], }, };