diff --git a/client/coral-embed-stream/src/components/AuthorName.css b/client/coral-embed-stream/src/components/AuthorName.css new file mode 100644 index 000000000..978c370f7 --- /dev/null +++ b/client/coral-embed-stream/src/components/AuthorName.css @@ -0,0 +1,4 @@ +.authorName { + margin-right: 5px; + font-weight: bold; +} diff --git a/client/coral-embed-stream/src/components/AuthorName.js b/client/coral-embed-stream/src/components/AuthorName.js new file mode 100644 index 000000000..96dc52aee --- /dev/null +++ b/client/coral-embed-stream/src/components/AuthorName.js @@ -0,0 +1,9 @@ +import React from 'react'; +import styles from './AuthorName.css'; + +const AuthorName = ({comment}) => + + {comment.user.username} + ; + +export default AuthorName; diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index bb6fee981..77c41b23d 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import AuthorName from 'talk-plugin-author-name/AuthorName'; import TagLabel from 'talk-plugin-tag-label/TagLabel'; import PubDate from 'talk-plugin-pubdate/PubDate'; import {ReplyBox, ReplyButton} from 'talk-plugin-replies'; @@ -26,6 +25,7 @@ import {EditableCommentContent} from './EditableCommentContent'; import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils'; import t from 'coral-framework/services/i18n'; import CommentContainer from '../containers/Comment'; +import AuthorName from './AuthorName'; const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF'); const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length; @@ -434,10 +434,17 @@ export default class Comment extends React.Component { inline /> -
+
+
+ + -
- {isStaff(comment.tags) ? Staff : null} diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 6ba376096..3fc45f952 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -238,14 +238,8 @@ body { line-height: 1.3; } -.talk-plugin-author-name-text { - display: inline-block; - margin: 10px 5px 10px 0; - font-weight: bold; -} - -.talk-plugin-author-name-bio-flag { - float: right; +.talk-stream-comment-header { + margin: 10px 0; } /* Tag Labels */ diff --git a/client/talk-plugin-author-name/AuthorName.js b/client/talk-plugin-author-name/AuthorName.js deleted file mode 100644 index 89835a742..000000000 --- a/client/talk-plugin-author-name/AuthorName.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, {Component} from 'react'; -const packagename = 'talk-plugin-author-name'; - -export default class AuthorName extends Component { - - state = {showTooltip: false} - - handleClick = () => { - this.setState((state) => ({ - showTooltip: !state.showTooltip - })); - } - - handleMouseLeave = () => { - setTimeout(() => { - this.setState({ - showTooltip: false - }); - }, 500); - } - - render () { - const {author} = this.props; - return ( -
- {author && author.username} -
- ); - } -} diff --git a/client/talk-plugin-author-name/styles.css b/client/talk-plugin-author-name/styles.css deleted file mode 100644 index b7870a862..000000000 --- a/client/talk-plugin-author-name/styles.css +++ /dev/null @@ -1,34 +0,0 @@ -.authorName { - color: black; - display: inline-block; - margin: 10px 8px 10px 0; -} - -.hasBio { - &:hover { - cursor: pointer; - } -} - -.arrowDown { - top: 0; - width: 0; - height: 0; - margin-top: -2px; - margin-left: 2px; - display: inline-block; - vertical-align: middle; - border-bottom: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-top: 3px solid #000000; -} - -.arrowUp { - width: 0; - height: 0; - border-top: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-bottom: 3px solid black; -}