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

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

@@ -2,24 +2,23 @@
   margin-left: 20px;
   margin-bottom: 16px;
   position: relative;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 12px;
 }
 
 .rootLevel0:first-child {
   padding-top: 0;
-}
-
-.root:first-child {
   border: 0;
 }
 
 .rootLevel0 {
   margin-left: 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .comment {
-  padding-left: 20px;
+  padding-left: 15px;
+  display: flex;
+  flex-flow: row;
 }
 
 .commentLevel0 {
@@ -43,7 +42,7 @@
 }
 
 .highlightedComment {
-  padding-left: 20px;
+  padding-left: 15px;
   border-left: 3px solid rgb(35,118,216);
 }
 
@@ -158,6 +157,18 @@
   animation: enter 1000ms;
 }
 
+.commentContainer {
+  flex: auto;
+}
+
+.commentAvatar {
+  max-width: 60px;
+}
+
+.commentAvatar:empty {
+  display: none;
+}
+
 .timerIcon {
   vertical-align: middle;
   font-size: 14px;

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

@@ -382,22 +382,10 @@ export default class Comment extends React.Component {
         id={`c_${comment.id}`}
       >
         <div className={commentClassName}>
-          <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
-          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-          <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-            <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
-            {
-              (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
-            }
-          </span>
 
           <Slot
-            className={styles.commentInfoBar}
-            fill="commentInfoBar"
-            depth={depth}
+            className={styles.commentAvatar}
+            fill="commentAvatar"
             comment={comment}
             commentId={comment.id}
             data={this.props.data}
@@ -405,52 +393,75 @@ export default class Comment extends React.Component {
             inline
           />
 
-          { (currentUser && (comment.user.id === currentUser.id)) &&
+          <div className={styles.commentContainer}>
 
-            /* User can edit/delete their own comment for a short window after posting */
-            <span className={cn(styles.topRight)}>
+            <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+            {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+            <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
               {
-                commentIsStillEditable(comment) &&
-                <a
-                  className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                  onClick={this.onClickEdit}>Edit</a>
+                (comment.editing && comment.editing.edited)
+                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                : null
               }
             </span>
-          }
-          { (currentUser && (comment.user.id !== currentUser.id)) &&
 
-              /* TopRightMenu allows currentUser to ignore other users' comments */
-              <span className={cn(styles.topRight, styles.topRightMenu)}>
-                <TopRightMenu
-                  comment={comment}
-                  ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
+            <Slot
+              className={styles.commentInfoBar}
+              fill="commentInfoBar"
+              depth={depth}
+              comment={comment}
+              commentId={comment.id}
+              data={this.props.data}
+              root={this.props.root}
+              inline
+            />
+
+            { (currentUser && (comment.user.id === currentUser.id)) &&
+
+              /* User can edit/delete their own comment for a short window after posting */
+              <span className={cn(styles.topRight)}>
+                {
+                  commentIsStillEditable(comment) &&
+                  <a
+                    className={cn(styles.link, {[styles.active]: this.state.isEditing})}
+                    onClick={this.onClickEdit}>Edit</a>
+                }
               </span>
-          }
-          {
-            this.state.isEditing
-            ? <EditableCommentContent
-                editComment={this.editComment}
-                addNotification={addNotification}
-                comment={comment}
-                currentUser={currentUser}
-                charCountEnable={charCountEnable}
-                maxCharCount={maxCharCount}
-                parentId={parentId}
-                stopEditing={this.stopEditing}
-                />
-            : <div>
-                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-              </div>
-          }
-            
-          <div className={cn(styles.commentFooter, 'talk-stream-comment-footer')}>       
+            }
+            { (currentUser && (comment.user.id !== currentUser.id)) &&
+
+                /* TopRightMenu allows currentUser to ignore other users' comments */
+                <span className={cn(styles.topRight, styles.topRightMenu)}>
+                  <TopRightMenu
+                    comment={comment}
+                    ignoreUser={ignoreUser}
+                    addNotification={addNotification} />
+                </span>
+            }
+            {
+              this.state.isEditing
+              ? <EditableCommentContent
+                  editComment={this.editComment}
+                  addNotification={addNotification}
+                  comment={comment}
+                  currentUser={currentUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  parentId={parentId}
+                  stopEditing={this.stopEditing}
+                  />
+              : <div>
+                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
+                </div>
+            }
+
             <div className="commentActionsLeft comment__action-container">
               <Slot
                 fill="commentReactions"
                 data={this.props.data}
                 root={this.props.root}
-                asset={asset}
                 comment={comment}
                 commentId={comment.id}
                 inline
@@ -492,62 +503,64 @@ export default class Comment extends React.Component {
             </div>
           </div>
         </div>
-        {activeReplyBox === comment.id
-          ? <ReplyBox
-              commentPostedHandler={() => {
-                setActiveReplyBox('');
-              }}
-              charCountEnable={charCountEnable}
-              maxCharCount={maxCharCount}
-              setActiveReplyBox={setActiveReplyBox}
-              parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
-              addNotification={addNotification}
-              postComment={postComment}
-              currentUser={currentUser}
-              assetId={asset.id}
-            />
-          : null}
 
-        <TransitionGroup>
-        {view.map((reply) => {
-          return commentIsIgnored(reply)
-            ? <IgnoredCommentTombstone key={reply.id} />
-            : <Comment
-                data={this.props.data}
-                root={this.props.root}
-                setActiveReplyBox={setActiveReplyBox}
-                disableReply={disableReply}
-                activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
-                parentId={comment.id}
-                postComment={postComment}
-                editComment={this.props.editComment}
-                depth={depth + 1}
-                asset={asset}
-                highlighted={highlighted}
-                currentUser={currentUser}
-                postFlag={postFlag}
-                deleteAction={deleteAction}
-                loadMore={loadMore}
-                ignoreUser={ignoreUser}
+          {activeReplyBox === comment.id
+            ? <ReplyBox
+                commentPostedHandler={() => {
+                  setActiveReplyBox('');
+                }}
                 charCountEnable={charCountEnable}
                 maxCharCount={maxCharCount}
-                showSignInDialog={showSignInDialog}
-                commentIsIgnored={commentIsIgnored}
-                liveUpdates={liveUpdates}
-                key={reply.id}
-                comment={reply}
-              />;
-        })}
-        </TransitionGroup>
-        <div className="talk-load-more-replies">
-          <LoadMore
-            topLevel={false}
-            replyCount={moreRepliesCount}
-            moreComments={hasMoreComments}
-            loadMore={this.loadNewReplies}
-            loadingState={loadingState}
-          />
+                setActiveReplyBox={setActiveReplyBox}
+                parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
+                addNotification={addNotification}
+                postComment={postComment}
+                currentUser={currentUser}
+                assetId={asset.id}
+              />
+            : null}
+
+          <TransitionGroup>
+          {view.map((reply) => {
+            return commentIsIgnored(reply)
+              ? <IgnoredCommentTombstone key={reply.id} />
+              : <Comment
+                  data={this.props.data}
+                  root={this.props.root}
+                  setActiveReplyBox={setActiveReplyBox}
+                  disableReply={disableReply}
+                  activeReplyBox={activeReplyBox}
+                  addNotification={addNotification}
+                  parentId={comment.id}
+                  postComment={postComment}
+                  editComment={this.props.editComment}
+                  depth={depth + 1}
+                  asset={asset}
+                  highlighted={highlighted}
+                  currentUser={currentUser}
+                  postFlag={postFlag}
+                  deleteAction={deleteAction}
+                  loadMore={loadMore}
+                  ignoreUser={ignoreUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  showSignInDialog={showSignInDialog}
+                  commentIsIgnored={commentIsIgnored}
+                  liveUpdates={liveUpdates}
+                  reactKey={reply.id}
+                  key={reply.id}
+                  comment={reply}
+                />;
+          })}
+          </TransitionGroup>
+          <div className="talk-load-more-replies">
+            <LoadMore
+              topLevel={false}
+              replyCount={moreRepliesCount}
+              moreComments={hasMoreComments}
+              loadMore={this.loadNewReplies}
+              loadingState={loadingState}
+            />
         </div>
       </div>
     );

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

@@ -10,7 +10,8 @@ const pluginFragments = getSlotsFragments([
   'commentInfoBar',
   'commentActions',
   'commentContent',
-  'commentReactions'
+  'commentReactions',
+  'commentAvatar'
 ]);
 
 export default withFragments({

client/coral-framework/helpers/plugins.js

@@ -16,10 +16,10 @@ export function getSlotComponents(slot) {
   return flatten(plugins
 
     // Filter out components that have slots and have been disabled in `plugin_config`
-    .filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components))
+      .filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components))
 
-    .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot])
+      .filter((o) => o.module.slots[slot])
+      .map((o) => o.module.slots[slot])
   );
 }
 
@@ -78,8 +78,8 @@ export function getSlotsFragments(slots) {
   }
   const components = uniq(flattenDeep(slots.map((slot) => {
     return plugins
-    .filter((o) => o.module.slots ? o.module.slots[slot] : false)
-    .map((o) => o.module.slots[slot]);
+      .filter((o) => o.module.slots ? o.module.slots[slot] : false)
+      .map((o) => o.module.slots[slot]);
   })));
 
   const fragments = getComponentFragments(components);