mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
WIP of being able to turn off project comments.
This commit is contained in:
picklesrus
parent
61cf2b5bcc
commit
993dd36aa5
7 changed files with 97 additions and 67 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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>
|
||||
{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>
|
||||
)}
|
||||
|
||||
<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}
|
||||
<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,
|
||||
|
|
|
|||
|
|
@ -257,6 +257,10 @@ $stage-width: 480px;
|
|||
.comments-allowed-input {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.comment-placeholder-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.remix-button,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
BIN
static/images/comments/comment-placeholder.png
Normal file
BIN
static/images/comments/comment-placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
Loading…
Reference in a new issue