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;