Merge branch 'master' into banned-words

2026-07-01 03:26:19 +08:00 · 2017-08-24 13:49:31 +02:00
parent a68513227a 8b04da9cf4
commit 2d7d505913
18 changed files with 55 additions and 100 deletions
@@ -163,6 +163,7 @@
 .header {
  display: flex;
  align-items: center;
+  margin: 10px 0;
 }

 .content {
@@ -171,3 +172,7 @@
 .footer {
  min-height: 10px;
 }
+
+.username {
+  margin-right: 5px;
+} 
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import AuthorName from 'talk-plugin-author-name/AuthorName';
 import TagLabel from 'talk-plugin-tag-label/TagLabel';
 import PubDate from 'talk-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
@@ -26,6 +25,7 @@ import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 import CommentContainer from '../containers/Comment';
+import {CommentAuthorName} from 'coral-framework/components';

 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -434,10 +434,17 @@ export default class Comment extends React.Component {
            inline
          />

-          <div className={`${styles.commentContainer} talk-stream-comment-container`}>
+          <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
+            <div className={cn(styles.header, 'talk-stream-comment-header')}>
+
+              <Slot
+                className={cn(styles.username, 'talk-stream-comment-user-name')}
+                fill="commentAuthorName"
+                defaultComponent={CommentAuthorName}
+                queryData={queryData}
+                {...slotProps}
+              />

-            <div className={styles.header}>
-              <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`} >
@@ -15,7 +15,8 @@ const slots = [
  'commentActions',
  'commentContent',
  'commentReactions',
-  'commentAvatar'
+  'commentAvatar',
+  'commentAuthorName'
 ];

 /**
@@ -238,16 +238,6 @@ body {
  line-height: 1.3;
 }

-.talk-plugin-author-name-text {
-  display: inline-block;
-  margin: 10px 5px 10px 0;
-  font-weight: bold;
-}
-
-.talk-plugin-author-name-bio-flag {
-  float: right;
-}
-
 /* Tag Labels */

 .talk-plugin-tag-label {
@@ -0,0 +1,3 @@
+.authorName {
+  font-weight: bold;
+}
@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './CommentAuthorName.css';
+
+const CommentAuthorName = ({comment}) => 
+  <span className={styles.authorName}>
+    {comment.user.username}
+  </span>;
+
+export default CommentAuthorName;
@@ -1 +1,2 @@
 export {default as Slot} from './Slot';
+export {default as CommentAuthorName} from './CommentAuthorName';
@@ -1,31 +0,0 @@
-import React, {Component} from 'react';
-const packagename = 'talk-plugin-author-name';
-
-export default class AuthorName extends Component {
-
-  state = {showTooltip: false}
-
-  handleClick = () => {
-    this.setState((state) => ({
-      showTooltip: !state.showTooltip
-    }));
-  }
-
-  handleMouseLeave = () => {
-    setTimeout(() => {
-      this.setState({
-        showTooltip: false
-      });
-    }, 500);
-  }
-
-  render () {
-    const {author} = this.props;
-    return (
-      <div
-        className={`${packagename}-text`}>
-        {author && author.username}
-      </div>
-    );
-  }
-}
@@ -1,34 +0,0 @@
-.authorName {
-  color: black;
-  display: inline-block;
-  margin: 10px 8px 10px 0;
-}
-
-.hasBio {
-  &:hover {
-     cursor: pointer;
-   }
-}
-
-.arrowDown {
-  top: 0;
-  width: 0;
-  height: 0;
-  margin-top: -2px;
-  margin-left: 2px;
-  display: inline-block;
-  vertical-align: middle;
-  border-bottom: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 3px solid #000000;
-}
-
-.arrowUp {
-  width: 0;
-  height: 0;
-  border-top: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-bottom: 3px solid black;
-}
@@ -5,7 +5,7 @@
 class ExtendableError {
  constructor(message = null) {
    this.message = message;
-    this.stack = (new Error()).stack;
+    this.stack = (new Error(message)).stack;
  }
 }

@@ -22,13 +22,6 @@ const User = {
    }

  },
-  created_at({roles, created_at}, _, {user}) {
-    if (user && user.can(SEARCH_OTHER_USERS)) {
-      return created_at;
-    }
-
-    return null;
-  },
  comments({id}, {query}, {loaders: {Comments}, user}) {

    // If the user is not an admin, only return comment list for the owner of
@@ -76,7 +76,7 @@ type User {
  username: String!

  # creation date of user
-  created_at: String!
+  created_at: Date!

  # Action summaries against the user.
  action_summaries: [ActionSummary!]!
@@ -1,2 +1,3 @@
 export {Slot} from 'coral-framework/components';
 export {default as ClickOutside} from 'coral-framework/components/ClickOutside';
+export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName';
@@ -6,10 +6,6 @@
  position: relative;
 }

-.body {
-
-}
-
 .footer {
  display: flex;
  justify-content: space-between;
@@ -35,3 +31,8 @@
  padding: 0 2px 0 5px;
  vertical-align: middle;
 }
+
+.authorName {
+  margin-right: 5px;
+  font-weight: bold;
+}
@@ -2,13 +2,14 @@ import React from 'react';
 import t from 'coral-framework/services/i18n';
 import {ReplyButton} from 'talk-plugin-replies';
 import PubDate from 'talk-plugin-pubdate/PubDate';
-import AuthorName from 'talk-plugin-author-name/AuthorName';
 import styles from './FakeComment.css';
 import {Icon} from 'plugin-api/beta/client/components/ui';

 export const FakeComment = ({username, created_at, body}) => (
  <div className={styles.root}>
-    <AuthorName author={{username}} />
+    <span className={styles.authorName}>
+      {username}
+    </span>;
    <PubDate created_at={created_at} />
    <div className={styles.body}>
      {body}
@@ -64,4 +64,4 @@

 .actionsContainer {
  text-align: right;
-}
+}
@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
 import {t, timeago} from 'plugin-api/beta/client/services';
-import {Slot} from 'plugin-api/beta/client/components';
+import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';

@@ -22,9 +22,16 @@ class Comment extends React.Component {
        </blockquote>

        <div className={cn(`${pluginName}-comment-username-box`)}>
-          <strong className={cn(styles.username, `${pluginName}-comment-username`)}>
-            {comment.user.username}
-          </strong>
+
+          <Slot
+            className={cn(styles.username, `${pluginName}-comment-username`)}
+            fill="commentAuthorName"
+            defaultComponent={CommentAuthorName}
+            queryData={{comment, asset, root}}
+            data={data}
+            inline
+          />
+
          <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
            ,{' '}{timeago(comment.created_at)}
          </span>
@@ -5,6 +5,7 @@ import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';

 const slots = [
  'commentReactions',
+  'commentAuthorName',
 ];

 export default withFragments({