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/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/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)} - +