With Featured Comments :)

plugins/talk-plugin-featured-comments/client/components/Button.css

@@ -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;
-}

plugins/talk-plugin-featured-comments/client/components/Button.js

@@ -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') ? (
-    <button
-      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
-      onClick={alreadyTagged ? deleteTag : postTag} >
-
-      {alreadyTagged ?
-        <Icon name="star" className={styles.icon} /> :
-        <Icon name="star_border" className={styles.icon} />
-      }
-
-    </button>
-  ) : null ;
-};
-
-export default withTags('featured')(Button);
-

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;
+  }
+}

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 (
+      <button className={cn(`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged})}
+        onClick={alreadyTagged ? deleteTag : postTag}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave} >
+
+        {alreadyTagged ? (
+          <span className={styles.approved}>
+            <Icon name="star" className={styles.icon} />
+            {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
+          </span>
+        ) : (
+          <span>
+            <Icon name="star_border" className={styles.icon} />
+            {t('talk-plugin-featured-comments.feature')}
+          </span>
+        )}
+
+      </button>
+    );
+  }
+}
+
+export default withTags('featured')(Button);
+

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);

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],
   },

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(
       <ClickOutside onClickOutside={this.hideTooltip}>
@@ -42,6 +43,14 @@ export default class ModerationActions extends React.Component {
           </span>
           {tooltip && (
             <Tooltip>
+
+              <Slot
+                className="talk-plugin-modetarion-actions-slot"
+                fill="moderationActions"
+                queryData={{comment, asset}}
+                data={data}
+              />
+
               <ApproveCommentAction comment={comment} />
               <RejectCommentAction comment={comment} />
             </Tooltip>

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')),