diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css new file mode 100644 index 000000000..09432af70 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/Button.css @@ -0,0 +1,17 @@ +.button { + + /* TODO: figure out the best location to include the `reset.css` */ + composes: buttonReset from "coral-framework/styles/reset.css"; + + color: #767676; + margin-right: 10px; +} + +.button.featured { + color: #10589b; +} + +.icon { + font-size: 18px; + vertical-align: top; +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/Button.js new file mode 100644 index 000000000..c581ce027 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/Button.js @@ -0,0 +1,26 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './Button.css'; +import {pluginName} from '../../package.json'; +import {can} from 'plugin-api/beta/client/services'; +import {withTags} from 'plugin-api/beta/client/hocs'; +import {Icon} from 'plugin-api/beta/client/components/ui'; + +const Button = (props) => { + const {alreadyTagged, deleteTag, postTag, user} = props; + + return can(user, 'MODERATE_COMMENTS') ? ( + + ) : null ; +}; + +export default withTags('featured')(Button); diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index ada7ae7b6..1c2045110 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js @@ -5,6 +5,7 @@ import {t, timeago} from 'plugin-api/beta/client/services'; import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; import {pluginName} from '../../package.json'; +import Button from './Button'; class Comment extends React.Component { @@ -48,6 +49,13 @@ class Comment extends React.Component { asset={asset} inline /> + +