diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index da71ac04a..4b86ec7d7 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -16,7 +16,7 @@ const FlagWidget = (props) => {
{lang.t('streams.article')}
- {lang.t('dashboard.flags')}
+ {lang.t('dashboard.flags')}
@@ -27,20 +27,21 @@ const FlagWidget = (props) => {
return (
-
+
{asset.title}
{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}
-
- {flagSummary ? flagSummary.actionCount : 0}
-
+ {flagSummary ? flagSummary.actionCount : 0}
+
+
+ Moderate
);
})
- : {lang.t('dashboard.no_flags')}
+ : {lang.t('dashboard.no_flags')}
}
{ /* rows in a table with a fixed height will expand and ignore height.
this extra row will expand to fill the extra space. */
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index 25e851966..d52676ae4 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -17,7 +17,7 @@ const LikeWidget = (props) => {
{lang.t('streams.article')}
- {lang.t('modqueue.likes')}
+ {lang.t('modqueue.likes')}
@@ -28,20 +28,21 @@ const LikeWidget = (props) => {
return (
-
+
{asset.title}
{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}
-
- {likeSummary ? likeSummary.actionCount : 0}
-
+ {likeSummary ? likeSummary.actionCount : 0}
+
+
+ Moderate
);
})
- : {lang.t('dashboard.no_likes')}
+ : {lang.t('dashboard.no_likes')}
}
{ /* rows in a table with a fixed height will expand and ignore height.
this extra row will expand to fill the extra space. */
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
index cb764d9cc..3170cf332 100644
--- a/client/coral-admin/src/containers/Dashboard/Widget.css
+++ b/client/coral-admin/src/containers/Dashboard/Widget.css
@@ -55,11 +55,26 @@
padding: 10px;
}
+.widgetTable tbody td:last-child {
+ padding-top: 0;
+}
+
.linkToAsset {
display: block;
text-decoration: none;
}
+.linkToModerate {
+ background-color: #e0e0e0;
+ padding: 10px 14px;
+ text-decoration: none;
+ color: black;
+}
+
+.linkToModerate:hover {
+ background-color: #ccc;
+}
+
.lede {
font-size: 0.9em;
color: #aaa;
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 25a7a9511..2f43911b1 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -26,23 +26,21 @@ class ModerationContainer extends Component {
componentWillMount() {
const {toggleModal, singleView} = this.props;
- const {selectedIndex} = this.state;
-
+
this.props.fetchSettings();
key('s', () => singleView());
key('shift+/', () => toggleModal(true));
key('esc', () => toggleModal(false));
- key('j', () => this.setState({selectedIndex: selectedIndex + 1}));
- key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex}));
- key('r', () => this.moderate(false));
- key('t', () => this.moderate(true));
+ key('j', this.select(true));
+ key('k', this.select(false));
+ key('r', this.moderate(false));
+ key('t', this.moderate(true));
}
- moderate = (accept) => {
- const {data, route, acceptComment, rejectComment} = this.props;
+ moderate = (accept) => () => {
+ const {acceptComment, rejectComment} = this.props;
const {selectedIndex} = this.state;
- const activeTab = route.path === ':id' ? 'premod' : route.path;
- const comments = data[activeTab];
+ const comments = this.getComments();
const commentId = {commentId: comments[selectedIndex].id};
if (accept) {
@@ -50,7 +48,30 @@ class ModerationContainer extends Component {
} else {
rejectComment(commentId);
}
+ }
+ getComments = () => {
+ const {data, route} = this.props;
+ const activeTab = route.path === ':id' ? 'premod' : route.path;
+ return data[activeTab];
+ }
+
+ select = (next) => () => {
+ if (next) {
+ this.setState(prevState =>
+ ({
+ ...prevState,
+ selectedIndex: prevState.selectedIndex < this.getComments().length - 1
+ ? prevState.selectedIndex + 1 : prevState.selectedIndex
+ }));
+ } else {
+ this.setState(prevState =>
+ ({
+ ...prevState,
+ selectedIndex: prevState.selectedIndex > 0 ?
+ prevState.selectedIndex - 1 : prevState.selectedIndex
+ }));
+ }
}
componentWillUnmount() {
diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 7bc1a21f4..6966d82ab 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/client/coral-embed-stream/src/Comment.css
@@ -3,5 +3,10 @@
}
.Comment {
-
+
+}
+
+.pendingComment {
+ filter: blur(2px);
+ pointer-events: none;
}
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 72449c906..0a3cdb78b 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -116,6 +116,7 @@ class Comment extends React.Component {
const dontagree = getActionSummary('DontAgreeActionSummary', comment);
let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
+ commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
// call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
const notifyOnError = (fn, errorToMessage) => async () => {
diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
index 7dd8bf12b..04dba8402 100644
--- a/client/coral-framework/graphql/mutations/index.js
+++ b/client/coral-framework/graphql/mutations/index.js
@@ -35,7 +35,7 @@ export const postComment = graphql(POST_COMMENT, {
action_summaries: [],
tags: [],
status: null,
- id: `${Date.now()}_temp_id`
+ id: 'pending'
}
}
},