From fd71acf7e0ccc4707f8858e4cf9e8940359636cb Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 09:06:33 -0300 Subject: [PATCH] With Featured Comments :) --- .../client/components/Button.css | 17 ------ .../client/components/Button.js | 27 --------- .../client/components/ModActionButton.css | 31 ++++++++++ .../client/components/ModActionButton.js | 60 +++++++++++++++++++ .../client/containers/ModActionButton.js | 10 ++++ .../client/index.js | 4 +- .../client/components/ModerationActions.js | 11 +++- .../client/containers/ModerationActions.js | 10 ++++ 8 files changed, 123 insertions(+), 47 deletions(-) delete mode 100644 plugins/talk-plugin-featured-comments/client/components/Button.css delete mode 100644 plugins/talk-plugin-featured-comments/client/components/Button.js create mode 100644 plugins/talk-plugin-featured-comments/client/components/ModActionButton.css create mode 100644 plugins/talk-plugin-featured-comments/client/components/ModActionButton.js create mode 100644 plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css deleted file mode 100644 index daaa329c9..000000000 --- a/plugins/talk-plugin-featured-comments/client/components/Button.css +++ /dev/null @@ -1,17 +0,0 @@ -.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; -} diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/Button.js deleted file mode 100644 index b9d0cc95f..000000000 --- a/plugins/talk-plugin-featured-comments/client/components/Button.js +++ /dev/null @@ -1,27 +0,0 @@ -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/ModActionButton.css b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css new file mode 100644 index 000000000..0c9455e28 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css @@ -0,0 +1,31 @@ +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + padding: 6px; + font-size: 14px; + transition: color 100ms, background-color 100ms; + border-radius: 3px; + color: #383A43; + width: 100%; + text-align: left; + font-weight: bold; + letter-spacing: 0.3px; + + &:hover { + background-color: #D8D8D8; + color: #383a43; + } +} + +.icon { + margin-right: 15px; + font-size: 16px; +} + +.button.featured { + color: #10589b; + + &:hover { + background-color: #D8D8D8; + color: #383a43; + } +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js new file mode 100644 index 000000000..5f7abcf06 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js @@ -0,0 +1,60 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './ModActionButton.css'; +import {pluginName} from '../../package.json'; +import {t} from 'plugin-api/beta/client/services'; +import {withTags} from 'plugin-api/beta/client/hocs'; +import {Icon} from 'plugin-api/beta/client/components/ui'; + +export class Button extends React.Component { + constructor() { + super(); + + this.state = { + on: false + }; + + } + + handleMouseEnter = (e) => { + e.preventDefault(); + this.setState({ + on: true + }); + } + + handleMouseLeave = (e) => { + e.preventDefault(); + this.setState({ + on: false + }); + } + + render() { + const {alreadyTagged, deleteTag, postTag} = this.props; + + return ( + + ); + } +} + +export default withTags('featured')(Button); + diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js new file mode 100644 index 000000000..e6ccc0f72 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js @@ -0,0 +1,10 @@ +import {compose} from 'react-apollo'; +import {excludeIf} from 'plugin-api/beta/client/hocs'; +import {can} from 'plugin-api/beta/client/services'; +import Button from '../components/Button'; + +const enhance = compose( + excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')), +); + +export default enhance(Button); diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index c9598b1dd..1fa78ba24 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -1,6 +1,6 @@ import Tab from './containers/Tab'; import Tag from './containers/Tag'; -import Button from './components/Button'; +import ModActionButton from './components/ModActionButton'; import TabPane from './containers/TabPane'; import translations from './translations.yml'; import update from 'immutability-helper'; @@ -18,7 +18,7 @@ export default { streamTabs: [Tab], streamTabPanes: [TabPane], commentInfoBar: [Tag], - commentReactions: [Button], + moderationActions: [ModActionButton], adminModeration: [ModSubscription], adminCommentInfoBar: [ModTag], }, diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index 6309cb14d..3a3b54156 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -6,6 +6,7 @@ import {Icon} from 'plugin-api/beta/client/components/ui'; import ClickOutside from 'coral-framework/components/ClickOutside'; import RejectCommentAction from '../containers/RejectCommentAction'; import ApproveCommentAction from '../containers/ApproveCommentAction'; +import {Slot} from 'plugin-api/beta/client/components'; export default class ModerationActions extends React.Component { constructor() { @@ -31,7 +32,7 @@ export default class ModerationActions extends React.Component { render() { const {tooltip} = this.state; - const {comment} = this.props; + const {comment, asset, data} = this.props; return( @@ -42,6 +43,14 @@ export default class ModerationActions extends React.Component { {tooltip && ( + + + diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js index 648e4a860..84017429c 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -11,10 +11,20 @@ const mapStateToProps = ({auth}) => ({ const enhance = compose( connect(mapStateToProps), withFragments({ + asset: gql` + fragment TalkModerationActions_asset on Asset { + id + }` + , comment: gql` fragment TalkModerationActions_comment on Comment { id status + tags { + tag { + name + } + } } `}), excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),