Merge branch 'modqueue-live-new-comments' of ssh://github.com/coralproject/talk into modqueue-live-new-comments

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;
 }

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 {
               />
 
               <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-                <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
+                <Slot
+                  fill="commentTimestamp"
+                  defaultComponent={CommentTimestamp}
+                  className={'talk-stream-comment-published-date'}
+                  created_at={comment.created_at}
+                  queryData={queryData}
+                  {...slotProps}
+                />
                 {
                   (comment.editing && comment.editing.edited)
                     ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>

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 () {

client/coral-embed-stream/src/containers/Comment.js

@@ -17,7 +17,8 @@ const slots = [
   'commentReactions',
   'commentAvatar',
   'commentAuthorName',
-  'commentAuthorTags'
+  'commentAuthorTags',
+  'commentTimestamp',
 ];
 
 /**

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;
+}

client/coral-framework/components/CommentTimestamp.css

@@ -0,0 +1,6 @@
+.timestamp {
+  display: inline-block;
+  color: #696969;
+  font-size: 12px;
+}
+

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}) => (
+  <div className={cn(className, styles.timestamp, 'talk-comment-timestamp')}>
+    {timeago(created_at)}
+  </div>
+);
+
+CommentTimestamp.propTypes = {
+  className: PropTypes.string,
+  created_at: PropTypes.string,
+};
+
+export default CommentTimestamp;

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`

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;
-}

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 (
       <div className={styles.myComment}>
@@ -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}
           />
           <div className={cn(styles.commentSummary, 'comment-summary')}>
             <span className={cn(styles.commentSummaryReactions, 'comment-summary-reactions', {[styles.countZero]: reactionCount === 0})}>
@@ -37,7 +38,7 @@ class Comment extends React.Component {
             <span className={cn('comment-summary-replies', {[styles.countZero]: comment.replyCount === 0})}>
               <Icon name="reply" />
               <span className={cn(styles.replyCount, 'comment-summary-reply-count')}>
-                {comment.replyCount} 
+                {comment.replyCount}
               </span>
               {comment.replyCount === 1 ? t('common.reply') : t('common.replies')}
             </span>
@@ -53,15 +54,20 @@ class Comment extends React.Component {
         <div className={styles.sidebar}>
           <ul>
             <li>
-              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)}>
+              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)} className={styles.viewLink}>
                 <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
               </a>
             </li>
             <li>
               <Icon name="schedule" className={styles.iconDate} />
-              <PubDate
-                className={styles.pubdate}
+              <Slot
+                fill="historyCommentTimestamp"
+                defaultComponent={CommentTimestamp}
+                className={'talk-history-comment-published-date'}
                 created_at={comment.created_at}
+                data={data}
+                queryData={queryData}
+                inline
               />
             </li>
           </ul>

client/talk-plugin-pubdate/PubDate.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import {timeago} from 'coral-framework/services/i18n';
-
-const name = 'talk-plugin-pubdate';
-
-const PubDate = ({created_at}) => <div className={`${name}-text`}>
-  {timeago(created_at)}
-</div>;
-
-export default PubDate;

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."

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."

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"

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."

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';

plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js

@@ -31,7 +31,7 @@ const CreateUsernameDialog = ({
         <FakeComment
           className={styles.fakeComment}
           username={formData.username}
-          created_at={Date.now()}
+          created_at={new Date().toISOString()}
           body={t('createdisplay.fake_comment_body')}
         />
         <p className={styles.ifyoudont}>

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}) => (
   <div className={styles.root}>
     <span className={styles.authorName}>
       {username}
     </span>
-    <PubDate created_at={created_at} />
+    <CommentTimestamp created_at={created_at} />
     <div className={styles.body}>
       {body}
     </div>

plugins/talk-plugin-featured-comments/client/components/Comment.css

@@ -64,4 +64,8 @@
 
 .actionsContainer {
   text-align: right;
-}
+}
+
+.timestamp {
+  padding-left: 6px;
+}

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 (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
 
@@ -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
           />
 
-          <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
-            ,{' '}{timeago(comment.created_at)}
-          </span>
+          <Slot
+            fill="commentTimestamp"
+            defaultComponent={CommentTimestamp}
+            className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)}
+            created_at={comment.created_at}
+            data={data}
+            queryData={queryData}
+            inline
+          />
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>

plugins/talk-plugin-featured-comments/client/containers/Comment.js

@@ -6,6 +6,7 @@ import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
 const slots = [
   'commentReactions',
   'commentAuthorName',
+  'commentTimestamp',
 ];
 
 export default withFragments({