wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-16 11:22:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into query-by-tags

Browse Source
This commit is contained in:
Kim Gardner
2017-07-12 12:21:20 -04:00
committed by GitHub
parent fc31a2882d 5d9d01d87f
commit 9b36fcebe9
55 changed files with 1085 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1
View File
@@ -13,4 +13,5 @@ plugins/*
!plugins/coral-plugin-viewing-options
!plugins/coral-plugin-comment-content
!plugins/talk-plugin-permalink
!plugins/talk-plugin-featured
node_modules
.gitignore
+1
View File
@@ -26,5 +26,6 @@ plugins/*
!plugins/coral-plugin-viewing-options
!plugins/coral-plugin-comment-content
!plugins/talk-plugin-permalink
!plugins/talk-plugin-featured
**/node_modules/*
client/coral-embed-stream/src/actions/stream.js
+4
View File
@@ -47,3 +47,7 @@ export const removeCommentClassName = (idx) => ({
type: actions.REMOVE_COMMENT_CLASSNAME,
idx
});
export const setActiveTab = (tab) => (dispatch) => {
dispatch({type: actions.SET_ACTIVE_TAB, tab});
};
client/coral-embed-stream/src/components/AllCommentsPane.js
+202
View File
@@ -0,0 +1,202 @@
import React from 'react';
import LoadMore from './LoadMore';
import IgnoredCommentTombstone from './IgnoredCommentTombstone';
import NewCount from './NewCount';
import {TransitionGroup} from 'react-transition-group';
import {forEachError} from 'coral-framework/utils';
import Comment from '../components/Comment';
const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
// resetCursors will return the id cursors of the first and second comment of
// the current comment list. The cursors are used to dertermine which
// comments to show. The spare cursor functions as a backup in case one
// of the comments gets deleted.
function resetCursors(state, props) {
const comments = props.root.asset.comments;
if (comments && comments.nodes.length) {
const idCursors = [comments.nodes[0].id];
if (comments.nodes[1]) {
idCursors.push(comments.nodes[1].id);
}
return {idCursors};
}
return {idCursors: []};
}
// invalidateCursor is called whenever a comment is removed which is referenced
// by one of the 2 id cursors. It returns a new set of id cursors calculated
// using the help of the backup cursor.
function invalidateCursor(invalidated, state, props) {
const alt = invalidated === 1 ? 0 : 1;
const comments = props.root.asset.comments;
const idCursors = [];
if (state.idCursors[alt]) {
idCursors.push(state.idCursors[alt]);
const index = comments.nodes.findIndex((node) => node.id === idCursors[0]);
const nextInLine = comments.nodes[index + 1];
if (nextInLine) {
idCursors.push(nextInLine.id);
}
}
return {idCursors};
}
class AllCommentsPane extends React.Component {
constructor(props) {
super(props);
this.state = {
...resetCursors(this.state, props),
loadingState: '',
};
}
componentWillReceiveProps(next) {
const {comments: prevComments} = this.props;
const {comments: nextComments} = next;
if (!prevComments && nextComments) {
this.setState(resetCursors);
return;
}
if (
prevComments && nextComments &&
nextComments.nodes.length < prevComments.nodes.length
) {
// Invalidate first cursor if referenced comment was removed.
if (this.state.idCursors[0] && !hasComment(nextComments.nodes, this.state.idCursors[0])) {
this.setState(invalidateCursor(0, this.state, next));
}
// Invalidate second cursor if referenced comment was removed.
if (this.state.idCursors[1] && !hasComment(nextComments.nodes, this.state.idCursors[1])) {
this.setState(invalidateCursor(1, this.state, next));
}
}
}
loadMore = () => {
this.setState({loadingState: 'loading'});
this.props.loadMore()
.then(() => {
this.setState({loadingState: 'success'});
})
.catch((error) => {
this.setState({loadingState: 'error'});
forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
});
}
viewNewComments = () => {
this.setState(resetCursors);
};
// getVisibileComments returns a list containing comments
// which were authored by current user or comes after the `idCursor`.
getVisibleComments() {
const {comments, currentUser: user} = this.props;
const idCursor = this.state.idCursors[0];
const userId = user ? user.id : null;
if (!comments) {
return [];
}
const view = [];
let pastCursor = false;
comments.nodes.forEach((comment) => {
if (comment.id === idCursor) {
pastCursor = true;
}
if (pastCursor || comment.user.id === userId) {
view.push(comment);
}
});
return view;
}
render() {
const {
data,
root,
comments,
commentClassNames,
addTag,
removeTag,
ignoreUser,
setActiveReplyBox,
activeReplyBox,
addNotification,
disableReply,
postComment,
asset,
currentUser,
postFlag,
postDontAgree,
loadNewReplies,
deleteAction,
showSignInDialog,
commentIsIgnored,
charCountEnable,
maxCharCount,
editComment,
} = this.props;
const {loadingState} = this.state;
const view = this.getVisibleComments();
return (
<div className="talk-stream-comments-container">
<NewCount
count={comments.nodes.length - view.length}
loadMore={this.viewNewComments}
/>
<TransitionGroup component='div' className="embed__stream">
{view.map((comment) => {
return commentIsIgnored(comment)
? <IgnoredCommentTombstone key={comment.id} />
: <Comment
commentClassNames={commentClassNames}
data={data}
root={root}
disableReply={disableReply}
setActiveReplyBox={setActiveReplyBox}
activeReplyBox={activeReplyBox}
addNotification={addNotification}
depth={0}
postComment={postComment}
asset={asset}
currentUser={currentUser}
postFlag={postFlag}
postDontAgree={postDontAgree}
addTag={addTag}
removeTag={removeTag}
ignoreUser={ignoreUser}
commentIsIgnored={commentIsIgnored}
loadMore={loadNewReplies}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={comment.id}
comment={comment}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
editComment={editComment}
/>;
})}
</TransitionGroup>
<LoadMore
topLevel={true}
moreComments={asset.comments.hasNextPage}
loadMore={this.loadMore}
loadingState={loadingState}
/>
</div>
);
}
}
export default AllCommentsPane;
client/coral-embed-stream/src/components/Comment.css
+18 -2
View File
@@ -1,8 +1,17 @@
.root {
margin-top: 16px;
margin-left: 20px;
margin-bottom: 15px;
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 {
@@ -52,6 +61,13 @@
font-style: italic;
}
.hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* element in the top right of the Comment */
.topRight {
float: right;
client/coral-embed-stream/src/components/Comment.js
+5 -13
View File
@@ -134,7 +134,6 @@ export default class Comment extends React.Component {
}
static propTypes = {
reactKey: PropTypes.string.isRequired,
// id of currently opened ReplyBox. tracked in Stream.js
activeReplyBox: PropTypes.string.isRequired,
@@ -148,12 +147,8 @@ export default class Comment extends React.Component {
addNotification: PropTypes.func.isRequired,
postComment: PropTypes.func.isRequired,
depth: PropTypes.number.isRequired,
liveUpdates: PropTypes.bool.isRequired,
asset: PropTypes.shape({
id: PropTypes.string,
title: PropTypes.string,
url: PropTypes.string
}).isRequired,
liveUpdates: PropTypes.bool,
asset: PropTypes.object.isRequired,
currentUser: PropTypes.shape({
id: PropTypes.string.isRequired
}),
@@ -335,7 +330,6 @@ 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;
@@ -372,7 +366,7 @@ export default class Comment extends React.Component {
addTag({
id: comment.id,
name: BEST_TAG,
assetId: asset.id
assetId: asset.id,
}),
() => 'Failed to tag comment as best'
);
@@ -382,7 +376,7 @@ export default class Comment extends React.Component {
removeTag({
id: comment.id,
name: BEST_TAG,
assetId: asset.id
assetId: asset.id,
}),
() => 'Failed to remove best comment tag'
);
@@ -435,7 +429,6 @@ export default class Comment extends React.Component {
className={rootClassName}
id={`c_${comment.id}`}
>
{!isReply && <hr aria-hidden={true} />}
<div className={commentClassName}>
<AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
{isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
@@ -491,9 +484,9 @@ export default class Comment extends React.Component {
? <EditableCommentContent
editComment={this.editComment}
addNotification={addNotification}
asset={asset}
comment={comment}
currentUser={currentUser}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
parentId={parentId}
stopEditing={this.stopEditing}
@@ -602,7 +595,6 @@ export default class Comment extends React.Component {
showSignInDialog={showSignInDialog}
commentIsIgnored={commentIsIgnored}
liveUpdates={liveUpdates}
reactKey={reply.id}
key={reply.id}
comment={reply}
/>;
client/coral-embed-stream/src/components/EditableCommentContent.js
+2 -6
View File
@@ -18,11 +18,6 @@ export class EditableCommentContent extends React.Component {
// show notification to the user (e.g. for errors)
addNotification: PropTypes.func.isRequired,
asset: PropTypes.shape({
settings: PropTypes.shape({
charCountEnable: PropTypes.bool,
}),
}).isRequired,
// comment that is being edited
comment: PropTypes.shape({
@@ -39,6 +34,7 @@ export class EditableCommentContent extends React.Component {
currentUser: PropTypes.shape({
id: PropTypes.string.isRequired
}),
charCountEnable: PropTypes.bool,
maxCharCount: PropTypes.number,
// edit a comment, passed {{ body }}
@@ -121,7 +117,7 @@ export class EditableCommentContent extends React.Component {
<div className={styles.editCommentForm}>
<CommentForm
defaultValue={this.props.comment.body}
charCountEnable={this.props.asset.settings.charCountEnable}
charCountEnable={this.props.charCountEnable}
maxCharCount={this.props.maxCharCount}
submitEnabled={this.isSubmitEnabled}
body={this.state.body}
client/coral-embed-stream/src/components/Embed.js
+37 -39
View File
@@ -4,8 +4,7 @@ import Slot from 'coral-framework/components/Slot';
import {can} from 'coral-framework/services/perms';
import t from 'coral-framework/services/i18n';
import {TabBar, Tab, TabContent, Button} from 'coral-ui';
import Count from 'coral-plugin-comment-count/CommentCount';
import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
import ProfileContainer from 'coral-settings/containers/ProfileContainer';
import ConfigureStreamContainer
from 'coral-configure/containers/ConfigureStreamContainer';
@@ -13,60 +12,59 @@ import cn from 'classnames';
export default class Embed extends React.Component {
changeTab = (tab) => {
switch (tab) {
case 0:
this.props.setActiveTab('stream');
break;
case 1:
this.props.setActiveTab('profile');
// TODO: move data fetching to profile container.
// TODO: move data fetching to appropiate containers.
switch (tab) {
case 'profile':
this.props.data.refetch();
break;
case 2:
this.props.setActiveTab('config');
// TODO: move data fetching to config container.
case 'config':
this.props.data.refetch();
break;
}
this.props.setActiveTab(tab);
};
handleShowProfile = () => this.props.setActiveTab('profile');
render() {
const {activeTab, viewAllComments, commentId} = this.props;
const {asset: {totalCommentCount}} = this.props.root;
const {activeTab, commentId} = this.props;
const {user} = this.props.auth;
const hasHighlightedComment = !!commentId;
return (
<div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
<TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-embed-stream-tab-bar'>
<Tab className={'talk-embed-stream-comments-tab'} id='stream'><Count count={totalCommentCount}/></Tab>
<Tab className={'talk-embed-stream-profile-tab'} id='profile'>{t('framework.my_profile')}</Tab>
<Tab className={'talk-embed-stream-configuration-tab'} id='config' restricted={!can(user, 'UPDATE_CONFIG')}>
{t('framework.configure_stream')}
<TabBar
onTabClick={this.changeTab}
activeTab={activeTab}
className='talk-embed-stream-tab-bar'
aria-controls='talk-embed-stream-tab-content'
>
<Tab tabId={'stream'} className={'talk-embed-stream-comments-tab'}>
{t('embed_comments_tab')}
</Tab>
<Tab tabId={'profile'} className={'talk-embed-stream-profile-tab'}>
{t('framework.my_profile')}
</Tab>
{can(user, 'UPDATE_CONFIG') &&
<Tab tabId={'config'} className={'talk-embed-stream-configuration-tab'}>
{t('framework.configure_stream')}
</Tab>
}
</TabBar>
{commentId &&
<Button
cStyle="darkGrey"
style={{float: 'right'}}
onClick={viewAllComments}
className={'talk-stream-show-all-comments-button'}
>
{t('framework.show_all_comments')}
</Button>}
<Slot fill="embed" />
<TabContent show={activeTab === 'stream'}>
<Stream data={this.props.data} root={this.props.root} />
</TabContent>
<TabContent show={activeTab === 'profile'}>
<ProfileContainer />
</TabContent>
<TabContent show={activeTab === 'config'}>
<ConfigureStreamContainer />
<TabContent
activeTab={activeTab}
id='talk-embed-stream-tab-content'
>
<TabPane tabId={'stream'}>
<Stream data={this.props.data} root={this.props.root} />
</TabPane>
<TabPane tabId={'profile'}>
<ProfileContainer />
</TabPane>
<TabPane tabId={'config'}>
<ConfigureStreamContainer />
</TabPane>
</TabContent>
</div>
);
client/coral-embed-stream/src/components/NewCount.js
+3 -2
View File
@@ -1,4 +1,5 @@
import React, {PropTypes} from 'react';
import {Button} from 'coral-ui';
import t from 'coral-framework/services/i18n';
@@ -6,11 +7,11 @@ const NewCount = ({count, loadMore}) => {
return <div className='talk-new-comments talk-load-more'>
{
count ?
<button onClick={loadMore}>
<Button onClick={loadMore}>
{count === 1
? t('framework.new_count', count, t('framework.comment'))
: t('framework.new_count', count, t('framework.comments'))}
</button>
</Button>
: null
}
</div>;
client/coral-embed-stream/src/components/Stream.css
+26
View File
@@ -0,0 +1,26 @@
.root {
margin-top: 6px;
}
.viewAllButton {
position: absolute;
right: 0px;
}
.tabPanel {
margin-top: 8px;
}
.filterWrapper {
position: absolute;
right: 0;
margin-top: 6px;
}
.highlightedContainer {
margin-top: 28px;
}
.tabContainer {
margin-top: 28px;
}
client/coral-embed-stream/src/components/Stream.js
+130 -194
View File
@@ -1,5 +1,4 @@
import React, {PropTypes} from 'react';
import LoadMore from './LoadMore';
import {StreamError} from './StreamError';
import Comment from '../components/Comment';
import SuspendedAccount from './SuspendedAccount';
@@ -10,163 +9,75 @@ import {ModerationLink} from 'coral-plugin-moderation';
import RestrictedMessageBox
from 'coral-framework/components/RestrictedMessageBox';
import t, {timeago} from 'coral-framework/services/i18n';
import {getSlotComponents} from 'coral-framework/helpers/plugins';
import CommentBox from 'coral-plugin-commentbox/CommentBox';
import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
import IgnoredCommentTombstone from './IgnoredCommentTombstone';
import NewCount from './NewCount';
import {TransitionGroup} from 'react-transition-group';
import {forEachError} from 'coral-framework/utils';
import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
import cn from 'classnames';
import {getTopLevelParent} from '../graphql/utils';
import AllCommentsPane from './AllCommentsPane';
const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
// resetCursors will return the id cursors of the first and second comment of
// the current comment list. The cursors are used to dertermine which
// comments to show. The spare cursor functions as a backup in case one
// of the comments gets deleted.
function resetCursors(state, props) {
const comments = props.root.asset.comments;
if (comments && comments.nodes.length) {
const idCursors = [comments.nodes[0].id];
if (comments.nodes[1]) {
idCursors.push(comments.nodes[1].id);
}
return {idCursors};
}
return {idCursors: []};
}
// invalidateCursor is called whenever a comment is removed which is referenced
// by one of the 2 id cursors. It returns a new set of id cursors calculated
// using the help of the backup cursor.
function invalidateCursor(invalidated, state, props) {
const alt = invalidated === 1 ? 0 : 1;
const comments = props.root.asset.comments;
const idCursors = [];
if (state.idCursors[alt]) {
idCursors.push(state.idCursors[alt]);
const index = comments.nodes.findIndex((node) => node.id === idCursors[0]);
const nextInLine = comments.nodes[index + 1];
if (nextInLine) {
idCursors.push(nextInLine.id);
}
}
return {idCursors};
}
import styles from './Stream.css';
class Stream extends React.Component {
constructor(props) {
super(props);
this.state = {
...resetCursors(this.state, props),
keepCommentBox: false,
loadingState: '',
};
}
componentWillReceiveProps(next) {
const {root: {asset: {comments: prevComments}}} = this.props;
const {root: {asset: {comments: nextComments}}} = next;
if (!prevComments && nextComments) {
this.setState(resetCursors);
return;
}
// Keep comment box when user was live suspended, banned, ...
if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) {
this.setState({keepCommentBox: true});
}
if (
prevComments && nextComments &&
nextComments.nodes.length < prevComments.nodes.length
) {
// Invalidate first cursor if referenced comment was removed.
if (this.state.idCursors[0] && !hasComment(nextComments.nodes, this.state.idCursors[0])) {
this.setState(invalidateCursor(0, this.state, next));
}
// Invalidate second cursor if referenced comment was removed.
if (this.state.idCursors[1] && !hasComment(nextComments.nodes, this.state.idCursors[1])) {
this.setState(invalidateCursor(1, this.state, next));
}
}
}
viewNewComments = () => {
this.setState(resetCursors);
};
setActiveReplyBox = (reactKey) => {
setActiveReplyBox = (id) => {
if (!this.props.auth.user) {
this.props.showSignInDialog();
} else {
this.props.setActiveReplyBox(reactKey);
this.props.setActiveReplyBox(id);
}
};
loadMoreComments = () => {
this.setState({loadingState: 'loading'});
this.props.loadMoreComments()
.then(() => {
this.setState({loadingState: 'success'});
})
.catch((error) => {
this.setState({loadingState: 'error'});
forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
});
}
// getVisibileComments returns a list containing comments
// which were authored by current user or comes after the `idCursor`.
getVisibleComments() {
const {root: {asset: {comments}}, auth: {user}} = this.props;
const idCursor = this.state.idCursors[0];
const userId = user ? user.id : null;
if (!comments) {
return [];
}
const view = [];
let pastCursor = false;
comments.nodes.forEach((comment) => {
if (comment.id === idCursor) {
pastCursor = true;
}
if (pastCursor || comment.user.id === userId) {
view.push(comment);
}
});
return view;
}
userIsDegraged({auth: {user}} = this.props) {
return !can(user, 'INTERACT_WITH_COMMUNITY');
}
render() {
const {
data,
root,
activeReplyBox,
setActiveReplyBox,
appendItemArray,
commentClassNames,
root: {asset, asset: {comments}, comment, me},
root: {asset, asset: {comments, totalCommentCount}, comment, me},
postComment,
addNotification,
editComment,
postFlag,
postDontAgree,
deleteAction,
showSignInDialog,
updateItem,
addTag,
ignoreUser,
activeStreamTab,
setActiveStreamTab,
loadNewReplies,
loadMoreComments,
viewAllComments,
auth: {loggedIn, user},
removeTag,
pluginProps,
editName
} = this.props;
const {keepCommentBox, loadingState} = this.state;
const view = this.getVisibleComments();
const {keepCommentBox} = this.state;
const open = asset.closedAt === null;
// even though the permalinked comment is the highlighted one, we're displaying its parent + replies
@@ -194,7 +105,15 @@ class Stream extends React.Component {
}
return (
<div id="stream">
<div id="stream" className={styles.root}>
{comment &&
<Button
cStyle="darkGrey"
className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
onClick={viewAllComments}
>
{t('framework.show_all_comments')}
</Button>}
{open
? <div id="commentBox">
@@ -211,7 +130,7 @@ class Stream extends React.Component {
<RestrictedMessageBox>
{t(
'stream.temporarily_suspended',
this.props.root.settings.organizationName,
root.settings.organizationName,
timeago(user.suspension.until)
)}
</RestrictedMessageBox>}
@@ -223,10 +142,10 @@ class Stream extends React.Component {
/>}
{showCommentBox &&
<CommentBox
addNotification={this.props.addNotification}
postComment={this.props.postComment}
appendItemArray={this.props.appendItemArray}
updateItem={this.props.updateItem}
addNotification={addNotification}
postComment={postComment}
appendItemArray={appendItemArray}
updateItem={updateItem}
assetId={asset.id}
premod={asset.settings.moderation}
isReply={false}
@@ -246,86 +165,103 @@ class Stream extends React.Component {
/>
)}
<div className="talk-stream-wrapper-box">
<Slot fill="streamBox" />
</div>
{/* the highlightedComment is isolated after the user followed a permalink */}
{highlightedComment
? <Comment
data={this.props.data}
root={this.props.root}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
disableReply={!open}
postComment={this.props.postComment}
asset={asset}
currentUser={user}
highlighted={comment.id}
postFlag={this.props.postFlag}
postDontAgree={this.props.postDontAgree}
loadMore={this.props.loadNewReplies}
deleteAction={this.props.deleteAction}
showSignInDialog={this.props.showSignInDialog}
key={highlightedComment.id}
commentIsIgnored={commentIsIgnored}
reactKey={highlightedComment.id}
comment={highlightedComment}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={this.props.editComment}
liveUpdates={true}
/>
: <div className="talk-stream-comments-container">
<NewCount
count={comments.nodes.length - view.length}
loadMore={this.viewNewComments}
? (
<div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
<Comment
data={data}
root={root}
commentClassNames={commentClassNames}
addTag={addTag}
removeTag={removeTag}
ignoreUser={ignoreUser}
setActiveReplyBox={setActiveReplyBox}
activeReplyBox={activeReplyBox}
addNotification={addNotification}
depth={0}
disableReply={!open}
postComment={postComment}
asset={asset}
currentUser={user}
highlighted={comment.id}
postFlag={postFlag}
postDontAgree={postDontAgree}
loadMore={loadNewReplies}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={highlightedComment.id}
commentIsIgnored={commentIsIgnored}
comment={highlightedComment}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={editComment}
liveUpdates={true}
/>
<TransitionGroup component='div' className="embed__stream">
{view.map((comment) => {
return commentIsIgnored(comment)
? <IgnoredCommentTombstone key={comment.id} />
: <Comment
commentClassNames={commentClassNames}
data={this.props.data}
root={this.props.root}
disableReply={!open}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
postComment={postComment}
asset={asset}
currentUser={user}
postFlag={postFlag}
postDontAgree={postDontAgree}
addTag={addTag}
removeTag={removeTag}
ignoreUser={ignoreUser}
commentIsIgnored={commentIsIgnored}
loadMore={this.props.loadNewReplies}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={comment.id}
reactKey={comment.id}
comment={comment}
pluginProps={pluginProps}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={this.props.editComment}
liveUpdates={false}
/>;
})}
</TransitionGroup>
<LoadMore
topLevel={true}
moreComments={asset.comments.hasNextPage}
loadMore={this.loadMoreComments}
loadingState={loadingState}
/>
</div>}
</div>
)
: <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
<div
className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
>
<Slot fill="streamFilter" />
</div>
<TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
{getSlotComponents('streamTabs').map((PluginComponent) => (
<Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
<PluginComponent
active={activeStreamTab === PluginComponent.talkPluginName}
data={data}
root={root}
asset={asset}
/>
</Tab>
))}
<Tab tabId={'all'}>
All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
</Tab>
</TabBar>
<TabContent activeTab={activeStreamTab} sub>
{getSlotComponents('streamTabPanes').map((PluginComponent) => (
<TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
<PluginComponent
data={data}
root={root}
asset={asset}
/>
</TabPane>
))}
<TabPane tabId={'all'}>
<AllCommentsPane
data={data}
root={root}
comments={comments}
commentClassNames={commentClassNames}
addTag={addTag}
removeTag={removeTag}
ignoreUser={ignoreUser}
setActiveReplyBox={setActiveReplyBox}
activeReplyBox={activeReplyBox}
addNotification={addNotification}
disableReply={!open}
postComment={postComment}
asset={asset}
currentUser={user}
postFlag={postFlag}
postDontAgree={postDontAgree}
loadMore={loadMoreComments}
loadNewReplies={loadNewReplies}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
commentIsIgnored={commentIsIgnored}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={editComment}
/>
</TabPane>
</TabContent>
</div>
}
</div>
);
}
client/coral-embed-stream/src/constants/stream.js
+1
View File
@@ -4,3 +4,4 @@ export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
export const THREADING_LEVEL = process.env.TALK_THREADING_LEVEL;
export const SET_ACTIVE_TAB = 'CORAL_STREAM_SET_ACTIVE_TAB';
client/coral-embed-stream/src/containers/Embed.js
-5
View File
@@ -18,7 +18,6 @@ import {addNotification} from 'coral-framework/actions/notification';
import t from 'coral-framework/services/i18n';
import {setActiveTab} from '../actions/embed';
import {viewAllComments} from '../actions/stream';
const {logout, checkLogin} = authActions;
const {fetchAssetSuccess} = assetActions;
@@ -148,9 +147,6 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
const EMBED_QUERY = gql`
query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
asset(id: $assetId, url: $assetUrl) {
totalCommentCount(excludeIgnored: $excludeIgnored)
}
me {
id
status
@@ -187,7 +183,6 @@ const mapDispatchToProps = (dispatch) =>
logout,
checkLogin,
setActiveTab,
viewAllComments,
fetchAssetSuccess,
addNotification,
},
client/coral-embed-stream/src/containers/Stream.js
+15 -1
View File
@@ -11,10 +11,11 @@ import {
import * as authActions from 'coral-framework/actions/auth';
import * as notificationActions from 'coral-framework/actions/notification';
import {editName} from 'coral-framework/actions/user';
import {setActiveReplyBox} from '../actions/stream';
import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
import Stream from '../components/Stream';
import Comment from './Comment';
import {withFragments} from 'coral-framework/hocs';
import {getSlotsFragments} from 'coral-framework/helpers/plugins';
import {Spinner} from 'coral-ui';
import {getDefinitionName} from 'coral-framework/utils';
import {
@@ -230,6 +231,11 @@ const LOAD_MORE_QUERY = gql`
${Comment.fragments.comment}
`;
const pluginFragments = getSlotsFragments([
'streamTabs',
'streamTabPanes',
]);
const fragments = {
root: gql`
fragment CoralEmbedStream_Stream_root on RootQuery {
@@ -271,6 +277,7 @@ const fragments = {
startCursor
endCursor
}
${pluginFragments.spreads('asset')}
}
me {
status
@@ -281,8 +288,11 @@ const fragments = {
settings {
organizationName
}
${pluginFragments.spreads('root')}
...${getDefinitionName(Comment.fragments.root)}
}
${pluginFragments.definitions('asset')}
${pluginFragments.definitions('root')}
${Comment.fragments.root}
${commentFragment}
`,
@@ -298,6 +308,8 @@ const mapStateToProps = (state) => ({
assetUrl: state.stream.assetUrl,
activeTab: state.embed.activeTab,
previousTab: state.embed.previousTab,
activeStreamTab: state.stream.activeTab,
previousStreamTab: state.stream.previousTab,
commentClassNames: state.stream.commentClassNames
});
@@ -307,6 +319,8 @@ const mapDispatchToProps = (dispatch) =>
addNotification,
setActiveReplyBox,
editName,
viewAllComments,
setActiveStreamTab: setActiveTab,
}, dispatch);
export default compose(
client/coral-embed-stream/src/reducers/stream.js
+9 -1
View File
@@ -20,11 +20,19 @@ const initialState = {
assetId: getQueryVariable('asset_id'),
assetUrl: getQueryVariable('asset_url'),
commentId: getQueryVariable('comment_id'),
commentClassNames: []
commentClassNames: [],
activeTab: 'all',
previousTab: '',
};
export default function stream(state = initialState, action) {
switch (action.type) {
case actions.SET_ACTIVE_TAB:
return {
...state,
activeTab: action.tab,
previousTab: state.activeTab,
};
case authActions.LOGOUT:
return {
...state,
client/coral-embed-stream/style/default.css
+7 -21
View File
@@ -25,24 +25,24 @@ body {
min-height: 600px;
}
button {
margin: 5px 0px 5px 0px;
.coralButton {
margin: 5px 10px 5px 0px;
background: none;
padding: 0px;
border: none;
font-size: inherit;
}
button:hover {
.coralButton:hover {
border-radius: 2px;
color: #767676;
}
button i {
.coralButton i {
margin-right: 3px;
}
hr {
.coralHr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -181,10 +181,6 @@ hr {
display: none;
}
.talk-stream-wrapper-box {
padding: 10px 0;
}
.talk-stream-comments-container {
position: relative;
}
@@ -426,9 +422,8 @@ button.comment__action-button[disabled],
.talk-new-comments {
width: 100%;
display: flex;
justify-content: center;
cursor: pointer;
text-align: center;
margin: 4px 0;
}
.talk-load-more-replies {
@@ -437,12 +432,6 @@ button.comment__action-button[disabled],
box-sizing: border-box;
}
.talk-new-comments {
position: relative;
top: 1.8em;
z-index: 100;
}
.talk-load-more-replies .talk-load-more-button {
background-color: transparent;
color: #979797;
@@ -455,7 +444,4 @@ button.comment__action-button[disabled],
color: white;
}
.talk-new-comments button.talk-load-more{
width: initial;
}
client/coral-framework/helpers/plugins.js
+21 -6
View File
@@ -10,17 +10,17 @@ import {loadTranslations} from 'coral-framework/services/i18n';
import {injectReducers, getStore} from 'coral-framework/services/store';
import camelize from './camelize';
function getSlotComponents(slot) {
export function getSlotComponents(slot) {
const pluginConfig = getStore().getState().config.plugin_config;
// Filter out components that have been disabled in `plugin_config`
return flatten(plugins
// Filter out components that have slots and have been disabled in `plugin_config`
.filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.plugin] || !pluginConfig[o.plugin].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]));
.map((o) => o.module.slots[slot])
);
}
export function isSlotEmpty(slot) {
@@ -113,7 +113,22 @@ export function injectPluginsReducers() {
const reducers = merge(
...plugins
.filter((o) => o.module.reducer)
.map((o) => ({[camelize(o.plugin)] : o.module.reducer}))
.map((o) => ({[camelize(o.name)] : o.module.reducer}))
);
injectReducers(reducers);
}
function addMetaDataToSlotComponents() {
// Add talkPluginName to Slot Components.
plugins.forEach((plugin) => {
const slots = plugin.module.slots;
slots && Object.keys(slots).forEach((slot) => {
slots[slot].forEach((component) => {
component.talkPluginName = plugin.name;
});
});
});
}
addMetaDataToSlotComponents();
client/coral-framework/loaders/plugins-loader.js
+1 -1
View File
@@ -22,7 +22,7 @@ module.exports = function(source) {
const config = this.exec(source, this.resourcePath);
const plugins = getPluginList(config).map((plugin) => `{
module: require('${plugin}/client'),
plugin: '${plugin}'
name: '${plugin}'
}`);
return stripIndent`
client/coral-framework/styles/reset.css
+29
View File
@@ -0,0 +1,29 @@
.buttonReset {
/* reset button */
user-select: none;
outline: invert none medium;
border: none;
touch-action: manipulation;
padding: 0;
position: relative;
overflow: hidden;
/* Unify anchor and button. */
cursor: pointer;
display: inline-block;
box-sizing: border-box;
text-align: center;
text-decoration: none;
align-items: flex-start;
vertical-align: middle;
whiteSpace: nowrap;
background: transparent;
font-size: inherit;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
&::-moz-focus-inner: {
border: 0;
}
}
client/coral-plugin-best/BestButton.css
+4
View File
@@ -0,0 +1,4 @@
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
margin: 5px 10px 5px 0px;
}
client/coral-plugin-best/BestButton.js
+3 -2
View File
@@ -3,7 +3,8 @@ import React, {Component, PropTypes} from 'react';
import t from 'coral-framework/services/i18n';
import {Icon} from 'coral-ui';
import classnames from 'classnames';
import cn from 'classnames';
import styles from './BestButton.css';
// tag string for best comments
export const BEST_TAG = 'BEST';
@@ -95,7 +96,7 @@ export class BestButton extends Component {
return (
<button onClick={isBest ? this.onClickRemoveBest : this.onClickAddBest}
disabled={disabled}
className={classnames(`${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
className={cn(styles.button, `${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
aria-label={t(isBest ? 'unset_best' : 'set_best')}>
<Icon name={ isBest ? 'star' : 'star_border' } />
</button>
client/coral-plugin-comment-count/CommentCount.js
-17
View File
@@ -1,17 +0,0 @@
import React, {PropTypes} from 'react';
import t from 'coral-framework/services/i18n';
const name = 'coral-plugin-comment-count';
const CommentCount = ({count}) => {
return <div className={`${name}-text`}>
{`${count} ${count === 1 ? t('comment_singular') : t('comment_plural')}`}
</div>;
};
CommentCount.propTypes = {
count: PropTypes.number.isRequired
};
export default CommentCount;
client/coral-plugin-flags/components/styles.css
+1
View File
@@ -1,4 +1,5 @@
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
margin: 5px 0px 5px 10px;
}
client/coral-plugin-replies/ReplyButton.css
+5
View File
@@ -1,3 +1,8 @@
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
margin: 5px 10px 5px 0px;
}
@media (max-width: 425px) {
.label {
display: none;
client/coral-plugin-replies/ReplyButton.js
+1 -1
View File
@@ -10,7 +10,7 @@ const name = 'coral-plugin-replies';
const ReplyButton = ({onClick}) => {
return (
<button
className={cn(`${name}-reply-button`)}
className={cn(`${name}-reply-button`, styles.button)}
onClick={onClick}>
<span className={cn(`${name}-label`, styles.label)}>
{t('reply')}
client/coral-ui/components/Tab.css
+67 -6
View File
@@ -1,9 +1,70 @@
li.base--active {
background: white;
font-weight: bold;
.root {
display: inline-block;
margin-right: -1px;
margin-bottom: -1px;
}
li.material--active {
font-weight: bold;
border-bottom: solid 2px black;
.rootActive {
}
.rootSub {
display: inline-block;
margin-bottom: -2px;
}
.rootSubActive {
}
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
padding: 8px 10px;
color: #4E5259;
border: solid 1px #D8D8D8;
background: #F0F0F0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 13px;
outline: none;
}
.button:hover, .button:focus {
background: #d5d5d5;
border-bottom: 1px solid #d5d5d5;
}
.buttonActive, .buttonActive:hover, .buttonActive:focus {
background: white;
font-weight: bold;
border-bottom: 1px solid white;
}
.buttonSub {
composes: buttonReset from "coral-framework/styles/reset.css";
color: black;
border: none;
background: transparent;
padding: 6px 12px;
margin-bottom: 3px;
outline: none;
}
.buttonSub:hover, .buttonSub:focus {
background: transparent;
border-bottom: solid 3px #d5d5d5;
margin-bottom: 0px;
}
.buttonSubActive, .buttonSubActive:hover, .buttonSubActive:focus {
font-weight: bold;
border-bottom: solid 3px #10589b;
margin-bottom: 0px;
padding: 6px 10px;
}
.root:only-child .button, .rootSub:only-child .buttonSub {
cursor: default;
pointer-events: none;
}
client/coral-ui/components/Tab.js
+106 -9
View File
@@ -1,12 +1,109 @@
import React from 'react';
import styles from './Tab.css';
import cn from 'classnames';
import PropTypes from 'prop-types';
export default ({children, tabId, active, onTabClick, cStyle = 'base', ...props}) => (
<li
key={tabId}
className={`${active ? `${styles[`${cStyle}--active`]} talk-tab-active` : ''} talk-tab ${props.className}`}
onClick={() => onTabClick(tabId)}
>
{children}
</li>
);
/**
* The `Tab` component is used inside the `TabBar` Component, to
* render tabs.
*/
class Tab extends React.Component {
handleTabClick = () => {
if (this.props.onTabClick) {
this.props.onTabClick(this.props.tabId);
}
}
getRootClassName({active, className, sub, classNames = {}} = this.props) {
return cn(
'talk-tab',
className,
{
[classNames.root || styles.root]: !sub,
[classNames.rootSub || styles.rootSub]: sub,
[classNames.rootActive || styles.rootActive]: active && !sub,
[classNames.rootSubActive || styles.rootSubActive]: active && sub,
'talk-tab-active': active,
}
);
}
getButtonClassName({sub, active, classNames = {}} = this.props) {
return cn(
'talk-tab-button',
{
[classNames.button || styles.button]: !sub,
[classNames.buttonSub || styles.buttonSub]: sub,
[classNames.buttonActive || styles.buttonActive]: active && !sub,
[classNames.buttonSubActive || styles.buttonSubActive]: active && sub,
}
);
}
render() {
const {
children,
classNames: _a,
active,
onTabClick: _c,
tabId: _d,
sub: _e,
'aria-controls': ariaControls,
...rest,
} = this.props;
return (
<li
{...rest}
role="presentation"
className={this.getRootClassName()}
>
<button
aria-controls={ariaControls}
role="tab"
aria-selected={active}
className={this.getButtonClassName()}
onClick={this.handleTabClick}
>
{children}
</button>
</li>
);
}
}
Tab.propTypes = {
// className to be added to the root element.
className: PropTypes.string,
// classNames allows full design customization of the component.
classNames: PropTypes.shape({
root: PropTypes.string,
rootActive: PropTypes.string,
rootSub: PropTypes.string,
rootSubActive: PropTypes.string,
button: PropTypes.string,
buttonActive: PropTypes.string,
buttonSub: PropTypes.string,
buttonSubActive: PropTypes.string,
}),
// active indicates that this tab is currently active.
// This is injected by the `TabBar` component.
active: PropTypes.bool,
// onTabClick is fired whenever the tab was clicked. The tabId is passed as
// the first argument.
onTabClick: PropTypes.func,
// Sub indicates that this is a tab of a sub-tab-panel.
// This is injected by the `TabBar` component.
sub: PropTypes.bool,
// `aria-controls` should be set to the `id` of the `TabContent` for accessibility.
// This is injected by the `TabBar` component.
'aria-controls': PropTypes.string,
};
export default Tab;
client/coral-ui/components/TabBar.css
+5 -35
View File
@@ -1,44 +1,14 @@
.base {
.root {
list-style: none;
border-bottom: solid 1px #D8D8D8;
padding: 0;
margin: 0;
}
.base li {
color: #4E5259;
border: solid 1px #D8D8D8;
background: #F0F0F0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: inline-block;
border-bottom: none;
padding: 8px 10px;
margin-right: -1px;
user-select: none;
font-size: 13px;
}
.base li:hover {
background: #d5d5d5;
cursor: pointer;
}
.material {
.rootSub {
list-style: none;
border: none;
padding: 0;
}
.material li {
color: black;
border: none;
border-bottom: solid 2px white;
background: white;
padding: 8px 0;
margin-right: 40px;
}
.material li:hover {
background: white;
border-bottom: solid 2px grey;
margin: 0;
border-bottom: solid 2px #eee;
}
client/coral-ui/components/TabBar.js
+72 -23
View File
@@ -1,37 +1,86 @@
import React from 'react';
import styles from './TabBar.css';
import cn from 'classnames';
import Tab from './Tab';
import PropTypes from 'prop-types';
/**
* The `TabBar` component accepts `Tab` components to create
* a tab bar.
*/
class TabBar extends React.Component {
constructor(props) {
super(props);
this.handleClickTab = this.handleClickTab.bind(this);
}
handleClickTab(tabId) {
if (this.props.onChange) {
this.props.onChange(tabId);
}
getRootClassName({className, classNames = {}, sub} = this.props) {
return cn(
'talk-tab-bar',
className,
{
[classNames.root || styles.root]: !sub,
[classNames.rootSub || styles.rootSub]: sub,
}
);
}
render() {
const {children, activeTab, cStyle = 'base'} = this.props;
const {
children,
activeTab,
tabClassNames,
classNames: _a,
onTabClick: _b,
'aria-controls': ariaControls,
sub,
...rest,
} = this.props;
return (
<div>
<ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} talk-tab-bar ${this.props.className}`}>
{React.Children.toArray(children)
.filter((child) => !child.props.restricted)
.map((child, tabId) =>
React.cloneElement(child, {
tabId,
active: child.props.id === activeTab,
onTabClick: this.handleClickTab,
cStyle
})
)}
</ul>
</div>
<ul
{...rest}
role="tablist"
className={this.getRootClassName()}
>
{React.Children.toArray(children)
.map((child, i) =>
React.cloneElement(child, {
tabId: (child.props.tabId !== undefined) ? child.props.tabId : i,
active: child.props.tabId === activeTab,
onTabClick: this.props.onTabClick,
classNames: tabClassNames,
'aria-controls': ariaControls,
sub,
})
)}
</ul>
);
}
}
TabBar.propTypes = {
// className to be added to the root element.
className: PropTypes.string,
// classNames allows full design customization of the component.
classNames: PropTypes.shape({
root: PropTypes.string,
rootSub: PropTypes.string,
}),
// classNames to be passed to the children.
tabClassNames: Tab.propTypes.classNames,
// activeTab should be set to the currently active tabId.
activeTab: PropTypes.string,
// onTabClick is fired whenever the tab was clicked. The tabId is passed as
// the first argument.
onTabClick: PropTypes.func,
// Sub indicates that this is a sub-tab-panel.
sub: PropTypes.bool,
// `aria-controls` should be set to the `id` of the `TabContent` for accessibility.
'aria-controls': PropTypes.string,
};
export default TabBar;
client/coral-ui/components/TabContent.css
+3
View File
@@ -0,0 +1,3 @@
.root {
padding-top: 10px;
}
client/coral-ui/components/TabContent.js
+39 -2
View File
@@ -1,6 +1,43 @@
import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import styles from './TabContent.css';
export default ({children, show = true}) => (
show ? <div>{children}</div> : null
function getRootClassName(className) {
return cn('talk-tab-content', className, styles.root);
}
/**
* The `TabContent` component accepts `TabPane` components to render
* the content of a `Tab`.
*/
const TabContent = ({children, className, activeTab, sub, ...rest}) => (
<div
{...rest}
className={getRootClassName(className)}
>
{
React.Children.toArray(children)
.filter((child) => child.props.tabId === activeTab)
.map((child, i) =>
React.cloneElement(child, {
tabId: (child.props.tabId !== undefined) ? child.props.tabId : i,
sub,
}))
}
</div>
);
TabContent.propTypes = {
// className to be added to the root element.
className: PropTypes.string,
// activeTab should be set to the currently active tabId.
activeTab: PropTypes.string,
// Sub indicates that this component belongs to a sub-tab-panel.
sub: PropTypes.bool,
};
export default TabContent;
client/coral-ui/components/TabCount.css
+18
View File
@@ -0,0 +1,18 @@
.root, .rootSub {
display: inline-block;
position: relative;
top: -2px;
background: #616161;
color: white;
font-weight: normal;
font-size: 10px;
padding: 2px;
margin-left: 2px;
margin-top: -2px;
min-width: 20px;
}
.rootSubActive {
background: #10589b;
}
client/coral-ui/components/TabCount.js
+47
View File
@@ -0,0 +1,47 @@
import React from 'react';
import cn from 'classnames';
import styles from './TabCount.css';
import PropTypes from 'prop-types';
function getNumber(no) {
let result = Number.parseInt(no);
if (no >= 1000) {
result = `${Math.round(result / 100) / 10}k`;
}
return result;
}
function getRootClassName({className, active, sub}) {
return cn(
'talk-tab-count',
className,
{
[styles.root]: !sub,
[styles.rootSub]: sub,
[styles.rootActive]: active && !sub,
[styles.rootSubActive]: active && sub,
'talk-tab-active': active,
}
);
}
/**
* The `TabCount` renders a count number next to a tab name.
*/
const TabCount = ({children, active, sub, className}) => (
<span className={getRootClassName({className, active, sub})}>{getNumber(children)}</span>
);
TabCount.propTypes = {
// className to be added to the root element.
className: PropTypes.string,
// active indicates that the related tab is currently active.
active: PropTypes.bool,
// Sub indicates that this component belongs to a sub-tab-panel.
sub: PropTypes.bool,
};
export default TabCount;
client/coral-ui/components/TabPane.js
+34
View File
@@ -0,0 +1,34 @@
import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
function getRootClassName(className) {
return cn('talk-pane', className);
}
/**
* The `TabPane` component is used inside the `TabContent` component to render
* the content of a `Tab`.
*/
const TabPane = ({children, className, tabId: _a, sub: _b, ...rest}) => (
<div
{...rest}
className={getRootClassName(className)}
>
{children}
</div>
);
TabPane.propTypes = {
// className to be added to the root element.
className: PropTypes.string,
tabId: PropTypes.string,
// Sub indicates that this component belongs to a sub-tab-panel.
// This is injected by the `TabContent` component.
sub: PropTypes.bool,
};
export default TabPane;
client/coral-ui/index.js
+2
View File
@@ -4,7 +4,9 @@ export {default as CoralLogo} from './components/CoralLogo';
export {default as FabButton} from './components/FabButton';
export {default as TabBar} from './components/TabBar';
export {default as Tab} from './components/Tab';
export {default as TabCount} from './components/TabCount';
export {default as TabContent} from './components/TabContent';
export {default as TabPane} from './components/TabPane';
export {default as Button} from './components/Button';
export {default as Spinner} from './components/Spinner';
export {default as Tooltip} from './components/Tooltip';
locales/en.yml
+1
View File
@@ -2,6 +2,7 @@ en:
your_account_has_been_suspended: Your account has been temporarily suspended.
your_account_has_been_banned: Your account has been banned.
your_username_has_been_rejected: Your account has been suspended because your username has been deemed inappropriate. To restore your account please enter a new username.
embed_comments_tab: Comments
bandialog:
are_you_sure: "Are you sure you would like to ban {0}?"
ban_user: "Ban User?"
locales/es.yml
+1
View File
@@ -2,6 +2,7 @@ es:
your_account_has_been_suspended: Su cuenta ha sido temporalmente suspendida.
your_account_has_been_banned: Su cuenta ha sido suspendida.
your_username_has_been_rejected: Su cuenta ha sido suspendida porque tu nombre de usuario ha sido considerado no apropiado para el espacio. Para recuperar la cuenta, por favor ingresar un nuevo nombre de usuario.
embed_comments_tab: Comentarios
bandialog:
are_you_sure: "¿Estás segura que quieres suspender a {0}?"
ban_user: "¿Quieres suspender el Usuario?"
plugins/coral-plugin-auth/client/components/styles.css
+1 -1
View File
@@ -66,7 +66,7 @@ input.error{
}
.userBox {
padding: 10px 0 20px;
margin: 10px 0 20px;
letter-spacing: 0.1px;
}
plugins/coral-plugin-like/client/LikeButton.js
+1 -1
View File
@@ -48,7 +48,7 @@ class LikeButton extends React.Component {
<span className={cn(`${plugin}-label`, styles.label)}>
{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}
</span>
<Icon name="thumb_up" className={`${plugin}-icon`} />
<Icon name="thumb_up" className={cn(`${plugin}-icon`, styles.icon)} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
</div>
plugins/coral-plugin-like/client/styles.css
+4
View File
@@ -24,6 +24,10 @@
}
}
.icon {
padding: 0 2px;
}
@media (max-width: 425px) {
.label {
display: none;
plugins/coral-plugin-love/client/LoveButton.js
+1 -1
View File
@@ -48,7 +48,7 @@ class LoveButton extends React.Component {
<span className={cn(`${plugin}-label`, styles.label)}>
{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}
</span>
<Icon name="favorite" className={`${plugin}-icon`} />
<Icon name="favorite" className={cn(`${plugin}-icon`, styles.icon)} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
</div>
plugins/coral-plugin-love/client/styles.css
+4
View File
@@ -24,6 +24,10 @@
}
}
.icon {
padding: 0 2px;
}
@media (max-width: 425px) {
.label {
display: none;
plugins/coral-plugin-respect/client/styles.css
+1 -1
View File
@@ -26,7 +26,7 @@
}
.icon {
padding: 0 5px;
padding: 0 2px;
}
@media (max-width: 425px) {
plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
+7 -9
View File
@@ -1,20 +1,17 @@
.root {
float: right;
text-align: right;
position: relative;
display: inline-block;
min-width: 220px;
z-index: 10;
position: relative;
cursor: pointer;
}
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
}
.list {
background: white;
position: absolute;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
right: 3px;
right: 0px;
top: 20px;
z-index: 10;
}
.list > ul, .list > ul > li {
@@ -25,4 +22,5 @@
.list > ul > li {
padding: 10px;
list-style: none;
white-space: nowrap;
}
plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
+31 -22
View File
@@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import styles from './ViewingOptions.css';
import {Slot} from 'plugin-api/beta/client/components';
import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
import {Icon} from 'plugin-api/beta/client/components/ui';
const ViewingOptions = (props) => {
@@ -12,29 +12,38 @@ const ViewingOptions = (props) => {
props.closeViewingOptions();
}
};
const handleClickOutside = () => {
if (props.open) {
props.closeViewingOptions();
}
};
return (
<div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
<div>
<a onClick={toggleOpen}>Viewing Options
{props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
</a>
<ClickOutside onClickOutside={handleClickOutside}>
<div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
<div>
<button className={styles.button} onClick={toggleOpen}>Viewing Options
{props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
</button>
</div>
{
props.open ? (
<div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
<ul>
{
React.Children.map(<Slot fill="viewingOptions" />, (component) => {
return React.createElement('li', {
className: 'coral-plugin-viewing-options-item'
}, component);
})
}
</ul>
</div>
) : null
}
</div>
{
props.open ? (
<div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
<ul>
{
React.Children.map(<Slot fill="viewingOptions" />, (component) => {
return React.createElement('li', {
className: 'coral-plugin-viewing-options-item'
}, component);
})
}
</ul>
</div>
) : null
}
</div>
</ClickOutside>
);
};
plugins/coral-plugin-viewing-options/client/index.js
+1 -1
View File
@@ -4,6 +4,6 @@ import reducer from './reducer';
export default {
reducer,
slots: {
streamBox: [ViewingOptions]
streamFilter: [ViewingOptions]
}
};
plugins/talk-plugin-featured/client/.babelrc
+14
View File
@@ -0,0 +1,14 @@
{
"presets": [
"es2015"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-assign",
"transform-object-rest-spread",
"transform-async-to-generator",
"transform-react-jsx"
]
}
plugins/talk-plugin-featured/client/.eslintrc.json
+23
View File
@@ -0,0 +1,23 @@
{
"env": {
"browser": true,
"es6": true,
"mocha": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
}
},
"parser": "babel-eslint",
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-console": ["warn", { "allow": ["warn", "error"] }]
}
}
plugins/talk-plugin-featured/client/components/Tab.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
import {TabCount} from 'plugin-api/beta/client/components/ui';
// TODO: This is just example code, and needs to replaced by an actual implementation.
export default ({active, asset: {recentComments}}) => (
<span>
Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
</span>
);
plugins/talk-plugin-featured/client/components/TabPane.js
+16
View File
@@ -0,0 +1,16 @@
import React from 'react';
// TODO: This is just example code, and needs to replaced by an actual implementation.
export default ({asset: {recentComments}}) => (
<div>
{recentComments.map((comment) => (
<div key={comment.id}>
<div><strong>{comment.user.username}</strong></div>
<div>
{comment.body}
</div>
<hr />
</div>
))}
</div>
);
plugins/talk-plugin-featured/client/containers/Tab.js
+17
View File
@@ -0,0 +1,17 @@
import {compose, gql} from 'react-apollo';
import withFragments from 'coral-framework/hocs/withFragments';
import Tab from '../components/Tab';
// TODO: This is just example code, and needs to replaced by an actual implementation.
const enhance = compose(
withFragments({
asset: gql`
fragment TalkFeatured_Tab_asset on Asset {
recentComments {
id
}
}`,
}),
);
export default enhance(Tab);
plugins/talk-plugin-featured/client/containers/TabPane.js
+22
View File
@@ -0,0 +1,22 @@
import {compose, gql} from 'react-apollo';
import withFragments from 'coral-framework/hocs/withFragments';
import TabPane from '../components/TabPane';
// TODO: This is just example code, and needs to replaced by an actual implementation.
const enhance = compose(
withFragments({
asset: gql`
fragment TalkFeatured_TabPane_asset on Asset {
recentComments {
id
body
user {
id
username
}
}
}`,
}),
);
export default enhance(TabPane);
plugins/talk-plugin-featured/client/index.js
+9
View File
@@ -0,0 +1,9 @@
import Tab from './containers/Tab';
import TabPane from './containers/TabPane';
export default {
slots: {
streamTabs: [Tab],
streamTabPanes: [TabPane],
}
};
plugins/talk-plugin-featured/index.js
+2
View File
@@ -0,0 +1,2 @@
module.exports = {};
plugins/talk-plugin-permalink/client/components/styles.css
+1 -1
View File
@@ -42,8 +42,8 @@
}
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
margin: 5px 0px 5px 10px;
cursor: pointer;
}
.copyButton {