Merge branch 'master' of github.com:coralproject/talk into update-users-api

client/coral-admin/src/translations.json

@@ -47,7 +47,7 @@
       "comment-settings": "Comment Settings",
       "embed-comment-stream": "Embed Comment Stream",
       "banned-word-header": "Write the bannned words list",
-      "banned-word-text": "Comments which contain these words or phrases, not seperated by commas and not case sensitive, will be automatically removed from the comment stream.",
+      "banned-word-text": "Comments which contain these words or phrases, not separated by commas and not case sensitive, will be automatically removed from the comment stream.",
       "wordlist": "Banned words list",
       "save-changes": "Save Changes",
       "copy-and-paste": "Copy and paste code below into your CMS to embed your comment box in your articles",

client/coral-embed-stream/src/CommentStream.js

@@ -16,7 +16,7 @@ import PubDate from '../../coral-plugin-pubdate/PubDate';
 import Count from '../../coral-plugin-comment-count/CommentCount';
 import AuthorName from '../../coral-plugin-author-name/AuthorName';
 import {ReplyBox, ReplyButton} from '../../coral-plugin-replies';
-import FlagButton from '../../coral-plugin-flags/FlagButton';
+import FlagComment from '../../coral-plugin-flags/FlagComment';
 import LikeButton from '../../coral-plugin-likes/LikeButton';
 import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
@@ -139,7 +139,17 @@ class CommentStream extends Component {
                     const comment = comments[commentId];
                     return <div className="comment" key={commentId} id={`c_${commentId}`}>
                       <hr aria-hidden={true}/>
-                      <AuthorName author={users[comment.author_id]}/>
+                      <AuthorName
+                        author={users[comment.author_id]}
+                        addNotification={this.props.addNotification}
+                        id={commentId}
+                        author_id={comment.author_id}
+                        postAction={this.props.postAction}
+                        showSignInDialog={this.props.showSignInDialog}
+                        deleteAction={this.props.deleteAction}
+                        addItem={this.props.addItem}
+                        updateItem={this.props.updateItem}
+                        currentUser={this.props.auth.user}/>
                       <PubDate created_at={comment.created_at}/>
                       <Content body={comment.body}/>
                       <div className="commentActionsLeft">
@@ -162,7 +172,7 @@ class CommentStream extends Component {
                           banned={banned}/>
                       </div>
                       <div className="commentActionsRight">
-                        <FlagButton
+                        <FlagComment
                           addNotification={this.props.addNotification}
                           id={commentId}
                           author_id={comment.author_id}
@@ -218,7 +228,7 @@ class CommentStream extends Component {
                                 banned={banned}/>
                             </div>
                             <div className="replyActionsRight">
-                              <FlagButton
+                              <FlagComment
                                 addNotification={this.props.addNotification}
                                 id={replyId}
                                 author_id={comment.author_id}

client/coral-embed-stream/style/default.css

@@ -127,6 +127,10 @@ hr {
   font-weight: bolder;
 }
 
+.coral-plugin-author-name-bio-flag {
+  float: right;
+}
+
 
 /* Reply styles */
 
@@ -199,10 +203,14 @@ hr {
 
 /* Flag Styles */
 
+.coral-plugin-flags-container {
+  position: relative;
+}
+
 .coral-plugin-flags-popup span {
-  min-width: 100px;
+  min-width: 280px;
   bottom: 36px;
-  right: 75px;
+  left: -190px;
   position: absolute;
 }
 

client/coral-plugin-author-name/AuthorName.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {Tooltip} from 'coral-ui';
+import FlagBio from '../coral-plugin-flags/FlagBio';
 const packagename = 'coral-plugin-author-name';
 
 export default class AuthorName extends Component {
@@ -36,7 +37,15 @@ export default class AuthorName extends Component {
         onMouseLeave={this.handleMouseLeave}
       >
         {author && author.displayName}
-        { showTooltip && <Tooltip>{author.settings.bio}</Tooltip>}
+        { showTooltip && <Tooltip>
+            <div className={`${packagename}-bio`}>
+              {author.settings.bio}
+            </div>
+            <div className={`${packagename}-bio-flag`}>
+              <FlagBio  {...this.props}/>
+            </div>
+            </Tooltip>
+        }
       </div>
     );
   }

client/coral-plugin-flags/FlagBio.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import FlagButton from './FlagButton';
+import {I18n} from '../coral-framework';
+import translations from './translations.json';
+
+const FlagBio = (props) => <FlagButton {...props} getPopupMenu={getPopupMenu} />;
+
+const getPopupMenu = [
+  () => {
+    return {
+      header: lang.t('step-2-header'),
+      itemType: 'user',
+      field: 'bio',
+      options: [
+        {val: 'This bio is offensive', text: lang.t('bio-offensive')},
+        {val: 'I don\'t like this bio', text: lang.t('no-like-bio')},
+        {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
+        {val: 'other', text: lang.t('other')}
+      ],
+      button: lang.t('continue'),
+      sets: 'detail'
+    };
+  },
+  () =>  {
+    return {
+      header: lang.t('step-3-header'),
+      text: lang.t('thank-you'),
+      button: lang.t('done'),
+    };
+  }
+];
+
+export default FlagBio;
+
+const lang = new I18n(translations);

client/coral-plugin-flags/FlagButton.js

@@ -18,6 +18,7 @@ class FlagButton extends Component {
     posted: false
   }
 
+  // When the "report" button is clicked expand the menu
   onReportClick = () => {
     if (!this.props.currentUser) {
       const offset = document.getElementById(`c_${this.props.id}`).getBoundingClientRect().top - 75;
@@ -31,15 +32,26 @@ class FlagButton extends Component {
     const {postAction, addItem, updateItem, flag, id, author_id} = this.props;
     const {itemType, field, detail, step, otherText, posted} = this.state;
 
-    if (step + 1 >= this.getPopupMenu.length) {
+    //Proceed to the next step or close the menu if we've reached the end
+    if (step + 1 >= this.props.getPopupMenu.length) {
       this.setState({showMenu: false});
     } else {
       this.setState({step: step + 1});
     }
 
+    // If itemType and detail are both set, post the action
     if (itemType && detail && !posted) {
+      // Set the text from the "other" field if it exists.
       const updatedDetail = otherText || detail;
-      const item_id = itemType === 'comments' ? id : author_id;
+      let item_id;
+      switch(itemType) {
+      case 'comments':
+        item_id = id;
+        break;
+      case 'user':
+        item_id = author_id;
+        break;
+      }
       const action = {
         action_type: 'flag',
         field,
@@ -55,49 +67,9 @@ class FlagButton extends Component {
     }
   }
 
-  getPopupMenu = [
-    () => {
-      return {
-        header: lang.t('step-1-header'),
-        options: [
-          {val: 'user', text: lang.t('flag-username')},
-          {val: 'comments', text: lang.t('flag-comment')}
-        ],
-        button: lang.t('continue'),
-        sets: 'itemType'
-      };
-    },
-    (itemType) => {
-      const options = itemType === 'comments' ?
-      [
-        {val: 'I don\'t agree with this comment', text: lang.t('no-agree-comment')},
-        {val: 'This comment is offensive', text: lang.t('comment-offensive')},
-        {val: 'This comment reveals personally identifiable infomration', text: lang.t('personal-info')},
-        {val: 'other', text: lang.t('other')}
-      ]
-      : [
-        {val: 'This username is offensive', text: lang.t('username-offensive')},
-        {val: 'I don\'t like this username', text: lang.t('no-like-username')},
-        {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
-        {val: 'other', text: lang.t('other')}
-      ];
-      return {
-        header: lang.t('step-2-header'),
-        options,
-        button: lang.t('continue'),
-        sets: 'detail'
-      };
-    },
-    () =>  {
-      return {
-        header: lang.t('step-3-header'),
-        text: lang.t('thank-you'),
-        button: lang.t('done'),
-      };
-    }
-  ]
-
   onPopupOptionClick = (sets) => (e) => {
+
+    // If the "other" option is clicked, show the other textbox
     if(sets === 'detail' && e.target.value === 'other') {
       this.setState({showOther: true});
     }
@@ -107,6 +79,15 @@ class FlagButton extends Component {
       this.setState({field: 'username'});
     }
 
+    // Set itemType and field if they are defined in the popupMenu
+    const currentMenu = this.props.getPopupMenu[this.state.step]();
+    if (currentMenu.itemType) {
+      this.setState({itemType: currentMenu.itemType});
+    }
+    if (currentMenu.field) {
+      this.setState({field: currentMenu.field});
+    }
+
     this.setState({[sets]: e.target.value});
   }
 
@@ -119,9 +100,9 @@ class FlagButton extends Component {
   }
 
   render () {
-    const {flag} = this.props;
+    const {flag, getPopupMenu} = this.props;
     const flagged = flag && flag.current_user;
-    const popupMenu = this.getPopupMenu[this.state.step](this.state.itemType);
+    const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
     return <div className={`${name}-container`}>
       <button onClick={this.onReportClick} className={`${name}-button`}>
@@ -175,7 +156,7 @@ class FlagButton extends Component {
               </form>
             }
             <div className={`${name}-popup-counter`}>
-              {this.state.step + 1} of {this.getPopupMenu.length}
+              {this.state.step + 1} of {getPopupMenu.length}
             </div>
             {
               popupMenu.button && <Button

client/coral-plugin-flags/FlagComment.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import FlagButton from './FlagButton';
+import {I18n} from '../coral-framework';
+import translations from './translations.json';
+
+const FlagComment = (props) => <FlagButton {...props} getPopupMenu={getPopupMenu} />;
+
+const getPopupMenu = [
+  () => {
+    return {
+      header: lang.t('step-1-header'),
+      options: [
+        {val: 'user', text: lang.t('flag-username')},
+        {val: 'comments', text: lang.t('flag-comment')}
+      ],
+      button: lang.t('continue'),
+      sets: 'itemType'
+    };
+  },
+  (itemType) => {
+    const options = itemType === 'comments' ?
+    [
+      {val: 'I don\'t agree with this comment', text: lang.t('no-agree-comment')},
+      {val: 'This comment is offensive', text: lang.t('comment-offensive')},
+      {val: 'This comment reveals personally identifiable infomration', text: lang.t('personal-info')},
+      {val: 'other', text: lang.t('other')}
+    ]
+    : [
+      {val: 'This username is offensive', text: lang.t('username-offensive')},
+      {val: 'I don\'t like this username', text: lang.t('no-like-username')},
+      {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
+      {val: 'other', text: lang.t('other')}
+    ];
+    return {
+      header: lang.t('step-2-header'),
+      options,
+      button: lang.t('continue'),
+      sets: 'detail'
+    };
+  },
+  () =>  {
+    return {
+      header: lang.t('step-3-header'),
+      text: lang.t('thank-you'),
+      button: lang.t('done'),
+    };
+  }
+];
+
+export default FlagComment;
+
+const lang = new I18n(translations);

client/coral-plugin-flags/translations.json

@@ -16,6 +16,8 @@
     "personal-info": "This comment reveals personally identifiable information",
     "username-offensive": "This username is offensive",
     "no-like-username": "I don't like this username",
+    "bio-offensive": "This bio is offensive",
+    "no-like-bio": "I don't like this bio",
     "marketing": "This looks like an ad/marketing",
     "thank-you": "We value your safety and feedback. A moderator will review your flag.",
     "flag-reason": "Reason for flag",
@@ -26,21 +28,23 @@
     "reported": "Informado",
     "report-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
     "report-notif-remove": "Tu marca ha sido eliminada.",
-    "step-1-header": "¡traduceme!",
-    "step-2-header": "¡traduceme!",
-    "step-3-header": "¡traduceme!",
-    "flag-username": "¡traduceme!",
-    "flag-comment": "¡traduceme!",
-    "continue": "¡traduceme!",
-    "done": "¡traduceme!",
-    "no-agree-comment": "¡traduceme!",
-    "comment-offensive": "¡traduceme!",
-    "personal-info": "¡traduceme!",
-    "username-offensive": "¡traduceme!",
-    "no-like-username": "¡traduceme!",
-    "marketing": "¡traduceme!",
-    "thank-you": "¡traduceme!",
-    "flag-reason": "¡traduceme!",
-    "other": "¡traduceme!"
+    "step-1-header": "Reportar un problema",
+    "step-2-header": "Ayudanos a entender",
+    "step-3-header": "Gracias por tu participación",
+    "flag-username": "Marcar el nombre de usuario",
+    "flag-comment": "Marcar el comentario",
+    "continue": "Continuar",
+    "done": "hecho",
+    "no-agree-comment": "No estoy de acuerdo con este comentario",
+    "comment-offensive": "Este comentario es ofensivo",
+    "personal-info": "Este comentario muestra información personal",
+    "username-offensive": "Este nombre de usuario es ofensivo",
+    "no-like-username": "No me gusta ese nombre de usuario",
+    "bio-offensive": "Esta bio es ofensiva",
+    "no-like-bio": "No me gusta esta bio",
+    "marketing": "Esto parece una publicidad/marketing",
+    "thank-you": "Nos interesa tu protección y comentarios. Un moderador va a mirar tu marca.",
+    "flag-reason": "Razón por la que marcar",
+    "other": "Otro"
   }
 }