diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 20060f474..afbcd0030 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -243,6 +243,7 @@ class Comment extends React.Component {
assetId={asset.id}
comments={comment.replies}
parentId={comment.id}
+ replyCount={comment.replyCount}
moreComments={comment.replyCount > comment.replies.length}
loadMore={loadMore}/>
diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js
index e33828bc1..66b06495a 100644
--- a/client/coral-embed-stream/src/LoadMore.js
+++ b/client/coral-embed-stream/src/LoadMore.js
@@ -24,22 +24,44 @@ const loadMoreComments = (assetId, comments, loadMore, parentId) => {
});
};
-const LoadMore = ({assetId, comments, loadMore, moreComments, parentId}) => (
- moreComments
- ?
- : null
-);
+class LoadMore extends React.Component {
+
+ componentDidMount () {
+ this.initialState = true;
+ }
+
+ replyCountFormat = (count) => {
+ if (count === 1) {
+ return lang.t('viewReply');
+ }
+
+ if (this.initialState) {
+ return lang.t('viewAllRepliesInitial', count);
+ } else {
+ return lang.t('viewAllReplies', count);
+ }
+ }
+
+ render () {
+ const {assetId, comments, loadMore, moreComments, parentId, replyCount} = this.props;
+ return moreComments
+ ?
+ : null;
+ }
+}
LoadMore.propTypes = {
assetId: PropTypes.string.isRequired,
comments: PropTypes.array.isRequired,
moreComments: PropTypes.bool.isRequired,
+ replyCount: PropTypes.number.isRequired,
loadMore: PropTypes.func.isRequired
};
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 68bac3110..629efd29f 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -425,6 +425,8 @@ button.coral-load-more {
cursor: pointer;
padding: 10px;
border-radius: 2px;
+ line-height: 1em;
+ text-transform: capitalize;
}
button.coral-load-more:hover {
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index d95f5c9ec..fa6899eb8 100644
--- a/client/coral-framework/translations.json
+++ b/client/coral-framework/translations.json
@@ -4,7 +4,6 @@
"successUpdateSettings": "The changes you have made have been applied to the comment stream on this article",
"successNameUpdate": "Your username has been updated",
"contentNotAvailable": "This content is not available",
- "loadMore": "View more",
"bannedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Report, or write comments. Please contact us if you have any questions.",
"editName": {
"msg": "Your account is currently suspended because your username has been deemed inappropriate. To restore your account, please enter a new username. Please contact us if you have any questions.",
@@ -12,6 +11,9 @@
"button": "Submit",
"error": "Usernames can contain letters, numbers and _ only"
},
+ "viewReply": "view reply",
+ "viewAllRepliesInitial": "view all {0} replies",
+ "viewAllReplies": "view {0} replies",
"newCount": "View {0} more {1}",
"comment": "comment",
"comments": "comments",
@@ -43,7 +45,9 @@
"contentNotAvailable": "El contenido no se encuentra disponible",
"bannedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios.",
"editNameMsg": "",
- "loadMore": "Ver más",
+ "viewReply": "",
+ "viewAllRepliesInitial": "",
+ "viewAllReplies": "",
"newCount": "Ver {0} {1} más",
"comment": "commentario",
"comments": "commentarios",