diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css index 6dc8eee80..e32b7333b 100644 --- a/client/coral-embed-stream/src/components/Comment.css +++ b/client/coral-embed-stream/src/components/Comment.css @@ -50,11 +50,6 @@ pointer-events: none; } -.bylineSecondary { - color: #696969; - font-size: 12px; -} - .editedMarker { font-style: italic; } diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index c6a3b740d..9d3cb0218 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import TagLabel from 'talk-plugin-tag-label/TagLabel'; -import PubDate from 'talk-plugin-pubdate/PubDate'; +import CommentTimestamp from 'coral-framework/components/CommentTimestamp'; import {ReplyBox, ReplyButton} from 'talk-plugin-replies'; import {FlagComment} from 'talk-plugin-flags'; import {can} from 'coral-framework/services/perms'; @@ -465,7 +465,14 @@ export default class Comment extends React.Component { /> - + { (comment.editing && comment.editing.edited) ?  ({t('comment.edited')}) diff --git a/client/coral-embed-stream/src/components/LoadMore.js b/client/coral-embed-stream/src/components/LoadMore.js index eb4a5ce65..4e9807751 100644 --- a/client/coral-embed-stream/src/components/LoadMore.js +++ b/client/coral-embed-stream/src/components/LoadMore.js @@ -9,11 +9,8 @@ class LoadMore extends React.Component { if (!count) { return t('framework.show_all_replies'); } - if (count === 1) { - return t('framework.show_1_more_reply'); - } - return t('framework.show_x_more_replies', count); + return t('framework.show_more_replies'); } render () { diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js index bd3160643..694314bd7 100644 --- a/client/coral-embed-stream/src/containers/Comment.js +++ b/client/coral-embed-stream/src/containers/Comment.js @@ -17,7 +17,8 @@ const slots = [ 'commentReactions', 'commentAvatar', 'commentAuthorName', - 'commentAuthorTags' + 'commentAuthorTags', + 'commentTimestamp', ]; /** diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index a285d1ff6..a20c94d1a 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -85,10 +85,6 @@ body { /* Info Box Styles */ -.hidden { - visibility: hidden; - display: none; -} .talk-plugin-infobox-info { top: 0; @@ -235,10 +231,6 @@ button.comment__action-button[disabled], color: #F00; } -.talk-plugin-pubdate-text { - display: inline-block; -} - /* Flag Styles */ .talk-plugin-flags-popup-form { @@ -367,4 +359,7 @@ button.comment__action-button[disabled], color: white; } - +.hidden { + visibility: hidden; + display: none; +} diff --git a/client/coral-framework/components/CommentTimestamp.css b/client/coral-framework/components/CommentTimestamp.css new file mode 100644 index 000000000..a4620902c --- /dev/null +++ b/client/coral-framework/components/CommentTimestamp.css @@ -0,0 +1,6 @@ +.timestamp { + display: inline-block; + color: #696969; + font-size: 12px; +} + diff --git a/client/coral-framework/components/CommentTimestamp.js b/client/coral-framework/components/CommentTimestamp.js new file mode 100644 index 000000000..0d1c72f2b --- /dev/null +++ b/client/coral-framework/components/CommentTimestamp.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {timeago} from 'coral-framework/services/i18n'; +import cn from 'classnames'; +import styles from './CommentTimestamp.css'; + +const CommentTimestamp = ({className, created_at}) => ( +
+ {timeago(created_at)} +
+); + +CommentTimestamp.propTypes = { + className: PropTypes.string, + created_at: PropTypes.string, +}; + +export default CommentTimestamp; diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js index aab0e2a6a..1391fa83f 100644 --- a/client/coral-settings/containers/ProfileContainer.js +++ b/client/coral-settings/containers/ProfileContainer.js @@ -95,8 +95,9 @@ class ProfileContainer extends Component { const slots = [ 'profileSections', - // TODO: This Slot should be included in `talk-plugin-history` instead. + // TODO: These Slots should be included in `talk-plugin-history` instead. 'commentContent', + 'historyCommentTimestamp', ]; const CommentFragment = gql` diff --git a/client/talk-plugin-history/Comment.css b/client/talk-plugin-history/Comment.css index 1200709a3..23289c17d 100644 --- a/client/talk-plugin-history/Comment.css +++ b/client/talk-plugin-history/Comment.css @@ -49,27 +49,32 @@ li { margin-bottom: 5px; - - &:nth-child(1) { - color: #5394D7; - } - - &:nth-child(2) { - color: #909090; - } - - - i { - margin-right: 5px; - font-size: 15px; - } - - a:hover { - cursor: pointer; - } } } +.viewLink { + color: #5394D7; + + &:hover { + cursor: pointer; + } +} + +.iconView { + margin-right: 5px; + font-size: 15px; + vertical-align: middle; + padding-bottom: 1px; +} + +.iconDate { + margin-right: 5px; + font-size: 15px; + color: #696969; + vertical-align: middle; + padding-bottom: 1px; +} + @custom-media --mobile-viewport (max-width: 480px); @media (--mobile-viewport) { @@ -92,7 +97,3 @@ color: inherit; } -.iconView, .iconDate { - vertical-align: middle; - padding-bottom: 1px; -} diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js index 51ab5c84a..7532548cf 100644 --- a/client/talk-plugin-history/Comment.js +++ b/client/talk-plugin-history/Comment.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import {Icon} from '../coral-ui'; import styles from './Comment.css'; import Slot from 'coral-framework/components/Slot'; -import PubDate from '../talk-plugin-pubdate/PubDate'; +import CommentTimestamp from 'coral-framework/components/CommentTimestamp'; import CommentContent from '../coral-embed-stream/src/components/CommentContent'; import cn from 'classnames'; import {getTotalReactionsCount} from 'coral-framework/utils'; @@ -15,6 +15,7 @@ class Comment extends React.Component { render() { const {comment, link, data, root} = this.props; const reactionCount = getTotalReactionsCount(comment.action_summaries); + const queryData = {root, comment, asset: comment.asset}; return (
@@ -24,7 +25,7 @@ class Comment extends React.Component { defaultComponent={CommentContent} className={cn(styles.commentBody, 'my-comment-body')} data={data} - queryData={{root, comment, asset: comment.asset}} + queryData={queryData} />
@@ -37,7 +38,7 @@ class Comment extends React.Component { - {comment.replyCount} + {comment.replyCount} {comment.replyCount === 1 ? t('common.reply') : t('common.replies')} @@ -53,15 +54,20 @@ class Comment extends React.Component {
diff --git a/client/talk-plugin-pubdate/PubDate.js b/client/talk-plugin-pubdate/PubDate.js deleted file mode 100644 index 7afd45e2c..000000000 --- a/client/talk-plugin-pubdate/PubDate.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import {timeago} from 'coral-framework/services/i18n'; - -const name = 'talk-plugin-pubdate'; - -const PubDate = ({created_at}) =>
- {timeago(created_at)} -
; - -export default PubDate; diff --git a/locales/en.yml b/locales/en.yml index 1c4805394..13ca8eb14 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -233,15 +233,14 @@ en: 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." my_comments: "My Comments" my_profile: "My profile" - new_count: "View {0} new {1}" + new_count: "View {0} more {1}" profile: Profile show_all_comments: "Show all comments" success_bio_update: "Your biography has been updated" success_name_update: "Your username has been updated" success_update_settings: "The changes you have made have been applied to the comment stream on this article" show_all_replies: Show all replies - show_1_more_reply: Show 1 more reply - show_x_more_replies: Show {0} more replies + show_more_replies: Show more replies view_more_comments: "view more comments" view_reply: "view reply" from_settings_page: "From the Profile Page you can see your comment history." diff --git a/locales/es.yml b/locales/es.yml index 8324ddd73..4cb630273 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -231,15 +231,14 @@ es: msg: "Tu cuenta está suspendida porque tu nombre de usuario ha sido considerado no apropiado para el espacio. Para recuperar la cuenta, por favor ingresar un nuevo nombre de usuario. Contáctanos si tienes alguna pregunta." my_comments: "Mis Comentarios" my_profile: "Mi perfil" - new_count: "Ver {0} {1} nuevo" + new_count: "Ver {0} más {1} " profile: Perfil show_all_comments: "Mostrar todos los comentarios" success_bio_update: "Tu biografia fue actualizada" success_name_update: "Tu nombre de usuario ha sido actualizado" success_update_settings: "La configuración de este articulo fue actualizada" show_all_replies: "Mostrar todas las respuestas" - show_1_more_reply: "Mostrar 1 respuesta más" - show_x_more_replies: "Mostrar {0} respuestas más" + show_more_replies: "Mostrar más respuestas" view_more_comments: "Ver más comentarios" view_reply: "ver respuesta" from_settings_page: "Desde la página de configuración puedes ver tu historia de comentarios." diff --git a/locales/fr.yml b/locales/fr.yml index 69240b157..1370d47c6 100644 --- a/locales/fr.yml +++ b/locales/fr.yml @@ -190,7 +190,7 @@ fr: msg: "Votre compte est actuellement suspendu car votre nom d'utilisateur a été jugé inapproprié. Pour restaurer votre compte, entrez un nouveau nom d'utilisateur. Contactez-nous si vous avez des questions." my_comments: "Mes commentaires" my_profile: "Mon profil" - new_count: "Voir {0} nouveau {1}" + new_count: "Voir {0} plus {1}" profile: Profil show_all_comments: "Afficher tous les commentaires" success_bio_update: "Votre biographie a été mise à jour" diff --git a/locales/pt_BR.yml b/locales/pt_BR.yml index 783105f81..99c39fe41 100644 --- a/locales/pt_BR.yml +++ b/locales/pt_BR.yml @@ -233,8 +233,7 @@ pt_BR: success_name_update: "Seu nome de usuário foi atualizado" success_update_settings: "As alterações que você fez foram aplicadas no hilo de comentários neste artigo" show_all_replies: Exibir todas as respostas - show_1_more_reply: Exibir mais 1 resposta - show_x_more_replies: Exibir mais {0} respostas + show_more_replies: Exibir mais respostas view_more_comments: "ver mais comentários" view_reply: "ver resposta" from_settings_page: "Na página de Perfil, você pode ver seu histórico de comentários." diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js index 4367d3420..a0ae0f3da 100644 --- a/plugin-api/beta/client/components/index.js +++ b/plugin-api/beta/client/components/index.js @@ -3,3 +3,4 @@ export {default as ClickOutside} from 'coral-framework/components/ClickOutside'; export {default as IfSlotIsEmpty} from 'coral-framework/components/IfSlotIsEmpty'; export {default as IfSlotIsNotEmpty} from 'coral-framework/components/IfSlotIsNotEmpty'; export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName'; +export {default as CommentTimestamp} from 'coral-framework/components/CommentTimestamp'; diff --git a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js index 4b0babed6..5c289c1c7 100644 --- a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js +++ b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js @@ -31,7 +31,7 @@ const CreateUsernameDialog = ({

diff --git a/plugins/talk-plugin-auth/client/components/FakeComment.js b/plugins/talk-plugin-auth/client/components/FakeComment.js index 6997ca984..e843a0cbf 100644 --- a/plugins/talk-plugin-auth/client/components/FakeComment.js +++ b/plugins/talk-plugin-auth/client/components/FakeComment.js @@ -1,16 +1,16 @@ import React from 'react'; import t from 'coral-framework/services/i18n'; import {ReplyButton} from 'talk-plugin-replies'; -import PubDate from 'talk-plugin-pubdate/PubDate'; import styles from './FakeComment.css'; import {Icon} from 'plugin-api/beta/client/components/ui'; +import {CommentTimestamp} from 'plugin-api/beta/client/components'; export const FakeComment = ({username, created_at, body}) => (

{username} - +
{body}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.css b/plugins/talk-plugin-featured-comments/client/components/Comment.css index b800401e3..9481b4396 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.css +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.css @@ -64,4 +64,8 @@ .actionsContainer { text-align: right; -} \ No newline at end of file +} + +.timestamp { + padding-left: 6px; +} diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index 779844177..a8c7cb6f1 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js @@ -1,8 +1,8 @@ import React from 'react'; import cn from 'classnames'; import styles from './Comment.css'; -import {t, timeago} from 'plugin-api/beta/client/services'; -import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components'; +import {t} from 'plugin-api/beta/client/services'; +import {Slot, CommentAuthorName, CommentTimestamp} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; import {pluginName} from '../../package.json'; import FeaturedButton from '../containers/FeaturedButton'; @@ -15,6 +15,7 @@ class Comment extends React.Component { render() { const {comment, asset, root, data} = this.props; + const queryData = {comment, asset, root}; return (
@@ -28,14 +29,20 @@ class Comment extends React.Component { className={cn(styles.username, `${pluginName}-comment-username`)} fill="commentAuthorName" defaultComponent={CommentAuthorName} - queryData={{comment, asset, root}} + queryData={queryData} data={data} inline /> - - ,{' '}{timeago(comment.created_at)} - +