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,