diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 11f2b7819..131b56255 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -6,6 +6,7 @@ import Comment from '../containers/Comment'; import SuspendedAccount from './SuspendedAccount'; import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox'; +import ViewingOptions from './ViewingOptions'; import Slot from 'coral-framework/components/Slot'; import InfoBox from 'coral-plugin-infobox/InfoBox'; import {can} from 'coral-framework/services/perms'; @@ -13,6 +14,7 @@ import {ModerationLink} from 'coral-plugin-moderation'; import CommentBox from 'coral-plugin-commentbox/CommentBox'; import QuestionBox from 'coral-plugin-questionbox/QuestionBox'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; + import t, {timeago} from 'coral-framework/services/i18n'; class Stream extends React.Component { @@ -108,11 +110,16 @@ class Stream extends React.Component { />} :

{asset.settings.closedMessage}

} - {loggedIn && - } + +
+ {loggedIn && + } + + +
{/* the highlightedComment is isolated after the user followed a permalink */} {highlightedComment @@ -140,7 +147,7 @@ class Stream extends React.Component { maxCharCount={asset.settings.charCount} editComment={this.props.editComment} /> - :
+ :
{ + this.setState((state) => ({ + open: !state.open + })); + } + + render() { + return ( +
+ + { + this.state.open ? ( +
+
    + { + React.Children.map(, (component) => { + return React.createElement('li', { + className: 'viewingOption' + }, component); + }) + } +
+
+ ) : null + } +
+ ); + } +} diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 04b2536a3..b24619c57 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -178,6 +178,15 @@ hr { display: none; } +.streamBox { + padding: 10px 0; +} + +.commentStreamContainer { + position: relative; + z-index: -1; +} + .commentStream { /* prevent absolutely positioned final permalink popover from being clipped */ padding-bottom: 50px; diff --git a/client/coral-plugin-moderation/styles.css b/client/coral-plugin-moderation/styles.css index 2e928d3df..734cc1e6f 100644 --- a/client/coral-plugin-moderation/styles.css +++ b/client/coral-plugin-moderation/styles.css @@ -1,4 +1,6 @@ .moderationLink { + display: inline; + a { color: #679af3; text-decoration: none; diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index 24718d1cb..fb9e6eb7a 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -1,7 +1,5 @@ import React from 'react'; -export default (props) => ( - - Filter - +export default () => ( + Hide Off-Topic Comments ); diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index f3459441d..cd591de28 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -1,11 +1,13 @@ import OffTopicCheckbox from './components/OffTopicCheckbox'; import OffTopicTag from './components/OffTopicTag'; +import OffTopicFilter from './components/OffTopicFilter'; import translations from './translations.json'; export default { translations, slots: { commentInputDetailArea: [OffTopicCheckbox], + streamViewingOptions: [OffTopicFilter], commentInfoBar: [OffTopicTag] } };