diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js index c5a11b642..8d9f6b7e0 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js @@ -10,9 +10,9 @@ const ModerationHeader = props => ( props.asset ?
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 59f47faad..627cde5e4 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -84,11 +84,10 @@ span { margin-bottom: -1px; .settingsButton { - i { - vertical-align: middle; - margin-left: 10px; - margin-top: -4px; - } + vertical-align: middle; + margin-left: 10px; + margin-top: -4px; + font-size: 16px; } .moderateAsset { @@ -114,7 +113,15 @@ span { } &:nth-child(2) { - text-align: center; + span { + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 344px; + display: inline-block; + vertical-align: top; + } } &:last-child { diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js index fe3a1faf9..884e30e0c 100644 --- a/client/coral-admin/src/graphql/mutations/index.js +++ b/client/coral-admin/src/graphql/mutations/index.js @@ -22,7 +22,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, { commentId, status: 'ACCEPTED' }, - refetchQueries: ['ModQueue'] + updateQueries: { + ModQueue: (oldData) => { + const premod = oldData.premod.filter(c => c.id !== commentId); + const flagged = oldData.flagged.filter(c => c.id !== commentId); + const rejected = oldData.rejected.filter(c => c.id !== commentId); + const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount; + const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount; + const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount; + + return { + ...oldData, + premodCount, + flaggedCount, + rejectedCount, + premod, + flagged, + rejected, + }; + } + } }); }, rejectComment: ({commentId}) => { @@ -31,7 +50,27 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, { commentId, status: 'REJECTED' }, - refetchQueries: ['ModQueue'] + updateQueries: { + ModQueue: (oldData) => { + const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0]; + const rejected = [comment].concat(oldData.rejected); + const premod = oldData.premod.filter(c => c.id !== commentId); + const flagged = oldData.flagged.filter(c => c.id !== commentId); + const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount; + const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount; + const rejectedCount = oldData.rejectedCount + 1; + + return { + ...oldData, + premodCount, + flaggedCount, + rejectedCount, + premod, + flagged, + rejected + }; + } + } }); } }) diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index 537d899cd..45110f407 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -32,18 +32,30 @@ class FlagButton extends Component { if (flagged) { this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true}); deleteAction(localPost || flag.current_user.id); + } else if (this.state.showMenu){ + this.closeMenu(); } else { - this.setState({showMenu: !this.state.showMenu}); + this.setState({showMenu: true}); } } + closeMenu = () => { + this.setState({ + showMenu: false, + itemType: '', + reason: '', + message: '', + step: 0 + }); + } + onPopupContinue = () => { const {postFlag, postDontAgree, id, author_id} = this.props; const {itemType, reason, step, posted, message} = this.state; // Proceed to the next step or close the menu if we've reached the end if (step + 1 >= this.props.getPopupMenu.length) { - this.setState({showMenu: false}); + this.closeMenu(); } else { this.setState({step: step + 1}); } @@ -114,7 +126,7 @@ class FlagButton extends Component { } handleClickOutside () { - this.setState({showMenu: false}); + this.closeMenu(); } render () { diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js index 65bf52f72..11432c753 100644 --- a/client/coral-ui/components/Icon.js +++ b/client/coral-ui/components/Icon.js @@ -1,7 +1,7 @@ import React from 'react'; import {Icon as IconMDL} from 'react-mdl'; -const Icon = ({className, name}) => ( +const Icon = ({className = '', name}) => (