diff --git a/client/coral-admin/src/components/UserDetailComment.css b/client/coral-admin/src/components/UserDetailComment.css index 71cc19640..bdf1ac520 100644 --- a/client/coral-admin/src/components/UserDetailComment.css +++ b/client/coral-admin/src/components/UserDetailComment.css @@ -34,7 +34,7 @@ color: #063b9a; text-decoration: none; font-weight: 500; - letter-spacing: .5px; + letter-spacing: 0.5px; margin-left: 10px; font-size: 13px; margin-left: 5px; @@ -109,7 +109,7 @@ } .external { - font-size: .7em; + font-size: 0.7em; text-decoration: none; color: #063b9a; cursor: pointer; @@ -119,7 +119,7 @@ &:hover { text-decoration: underline; - opacity: .9; + opacity: 0.9; } > i { @@ -139,3 +139,25 @@ margin-right: 5px; } } + +.bodyHistoryToggle { + color: #666; + font-size: 12px; + line-height: 1px; + font-weight: 300; + text-decoration: underline; + &:hover { + cursor: pointer; + } +} + +.editedCommentBody { + padding: 0 5px 5px 5px; +} + +.editedComment { + margin-top: 6px; + font-weight: 300; + font-size: 16px; + overflow-wrap: break-word; +} diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index f98ff3f0f..7e0495b42 100644 --- a/client/coral-admin/src/components/UserDetailComment.js +++ b/client/coral-admin/src/components/UserDetailComment.js @@ -19,6 +19,8 @@ import TimeAgo from 'coral-framework/components/TimeAgo'; import t from 'coral-framework/services/i18n'; class UserDetailComment extends React.Component { + state = { showingEditHistory: false }; + approve = () => this.props.comment.status === 'ACCEPTED' ? null @@ -29,6 +31,29 @@ class UserDetailComment extends React.Component { ? null : this.props.rejectComment({ commentId: this.props.comment.id }); + getBodyHistory = () => { + const bodyHistory = []; + const comment = this.props.comment; + for (let i = 0; i < comment.body_history.length - 1; i++) { + bodyHistory.push( +
+
+ +
+
+ {comment.body_history[i].body} +
+
+ ); + } + + return bodyHistory; + }; + + toggleEditHistory = () => { + this.setState({ showingEditHistory: !this.state.showingEditHistory }); + }; + render() { const { comment, @@ -81,6 +106,14 @@ class UserDetailComment extends React.Component {   ({t('comment.edited')}) +   + {this.state.showingEditHistory + ? t('comment.hide_edit_history') + : t('comment.show_edit_history')} + ) : null} @@ -142,6 +175,14 @@ class UserDetailComment extends React.Component { + + {this.state.showingEditHistory ? ( +
+ {t('comment.edit_history')} + {this.getBodyHistory()} +
+ ) : null} + ); diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js index 4661f3236..0e17e7cc7 100644 --- a/client/coral-admin/src/containers/UserDetailComment.js +++ b/client/coral-admin/src/containers/UserDetailComment.js @@ -42,6 +42,10 @@ export default withFragments({ status_history { type } + body_history { + body + created_at + } ${getSlotFragmentSpreads(slots, 'comment')} ...${getDefinitionName(CommentLabels.fragments.comment)} ...${getDefinitionName(CommentDetails.fragments.comment)} diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css index fc2236167..1c6db1cb3 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.css +++ b/client/coral-admin/src/routes/Moderation/components/Comment.css @@ -62,7 +62,7 @@ font-weight: 300; margin-bottom: 8px; overflow-wrap: break-word; - word-break:break-word; + word-break: break-word; } .body { @@ -103,7 +103,7 @@ color: #063b9a; text-decoration: none; font-weight: 500; - letter-spacing: .5px; + letter-spacing: 0.5px; margin-left: 10px; font-size: 13px; margin-left: 5px; @@ -111,14 +111,14 @@ border-bottom: solid 1px; line-height: 16px; &:hover { - opacity: .9; + opacity: 0.9; cursor: pointer; } } } .username { - color: #393B44; + color: #393b44; text-decoration: none; cursor: pointer; font-weight: 600; @@ -127,12 +127,12 @@ margin-left: -5px; transition: background-color 200ms ease; &:hover { - background-color: #E0E0E0; + background-color: #e0e0e0; } } .external { - font-size: .7em; + font-size: 0.7em; text-decoration: none; color: #063b9a; cursor: pointer; @@ -140,7 +140,7 @@ white-space: nowrap; &:hover { text-decoration: underline; - opacity: .9; + opacity: 0.9; } i { font-size: 12px; @@ -196,3 +196,25 @@ .commentContentFooter { flex: 1; } + +.bodyHistoryToggle { + color: #666; + font-size: 12px; + line-height: 1px; + font-weight: 300; + text-decoration: underline; + &:hover { + cursor: pointer; + } +} + +.editedCommentBody { + padding: 0 5px 5px 5px; +} + +.editedComment { + margin-top: 6px; + font-weight: 300; + font-size: 16px; + overflow-wrap: break-word; +} diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index 798675081..60d23e69f 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/client/coral-admin/src/routes/Moderation/components/Comment.js @@ -22,6 +22,8 @@ import t from 'coral-framework/services/i18n'; class Comment extends React.Component { ref = null; + state = { showingEditHistory: false }; + handleRef = ref => (this.ref = ref); handleFocusOrClick = () => { @@ -45,6 +47,30 @@ class Comment extends React.Component { ? null : this.props.rejectComment({ commentId: this.props.comment.id }); + getBodyHistory = () => { + const bodyHistory = []; + const comment = this.props.comment; + for (let i = 0; i < comment.body_history.length - 1; i++) { + bodyHistory.push( +
+
+ +
+
+ {comment.body_history[i].body} +
+
+ ); + } + + return bodyHistory; + }; + + toggleEditHistory = () => { + this.setState({ showingEditHistory: !this.state.showingEditHistory }); + this.props.clearHeightCache && this.props.clearHeightCache(); + }; + componentDidUpdate(prev) { if (!prev.selected && this.props.selected) { this.ref.focus(); @@ -137,6 +163,14 @@ class Comment extends React.Component {   ({t('comment.edited')}) +   + {this.state.showingEditHistory + ? t('comment.hide_edit_history') + : t('comment.show_edit_history')} + ) : null}
@@ -201,6 +235,14 @@ class Comment extends React.Component {
+ + {this.state.showingEditHistory ? ( +
+ {t('comment.edit_history')} + {this.getBodyHistory()} +
+ ) : null} +