Merge branch 'master' of github.com:coralproject/talk into featured-comments

client/coral-embed-stream/src/components/Comment.css

@@ -1,11 +1,41 @@
-.Reply {
-  position: relative;
+.root {
+  margin-top: 16px;
+  margin-left: 20px;
   margin-bottom: 15px;
+  position: relative;
 }
 
-.Comment {
-  margin-bottom: 15px;
-  position: relative;
+.rootLevel0 {
+  margin-left: 0px;
+}
+
+.comment {
+  padding-left: 20px;
+}
+
+.commentLevel0 {
+  padding-left: 0px;
+}
+
+.commentLevel1 {
+  border-left: 3px #212121 solid;
+}
+
+.commentLevel2 {
+  border-left: 2px #6a6a6a solid;
+}
+
+.commentLevel3 {
+  border-left: 2px #9e9e9e solid;
+}
+
+.commentLevel4 {
+  border-left: 2px #c1c1c1 solid;
+}
+
+.highlightedComment {
+  padding-left: 20px;
+  border-left: 3px solid rgb(35,118,216);
 }
 
 .pendingComment {

client/coral-embed-stream/src/components/Comment.js

@@ -10,6 +10,9 @@ import {can} from 'coral-framework/services/perms';
 import {TransitionGroup} from 'react-transition-group';
 import cn from 'classnames';
 import styles from './Comment.css';
+import {THREADING_LEVEL} from '../constants/stream';
+import merge from 'lodash/merge';
+import mapValues from 'lodash/mapValues';
 
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
@@ -304,6 +307,7 @@ export default class Comment extends React.Component {
       postDontAgree,
       setActiveReplyBox,
       activeReplyBox,
+      loadMore,
       deleteAction,
       disableReply,
       maxCharCount,
@@ -317,9 +321,12 @@ export default class Comment extends React.Component {
 
     const view = this.getVisibileReplies();
     const {loadingState} = this.state;
+    const isReply = !!parentId;
+    const isPending = comment.id.indexOf('pending') >= 0;
+    const isHighlighted = highlighted === comment.id;
 
     const hasMoreComments = comment.replies && (comment.replies.hasNextPage || comment.replies.nodes.length > view.length);
-    const replyCount = this.hasIgnoredReplies() ? '' : comment.replyCount;
+    const moreRepliesCount = this.hasIgnoredReplies() ? -1 : comment.replyCount - view.length;
     const flagSummary = getActionSummary('FlagActionSummary', comment);
     const dontAgreeSummary = getActionSummary(
       'DontAgreeActionSummary',
@@ -332,13 +339,8 @@ export default class Comment extends React.Component {
       myFlag = dontAgreeSummary.find((s) => s.current_user);
     }
 
-    let commentClass = parentId
-      ? `reply ${styles.Reply}`
-      : `comment ${styles.Comment}`;
-    commentClass += comment.id.indexOf('pending') >= 0 ? ` ${styles.pendingComment}` : '';
-
     /**
-     * classNamesToAdd
+     * conditionClassNames
      * adds classNames based on condition
      * classnames is an array of objects with key as classnames and value as conditions
      * i.e:
@@ -348,34 +350,44 @@ export default class Comment extends React.Component {
      *
      * This will add myClassName to comments tagged with STAFF TAG.
      * **/
-
-    const classNamesToAdd = commentClassNames.reduce((acc, className) => {
-      let res = [];
-
-      // Adding classNames based on tags
-      Object.keys(className).forEach((cn) => {
-        const condition = className[cn];
-        condition.tags.forEach((tag) => {
-          if (hasTag(comment.tags, tag)) {
-            res = [...res, cn];
-          }
-        });
+    const conditionalClassNames =
+      mapValues(merge({}, ...commentClassNames), (condition) => {
+        if (condition.tags) {
+          return condition.tags.some((tag) => hasTag(comment.tags, tag));
+        }
+        return false;
       });
 
-      // TODO: Compare rest of the comment obj to the condition if needed
-
-      return [...acc, ...res];
-    }, []);
+    const rootClassNames = [
+      'talk-stream-comment-wrapper',
+      `talk-stream-comment-wrapper-level-${depth}`,
+      styles.root,
+      styles[`rootLevel${depth}`],
+      {
+        ...conditionalClassNames,
+        [styles.enter]: this.state.animateEnter,
+      },
+    ];
 
     return (
       <div
-        className={cn(commentClass, 'talk-stream-comment-wrapper', classNamesToAdd, {[styles.enter]: this.state.animateEnter})}
+        className={cn(...rootClassNames)}
         id={`c_${comment.id}`}
-        style={{marginLeft: depth * 30}}
       >
-        <hr aria-hidden={true} />
+        {!isReply && <hr aria-hidden={true} />}
         <div
-          className={highlighted === comment.id ? 'highlighted-comment' : ''}
+          className={cn(
+            'talk-stream-comment',
+            `talk-stream-comment-level-${depth}`,
+            styles.comment,
+            styles[`commentLevel${depth}`],
+            {
+              [styles.pendingComment]: isPending,
+              [styles.highlightedComment]: isHighlighted,
+              'talk-stream-pending-comment': isPending,
+              'talk-stream-highlighted-comment': isHighlighted,
+            }
+          )}
         >
           <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
           {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
@@ -493,7 +505,7 @@ export default class Comment extends React.Component {
               charCountEnable={charCountEnable}
               maxCharCount={maxCharCount}
               setActiveReplyBox={setActiveReplyBox}
-              parentId={parentId || comment.id}
+              parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
               addNotification={addNotification}
               postComment={postComment}
               currentUser={currentUser}
@@ -536,7 +548,7 @@ export default class Comment extends React.Component {
         <div className="talk-load-more-replies">
           <LoadMore
             topLevel={false}
-            replyCount={replyCount}
+            replyCount={moreRepliesCount}
             moreComments={hasMoreComments}
             loadMore={this.loadNewReplies}
             loadingState={loadingState}

client/coral-embed-stream/src/components/LoadMore.js

@@ -5,27 +5,15 @@ import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
 class LoadMore extends React.Component {
-  initialState = true;
-
   replyCountFormat = (count) => {
     if (!count) {
-      return t('framework.view_all_replies_unknown_number');
+      return t('framework.show_all_replies');
     }
     if (count === 1) {
-      return t('framework.view_reply');
+      return t('framework.show_1_more_reply');
     }
 
-    if (this.initialState) {
-      return t('framework.view_all_replies_initial', count);
-    } else {
-      return t('framework.view_all_replies', count);
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (['success', 'error'].indexOf(nextProps.loadingState) >= 0) {
-      this.initialState = false;
-    }
+    return t('framework.show_x_more_replies', count);
   }
 
   render () {

client/coral-embed-stream/src/components/NewCount.js

@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react';
 import t from 'coral-framework/services/i18n';
 
 const NewCount = ({count, loadMore}) => {
-  return <div className='coral-new-comments coral-load-more'>
+  return <div className='talk-new-comments talk-load-more'>
     {
       count ?
       <button onClick={loadMore}>

client/coral-embed-stream/src/components/Stream.js

@@ -16,6 +16,7 @@ import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import NewCount from './NewCount';
 import {TransitionGroup} from 'react-transition-group';
 import {forEachError} from 'coral-framework/utils';
+import {getTopLevelParent} from '../graphql/utils';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -167,9 +168,7 @@ class Stream extends React.Component {
     const open = asset.closedAt === null;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
-    const highlightedComment = comment && comment.parent
-      ? comment.parent
-      : comment;
+    const highlightedComment = comment && getTopLevelParent(comment);
 
     const banned = user && user.status === 'BANNED';
     const temporarilySuspended =