-
-
-
-
-
+
-
+
-
module.exports.selectMuteStatus = state => get(state, ['session', 'session', 'permissions', 'mute_status'],
{muteExpiresAt: 0, offenses: [], showWarning: false});
module.exports.selectIsMuted = state => (module.exports.selectMuteStatus(state).muteExpiresAt || 0) * 1000 > Date.now();
+module.exports.selectNewStudiosLaunched = state => get(state, ['session', 'session', 'flags', 'new_studios_launched'],
+ false);
module.exports.selectHasFetchedSession = state => state.session.status === module.exports.Status.FETCHED;
diff --git a/src/redux/studio-mutations.js b/src/redux/studio-mutations.js
index 07919e6cb..4c967a000 100644
--- a/src/redux/studio-mutations.js
+++ b/src/redux/studio-mutations.js
@@ -21,7 +21,8 @@ const Errors = keyMirror({
THUMBNAIL_INVALID: null,
TEXT_TOO_LONG: null,
REQUIRED_FIELD: null,
- UNHANDLED: null
+ UNHANDLED: null,
+ USER_MUTED: null
});
const MAX_IMAGE_BYTES = 524288;
@@ -89,9 +90,7 @@ const selectFollowingMutationError = state => state.studioMutations.mutationErro
const selectIsMutatingImage = state => state.studioMutations.isMutating.image;
const selectImageMutationError = state => state.studioMutations.mutationErrors.image;
const selectIsMutatingOpenToAll = state => state.studioMutations.isMutating.openToAll;
-const selectOpenToAllMutationError = state => state.studioMutations.mutationErrors.openToAll;
const selectIsMutatingCommentsAllowed = state => state.studioMutations.isMutating.commentsAllowed;
-const selectCommentsAllowedMutationError = state => state.studioMutations.mutationErrors.commentsAllowed;
// Thunks
/**
@@ -104,6 +103,7 @@ const selectCommentsAllowedMutationError = state => state.studioMutations.mutati
*/
const normalizeError = (err, body, res) => {
if (err) return Errors.NETWORK;
+ if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED;
if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
if (res.statusCode !== 200) return Errors.SERVER;
try {
@@ -221,6 +221,8 @@ const mutateStudioCommentsAllowed = shouldAllow => ((dispatch, getState) => {
}, (err, body, res) => {
const error = normalizeError(err, body, res);
const wasAllowed = selectStudioCommentsAllowed(state);
+ // eslint-disable-next-line no-console
+ console.error(`Error mutating commentsAllowed: ${error}`);
dispatch(completeMutation('commentsAllowed', error ? wasAllowed : shouldAllow, error));
});
});
@@ -237,6 +239,8 @@ const mutateStudioOpenToAll = shouldBeOpen => ((dispatch, getState) => {
}, (err, body, res) => {
const error = normalizeError(err, body, res);
const wasOpen = selectStudioOpenToAll(getState());
+ // eslint-disable-next-line no-console
+ console.error(`Error mutating openToAll: ${error}`);
dispatch(completeMutation('openToAll', error ? wasOpen : shouldBeOpen, error));
});
});
@@ -264,7 +268,5 @@ module.exports = {
selectIsMutatingImage,
selectImageMutationError,
selectIsMutatingCommentsAllowed,
- selectCommentsAllowedMutationError,
- selectIsMutatingOpenToAll,
- selectOpenToAllMutationError
+ selectIsMutatingOpenToAll
};
diff --git a/src/redux/studio.js b/src/redux/studio.js
index 02f885205..09d1aef9c 100644
--- a/src/redux/studio.js
+++ b/src/redux/studio.js
@@ -12,6 +12,9 @@ const Status = keyMirror({
ERROR: null
});
+const STUDIO_MANAGER_LIMIT = 40;
+const STUDIO_MANAGER_THRESHOLD = 30;
+
const getInitialState = () => ({
infoStatus: Status.FETCHING,
title: '',
@@ -20,6 +23,7 @@ const getInitialState = () => ({
commentsAllowed: false,
image: '',
followers: 0,
+ managers: 0,
owner: null,
// BEWARE: classroomId is only loaded if the user is an educator
@@ -98,6 +102,9 @@ const selectStudioLastUpdated = state => state.studio.updated;
const selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
const selectStudioCommentCount = state => state.studio.commentCount;
const selectStudioFollowerCount = state => state.studio.followers;
+const selectStudioManagerCount = state => state.studio.managers;
+const selectStudioHasReachedManagerThreshold = state => state.studio.managers >= STUDIO_MANAGER_THRESHOLD;
+const selectStudioHasReachedManagerLimit = state => state.studio.managers >= STUDIO_MANAGER_LIMIT;
const selectStudioProjectCount = state => state.studio.projectCount;
const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
const selectIsFollowing = state => state.studio.following;
@@ -121,6 +128,7 @@ const getInfo = () => ((dispatch, getState) => {
updated: new Date(body.history.modified),
commentCount: body.stats.comments,
followers: body.stats.followers,
+ managers: body.stats.managers,
projectCount: body.stats.projects,
owner: body.owner
}));
@@ -169,6 +177,10 @@ module.exports = {
setInfo,
setRoles,
+ // Constants
+ STUDIO_MANAGER_LIMIT,
+ STUDIO_MANAGER_THRESHOLD,
+
// Selectors
selectStudioId,
selectStudioTitle,
@@ -180,6 +192,9 @@ module.exports = {
selectStudioLoadFailed,
selectStudioCommentCount,
selectStudioFollowerCount,
+ selectStudioManagerCount,
+ selectStudioHasReachedManagerThreshold,
+ selectStudioHasReachedManagerLimit,
selectStudioProjectCount,
selectIsFetchingInfo,
selectIsFetchingRoles,
diff --git a/src/routes.json b/src/routes.json
index 48832a30b..24f70a273 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -25,7 +25,7 @@
"name": "conference-index",
"pattern": "^/conference/?(\\?.*)?$",
"routeAlias": "/conference(?!/201[4-9])",
- "redirect": "/conference/2020"
+ "redirect": "/conference/2021"
},
{
"name": "conference-index-2017",
@@ -83,7 +83,13 @@
"name": "conference-index-2020",
"pattern": "^/conference/2020/?$",
"routeAlias": "/conference(?!/201[4-9])",
- "view": "conference/2020/index/index",
+ "redirect": "/conference/2021"
+ },
+ {
+ "name": "conference-index-2021",
+ "pattern": "^/conference/2021/?$",
+ "routeAlias": "/conference(?!/201[4-9])",
+ "view": "conference/2021/index/index",
"title": "Scratch Conferences",
"viewportWidth": "device-width"
},
diff --git a/src/views/conference/2020/index/l10n.json b/src/views/conference/2020/index/l10n.json
deleted file mode 100644
index 3ed09deab..000000000
--- a/src/views/conference/2020/index/l10n.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "conference-2020.title": "Scratch Around the World:",
- "conference-2020.subtitle": "An Online Conference",
- "conference-2020.dateDesc": "July 22, 2021",
- "conference-2020.locationDetails": "Online",
-
- "conference-2020.date": "When:",
- "conference-2020.location": "Where:",
-
- "conference-2020.desc1": "Join us for Scratch Around the World, an online conference for educators interested in creative learning with Scratch.",
- "conference-2020.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.",
- "conference-2020.desc3": "The conference will be free of charge.",
-
- "conference-2020.register": "Go to registration page",
-
- "conference-2020.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}",
- "conference-2020.organizedBy": "The Scratch Conference is organized by the Lifelong Kindergarten group at the MIT Media Lab in collaboration with the Scratch Foundation."
-}
diff --git a/src/views/conference/2020/index/index.jsx b/src/views/conference/2021/index/index.jsx
similarity index 62%
rename from src/views/conference/2020/index/index.jsx
rename to src/views/conference/2021/index/index.jsx
index 78689fc9b..8f46f79a9 100644
--- a/src/views/conference/2020/index/index.jsx
+++ b/src/views/conference/2021/index/index.jsx
@@ -3,47 +3,47 @@ const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const render = require('../../../../lib/render.jsx');
-const Page = require('../../../../components/page/conference/2020/page.jsx');
+const Page = require('../../../../components/page/conference/2021/page.jsx');
const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('../../../../components/forms/button.scss');
require('./index.scss');
const ConferenceSplash = () => (
- -
- - +
++ +
-- +
-+ -
+ +
-- -
{' '} - + + +
-{' '} +
-+ +
-
-- + + -
( /> - + + 
+ - - +
} diff --git a/src/views/studio/studio-tab-nav.jsx b/src/views/studio/studio-tab-nav.jsx index 2192af0de..c5e519994 100644 --- a/src/views/studio/studio-tab-nav.jsx +++ b/src/views/studio/studio-tab-nav.jsx @@ -49,6 +49,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => { >+ diff --git a/src/views/conference/2020/index/index.scss b/src/views/conference/2021/index/index.scss similarity index 63% rename from src/views/conference/2020/index/index.scss rename to src/views/conference/2021/index/index.scss index 4ce7dc58d..9d7980309 100644 --- a/src/views/conference/2020/index/index.scss +++ b/src/views/conference/2021/index/index.scss @@ -1,53 +1,53 @@ @import "../../../../colors"; @import "../../../../frameless"; -.title-banner.mod-conference.mod-2020 { +.title-banner.mod-conference.mod-2021 { padding-top: 0; } -.title-banner-image.mod-2020 { +.title-banner-image.mod-2021 { opacity: .75; margin-bottom: 1.75rem; - background-image: url("/images/conference/index/2020/title-banner.jpg"); + background-image: url("/images/conference/index/2021/title-banner.jpg"); background-position: center; background-size: cover; width: 100%; height: 20rem; } -.title-banner-h1.mod-2020 { +.title-banner-h1.mod-2021 { line-height: 1.25em; } -.conf2020-panel, -.title-banner-h3.mod-2020 { +.conf2021-panel, +.title-banner-h3.mod-2021 { width: 48.75rem; margin: auto; } -.title-banner-h3.mod-2020 { +.title-banner-h3.mod-2021 { margin: 2rem auto 0; } -.title-banner-h3.mod-2020 { +.title-banner-h3.mod-2021 { text-align: center; color: $type-white; } -.conf2020-panel { +.conf2021-panel { border-bottom: 1px solid $ui-border; } -.conf2020-panel.mod-last { +.conf2021-panel.mod-last { border-bottom: 0; } -.flex-row.conf2020-panel-title { +.flex-row.conf2021-panel-title { justify-content: flex-start; align-items: center; } -.conf2020-panel-desc { +.conf2021-panel-desc { margin: 2rem 0; } @@ -60,14 +60,14 @@ td { vertical-align: middle; } -.conf2020-panel-row-icon-image { +.conf2021-panel-row-icon-image { width: 1.5rem; height: 1.5rem; } -.mod-registration .conf2020-panel-desc { +.mod-registration .conf2021-panel-desc { margin-bottom: 0; } -.button.mod-2020-panel { +.button.mod-2021-panel { display: block; margin: 2rem auto 0; background-color: $ui-orange; @@ -76,7 +76,7 @@ td { text-align: center; color: $type-white; } -.conf2020-organized { +.conf2021-organized { font-size: .875rem; margin: 0 auto; text-align: center; @@ -85,93 +85,93 @@ td { } @media only screen and (max-width: $mobile - 1) { - .index.mod-2020 { + .index.mod-2021 { text-align: left; } - .title-banner-image.mod-2020 { + .title-banner-image.mod-2021 { height: 10rem; } - .conf2020-panel, - .title-banner-h3.mod-2020 { + .conf2021-panel, + .title-banner-h3.mod-2021 { width: initial; } - .conf2020-panel { + .conf2021-panel { margin: auto .5rem; } - .title-banner-h3.mod-2020 { + .title-banner-h3.mod-2021 { margin: 1rem .5rem .5rem; font-size: 1.1rem; } - .flex-row.conf2020-panel-title { + .flex-row.conf2021-panel-title { flex-direction: row; } - .conf2020-panel-title-text { + .conf2021-panel-title-text { max-width: 14rem; } - .conf2020-panel-row > td { + .conf2021-panel-row > td { padding: .75rem .375rem .75rem 0; } } @media only screen and (min-width: $mobile) and (max-width: $tabletPortrait - 1) { - .index.mod-2020 { + .index.mod-2021 { text-align: left; } - .title-banner-image.mod-2020 { + .title-banner-image.mod-2021 { height: 10rem; } - .conf2020-panel, - .title-banner-h3.mod-2020 { + .conf2021-panel, + .title-banner-h3.mod-2021 { margin: auto .5rem ; width: initial; } - .title-banner-h3.mod-2020 { + .title-banner-h3.mod-2021 { font-size: 1.1rem; } - .flex-row.conf2020-panel-title { + .flex-row.conf2021-panel-title { flex-direction: row; } - .conf2020-panel-title-text { + .conf2021-panel-title-text { max-width: 18.75rem; } - .button.mod-2020-panel { + .button.mod-2021-panel { width: 5.75rem; } } @media only screen and (min-width: $tabletPortrait) and (max-width: $desktop - 1) { - .index.mod-2020 { + .index.mod-2021 { text-align: left; } - .title-banner-image.mod-2020 { + .title-banner-image.mod-2021 { height: 15rem; } - .conf2020-panel, - .title-banner-h3.mod-2020 { + .conf2021-panel, + .title-banner-h3.mod-2021 { margin: auto; width: 38.75rem; } - .title-banner-h3.mod-2020 { + .title-banner-h3.mod-2021 { font-size: 1.1rem; } - .button.mod-2020-panel { + .button.mod-2021-panel { width: 8.75rem; } } diff --git a/src/views/conference/2021/index/l10n.json b/src/views/conference/2021/index/l10n.json new file mode 100644 index 000000000..d6e787fb0 --- /dev/null +++ b/src/views/conference/2021/index/l10n.json @@ -0,0 +1,18 @@ +{ + "conference-2021.title": "Scratch Around the World:", + "conference-2021.subtitle": "An Online Conference", + "conference-2021.dateDesc": "July 22, 2021", + "conference-2021.locationDetails": "Online", + + "conference-2021.date": "When:", + "conference-2021.location": "Where:", + + "conference-2021.desc1": "Join us for Scratch Around the World, an online conference for educators interested in creative learning with Scratch.", + "conference-2021.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.", + "conference-2021.desc3": "The conference will be free of charge.", + + "conference-2021.register": "Go to registration page", + + "conference-2021.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}", + "conference-2021.organizedBy": "The Scratch Conference is organized by the Lifelong Kindergarten group at the MIT Media Lab in collaboration with the Scratch Foundation." +} diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index cdd473f16..df9efaed3 100644 --- a/src/views/preview/l10n.json +++ b/src/views/preview/l10n.json @@ -46,5 +46,6 @@ "project.cloudVariables": "Cloud Variables", "project.cloudDataLink": "See Data", "project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project.", - "project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful." + "project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful.", + "project.mutedAddToStudio": "You will be able to add to studios again {inDuration}." } diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 4698d4dfd..b7d4d8b98 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -160,7 +160,6 @@ $stage-width: 480px; margin-top: $arrow-border-width; border: 1px solid $active-gray; border-radius: 5px; - background-color: $ui-orange; padding: 1rem; max-width: 18.75rem; min-height: 1rem; @@ -185,7 +184,6 @@ $stage-width: 480px; border-left: 1px solid $active-gray; border-radius: 5px; - background-color: $ui-orange; width: $arrow-border-width; height: $arrow-border-width; diff --git a/src/views/preview/subactions.jsx b/src/views/preview/subactions.jsx index 0c02623cb..9510611cd 100644 --- a/src/views/preview/subactions.jsx +++ b/src/views/preview/subactions.jsx @@ -8,90 +8,133 @@ const Button = require('../../components/forms/button.jsx'); const AddToStudioModal = require('./add-to-studio.jsx'); const SocialModal = require('../../components/modal/social/container.jsx'); const ReportModal = require('../../components/modal/report/modal.jsx'); +const {connect} = require('react-redux'); +const {selectShowProjectMuteError} = require('../../redux/studio-permissions.js'); +const {useState} = require('react'); const projectShape = require('./projectshape.jsx').projectShape; +import {selectNewStudiosLaunched} from '../../redux/session.js'; +import StudioMuteEditMessage from '../studio/studio-mute-edit-message.jsx'; + require('./subactions.scss'); -const Subactions = props => ( -conference@scratch.mit.edu @@ -86,7 +86,7 @@ const ConferenceSplash = () => ( />
-+ - --©- {' '} - {/* eslint-disable react/jsx-sort-props */} - {props.shareDate ? ( -- ) : 'Unshared'} - {/* eslint-enable react/jsx-sort-props */} - - {(props.canReport) && - -); + ); +}; Subactions.propTypes = { addToStudioOpen: PropTypes.bool, @@ -110,8 +153,13 @@ Subactions.propTypes = { projectInfo: projectShape, reportOpen: PropTypes.bool, shareDate: PropTypes.string, + showAddToStudioMuteError: PropTypes.bool, socialOpen: PropTypes.bool, userOwnsProject: PropTypes.bool }; -module.exports = Subactions; +module.exports = connect( + state => ({ + showAddToStudioMuteError: selectShowProjectMuteError(state) && selectNewStudiosLaunched(state) + }) +)(Subactions); diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss index bba4bd6c8..d70791d94 100644 --- a/src/views/preview/subactions.scss +++ b/src/views/preview/subactions.scss @@ -109,3 +109,10 @@ } } } + +.studio-button-error { + top: auto; + transform: none; + width: 100%; + margin-left: 0; +} diff --git a/src/views/studio/l10n.json b/src/views/studio/l10n.json index a1054c81e..722bac9bc 100644 --- a/src/views/studio/l10n.json +++ b/src/views/studio/l10n.json @@ -23,6 +23,11 @@ "studio.openToAll": "Anyone can add projects", + "studio.addProjects.noSharedYet": "You don’t have shared projects that you can add to this studio yet.", + "studio.addProjects.noFavoritedYet": "You don’t have favorite projects that you can add to this studio yet.", + "studio.addProjects.noRecentYet": "You don’t have recently viewed projects that you can add to this studio yet.", + "studio.addProjects.noStudentsYet": "You don’t have student projects that you can add to this studio yet.", + "studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.", "studio.projectsEmptyCanAdd2": "Add your first project!", "studio.projectsEmpty1": "This studio has no projects yet.", @@ -65,9 +70,18 @@ "studio.curatorAddAndDeleteProjects": "add and delete projects", "studio.curatorIfYouTrust": "If you trust this person and you’re sure you want to give them extra permissions, click Promote.", + "studio.managerLimitReachedHeader": "This studio has reached the limit of {managerLimit} managers.", + "studio.managerLimitMessageCollaborative": "It’s great to see that this studio is collaborative!", + "studio.managerLimitMessageRemoveManagers": "Before you can add another manager, you will need to remove an existing manager.", + + "studio.managerCountInfo": "{numberOfManagers} of {managerLimit}", + "studio.managerThresholdInfo": "This studio has {numberOfManagers} managers. Studios can have a maximum of {managerLimit} managers.", + "studio.managerThresholdRemoveManagers": "Before you can add another manager, you will need to remove managers until there are fewer than {managerLimit}.", + "studio.remove": "Remove", "studio.promote": "Promote", "studio.cancel": "Cancel", + "studio.okay": "Okay", "studio.commentsHeader": "Comments", "studio.commentsNotAllowed": "Commenting for this studio has been turned off.", @@ -98,10 +112,11 @@ "studio.reportThanksForLettingUsKnow": "Thanks for letting us know!", "studio.reportYourFeedback": "Your feedback will help us make Scratch better.", - "studios.mutedCurators": "You will be able to invite curators and add managers again {inDuration}.", - "studios.mutedProjects": "You will be able to add and remove projects again {inDuration}.", - "studios.mutedEdit": "You will be able to edit studios again {inDuration}.", - "studios.mutedPaused": "Your account has been paused from using studios until then.", + "studio.mutedCurators": "You will be able to invite curators and add managers again {inDuration}.", + "studio.mutedProjects": "You will be able to add and remove projects again {inDuration}.", + "studio.mutedEdit": "You will be able to edit studios again {inDuration}.", + "studio.mutedPaused": "Your account has been paused from using studios until then.", + "studio.mutedError": "Your account has been paused from using studios. Refresh for more information.", "studio.alertProjectAdded": "\"{title}\" added to studio", "studio.alertProjectAlreadyAdded": "That project is already in this studio", diff --git a/src/views/studio/lib/studio-member-actions.js b/src/views/studio/lib/studio-member-actions.js index 1fb13c373..88af84948 100644 --- a/src/views/studio/lib/studio-member-actions.js +++ b/src/views/studio/lib/studio-member-actions.js @@ -3,19 +3,25 @@ import keyMirror from 'keymirror'; import api from '../../../lib/api'; import {curators, managers} from './redux-modules'; import {selectUsername} from '../../../redux/session'; -import {selectStudioId, setRoles} from '../../../redux/studio'; +import {selectStudioId, setRoles, setInfo} from '../../../redux/studio'; const Errors = keyMirror({ NETWORK: null, SERVER: null, PERMISSION: null, DUPLICATE: null, + USER_MUTED: null, UNKNOWN_USERNAME: null, - RATE_LIMIT: null + RATE_LIMIT: null, + MANAGER_LIMIT: null }); const normalizeError = (err, body, res) => { if (err) return Errors.NETWORK; + if (res.statusCode === 400 && body.message === 'too many owners') { + return Errors.MANAGER_LIMIT; + } + if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED; if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION; if (res.statusCode === 404) return Errors.UNKNOWN_USERNAME; if (res.statusCode === 429) return Errors.RATE_LIMIT; @@ -81,6 +87,7 @@ const removeManager = username => ((dispatch, getState) => new Promise((resolve, if (selectUsername(state) === username) { dispatch(setRoles({manager: false})); } + dispatch(setInfo({managers: state.studio.managers - 1})); return resolve(); }); })); @@ -143,6 +150,7 @@ const promoteCurator = username => ((dispatch, getState) => new Promise((resolve const curatorItem = curatorList[index]; if (index !== -1) dispatch(curators.actions.remove(index)); dispatch(managers.actions.create(curatorItem, true)); + dispatch(setInfo({managers: state.studio.managers + 1})); return resolve(); }); })); diff --git a/src/views/studio/lib/studio-project-actions.js b/src/views/studio/lib/studio-project-actions.js index 548772292..a822fc803 100644 --- a/src/views/studio/lib/studio-project-actions.js +++ b/src/views/studio/lib/studio-project-actions.js @@ -12,11 +12,13 @@ const Errors = keyMirror({ PERMISSION: null, UNKNOWN_PROJECT: null, RATE_LIMIT: null, - DUPLICATE: null + DUPLICATE: null, + USER_MUTED: null }); const normalizeError = (err, body, res) => { if (err) return Errors.NETWORK; + if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED; if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION; if (res.statusCode === 404) return Errors.UNKNOWN_PROJECT; if (res.statusCode === 409) return Errors.DUPLICATE; diff --git a/src/views/studio/modals/manager-limit-modal.jsx b/src/views/studio/modals/manager-limit-modal.jsx new file mode 100644 index 000000000..1b571ce40 --- /dev/null +++ b/src/views/studio/modals/manager-limit-modal.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {FormattedMessage} from 'react-intl'; + +import Modal from '../../../components/modal/base/modal.jsx'; +import ModalTitle from '../../../components/modal/base/modal-title.jsx'; +import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx'; + +import './manager-limit-modal.scss'; +import {STUDIO_MANAGER_LIMIT} from '../../../redux/studio.js'; + + +const ManagerLimitModal = ({ + handleClose +}) => ( +- - {props.reportOpen && ( - - } - {props.canAddToStudio && -- )} - - - {props.addToStudioOpen && ( - - } - {/* only show copy link button, modal if project is shared */} - {props.isShared && props.projectInfo && props.projectInfo.id && ( -- )} - - - {props.socialOpen && ( - - )} +const Subactions = ({ + addToStudioOpen, + canAddToStudio, + canReport, + isAdmin, + isShared, + onAddToStudioClicked, + onAddToStudioClosed, + onReportClicked, + onReportClose, + onReportSubmit, + onSocialClicked, + onSocialClosed, + onToggleStudio, + projectInfo, + reportOpen, + shareDate, + showAddToStudioMuteError, + socialOpen, + userOwnsProject +}) => { + const [showMuteMessage, setShowMuteMessage] = useState(false); + + return ( +- )} - + -++©+ {' '} + {/* eslint-disable react/jsx-sort-props */} + {shareDate ? ( ++ ) : 'Unshared'} + {/* eslint-enable react/jsx-sort-props */} + + {(canReport) && + + + {reportOpen && ( + + } + {canAddToStudio && ++ )} + + + } + {/* only show copy link button, modal if project is shared */} + {isShared && projectInfo && projectInfo.id && ( +showAddToStudioMuteError && setShowMuteMessage(true)} + onMouseLeave={() => showAddToStudioMuteError && setShowMuteMessage(false)} + /* eslint-enable react/jsx-no-bind */ + > + + {showMuteMessage &&+ {addToStudioOpen && ( +} + + )} + + + {socialOpen && ( + + )} ++ )} + + +); + +ManagerLimitModal.propTypes = { + handleClose: PropTypes.func +}; + +export default ManagerLimitModal; diff --git a/src/views/studio/modals/manager-limit-modal.scss b/src/views/studio/modals/manager-limit-modal.scss new file mode 100644 index 000000000..dd9948709 --- /dev/null +++ b/src/views/studio/modals/manager-limit-modal.scss @@ -0,0 +1,44 @@ +@import "../../../colors"; + +.manager-limit-modal { + width: 520px; + + .manager-limit-title { + background: $ui-blue; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + padding-top: .75rem; + width: 100%; + height: 3rem; + cursor: pointer; + } + + h2 { + line-height: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; + } + + p { + font-size: 1rem; + } + + .manager-limit-content { + display: flex; + align-items: flex-start; + } + + .manager-limit-image { + margin-top: 2rem; + } + + .manager-limit-inner { + padding: 2.5rem 1.5rem 1.5rem 2.5rem; + + } + + .manager-limit-button-row { + display: flex; + justify-content: flex-end; + } +} diff --git a/src/views/studio/modals/promote-modal.jsx b/src/views/studio/modals/promote-modal.jsx index aa1a7a371..2b27e2199 100644 --- a/src/views/studio/modals/promote-modal.jsx +++ b/src/views/studio/modals/promote-modal.jsx @@ -5,6 +5,7 @@ import {FormattedMessage} from 'react-intl'; import Modal from '../../../components/modal/base/modal.jsx'; import ModalTitle from '../../../components/modal/base/modal-title.jsx'; import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx'; +import Alert from '../../../components/alert/alert.jsx'; import './promote-modal.scss'; @@ -43,24 +44,27 @@ const PromoteModal = ({+ ++
+ + ++
++
+
++ ++- - - -++); diff --git a/src/views/studio/modals/promote-modal.scss b/src/views/studio/modals/promote-modal.scss index 8f429d2f9..4884d963d 100644 --- a/src/views/studio/modals/promote-modal.scss +++ b/src/views/studio/modals/promote-modal.scss @@ -33,9 +33,24 @@ padding: 2rem; } + .promote-alert-and-button-row { + padding: 0 1.5rem 1.5rem 1.5rem; + } + + // Override alert-wrapper positioning for this modal + .alert-wrapper { + position: unset; + } + + .promote-alert { + width: 100%; + padding: 0 1rem; + } + .promote-button-row { display: flex; justify-content: flex-end; + padding-top: 1.5rem; } .button { diff --git a/src/views/studio/modals/studio-report-modal.scss b/src/views/studio/modals/studio-report-modal.scss index fe7b1538c..2449ff143 100644 --- a/src/views/studio/modals/studio-report-modal.scss +++ b/src/views/studio/modals/studio-report-modal.scss @@ -75,9 +75,12 @@ } .studio-report-tile-image { - border-radius: 0.5rem; - max-width: 130px; - max-height: 100px; + width: 150px; + height: 98px; + border-radius: 4px; + background: white; + box-sizing: border-box; + border: 2px solid rgba(0, 0, 0, 0.15); } .studio-report-selected { diff --git a/src/views/studio/modals/user-projects-modal.jsx b/src/views/studio/modals/user-projects-modal.jsx index 631bab5be..2bf40ee2a 100644 --- a/src/views/studio/modals/user-projects-modal.jsx +++ b/src/views/studio/modals/user-projects-modal.jsx @@ -77,33 +77,61 @@ const UserProjectsModal = ({+ + + ++{error && Error loading {filter}: {error}}- - {items.map(project => ( -); StudioCommentsAllowed.propTypes = { - commentsAllowedError: PropTypes.string, isFetching: PropTypes.bool, isMutating: PropTypes.bool, commentsAllowed: PropTypes.bool, @@ -51,8 +49,7 @@ export default connect( state => ({ commentsAllowed: selectStudioCommentsAllowed(state), isFetching: selectIsFetchingInfo(state), - isMutating: selectIsMutatingCommentsAllowed(state), - commentsAllowedError: selectCommentsAllowedMutationError(state) + isMutating: selectIsMutatingCommentsAllowed(state) }), { handleUpdate: mutateStudioCommentsAllowed diff --git a/src/views/studio/studio-curator-invite.jsx b/src/views/studio/studio-curator-invite.jsx index 9995367c7..9c0a19fc7 100644 --- a/src/views/studio/studio-curator-invite.jsx +++ b/src/views/studio/studio-curator-invite.jsx @@ -64,7 +64,7 @@ const StudioCuratorInvite = ({showCuratorInvite, onSubmit}) => { }; StudioCuratorInvite.propTypes = { - showCuratorInvite: PropTypes.func, + showCuratorInvite: PropTypes.bool, onSubmit: PropTypes.func }; diff --git a/src/views/studio/studio-curator-inviter.jsx b/src/views/studio/studio-curator-inviter.jsx index 6d92b5e96..d8fabdd46 100644 --- a/src/views/studio/studio-curator-inviter.jsx +++ b/src/views/studio/studio-curator-inviter.jsx @@ -16,6 +16,7 @@ const errorToMessageId = error => { case Errors.PERMISSION: return 'studio.curatorErrors.generic'; case Errors.DUPLICATE: return 'studio.curatorErrors.alreadyCurator'; case Errors.UNKNOWN_USERNAME: return 'studio.curatorErrors.unknownUsername'; + case Errors.USER_MUTED: return 'studio.mutedError'; case Errors.RATE_LIMIT: return 'studio.curatorErrors.tooFast'; default: return 'studio.curatorErrors.generic'; } diff --git a/src/views/studio/studio-description.jsx b/src/views/studio/studio-description.jsx index aa1fe8163..9538085ac 100644 --- a/src/views/studio/studio-description.jsx +++ b/src/views/studio/studio-description.jsx @@ -21,6 +21,7 @@ const errorToMessageId = error => { case Errors.INAPPROPRIATE: return 'studio.updateErrors.inappropriate'; case Errors.TEXT_TOO_LONG: return 'studio.updateErrors.textTooLong'; case Errors.REQUIRED_FIELD: return 'studio.updateErrors.requiredField'; + case Errors.USER_MUTED: return 'studio.mutedError'; default: return 'studio.updateErrors.generic'; } }; diff --git a/src/views/studio/studio-image.jsx b/src/views/studio/studio-image.jsx index ef2c13cef..bfcbb4f27 100644 --- a/src/views/studio/studio-image.jsx +++ b/src/views/studio/studio-image.jsx @@ -21,6 +21,7 @@ const errorToMessageId = error => { switch (error) { case Errors.THUMBNAIL_INVALID: return 'studio.updateErrors.thumbnailInvalid'; case Errors.THUMBNAIL_TOO_LARGE: return 'studio.updateErrors.thumbnailTooLarge'; + case Errors.USER_MUTED: return 'studio.mutedError'; default: return 'studio.updateErrors.generic'; } }; diff --git a/src/views/studio/studio-info-box.jsx b/src/views/studio/studio-info-box.jsx new file mode 100644 index 000000000..1e6ed11c9 --- /dev/null +++ b/src/views/studio/studio-info-box.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Button from '../../components/forms/button.jsx'; + +const StudioInfoBox = ({showInfoBox, onClose, ...props}) => { + if (!showInfoBox) return null; + + return ( +0 ? ( + + + ) : ++ {items.map(project => ( ++ {moreToLoad && ++ ))} + + ++ } ++- {moreToLoad && -
- ))}
- - +} ++ {filter === Filters.SHARED && +} + {filter === Filters.FAVORITED && + } + {filter === Filters.RECENT && + } + {filter === Filters.STUDENTS && + } + + +); }; diff --git a/src/views/studio/modals/user-projects-modal.scss b/src/views/studio/modals/user-projects-modal.scss index 87c70a7a5..adef9d1fa 100644 --- a/src/views/studio/modals/user-projects-modal.scss +++ b/src/views/studio/modals/user-projects-modal.scss @@ -22,19 +22,39 @@ .user-projects-modal-content { padding: 0 30px 30px; background: #E9F1FC; - max-height: calc(100vh - 200px); + max-height: calc(100vh - 270px); + min-height: 300px; overflow-y: auto; overscroll-behavior: contain; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; @media #{$intermediate-and-smaller} { - & { max-height: calc(100vh - 105px); } + & { max-height: calc(100vh - 175px); } } } .studio-projects-load-more { display: contents; } + + .studio-projects-done-row { + display: flex; + justify-content: flex-end; + padding: 6px 12px; + } + + .studio-projects-empty { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 4rem; + } + + .studio-projects-empty-text { + color: hsla(215, 100, 65, .75); + width: 325px; + text-align: center; + margin-top: 1rem; + } } .studio-tile-added { diff --git a/src/views/studio/studio-comments-allowed.jsx b/src/views/studio/studio-comments-allowed.jsx index 5966380ce..07db9733c 100644 --- a/src/views/studio/studio-comments-allowed.jsx +++ b/src/views/studio/studio-comments-allowed.jsx @@ -7,13 +7,13 @@ import classNames from 'classnames'; import {selectStudioCommentsAllowed, selectIsFetchingInfo} from '../../redux/studio'; import { - mutateStudioCommentsAllowed, selectIsMutatingCommentsAllowed, selectCommentsAllowedMutationError + mutateStudioCommentsAllowed, selectIsMutatingCommentsAllowed } from '../../redux/studio-mutations'; import ToggleSlider from '../../components/forms/toggle-slider.jsx'; const StudioCommentsAllowed = ({ - commentsAllowedError, isFetching, isMutating, commentsAllowed, handleUpdate + isFetching, isMutating, commentsAllowed, handleUpdate }) => ({isFetching ? ( @@ -33,14 +33,12 @@ const StudioCommentsAllowed = ({ })} onChange={e => handleUpdate(e.target.checked)} /> - {commentsAllowedError &&)}Error mutating commentsAllowed: {commentsAllowedError}}{/* TODO move more styling into studio-info-box? */} + {props.children} + ++ ); +}; + +StudioInfoBox.propTypes = { + showInfoBox: PropTypes.bool, + onClose: PropTypes.func, + children: PropTypes.node +}; + +export default StudioInfoBox; diff --git a/src/views/studio/studio-managers.jsx b/src/views/studio/studio-managers.jsx index e70b28e35..fcba3f62d 100644 --- a/src/views/studio/studio-managers.jsx +++ b/src/views/studio/studio-managers.jsx @@ -1,28 +1,89 @@ -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; import {connect} from 'react-redux'; import {FormattedMessage} from 'react-intl'; import classNames from 'classnames'; import {managers} from './lib/redux-modules'; +import { + STUDIO_MANAGER_LIMIT, + selectStudioManagerCount, + selectStudioHasReachedManagerLimit, + selectStudioHasReachedManagerThreshold +} from '../../redux/studio.js'; import {loadManagers} from './lib/studio-member-actions'; import Debug from './debug.jsx'; import {ManagerTile} from './studio-member-tile.jsx'; +import StudioInfoBox from './studio-info-box.jsx'; import AlertProvider from '../../components/alert/alert-provider.jsx'; import Alert from '../../components/alert/alert.jsx'; +import { + selectCanRemoveManager, selectCanPromoteCurators +} from '../../redux/studio-permissions'; -const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => { +const StudioManagers = ({ + canPromoteCurators, + canRemoveManagers, + managerCount, + hasReachedManagerLimit, + hasReachedManagerThreshold, + items, + error, + loading, + moreToLoad, + onLoadMore +}) => { useEffect(() => { if (items.length === 0) onLoadMore(); }, []); + const [infoBoxDismissed, setInfoBoxDismissed] = useState(false); + + const showManagerLimitInfoBox = + !infoBoxDismissed && canPromoteCurators && + canRemoveManagers && hasReachedManagerLimit; + return (); StudioOpenToAll.propTypes = { - openToAllError: PropTypes.string, isFetching: PropTypes.bool, isMutating: PropTypes.bool, openToAll: PropTypes.bool, @@ -47,8 +45,7 @@ export default connect( state => ({ openToAll: selectStudioOpenToAll(state), isFetching: selectIsFetchingInfo(state), - isMutating: selectIsMutatingOpenToAll(state), - openToAllError: selectOpenToAllMutationError(state) + isMutating: selectIsMutatingOpenToAll(state) }), { handleUpdate: mutateStudioOpenToAll diff --git a/src/views/studio/studio-project-adder.jsx b/src/views/studio/studio-project-adder.jsx index 2015d9055..2e2f56e1b 100644 --- a/src/views/studio/studio-project-adder.jsx +++ b/src/views/studio/studio-project-adder.jsx @@ -18,6 +18,7 @@ const errorToMessageId = error => { case Errors.DUPLICATE: return 'studio.projectErrors.duplicate'; case Errors.RATE_LIMIT: return 'studio.projectErrors.tooFast'; case Errors.UNKNOWN_PROJECT: return 'studio.projectErrors.checkUrl'; + case Errors.USER_MUTED: return 'studio.mutedError'; default: return 'studio.projectErrors.generic'; } }; diff --git a/src/views/studio/studio-projects.jsx b/src/views/studio/studio-projects.jsx index 86c329d28..68cf83615 100644 --- a/src/views/studio/studio-projects.jsx +++ b/src/views/studio/studio-projects.jsx @@ -38,13 +38,13 @@ const StudioProjects = ({- +); @@ -111,7 +126,8 @@ StudioMemberTile.propTypes = { onPromote: PropTypes.func, username: PropTypes.string, image: PropTypes.string, - isCreator: PropTypes.bool + isCreator: PropTypes.bool, + hasReachedManagerLimit: PropTypes.bool }; const ManagerTile = connect( @@ -128,7 +144,8 @@ const ManagerTile = connect( const CuratorTile = connect( (state, ownProps) => ({ canRemove: selectCanRemoveCurator(state, ownProps.username), - canPromote: selectCanPromoteCurators(state) + canPromote: selectCanPromoteCurators(state), + hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state) }), { onRemove: removeCurator, diff --git a/src/views/studio/studio-mute-edit-message.jsx b/src/views/studio/studio-mute-edit-message.jsx index 44adce7ac..7d99c0b23 100644 --- a/src/views/studio/studio-mute-edit-message.jsx +++ b/src/views/studio/studio-mute-edit-message.jsx @@ -9,12 +9,15 @@ import {selectMuteStatus} from '../../redux/session'; import {formatRelativeTime} from '../../lib/format-time.js'; const StudioMuteEditMessage = ({ + className, + messageId, muteExpiresAtMs }) => (setInfoBoxDismissed(true)} + > + ++ +++ + + {error &&
+ {canPromoteCurators && canRemoveManagers && hasReachedManagerThreshold && +++ }+ { }; StudioManagers.propTypes = { + canPromoteCurators: PropTypes.bool, + canRemoveManagers: PropTypes.bool, + managerCount: PropTypes.number, + hasReachedManagerLimit: PropTypes.bool, + hasReachedManagerThreshold: PropTypes.bool, items: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.id, username: PropTypes.string, @@ -72,7 +138,14 @@ StudioManagers.propTypes = { }; export default connect( - state => managers.selector(state), + state => ({ + canPromoteCurators: selectCanPromoteCurators(state), + canRemoveManagers: selectCanRemoveManager(state), + managerCount: selectStudioManagerCount(state), + hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state), + hasReachedManagerThreshold: selectStudioHasReachedManagerThreshold(state), + ...managers.selector(state) + }), { onLoadMore: loadManagers } diff --git a/src/views/studio/studio-member-tile.jsx b/src/views/studio/studio-member-tile.jsx index ea56f5a45..ee75655fa 100644 --- a/src/views/studio/studio-member-tile.jsx +++ b/src/views/studio/studio-member-tile.jsx @@ -6,15 +6,19 @@ import classNames from 'classnames'; import {FormattedMessage} from 'react-intl'; import PromoteModal from './modals/promote-modal.jsx'; +import ManagerLimitModal from './modals/manager-limit-modal.jsx'; import { selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators } from '../../redux/studio-permissions'; import { + Errors, promoteCurator, removeCurator, removeManager } from './lib/studio-member-actions'; + +import {selectStudioHasReachedManagerLimit} from '../../redux/studio'; import {useAlertContext} from '../../components/alert/alert-context'; import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx'; @@ -22,11 +26,12 @@ import removeIcon from './icons/remove-icon.svg'; import promoteIcon from './icons/curator-icon.svg'; const StudioMemberTile = ({ - canRemove, canPromote, onRemove, onPromote, isCreator, // mapState props + canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props username, image // own props }) => { const [submitting, setSubmitting] = useState(false); const [modalOpen, setModalOpen] = useState(false); + const [managerLimitReached, setManagerLimitReached] = useState(false); const {errorAlert, successAlert} = useAlertContext(); const userUrl = `/users/${username}`; return ( @@ -80,25 +85,35 @@ const StudioMemberTile = ({ } {modalOpen && - setModalOpen(false)} - handlePromote={() => { - onPromote(username) - .then(() => { - successAlert({ - id: 'studio.alertManagerPromote', - values: {name: username} + ((hasReachedManagerLimit || managerLimitReached) ? + setModalOpen(false)} + /> : + setModalOpen(false)} + handlePromote={() => { + onPromote(username) + .then(() => { + successAlert({ + id: 'studio.alertManagerPromote', + values: {name: username} + }); + }) + .catch(error => { + if (error === Errors.MANAGER_LIMIT) { + setManagerLimitReached(true); + setModalOpen(true); + } else { + errorAlert({ + id: 'studio.alertManagerPromoteError', + values: {name: username} + }); + } }); - }) - .catch(() => { - errorAlert({ - id: 'studio.alertManagerPromoteError', - values: {name: username} - }); - }); - }} - username={username} - /> + }} + username={username} + /> + ) } ({ muteExpiresAtMs: (selectMuteStatus(state).muteExpiresAt * 1000 || 0) diff --git a/src/views/studio/studio-open-to-all.jsx b/src/views/studio/studio-open-to-all.jsx index b7673731d..425a2b283 100644 --- a/src/views/studio/studio-open-to-all.jsx +++ b/src/views/studio/studio-open-to-all.jsx @@ -7,13 +7,13 @@ import classNames from 'classnames'; import {selectStudioOpenToAll, selectIsFetchingInfo} from '../../redux/studio'; import { - mutateStudioOpenToAll, selectIsMutatingOpenToAll, selectOpenToAllMutationError + mutateStudioOpenToAll, selectIsMutatingOpenToAll } from '../../redux/studio-mutations'; import ToggleSlider from '../../components/forms/toggle-slider.jsx'; const StudioOpenToAll = ({ - openToAllError, isFetching, isMutating, openToAll, handleUpdate + isFetching, isMutating, openToAll, handleUpdate }) => ( {isFetching ? ( @@ -29,14 +29,12 @@ const StudioOpenToAll = ({ })} onChange={e => handleUpdate(e.target.checked)} /> - {openToAllError &&)}Error mutating openToAll: {openToAllError}}-+@@ -67,6 +68,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => { {
{
{ case Errors.INAPPROPRIATE: return 'studio.updateErrors.inappropriate'; case Errors.TEXT_TOO_LONG: return 'studio.updateErrors.textTooLong'; case Errors.REQUIRED_FIELD: return 'studio.updateErrors.requiredField'; + case Errors.USER_MUTED: return 'studio.mutedError'; default: return 'studio.updateErrors.generic'; } }; diff --git a/src/views/studio/studio.jsx b/src/views/studio/studio.jsx index 500e49360..c464f8048 100644 --- a/src/views/studio/studio.jsx +++ b/src/views/studio/studio.jsx @@ -48,7 +48,6 @@ import {selectShowCuratorMuteError} from '../../redux/studio-permissions.js'; const StudioShell = ({showCuratorMuteError, muteExpiresAtMs, studioLoadFailed}) => { const match = useRouteMatch(); - return ( studioLoadFailed ?
: @@ -68,13 +67,13 @@ const StudioShell = ({showCuratorMuteError, muteExpiresAtMs, studioLoadFailed}) -+} diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss index e26ec4a17..80c6e8ebf 100644 --- a/src/views/studio/studio.scss +++ b/src/views/studio/studio.scss @@ -113,6 +113,9 @@ $radius: 8px; .studio-title { font-size: 28px; font-weight: 700; + word-wrap: break-word; + max-height: 8rem; + overflow-y: auto; } .studio-description { @@ -147,9 +150,11 @@ $radius: 8px; .studio-image { width: 300px; - height: 225px; - object-fit: cover; + height: 195px; border-radius: 8px; + background: white; + box-sizing: border-box; + border: 2px solid rgba(0, 0, 0, 0.15); } .studio-follow-button { @@ -167,26 +172,65 @@ $radius: 8px; li { display: flex; align-items: center; - background: rgba(0, 0, 0, 0.15); + background: white; + border: 1px solid rgba(0, 0, 0, 0.15); + color: #575e75; padding: 0.5em 0.75em 0.5em 0.5em; &:active { - padding: calc(0.5em + 1px) calc(0.75em + 1px) calc(0.5em + 1px) calc(0.5em + 1px); + padding: calc(0.5em) calc(0.75em) calc(0.5em) calc(0.5em); } img { margin-right: 0.5em; width: 1.5em; + filter: invert(0.55); } .tab-count { font-weight: normal; } } - .active > li { background: $ui-blue; } + .active > li { + background: $ui-blue; + color: white; + img { + filter: invert(0); + } + } + a.nav_link:hover > li { + background: $ui-blue-25percent; + border: 1px solid $ui-blue-10percent; + } } .studio-projects, .studio-members { position: relative; } +.studio-manager-count { + margin-left: 1.5rem; + width: 4.875rem; + height: 2rem; + + border: 1px solid $ui-blue; + border-radius: 1rem; + + font-weight: bold; + color: $ui-blue; + font-size: 12px; + display: flex; + justify-content: center; + align-items: center; + +} + +.manager-threshold-message { + display: flex; + flex-direction: column; + + .manager-threshold-info { + font-weight: bold; + } +} + .studio-projects-grid { margin-top: 20px; display: grid; @@ -425,6 +469,10 @@ $radius: 8px; width: 100%; } +.studio-managers-header { + justify-content: flex-start; +} + .studio-compose-container { padding-top: 8px; } @@ -463,10 +511,6 @@ $radius: 8px; box-sizing: border-box; min-height: 85px; /* So the box doesn't change height after being accepted */ - display: flex; - justify-content: space-between; - align-items: center; - @media #{$intermediate-and-smaller} { flex-direction: column; .studio-invitation-msg { @@ -477,6 +521,10 @@ $radius: 8px; } .studio-info-box { + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 4px; background: $ui-blue-10percent; border: 1px solid $ui-blue-25percent; @@ -489,6 +537,10 @@ $radius: 8px; background: #FFF0DF; border: 1px solid $ui-dark-orange; } + + .studio-info-close-button { + position: unset; + } } .studio-thumb-edit-button { diff --git a/static/images/conference/index/2020/title-banner.jpg b/static/images/conference/index/2021/title-banner.jpg similarity index 100% rename from static/images/conference/index/2020/title-banner.jpg rename to static/images/conference/index/2021/title-banner.jpg diff --git a/static/svgs/studio/add-to-studio-empty.svg b/static/svgs/studio/add-to-studio-empty.svg new file mode 100644 index 000000000..82cc73823 --- /dev/null +++ b/static/svgs/studio/add-to-studio-empty.svg @@ -0,0 +1,46 @@ + diff --git a/static/svgs/studio/manager-limit-illustration.svg b/static/svgs/studio/manager-limit-illustration.svg new file mode 100644 index 000000000..6999edbc9 --- /dev/null +++ b/static/svgs/studio/manager-limit-illustration.svg @@ -0,0 +1,13 @@ + diff --git a/test/integration/footer-links.test.js b/test/integration/footer-links.test.js index fe5c8eeda..1e2eadd2f 100644 --- a/test/integration/footer-links.test.js +++ b/test/integration/footer-links.test.js @@ -139,7 +139,7 @@ describe('www-integration footer links', () => { await clickText('Scratch Conference'); let url = await driver.getCurrentUrl(); let pathname = (new URL(url)).pathname; - expect(pathname).toMatch(/^\/conference\/2020\/?$/); + expect(pathname).toMatch(/^\/conference\/2021\/?$/); }); });
-
module.exports.selectMuteStatus = state => get(state, ['session', 'session', 'permissions', 'mute_status'],
{muteExpiresAt: 0, offenses: [], showWarning: false});
module.exports.selectIsMuted = state => (module.exports.selectMuteStatus(state).muteExpiresAt || 0) * 1000 > Date.now();
+module.exports.selectNewStudiosLaunched = state => get(state, ['session', 'session', 'flags', 'new_studios_launched'],
+ false);
module.exports.selectHasFetchedSession = state => state.session.status === module.exports.Status.FETCHED;
diff --git a/src/redux/studio-mutations.js b/src/redux/studio-mutations.js
index 07919e6cb..4c967a000 100644
--- a/src/redux/studio-mutations.js
+++ b/src/redux/studio-mutations.js
@@ -21,7 +21,8 @@ const Errors = keyMirror({
THUMBNAIL_INVALID: null,
TEXT_TOO_LONG: null,
REQUIRED_FIELD: null,
- UNHANDLED: null
+ UNHANDLED: null,
+ USER_MUTED: null
});
const MAX_IMAGE_BYTES = 524288;
@@ -89,9 +90,7 @@ const selectFollowingMutationError = state => state.studioMutations.mutationErro
const selectIsMutatingImage = state => state.studioMutations.isMutating.image;
const selectImageMutationError = state => state.studioMutations.mutationErrors.image;
const selectIsMutatingOpenToAll = state => state.studioMutations.isMutating.openToAll;
-const selectOpenToAllMutationError = state => state.studioMutations.mutationErrors.openToAll;
const selectIsMutatingCommentsAllowed = state => state.studioMutations.isMutating.commentsAllowed;
-const selectCommentsAllowedMutationError = state => state.studioMutations.mutationErrors.commentsAllowed;
// Thunks
/**
@@ -104,6 +103,7 @@ const selectCommentsAllowedMutationError = state => state.studioMutations.mutati
*/
const normalizeError = (err, body, res) => {
if (err) return Errors.NETWORK;
+ if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED;
if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
if (res.statusCode !== 200) return Errors.SERVER;
try {
@@ -221,6 +221,8 @@ const mutateStudioCommentsAllowed = shouldAllow => ((dispatch, getState) => {
}, (err, body, res) => {
const error = normalizeError(err, body, res);
const wasAllowed = selectStudioCommentsAllowed(state);
+ // eslint-disable-next-line no-console
+ console.error(`Error mutating commentsAllowed: ${error}`);
dispatch(completeMutation('commentsAllowed', error ? wasAllowed : shouldAllow, error));
});
});
@@ -237,6 +239,8 @@ const mutateStudioOpenToAll = shouldBeOpen => ((dispatch, getState) => {
}, (err, body, res) => {
const error = normalizeError(err, body, res);
const wasOpen = selectStudioOpenToAll(getState());
+ // eslint-disable-next-line no-console
+ console.error(`Error mutating openToAll: ${error}`);
dispatch(completeMutation('openToAll', error ? wasOpen : shouldBeOpen, error));
});
});
@@ -264,7 +268,5 @@ module.exports = {
selectIsMutatingImage,
selectImageMutationError,
selectIsMutatingCommentsAllowed,
- selectCommentsAllowedMutationError,
- selectIsMutatingOpenToAll,
- selectOpenToAllMutationError
+ selectIsMutatingOpenToAll
};
diff --git a/src/redux/studio.js b/src/redux/studio.js
index 02f885205..09d1aef9c 100644
--- a/src/redux/studio.js
+++ b/src/redux/studio.js
@@ -12,6 +12,9 @@ const Status = keyMirror({
ERROR: null
});
+const STUDIO_MANAGER_LIMIT = 40;
+const STUDIO_MANAGER_THRESHOLD = 30;
+
const getInitialState = () => ({
infoStatus: Status.FETCHING,
title: '',
@@ -20,6 +23,7 @@ const getInitialState = () => ({
commentsAllowed: false,
image: '',
followers: 0,
+ managers: 0,
owner: null,
// BEWARE: classroomId is only loaded if the user is an educator
@@ -98,6 +102,9 @@ const selectStudioLastUpdated = state => state.studio.updated;
const selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
const selectStudioCommentCount = state => state.studio.commentCount;
const selectStudioFollowerCount = state => state.studio.followers;
+const selectStudioManagerCount = state => state.studio.managers;
+const selectStudioHasReachedManagerThreshold = state => state.studio.managers >= STUDIO_MANAGER_THRESHOLD;
+const selectStudioHasReachedManagerLimit = state => state.studio.managers >= STUDIO_MANAGER_LIMIT;
const selectStudioProjectCount = state => state.studio.projectCount;
const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
const selectIsFollowing = state => state.studio.following;
@@ -121,6 +128,7 @@ const getInfo = () => ((dispatch, getState) => {
updated: new Date(body.history.modified),
commentCount: body.stats.comments,
followers: body.stats.followers,
+ managers: body.stats.managers,
projectCount: body.stats.projects,
owner: body.owner
}));
@@ -169,6 +177,10 @@ module.exports = {
setInfo,
setRoles,
+ // Constants
+ STUDIO_MANAGER_LIMIT,
+ STUDIO_MANAGER_THRESHOLD,
+
// Selectors
selectStudioId,
selectStudioTitle,
@@ -180,6 +192,9 @@ module.exports = {
selectStudioLoadFailed,
selectStudioCommentCount,
selectStudioFollowerCount,
+ selectStudioManagerCount,
+ selectStudioHasReachedManagerThreshold,
+ selectStudioHasReachedManagerLimit,
selectStudioProjectCount,
selectIsFetchingInfo,
selectIsFetchingRoles,
diff --git a/src/routes.json b/src/routes.json
index 48832a30b..24f70a273 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -25,7 +25,7 @@
"name": "conference-index",
"pattern": "^/conference/?(\\?.*)?$",
"routeAlias": "/conference(?!/201[4-9])",
- "redirect": "/conference/2020"
+ "redirect": "/conference/2021"
},
{
"name": "conference-index-2017",
@@ -83,7 +83,13 @@
"name": "conference-index-2020",
"pattern": "^/conference/2020/?$",
"routeAlias": "/conference(?!/201[4-9])",
- "view": "conference/2020/index/index",
+ "redirect": "/conference/2021"
+ },
+ {
+ "name": "conference-index-2021",
+ "pattern": "^/conference/2021/?$",
+ "routeAlias": "/conference(?!/201[4-9])",
+ "view": "conference/2021/index/index",
"title": "Scratch Conferences",
"viewportWidth": "device-width"
},
diff --git a/src/views/conference/2020/index/l10n.json b/src/views/conference/2020/index/l10n.json
deleted file mode 100644
index 3ed09deab..000000000
--- a/src/views/conference/2020/index/l10n.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "conference-2020.title": "Scratch Around the World:",
- "conference-2020.subtitle": "An Online Conference",
- "conference-2020.dateDesc": "July 22, 2021",
- "conference-2020.locationDetails": "Online",
-
- "conference-2020.date": "When:",
- "conference-2020.location": "Where:",
-
- "conference-2020.desc1": "Join us for Scratch Around the World, an online conference for educators interested in creative learning with Scratch.",
- "conference-2020.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.",
- "conference-2020.desc3": "The conference will be free of charge.",
-
- "conference-2020.register": "Go to registration page",
-
- "conference-2020.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}",
- "conference-2020.organizedBy": "The Scratch Conference is organized by the Lifelong Kindergarten group at the MIT Media Lab in collaboration with the Scratch Foundation."
-}
diff --git a/src/views/conference/2020/index/index.jsx b/src/views/conference/2021/index/index.jsx
similarity index 62%
rename from src/views/conference/2020/index/index.jsx
rename to src/views/conference/2021/index/index.jsx
index 78689fc9b..8f46f79a9 100644
--- a/src/views/conference/2020/index/index.jsx
+++ b/src/views/conference/2021/index/index.jsx
@@ -3,47 +3,47 @@ const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const render = require('../../../../lib/render.jsx');
-const Page = require('../../../../components/page/conference/2020/page.jsx');
+const Page = require('../../../../components/page/conference/2021/page.jsx');
const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('../../../../components/forms/button.scss');
require('./index.scss');
const ConferenceSplash = () => (
-
-
+
-
+