diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css index 4ff0586da..4c8a9fc86 100644 --- a/client/coral-embed-stream/src/components/Comment.css +++ b/client/coral-embed-stream/src/components/Comment.css @@ -1,11 +1,41 @@ -.Reply { - position: relative; +.root { + margin-top: 16px; + margin-left: 20px; margin-bottom: 15px; + position: relative; } -.Comment { - margin-bottom: 15px; - position: relative; +.rootLevel0 { + margin-left: 0px; +} + +.comment { + padding-left: 20px; +} + +.commentLevel0 { + padding-left: 0px; +} + +.commentLevel1 { + border-left: 3px #212121 solid; +} + +.commentLevel2 { + border-left: 2px #6a6a6a solid; +} + +.commentLevel3 { + border-left: 2px #9e9e9e solid; +} + +.commentLevel4 { + border-left: 2px #c1c1c1 solid; +} + +.highlightedComment { + padding-left: 20px; + border-left: 3px solid rgb(35,118,216); } .pendingComment { diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 2e854633b..0e6201caf 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -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 (
-
+ {!isReply &&
}
{isStaff(comment.tags) ? Staff : 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 {
{ 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 () { diff --git a/client/coral-embed-stream/src/components/NewCount.js b/client/coral-embed-stream/src/components/NewCount.js index 1c135ab9b..8f3b77dcb 100644 --- a/client/coral-embed-stream/src/components/NewCount.js +++ b/client/coral-embed-stream/src/components/NewCount.js @@ -3,7 +3,7 @@ import React, {PropTypes} from 'react'; import t from 'coral-framework/services/i18n'; const NewCount = ({count, loadMore}) => { - return
+ return
{ count ? { @@ -214,12 +219,3 @@ export default class FlagButton extends Component { ); } } - -const styles = { - flaggedIcon: { - color: '#F00' - }, - unflaggedIcon: { - color: 'inherit' - } -}; diff --git a/client/coral-plugin-flags/components/styles.css b/client/coral-plugin-flags/components/styles.css new file mode 100644 index 000000000..6de9df387 --- /dev/null +++ b/client/coral-plugin-flags/components/styles.css @@ -0,0 +1,7 @@ +.button { + margin: 5px 0px 5px 10px; +} + +.flaggedIcon { + color: #f00 +} diff --git a/locales/en.yml b/locales/en.yml index dce6f621b..44db5e1b8 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -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." diff --git a/locales/es.yml b/locales/es.yml index 6a0334fcd..a6b1bc4cd 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -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." diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js index fc8561bdc..55b98e5d8 100644 --- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js +++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js @@ -66,11 +66,11 @@ export default class PermalinkButton extends React.Component { return (
- + @@ -89,7 +89,7 @@ export default class PermalinkButton extends React.Component {
diff --git a/plugins/talk-plugin-permalink/client/components/styles.css b/plugins/talk-plugin-permalink/client/components/styles.css index 56d069755..f14e87881 100644 --- a/plugins/talk-plugin-permalink/client/components/styles.css +++ b/plugins/talk-plugin-permalink/client/components/styles.css @@ -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; -} \ No newline at end of file +} diff --git a/webpack.config.js b/webpack.config.js index 130ced27b..c39726882 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -112,7 +112,8 @@ const config = { } }), new webpack.EnvironmentPlugin({ - 'TALK_PLUGINS_JSON': '{}' + 'TALK_PLUGINS_JSON': '{}', + 'TALK_THREADING_LEVEL': '3' }) ], resolveLoader: {