From c61b249a375e225ca45363096468a87d29c26f21 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Thu, 16 Mar 2017 14:37:29 -0600 Subject: [PATCH 1/3] show different copy per # of replies --- client/coral-embed-stream/src/Comment.js | 1 + client/coral-embed-stream/src/LoadMore.js | 44 +++++++++++++++------ client/coral-embed-stream/style/default.css | 2 + client/coral-framework/translations.json | 8 +++- 4 files changed, 42 insertions(+), 13 deletions(-) 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", From 528e2ff85135c2802d78242248dd53ce3919cba6 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Thu, 16 Mar 2017 14:54:09 -0600 Subject: [PATCH 2/3] add spanish translations --- client/coral-framework/translations.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json index fa6899eb8..ee04dcadb 100644 --- a/client/coral-framework/translations.json +++ b/client/coral-framework/translations.json @@ -45,9 +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": "", - "viewReply": "", - "viewAllRepliesInitial": "", - "viewAllReplies": "", + "viewReply": "ver respuesta", + "viewAllRepliesInitial": "ver todas las {0} respuestas", + "viewAllReplies": "ver {0} respuestas", "newCount": "Ver {0} {1} más", "comment": "commentario", "comments": "commentarios", From a7cdce3579e85c4873ef6061be81321d55b27ebb Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Thu, 16 Mar 2017 15:35:38 -0600 Subject: [PATCH 3/3] differentiate between top- and comment-level LoadMore --- client/coral-embed-stream/src/Comment.js | 3 ++- client/coral-embed-stream/src/Embed.js | 1 + client/coral-embed-stream/src/LoadMore.js | 7 ++++--- client/coral-framework/translations.json | 2 ++ 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index afbcd0030..06352ec2f 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -232,7 +232,7 @@ class Comment extends React.Component { removeCommentTag={removeCommentTag} showSignInDialog={showSignInDialog} reactKey={reply.id} - key={reply.id} + key={`${reply.id}:${depth}`} comment={reply} />; }) } @@ -243,6 +243,7 @@ class Comment extends React.Component { assetId={asset.id} comments={comment.replies} parentId={comment.id} + topLevel={false} replyCount={comment.replyCount} moreComments={comment.replyCount > comment.replies.length} loadMore={loadMore}/> diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 0b9bc4fc5..ce6dc638a 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -221,6 +221,7 @@ class Embed extends Component { comments={asset.comments} /> asset.comments.length} diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js index 66b06495a..bf89793d0 100644 --- a/client/coral-embed-stream/src/LoadMore.js +++ b/client/coral-embed-stream/src/LoadMore.js @@ -43,7 +43,7 @@ class LoadMore extends React.Component { } render () { - const {assetId, comments, loadMore, moreComments, parentId, replyCount} = this.props; + const {assetId, comments, loadMore, moreComments, parentId, replyCount, topLevel} = this.props; return moreComments ? : null; } @@ -61,7 +61,8 @@ LoadMore.propTypes = { assetId: PropTypes.string.isRequired, comments: PropTypes.array.isRequired, moreComments: PropTypes.bool.isRequired, - replyCount: PropTypes.number.isRequired, + topLevel: PropTypes.bool.isRequired, + replyCount: PropTypes.number, loadMore: PropTypes.func.isRequired }; diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json index ee04dcadb..b327a7097 100644 --- a/client/coral-framework/translations.json +++ b/client/coral-framework/translations.json @@ -11,6 +11,7 @@ "button": "Submit", "error": "Usernames can contain letters, numbers and _ only" }, + "viewMoreComments": "view more comments", "viewReply": "view reply", "viewAllRepliesInitial": "view all {0} replies", "viewAllReplies": "view {0} replies", @@ -45,6 +46,7 @@ "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": "", + "viewMoreComments": "Var commentarios más", "viewReply": "ver respuesta", "viewAllRepliesInitial": "ver todas las {0} respuestas", "viewAllReplies": "ver {0} respuestas",