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

Merge branch 'master' into french-translation

Browse Source
This commit is contained in:
Kim Gardner
2017-07-05 15:36:14 +01:00
committed by GitHub
parent 1adca208dd 15af61de67
commit 65d6d3221b
16 changed files with 214 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-embed-stream/src/components/Comment.css
+35 -5
View File
@@ -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
+42 -29
View File
@@ -9,6 +9,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 {
BestButton,
@@ -316,6 +319,7 @@ export default class Comment extends React.Component {
postDontAgree,
setActiveReplyBox,
activeReplyBox,
loadMore,
deleteAction,
disableReply,
maxCharCount,
@@ -331,9 +335,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',
@@ -346,11 +353,6 @@ 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}` : '';
// call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
const notifyOnError = (fn, errorToMessage) =>
async function(...args) {
@@ -386,7 +388,7 @@ export default class Comment extends React.Component {
);
/**
* classNamesToAdd
* conditionClassNames
* adds classNames based on condition
* classnames is an array of objects with key as classnames and value as conditions
* i.e:
@@ -396,34 +398,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}
@@ -553,7 +565,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}
@@ -583,6 +595,7 @@ export default class Comment extends React.Component {
deleteAction={deleteAction}
addTag={addTag}
removeTag={removeTag}
loadMore={loadMore}
ignoreUser={ignoreUser}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
@@ -598,7 +611,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
+3 -15
View File
@@ -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
+1 -1
View File
@@ -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
+2 -3
View File
@@ -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);
@@ -169,9 +170,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 =
client/coral-embed-stream/src/constants/stream.js
+1
View File
@@ -3,3 +3,4 @@ export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
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;
client/coral-embed-stream/src/containers/Stream.js
+44 -25
View File
@@ -2,7 +2,7 @@ import React from 'react';
import {gql, compose} from 'react-apollo';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {ADDTL_COMMENTS_ON_LOAD_MORE} from '../constants/stream';
import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../constants/stream';
import {
withPostComment, withPostFlag, withPostDontAgree, withDeleteAction,
withAddTag, withRemoveTag, withIgnoreUser, withEditComment,
@@ -91,9 +91,7 @@ class StreamContainer extends React.Component {
}
loadNewReplies = (parent_id) => {
const comment = this.props.root.comment
? this.props.root.comment.parent || this.props.root.comment // highlighted comment.
: this.props.root.asset.comments.nodes.filter((comment) => comment.id === parent_id)[0];
const comment = findCommentInEmbedQuery(this.props.root, parent_id);
return this.props.data.fetchMore({
query: LOAD_MORE_QUERY,
@@ -153,20 +151,35 @@ class StreamContainer extends React.Component {
}
}
const nest = (def, level) => {
let result = '';
for (let x = 0; x < level; x++) {
if (x === 0) {
result += def;
continue;
}
result = result.replace('...nest', def);
}
return result.replace('...nest', '');
};
const commentFragment = gql`
fragment CoralEmbedStream_Stream_comment on Comment {
id
...${getDefinitionName(Comment.fragments.comment)}
replyCount(excludeIgnored: $excludeIgnored)
replies(excludeIgnored: $excludeIgnored) {
nodes {
id
...${getDefinitionName(Comment.fragments.comment)}
${nest(`
replyCount(excludeIgnored: $excludeIgnored)
replies(excludeIgnored: $excludeIgnored) {
nodes {
id
...${getDefinitionName(Comment.fragments.comment)}
...nest
}
hasNextPage
startCursor
endCursor
}
hasNextPage
startCursor
endCursor
}
`, THREADING_LEVEL)}
}
${Comment.fragments.comment}
`;
@@ -205,16 +218,19 @@ const LOAD_MORE_QUERY = gql`
nodes {
id
...${getDefinitionName(Comment.fragments.comment)}
replyCount(excludeIgnored: $excludeIgnored)
replies(limit: 3, excludeIgnored: $excludeIgnored) {
nodes {
id
...${getDefinitionName(Comment.fragments.comment)}
${nest(`
replyCount(excludeIgnored: $excludeIgnored)
replies(limit: 3, excludeIgnored: $excludeIgnored) {
nodes {
id
...${getDefinitionName(Comment.fragments.comment)}
...nest
}
hasNextPage
startCursor
endCursor
}
hasNextPage
startCursor
endCursor
}
`, THREADING_LEVEL)}
}
hasNextPage
startCursor
@@ -229,9 +245,12 @@ const fragments = {
fragment CoralEmbedStream_Stream_root on RootQuery {
comment(id: $commentId) @include(if: $hasComment) {
...CoralEmbedStream_Stream_comment
parent {
...CoralEmbedStream_Stream_comment
}
${nest(`
parent {
...CoralEmbedStream_Stream_comment
...nest
}
`, THREADING_LEVEL)}
}
asset(id: $assetId, url: $assetUrl) {
id
client/coral-embed-stream/src/graphql/utils.js
+23 -19
View File
@@ -1,21 +1,23 @@
import update from 'immutability-helper';
import {THREADING_LEVEL} from '../constants/stream';
function applyToCommentsOrigin(root, callback) {
if (root.comment) {
if (root.comment.parent) {
return update(root, {
comment: {
parent: {
$apply: (node) => callback(node),
},
},
});
let comment = root.comment;
console.log(comment);
for (let depth = 0; depth <= THREADING_LEVEL; depth++) {
let changes = {$apply: (node) => node ? callback(node) : node};
for (let i = 0; i < depth; i++) {
changes = {parent: changes};
}
console.log(changes);
comment = update(comment, changes);
}
return update(root, {
comment: {
$apply: (node) => callback(node),
},
});
return {
...root,
comment,
};
}
return update(root, {
asset: {$apply: (asset) => callback(asset)},
@@ -97,6 +99,13 @@ export function removeCommentFromEmbedQuery(root, id) {
return applyToCommentsOrigin(root, (origin) => findAndRemoveComment(origin, id));
}
export function getTopLevelParent(comment) {
if (comment.parent) {
return getTopLevelParent(comment.parent);
}
return comment;
}
function findComment(nodes, callback) {
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
@@ -119,12 +128,7 @@ export function findCommentInEmbedQuery(root, callbackOrId) {
callback = (node) => node.id === callbackOrId;
}
if (root.comment) {
if (callback(root.comment)) {
return root.comment;
}
if (root.comment.parent && callback(root.comment.parent)) {
return root.comment.parent;
}
return findComment([getTopLevelParent(root.comment)], callback);
}
if (!root.asset.comments) {
return false;
client/coral-embed-stream/style/default.css
+25 -19
View File
@@ -26,7 +26,7 @@ body {
}
button {
margin: 5px 10px 5px 0px;
margin: 5px 0px 5px 0px;
background: none;
padding: 0px;
border: none;
@@ -266,11 +266,6 @@ hr {
float: right;
}
.highlighted-comment {
padding-left: 10px;
border-left: 3px solid rgb(35,118,216);
}
/* Tag Labels */
.coral-plugin-tag-label {
@@ -282,26 +277,16 @@ hr {
border-radius: 2px;
}
/* Reply styles */
.comment .reply {
margin: 0px 0px 10px 20px;
}
/* Comment Action Styles */
.commentActionsRight, .replyActionsRight {
display: flex;
justify-content: flex-end;
width: 30%;
}
.commentActionsLeft, .replyActionsLeft {
display: flex;
justify-content: flex-start;
float: left;
width: 70%;
}
.comment__action-container .material-icons {
@@ -422,9 +407,11 @@ button.comment__action-button[disabled],
}
.talk-load-more button {
width: 100%;
text-align: center;
color: #FFF;
background-color: #2376D8;
border-radius: 2px;
cursor: pointer;
padding: 10px;
border-radius: 2px;
@@ -437,23 +424,42 @@ button.comment__action-button[disabled],
background-color: #4399FF;
}
.talk-load-more-replies, .coral-new-comments {
.talk-new-comments {
width: 100%;
display: flex;
justify-content: center;
cursor: pointer;
}
.coral-new-comments {
.talk-load-more-replies {
width: 100%;
padding-left: 20px;
box-sizing: border-box;
}
.talk-new-comments {
position: relative;
top: 1.8em;
z-index: 100;
}
.talk-load-more-replies button.talk-load-more, .coral-new-comments button.talk-load-more{
.talk-load-more-replies .talk-load-more-button {
background-color: transparent;
color: #979797;
border: #979797 solid 1px;
border-radius: 2px;
}
.talk-load-more-replies .talk-load-more:hover button {
background-color: #979797;
color: white;
}
.talk-new-comments button.talk-load-more{
width: initial;
}
@media (min-device-width : 300px) and (max-device-width : 420px) {
.commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button {
visibility: collapse;
client/coral-plugin-flags/components/FlagButton.js
+8 -12
View File
@@ -5,6 +5,8 @@ import {can} from 'coral-framework/services/perms';
import {PopupMenu, Button} from 'coral-ui';
import ClickOutside from 'coral-framework/components/ClickOutside';
import cn from 'classnames';
import styles from './styles.css';
const name = 'coral-plugin-flags';
@@ -146,14 +148,17 @@ export default class FlagButton extends Component {
<button
ref={(ref) => this.flagButton = ref}
onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
className={`${name}-button`}>
className={cn(`${name}-button`, styles.button)}>
{
flagged
? <span className={`${name}-button-text`}>{t('reported')}</span>
: <span className={`${name}-button-text`}>{t('report')}</span>
}
<i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
style={flagged ? styles.flaggedIcon : {}}
<i className={
cn(`${name}-icon`, 'material-icons', {
flaggedIcon: flagged,
[styles.flaggedIcon]: flagged,
})}
aria-hidden={true}>flag</i>
</button>
{
@@ -214,12 +219,3 @@ export default class FlagButton extends Component {
);
}
}
const styles = {
flaggedIcon: {
color: '#F00'
},
unflaggedIcon: {
color: 'inherit'
}
};
client/coral-plugin-flags/components/styles.css
+7
View File
@@ -0,0 +1,7 @@
.button {
margin: 5px 0px 5px 10px;
}
.flaggedIcon {
color: #f00
}
locales/en.yml
+3 -3
View File
@@ -235,9 +235,9 @@ en:
success_bio_update: "Your biography has been updated"
success_name_update: "Your username has been updated"
success_update_settings: "The changes you have made have been applied to the comment stream on this article"
view_all_replies_unknown_number: "view all replies"
view_all_replies: "view {0} replies"
view_all_replies_initial: "view all {0} replies"
show_all_replies: Show all replies
show_1_more_reply: Show 1 more reply
show_x_more_replies: Show {0} more replies
view_more_comments: "view more comments"
view_reply: "view reply"
from_settings_page: "From the Profile Page you can see your comment history."
locales/es.yml
+3 -3
View File
@@ -232,9 +232,9 @@ es:
success_bio_update: "Tu biografia fue actualizada"
success_name_update: "Tu nombre de usuario ha sido actualizado"
success_update_settings: "La configuración de este articulo fue actualizada"
view_all_replies_unknown_number: "ver todas las respuestas"
view_all_replies: "ver {0} respuestas"
view_all_replies_initial: "ver todas las {0} respuestas"
show_all_replies: "Mostrar todas las respuestas"
show_1_more_reply: "Mostrar 1 respuesta más"
show_x_more_replies: "Mostrar {0} respuestas más"
view_more_comments: "Ver más comentarios"
view_reply: "ver respuesta"
from_settings_page: "Desde la página de configuración puedes ver tu historia de comentarios."
plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+4 -4
View File
@@ -66,11 +66,11 @@ export default class PermalinkButton extends React.Component {
return (
<ClickOutside onClickOutside={this.handleClickOutside}>
<div className={cn(`${name}-container`, styles.container)}>
<button
ref={(ref) => this.linkButton = ref}
onClick={this.toggle}
className={`${name}-button`}>
className={cn(`${name}-button`, styles.button)}>
{t('permalink')}
<Icon name="link" />
</button>
@@ -89,7 +89,7 @@ export default class PermalinkButton extends React.Component {
<Button
onClick={this.copyPermalink}
className={cn([
styles.button,
styles.copyButton,
`${name}-copy-button`, {
[styles.success]:copySuccessful,
[styles.failure]: copyFailure
@@ -98,7 +98,7 @@ export default class PermalinkButton extends React.Component {
{copySuccessful && 'Copied'}
{copyFailure && 'Not supported'}
</Button>
</div>
</div>
</ClickOutside>
plugins/talk-plugin-permalink/client/components/styles.css
+11 -4
View File
@@ -42,7 +42,13 @@
}
.button {
margin: 5px 0px 5px 10px;
cursor: pointer;
}
.copyButton {
display: inline-block;
margin: 5px 10px 5px 0px;
float: right;
box-sizing: border-box;
margin: 0;
@@ -52,18 +58,19 @@
height: auto;
padding: 2px;
transition: background-color 0.4s ease;
cursor: pointer;
}
.button:hover{
.copyButton:hover{
color: black;
}
.button.success {
.copyButton.success {
background-color: #00897B;
color: white;
}
.button.failure {
.copyButton.failure {
background-color: #FF5252;
color: white;
}
@@ -74,4 +81,4 @@
.active {
display: block;
}
}
webpack.config.js
+2 -1
View File
@@ -112,7 +112,8 @@ const config = {
}
}),
new webpack.EnvironmentPlugin({
'TALK_PLUGINS_JSON': '{}'
'TALK_PLUGINS_JSON': '{}',
'TALK_THREADING_LEVEL': '3'
})
],
resolveLoader: {