Skip to content

GitLab

S
scratch-www
Commit 993dd36a authored by picklesrus's avatar picklesrus
Browse files
Options

WIP of being able to turn off project comments.

parent 61cf2b5b
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 65 deletions
src/components/commenting-status/commenting-status.scss
View file @ 993dd36a
......@@ -6,7 +6,6 @@
padding: 1.75rem 3rem 2rem;
margin: .5rem 0 2.25rem;
background-color: $ui-blue-10percent;
width: 100%;
text-align: center;
p {
......
src/redux/session.js
View file @ 993dd36a
......@@ -128,6 +128,8 @@ module.exports.selectToken = state => get(state, ['session', 'session', 'user',
module.exports.selectIsAdmin = state => get(state, ['session', 'session', 'permissions', 'admin'], false);
module.exports.selectIsSocial = state => get(state, ['session', 'session', 'permissions', 'social'], false);
module.exports.selectIsEducator = state => get(state, ['session', 'session', 'permissions', 'educator'], false);
module.exports.selectProjectCommentsGloballyEnabled = state =>
get(state, ['session', 'session', 'flags', 'project_comments_enabled'], false);
// NB logged out user id as NaN so that it can never be used in equality testing since NaN !== NaN
module.exports.selectUserId = state => get(state, ['session', 'session', 'user', 'id'], NaN);
src/views/preview/l10n.json
View file @ 993dd36a
......@@ -13,6 +13,7 @@
"project.comments.toggleOff": "Commenting off",
"project.comments.toggleOn": "Commenting on",
"project.comments.turnedOff": "Sorry, comment posting has been turned off for this project.",
"project.comments.turnedOffGlobally": "Project comments across Scratch are turned off, but don't worry, your comments are saved and will be back soon.",
"project.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!",
"project.share.sharedLong": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.",
"project.share.sharedShort": "Your project is now shared.",
......
src/views/preview/presentation.jsx
View file @ 993dd36a
......@@ -12,6 +12,7 @@ const GUI = require('scratch-gui').default;
const IntlGUI = injectIntl(GUI);
const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
const CommentingStatus = require('../../components/commenting-status/commenting-status.jsx');
const decorateText = require('../../lib/decorate-text.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Button = require('../../components/forms/button.jsx');
......@@ -36,7 +37,6 @@ const projectShape = require('./projectshape.jsx').projectShape;
require('./preview.scss');
const frameless = require('../../lib/frameless');
// disable enter key submission on formsy input fields; otherwise formsy thinks
// we meant to trigger the "See inside" button. Instead, treat these keypresses
// as a blur, which will trigger a save.
......@@ -74,6 +74,7 @@ const PreviewPresentation = ({
isFullScreen,
isLoggedIn,
isNewScratcher,
isProjectCommentsGloballyEnabled,
isProjectLoaded,
isRemixing,
isScratcher,
......@@ -138,7 +139,6 @@ const PreviewPresentation = ({
(!projectInfo.instructions && !projectInfo.description); // show if both are empty
const showNotesAndCredits = editable || projectInfo.description ||
(!projectInfo.instructions && !projectInfo.description); // show if both are empty
let banner;
if (visibilityInfo.deleted) { // If both censored and deleted, prioritize deleted banner
banner = (<Banner
......@@ -574,72 +574,88 @@ const PreviewPresentation = ({
</div>
) : null}
</FlexRow>
{/* Do not show the top-level comment form in single comment mode */}
{!singleCommentId && (
<FlexRow className="comments-root-reply">
{projectInfo.comments_allowed ? (
isLoggedIn ? (
isShared && <ComposeComment
{isProjectCommentsGloballyEnabled ? (
<React.Fragment>
{/* Do not show the top-level comment form in single comment mode */}
{!singleCommentId && (
<FlexRow className="comments-root-reply">
{projectInfo.comments_allowed ? (
isLoggedIn ? (
isShared && <ComposeComment
postURI={`/proxy/comments/project/${projectId}`}
onAddComment={onAddComment}
/>
) : (
/* TODO add box for signing in to leave a comment */
null
)
) : (
<div className="comments-turned-off">
<FormattedMessage id="project.comments.turnedOff" />
</div>
)}
</FlexRow>
)}
<FlexRow className="comments-list">
{comments.map(comment => (
<TopLevelComment
author={comment.author}
canDelete={canDeleteComments}
canDeleteWithoutConfirm={isAdmin}
canReply=
{isLoggedIn && projectInfo.comments_allowed && isShared}
canReport={isLoggedIn}
canRestore={canRestoreComments}
content={comment.content}
datetimeCreated={comment.datetime_created}
defaultExpanded={!!singleCommentId}
highlightedCommentId={singleCommentId}
id={comment.id}
key={comment.id}
moreRepliesToLoad={comment.moreRepliesToLoad}
parentId={comment.parent_id}
postURI={`/proxy/comments/project/${projectId}`}
replies={replies && replies[comment.id] ? replies[comment.id] : []}
visibility={comment.visibility}
onAddComment={onAddComment}
onDelete={onDeleteComment}
onLoadMoreReplies={onLoadMoreReplies}
onReport={onReportComment}
onRestore={onRestoreComment}
/>
) : (
/* TODO add box for signing in to leave a comment */
null
)
) : (
<div className="comments-turned-off">
<FormattedMessage id="project.comments.turnedOff" />
</div>
)}
</FlexRow>
)}
<FlexRow className="comments-list">
{comments.map(comment => (
<TopLevelComment
author={comment.author}
canDelete={canDeleteComments}
canDeleteWithoutConfirm={isAdmin}
canReply={isLoggedIn && projectInfo.comments_allowed && isShared}
canReport={isLoggedIn}
canRestore={canRestoreComments}
content={comment.content}
datetimeCreated={comment.datetime_created}
defaultExpanded={!!singleCommentId}
highlightedCommentId={singleCommentId}
id={comment.id}
key={comment.id}
moreRepliesToLoad={comment.moreRepliesToLoad}
parentId={comment.parent_id}
postURI={`/proxy/comments/project/${projectId}`}
replies={replies && replies[comment.id] ? replies[comment.id] : []}
visibility={comment.visibility}
onAddComment={onAddComment}
onDelete={onDeleteComment}
onLoadMoreReplies={onLoadMoreReplies}
onReport={onReportComment}
onRestore={onRestoreComment}
))}
{moreCommentsToLoad &&
<Button
className="button load-more-button"
onClick={onLoadMore}
>
<FormattedMessage id="general.loadMore" />
</Button>
}
{!!singleCommentId &&
<Button
className="button load-more-button"
onClick={onSeeAllComments}
>
<FormattedMessage id="general.seeAllComments" />
</Button>
}
</FlexRow>
</React.Fragment>
) : (
<div>
<CommentingStatus>
<p>
<FormattedMessage id="project.comments.turnedOffGlobally" />
</p>
</CommentingStatus>
<img
className="comment-placeholder-img"
src="/images/comments/comment-placeholder.png"
/>
))}
{moreCommentsToLoad &&
<Button
className="button load-more-button"
onClick={onLoadMore}
>
<FormattedMessage id="general.loadMore" />
</Button>
}
{!!singleCommentId &&
<Button
className="button load-more-button"
onClick={onSeeAllComments}
>
<FormattedMessage id="general.seeAllComments" />
</Button>
}
</FlexRow>
</div>
)}
</div>
<FlexRow className="column">
<RemixList
......@@ -687,6 +703,7 @@ PreviewPresentation.propTypes = {
isFullScreen: PropTypes.bool,
isLoggedIn: PropTypes.bool,
isNewScratcher: PropTypes.bool,
isProjectCommentsGloballyEnabled: PropTypes.bool,
isProjectLoaded: PropTypes.bool,
isRemixing: PropTypes.bool,
isScratcher: PropTypes.bool,
......
src/views/preview/preview.scss
View file @ 993dd36a
......@@ -257,6 +257,10 @@ $stage-width: 480px;
.comments-allowed-input {
margin-right: 3px;
}
.comment-placeholder-img {
width: 100%;
}
}
.remix-button,
......
src/views/preview/project-view.jsx
View file @ 993dd36a
......@@ -27,6 +27,7 @@ const NotAvailable = require('../../components/not-available/not-available.jsx')
const Meta = require('./meta.jsx');
const sessionActions = require('../../redux/session.js');
import {selectProjectCommentsGloballyEnabled} from '../../redux/session';
const navigationActions = require('../../redux/navigation.js');
const previewActions = require('../../redux/preview.js');
const projectCommentActions = require('../../redux/project-comment-actions.js');
......@@ -109,6 +110,7 @@ class Preview extends React.Component {
socialOpen: false,
favoriteCount: 0,
isProjectLoaded: false,
isProjectCommentsGloballyEnabled: false,
isRemixing: false,
invalidProject: parts.length === 1,
justRemixed: false,
......@@ -738,6 +740,7 @@ class Preview extends React.Component {
isFullScreen={this.props.fullScreen}
isLoggedIn={this.props.isLoggedIn}
isNewScratcher={this.props.isNewScratcher}
isProjectCommentsGloballyEnabled={this.props.isProjectCommentsGloballyEnabled}
isProjectLoaded={this.state.isProjectLoaded}
isRemixing={this.state.isRemixing}
isScratcher={this.props.isScratcher}
......@@ -980,6 +983,9 @@ const mapStateToProps = state => {
const isEditable = isLoggedIn &&
(authorUsername === state.session.session.user.username ||
state.permissions.admin === true);
const haveSession = state.session.session.flags;
const areCommentsOn = haveSession && selectProjectCommentsGloballyEnabled(state);
// if we don't have projectInfo, assume it's shared until we know otherwise
const isShared = !projectInfoPresent || state.preview.projectInfo.is_published;
......@@ -1010,6 +1016,7 @@ const mapStateToProps = state => {
isLoggedIn: isLoggedIn,
isAdmin: isAdmin,
isNewScratcher: isLoggedIn && state.permissions.new_scratcher,
isProjectCommentsGloballyEnabled: areCommentsOn,
isScratcher: isLoggedIn && state.permissions.scratcher,
isShared: isShared,
loved: state.preview.loved,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment