scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 08:31:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #5404 from fsih/studioOpenToggle

Browse source 
Studio open toggle
This commit is contained in:
Paul Kaplan 2021-05-13 21:10:18 -04:00 committed by GitHub
commit 1268654d91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 61 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/forms/toggle-slider.jsx
View file

@ -8,6 +8,7 @@ const ToggleSlider = props => (
<label className={classNames('toggle-switch', props.className)} >
<input
checked={props.checked}
disabled={props.disabled}
type="checkbox"
onChange={props.onChange}
/>
@ -17,6 +18,7 @@ const ToggleSlider = props => (
ToggleSlider.propTypes = {
checked: PropTypes.bool,
disabled: PropTypes.bool,
className: PropTypes.string,
onChange: PropTypes.func
};

5
src/views/studio/l10n.json
View file

@ -12,6 +12,8 @@
"studio.addProjectsHeader": "Add Projects",
"studio.addProject": "Add",
"studio.openToAll": "Anyone can add projects",
"studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.",
"studio.projectsEmptyCanAdd2": "Add your first project!",
"studio.projectsEmpty1": "This studio has no projects yet.",
@ -34,6 +36,9 @@
"studio.curatorsEmpty1": "This studio has no curators right now.",
"studio.commentsHeader": "Comments",
"studio.comments.toggleOff": "Commenting off",
"studio.comments.toggleOn": "Commenting on",
"studio.comments.turnedOff": "Sorry, comment posting has been turned off for this studio.",
"studio.sharedFilter": "Shared",
"studio.favoritedFilter": "Favorited",

28
src/views/studio/studio-comments-allowed.jsx
View file

@ -2,12 +2,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import classNames from 'classnames';
import {selectStudioCommentsAllowed, selectIsFetchingInfo} from '../../redux/studio';
import {
mutateStudioCommentsAllowed, selectIsMutatingCommentsAllowed, selectCommentsAllowedMutationError
} from '../../redux/studio-mutations';
import ToggleSlider from '../../components/forms/toggle-slider.jsx';
const StudioCommentsAllowed = ({
commentsAllowedError, isFetching, isMutating, commentsAllowed, handleUpdate
}) => (
@ -16,16 +20,20 @@ const StudioCommentsAllowed = ({
<h4>Fetching...</h4>
) : (
<div>
<label>
<input
disabled={isMutating}
type="checkbox"
checked={commentsAllowed}
onChange={e => handleUpdate(e.target.checked)}
/>
<span>{commentsAllowed ? 'Comments allowed' : 'Comments not allowed'}</span>
{commentsAllowedError && <div>Error mutating commentsAllowed: {commentsAllowedError}</div>}
</label>
{commentsAllowed ? (
<FormattedMessage id="studio.comments.toggleOn" />
) : (
<FormattedMessage id="studio.comments.toggleOff" />
)}
<ToggleSlider
disabled={isMutating}
checked={commentsAllowed}
className={classNames('comments-allowed-input', {
'mod-mutating': isMutating
})}
onChange={e => handleUpdate(e.target.checked)}
/>
{commentsAllowedError && <div>Error mutating commentsAllowed: {commentsAllowedError}</div>}
</div>
)}
</div>

8
src/views/studio/studio-comments.jsx
View file

@ -56,9 +56,11 @@ const StudioComments = ({
return (
<div>
<h2><FormattedMessage id="studio.commentsHeader" /></h2>
{canEditCommentsAllowed && <StudioCommentsAllowed />}
<div>
<div className="studio-header-container">
<h2><FormattedMessage id="studio.commentsHeader" /></h2>
{canEditCommentsAllowed && <StudioCommentsAllowed />}
</div>
<div className="studio-compose-container">
{shouldShowCommentComposer && commentsAllowed &&
<ComposeComment
postURI={postURI}

24
src/views/studio/studio-open-to-all.jsx
View file

@ -2,12 +2,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import classNames from 'classnames';
import {selectStudioOpenToAll, selectIsFetchingInfo} from '../../redux/studio';
import {
mutateStudioOpenToAll, selectIsMutatingOpenToAll, selectOpenToAllMutationError
} from '../../redux/studio-mutations';
import ToggleSlider from '../../components/forms/toggle-slider.jsx';
const StudioOpenToAll = ({
openToAllError, isFetching, isMutating, openToAll, handleUpdate
}) => (
@ -16,16 +20,16 @@ const StudioOpenToAll = ({
<h4>Fetching...</h4>
) : (
<div>
<label>
<input
disabled={isMutating}
type="checkbox"
checked={openToAll}
onChange={e => handleUpdate(e.target.checked)}
/>
<span>{openToAll ? 'Open to all' : 'Not open to all'}</span>
{openToAllError && <div>Error mutating openToAll: {openToAllError}</div>}
</label>
<FormattedMessage id="studio.openToAll" />
<ToggleSlider
disabled={isMutating}
checked={openToAll}
className={classNames('open-to-all-input', {
'mod-mutating': isMutating
})}
onChange={e => handleUpdate(e.target.checked)}
/>
{openToAllError && <div>Error mutating openToAll: {openToAllError}</div>}
</div>
)}
</div>

6
src/views/studio/studio-projects.jsx
View file

@ -21,8 +21,10 @@ const StudioProjects = ({
return (
<div className="studio-projects">
<h2><FormattedMessage id="studio.projectsHeader" /></h2>
{canEditOpenToAll && <StudioOpenToAll />}
<div className="studio-header-container">
<h2><FormattedMessage id="studio.projectsHeader" /></h2>
{canEditOpenToAll && <StudioOpenToAll />}
</div>
{canAddProjects && <StudioProjectAdder />}
{error && <Debug
label="Error"

13
src/views/studio/studio.scss
View file

@ -267,6 +267,19 @@ $radius: 8px;
}
}
.studio-header-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 30px;
padding-bottom: 30px;
}
.studio-compose-container {
padding-top: 20px;
}
.studio-empty {
grid-column: 1 / -1; /* take up all columns */
text-align: center;