diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index 59f304b7c..e60902193 100644 --- a/src/views/preview/l10n.json +++ b/src/views/preview/l10n.json @@ -6,5 +6,7 @@ "preview.penExtensionChip": "Pen", "preview.speechExtensionChip": "Google Speech", "preview.translateExtensionChip": "Google Translate", - "preview.videoMotionChip": "Video Motion" + "preview.videoMotionChip": "Video Motion", + "preview.comments.turnOff": "Turn off commenting", + "preview.comments.turnedOff": "Sorry, comment posting has been turned off for this project." } diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index 6824de137..30993a680 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -1,6 +1,8 @@ const injectIntl = require('react-intl').injectIntl; const PropTypes = require('prop-types'); const intlShape = require('react-intl').intlShape; +const FormattedMessage = require('react-intl').FormattedMessage; + const MediaQuery = require('react-responsive').default; const React = require('react'); const Formsy = require('formsy-react').default; @@ -76,6 +78,7 @@ const PreviewPresentation = ({ onAddToStudioClicked, onAddToStudioClosed, onToggleStudio, + onToggleComments, onSeeInside, onUpdate }) => { @@ -317,16 +320,37 @@ const PreviewPresentation = ({

Comments

- {/* TODO: Add toggle comments component and logic*/} + {userOwnsProject ? ( +
+ +
+ ) : null}
- {isLoggedIn && - - } + {projectInfo.comments_allowed ? ( + isLoggedIn ? ( + + ) : ( + /* TODO add box for signing in to leave a comment */ + null + ) + ) : ( +
+ +
+ )}
@@ -399,6 +423,7 @@ PreviewPresentation.propTypes = { onReportClose: PropTypes.func.isRequired, onReportSubmit: PropTypes.func.isRequired, onSeeInside: PropTypes.func, + onToggleComments: PropTypes.func, onToggleStudio: PropTypes.func, onUpdate: PropTypes.func, originalInfo: projectShape, diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx index 76ed08b89..def3de3bd 100644 --- a/src/views/preview/preview.jsx +++ b/src/views/preview/preview.jsx @@ -48,6 +48,7 @@ class Preview extends React.Component { 'handleSeeInside', 'handleUpdateProjectTitle', 'handleUpdate', + 'handleToggleComments', 'initCounts', 'pushHistory', 'renderLogin', @@ -167,6 +168,14 @@ class Preview extends React.Component { }); }); } + handleToggleComments () { + this.props.updateProject( + this.props.projectInfo.id, + {comments_allowed: !this.props.projectInfo.comments_allowed}, + this.props.user.username, + this.props.user.token + ); + } handleAddComment (comment, topLevelCommentId) { this.props.handleAddComment(comment, topLevelCommentId); } @@ -356,6 +365,7 @@ class Preview extends React.Component { onReportClose={this.handleReportClose} onReportSubmit={this.handleReportSubmit} onSeeInside={this.handleSeeInside} + onToggleComments={this.handleToggleComments} onToggleStudio={this.handleToggleStudio} onUpdate={this.handleUpdate} /> diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 5111857e6..d62711e39 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -189,6 +189,19 @@ $stage-width: 480px; .comment-bubble { text-align: left; } + + .comments-turned-off { + border: 1px solid $ui-blue-25percent; + border-radius: .5rem; + padding: 1.5rem 0; + background: $ui-blue-10percent; + width: 100%; + text-align: center; + } + + .comments-allowed-input { + margin-right: 3px; + } } .remix-button,