scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Additional project data for Moderators/Admins

Browse source
This commit is contained in:
chrisgarrity 2018-11-29 14:43:36 -05:00
parent bef5e615f7
commit e95e5c5f25
8 changed files with 229 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,5 +21,8 @@
"project.instructionsLabel": "Instructions",
"project.notesAndCreditsLabel": "Notes and Credits",
"project.credit": "Thanks to {userLink} for the original project {projectLink}.",
"project.deletedBanner": "Note: This project is in the trash folder"
"project.deletedBanner": "Note: This project is in the trash folder",
"project.moderationInfoLabel": "Moderation Info",
"project.numScripts": "{number} scripts",
"project.numSprites": "{number} sprites"
}

58
src/views/preview/mod-info.jsx Normal file
View file

@ -0,0 +1,58 @@
const PropTypes = require('prop-types');
const React = require('react');
const FormattedDate = require('react-intl').FormattedDate;
const FormattedMessage = require('react-intl').FormattedMessage;
const FormattedTime = require('react-intl').FormattedTime;
const FlexRow = require('../../components/flex-row/flex-row.jsx');
require('./mod-info.scss');
const ModInfo = props => (
<FlexRow className="mod-info">
{/* eslint-disable react/jsx-sort-props */}
{props.revisedDate &&
<div className="mod-date">
<FormattedDate
value={Date.parse(props.revisedDate)}
day="2-digit"
month="short"
year="numeric"
/>
{' - '}
<FormattedTime
value={Date.parse(props.revisedDate)}
hour="numeric"
minute="numeric"
timeZoneName="short"
/>
</div>
}
{/* eslint-enable react/jsx-sort-props */}
<div className="mod-sprites">
<FormattedMessage
id="project.numSprites"
values={{
number: props.sprites
}}
/>
</div>
<div className="mod-scripts">
<FormattedMessage
id="project.numScripts"
values={{
number: props.scripts
}}
/>
</div>
</FlexRow>
);
ModInfo.propTypes = {
revisedDate: PropTypes.string,
scripts: PropTypes.number,
sprites: PropTypes.number
};
module.exports = ModInfo;

64
src/views/preview/mod-info.scss Normal file
View file

@ -0,0 +1,64 @@
@import "../../frameless";
.mod-info {
line-height: 2rem;
justify-content: flex-start;
@media #{$medium-and-smaller} {
margin: 0;
width: 100%;
justify-content: center;
flex-direction: row;
}
& > div {
@media #{$medium-and-smaller} {
padding: 0 1rem;
}
}
}
.mod-date,
.mod-sprites,
.mod-scripts {
display: inline;
padding-right: 2rem;
font-size: .875rem;
&:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
vertical-align: -.35rem;
content: "";
}
}
.mod-date {
&:before {
opacity: .5;
background-image: url("/svgs/project/last-revised.svg");
}
}
.mod-sprites {
&:before {
opacity: .5;
background-image: url("/svgs/project/sprite-count.svg");
}
}
.mod-scripts {
&:before {
opacity: .5;
background-image: url("/svgs/project/block-count.svg");
}
}

24
src/views/preview/presentation.jsx
View file

@ -16,6 +16,7 @@ const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Button = require('../../components/forms/button.jsx');
const Avatar = require('../../components/avatar/avatar.jsx');
const Banner = require('./banner.jsx');
const ModInfo = require('./mod-info.jsx');
const RemixCredit = require('./remix-credit.jsx');
const RemixList = require('./remix-list.jsx');
const Stats = require('./stats.jsx');
@ -65,6 +66,7 @@ const PreviewPresentation = ({
isShared,
loveCount,
loved,
modInfo,
moreCommentsToLoad,
onAddComment,
onAddToStudioClicked,
@ -96,11 +98,13 @@ const PreviewPresentation = ({
remixes,
replies,
reportOpen,
showModInfo,
singleCommentId,
userOwnsProject,
visibilityInfo
}) => {
const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
const revisedDate = ((projectInfo.history && projectInfo.history.modified)) ? projectInfo.history.modified : '';
// Allow embedding html in banner messages coming from the server
const embedCensorMessage = message => (
@ -376,6 +380,21 @@ const PreviewPresentation = ({
/>
</FlexRow>
</MediaQuery>
{showModInfo &&
<React.Fragment>
<div className="project-textlabel">
<FormattedMessage id="project.moderationInfoLabel" />
</div>
<ModInfo
revisedDate={revisedDate}
scripts={modInfo.scripts}
sprites={modInfo.sprites}
/>
</React.Fragment>
}
<MediaQuery minWidth={frameless.tablet}>
<FlexRow className="preview-row">
<FlexRow className="extension-list">
@ -512,6 +531,10 @@ PreviewPresentation.propTypes = {
isShared: PropTypes.bool,
loveCount: PropTypes.number,
loved: PropTypes.bool,
modInfo: PropTypes.shape({
scripts: PropTypes.number,
sprites: PropTypes.number
}),
moreCommentsToLoad: PropTypes.bool,
onAddComment: PropTypes.func,
onAddToStudioClicked: PropTypes.func,
@ -543,6 +566,7 @@ PreviewPresentation.propTypes = {
remixes: PropTypes.arrayOf(PropTypes.object),
replies: PropTypes.objectOf(PropTypes.array),
reportOpen: PropTypes.bool,
showModInfo: PropTypes.bool,
singleCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
userOwnsProject: PropTypes.bool,
visibilityInfo: PropTypes.shape({

29
src/views/preview/project-view.jsx
View file

@ -82,6 +82,10 @@ class Preview extends React.Component {
extensions: [],
favoriteCount: 0,
loveCount: 0,
modInfo: {
scripts: 0,
sprites: 0
},
projectId: parts[1] === 'editor' ? '0' : parts[1],
reportOpen: false,
singleCommentId: singleCommentId
@ -96,7 +100,7 @@ class Preview extends React.Component {
this.props.sessionStatus === sessionActions.Status.FETCHED) ||
(this.state.projectId !== prevState.projectId))) {
this.fetchCommunityData();
this.getExtensions(this.state.projectId);
this.getProjectData(this.state.projectId);
}
if (this.state.projectId === '0' && this.state.projectId !== prevState.projectId) {
this.props.resetProject();
@ -175,7 +179,7 @@ class Preview extends React.Component {
}
}
}
getExtensions (projectId) {
getProjectData (projectId) {
if (projectId > 0) {
storage
.load(storage.AssetType.Project, projectId, storage.DataFormat.JSON)
@ -205,14 +209,29 @@ class Preview extends React.Component {
}
});
}
const sprites = projectData[0].targets.length - 1; // don't count stage
const scripts = projectData[0].targets
.map(target =>
Object.values(target.blocks)
.filter(block => block.topLevel).length
)
.reduce((accumulator, currentVal) => accumulator + currentVal, 0);
this.setState({
extensions: Array.from(extensionSet)
extensions: Array.from(extensionSet),
modInfo: {
scripts: scripts,
sprites: sprites
}
});
});
});
} else { // projectId is default or invalid; empty the extensions array
this.setState({
extensions: []
extensions: [],
modInfo: {
scripts: 0,
sprites: 0
}
});
}
}
@ -454,6 +473,7 @@ class Preview extends React.Component {
isShared={this.props.isShared}
loveCount={this.state.loveCount}
loved={this.props.loved}
modInfo={this.state.modInfo}
moreCommentsToLoad={this.props.moreCommentsToLoad}
originalInfo={this.props.original}
parentInfo={this.props.parent}
@ -464,6 +484,7 @@ class Preview extends React.Component {
remixes={this.props.remixes}
replies={this.props.replies}
reportOpen={this.state.reportOpen}
showModInfo={this.props.isAdmin}
singleCommentId={this.state.singleCommentId}
userOwnsProject={this.props.userOwnsProject}
visibilityInfo={this.props.visibilityInfo}

18
static/svgs/project/block-count.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Moderation/Block Count</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M13.6964,7.83442 L13.6964,11.44342 C13.6964,11.69182 13.4948,11.89342 13.2464,11.89342 L8.4773,11.89342 C8.3576,11.89342 8.2433,11.94022 8.1596,12.02482 L7.5314,12.65302 C7.4477,12.73672 7.3334,12.78442 7.2137,12.78442 L4.8863,12.78442 C4.7675,12.78442 4.6532,12.73672 4.5677,12.65302 L3.9413,12.02482 C3.8567,11.94022 3.7415,11.89342 3.6227,11.89342 L2.45,11.89342 C2.2016,11.89342 2,11.69182 2,11.44342 L2,7.83442 C2,7.58602 2.2016,7.38442 2.45,7.38442 L3.6137,7.38442 C3.7334,7.38442 3.8477,7.43212 3.9314,7.51582 L4.5677,8.15302 C4.6532,8.23672 4.7675,8.28442 4.8863,8.28442 L7.2137,8.28442 C7.3334,8.28442 7.4477,8.23672 7.5314,8.15302 L8.1677,7.51582 C8.2532,7.43212 8.3675,7.38442 8.4863,7.38442 L13.2464,7.38442 C13.4948,7.38442 13.6964,7.58602 13.6964,7.83442 M16.0373,14.05 L16.0373,17.659 C16.0373,17.9074 15.8357,18.109 15.5873,18.109 L8.4773,18.109 C8.3576,18.109 8.2433,18.1558 8.1596,18.2404 L7.5314,18.8686 C7.4477,18.9523 7.3334,19 7.2137,19 L4.8863,19 C4.7675,19 4.6532,18.9523 4.5677,18.8686 L3.9413,18.2404 C3.8567,18.1558 3.7415,18.109 3.6227,18.109 L2.45,18.109 C2.2016,18.109 2,17.9074 2,17.659 L2,14.05 C2,13.8016 2.2016,13.6 2.45,13.6 L3.6137,13.6 C3.7334,13.6 3.8477,13.6477 3.9314,13.7314 L4.5677,14.3686 C4.6532,14.4523 4.7675,14.5 4.8863,14.5 L7.2137,14.5 C7.3334,14.5 7.4477,14.4523 7.5314,14.3686 L8.1677,13.7314 C8.2532,13.6477 8.3675,13.6 8.4863,13.6 L15.5873,13.6 C15.8357,13.6 16.0373,13.8016 16.0373,14.05 Z M18.00036,5.059 C18.00036,5.3074 17.79786,5.509 17.55036,5.509 L8.47766,5.509 C8.35796,5.509 8.24366,5.5558 8.15906,5.6404 L7.53176,6.2686 C7.44716,6.3523 7.33286,6.4 7.21316,6.4 L4.88666,6.4 C4.76696,6.4 4.65266,6.3523 4.56806,6.2686 L3.94076,5.6404 C3.85616,5.5558 3.74186,5.509 3.62306,5.509 L2.45036,5.509 C2.20196,5.509 2.00036,5.3074 2.00036,5.059 L2.00036,1.45 C2.00036,1.2016 2.20196,1 2.45036,1 L3.61316,1 C3.73286,1 3.84716,1.0477 3.93176,1.1314 L4.56806,1.7686 C4.65266,1.8523 4.76696,1.9 4.88666,1.9 L7.21316,1.9 C7.33286,1.9 7.44716,1.8523 7.53176,1.7686 L8.16806,1.1314 C8.25266,1.0477 8.36696,1 8.48666,1 L17.55036,1 C17.79786,1 18.00036,1.2016 18.00036,1.45 L18.00036,5.059 Z" id="path-1"></path>
</defs>
<g id="Moderation/Block-Count" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Script-Count" fill="#575E75" xlink:href="#path-1"></use>
<g id="Color/Gray" mask="url(#mask-2)" fill="#575E75">
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

18
static/svgs/project/last-revised.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Moderation/Last Revised</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M4.03537756,1.10307692 L4.03537756,0.768923077 C4.03537756,0.344088654 4.37977391,-0.000307692308 4.80460833,-0.000307692308 C5.22944276,-0.000307692308 5.5738391,0.344088654 5.5738391,0.768923077 L5.5738391,1.10307692 L9.67600256,1.10307692 L9.67600256,0.768923077 C9.67600256,0.344088654 10.0203989,-0.000307692308 10.4452333,-0.000307692308 C10.8700678,-0.000307692308 11.2144641,0.344088654 11.2144641,0.768923077 L11.2144641,1.10307692 L12.375,1.10307692 C13.6693961,1.10307692 14.7275641,2.13054632 14.7275641,3.41076923 L14.7275641,6.49076923 C14.7275641,6.91560365 14.3831678,7.26 13.9583333,7.26 L2.06089744,7.26 L2.06089744,12.6461538 C2.06089744,13.0664069 2.42030185,13.4153846 2.875,13.4153846 L4.40925,13.4153846 C4.83408442,13.4153846 5.17848077,13.759781 5.17848077,14.1846154 C5.17848077,14.6094498 4.83408442,14.9538462 4.40925,14.9538462 L2.875,14.9538462 C1.58060393,14.9538462 0.522435897,13.9263768 0.522435897,12.6461538 L0.522435897,6.49076923 L0.522435897,3.41076923 C0.522435897,2.13054632 1.58060393,1.10307692 2.875,1.10307692 L4.03537756,1.10307692 Z M4.03537756,2.64153846 L2.875,2.64153846 C2.42030185,2.64153846 2.06089744,2.99051616 2.06089744,3.41076923 L2.06089744,5.72153846 L13.1891026,5.72153846 L13.1891026,3.41076923 C13.1891026,2.99051616 12.8296981,2.64153846 12.375,2.64153846 L11.2144641,2.64153846 L11.2144641,2.97507692 C11.2144641,3.39991135 10.8700678,3.74430769 10.4452333,3.74430769 C10.0203989,3.74430769 9.67600256,3.39991135 9.67600256,2.97507692 L9.67600256,2.64153846 L5.5738391,2.64153846 L5.5738391,2.97507692 C5.5738391,3.39991135 5.22944276,3.74430769 4.80460833,3.74430769 C4.37977391,3.74430769 4.03537756,3.39991135 4.03537756,2.97507692 L4.03537756,2.64153846 Z M11.76035,19.4624615 L6.93118333,14.7547692 C6.64618333,14.4947692 6.64618333,14.0470769 6.93118333,13.7716923 L11.76035,9.06246154 C12.2195167,8.63169231 12.99535,8.93938462 12.99535,9.57015385 L12.99535,12.0332308 C13.8661833,11.9393846 14.7370167,11.5870769 15.4495167,10.924 C16.4786833,10.0163077 17.08035,8.51015385 16.89035,6.93938462 L16.8745167,6.91015385 C16.8111833,6.38553846 17.1911833,5.90861538 17.7295167,5.84707692 C18.1886833,5.80092308 18.60035,6.04707692 18.7745167,6.44707692 C19.5820167,8.43169231 19.40785,10.9086154 18.1095167,12.9086154 C17.03285,14.6178462 15.1645167,15.9393846 12.99535,16.4024615 L12.99535,18.9716923 C12.99535,19.5855385 12.2195167,19.9086154 11.76035,19.4624615 Z" id="path-1"></path>
</defs>
<g id="Moderation/Last-Revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Last-Revised" fill="#575E75" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Color/Gray" mask="url(#mask-2)" fill="#575E75">
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

18
static/svgs/project/sprite-count.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Moderation/Sprite Count</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19,12.278912 C19,17.2463833 14.9561385,19.3221441 9.98866737,19.3221441 C5.02308499,19.3221441 1,17.2463833 1,12.278912 C1,11.05121 1.20587618,10.0123852 1.60440714,9.14354991 L1.45330535,1.96621498 C1.43441763,1.17293059 2.32214061,0.719625225 2.96432319,1.19181831 L6.79853095,4.08164001 C7.68625393,3.60944692 8.78174187,3.40168196 9.98866737,3.40168196 C11.1993704,3.40168196 12.3137461,3.60944692 13.201469,4.08164001 L17.0356768,1.19181831 C17.6589717,0.719625225 18.5466946,1.17293059 18.5466946,1.96621498 L18.3955929,9.14354991 C18.792235,10.0123852 19,11.05121 19,12.278912 Z M13.7854774,15.375932 C14.0517943,15.094505 14.0121301,14.6393108 13.7118153,14.3748827 C13.4284995,14.1293423 12.9733054,14.1671177 12.710766,14.4712101 C12.5011123,14.7148617 12.1989087,14.8470758 11.8778174,14.8470758 C11.2734103,14.8470758 10.7634418,14.355995 10.7634418,13.7327001 L10.7634418,12.6938753 C11.8589297,12.3916717 12.6899895,11.468062 12.6899895,10.8617661 C12.6899895,10.1062572 11.500063,10.1062572 10.064596,10.1062572 C8.61213012,10.1062572 7.44109129,10.1062572 7.44109129,10.8617661 C7.44109129,11.468062 8.23437566,12.3916717 9.34686254,12.6749876 L9.34686254,13.7327001 C9.34686254,14.355995 8.85767051,14.8470758 8.25137461,14.8470758 C7.91328437,14.8470758 7.60919203,14.7148617 7.40142707,14.4712101 C7.15588667,14.1671177 6.70258132,14.1293423 6.40037775,14.3748827 C6.10006296,14.6393108 6.07928646,15.094505 6.32671563,15.375932 C6.79890871,15.9425637 7.49586569,16.263655 8.25137461,16.263655 C8.95022036,16.263655 9.59240294,15.9633402 10.064596,15.4911471 C10.5197901,15.9633402 11.1600839,16.263655 11.8778174,16.263655 C12.6163274,16.263655 13.3132844,15.9425637 13.7854774,15.375932 Z" id="path-1"></path>
</defs>
<g id="Moderation/Sprite-Count" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Sprite-Count" fill="#575E75" xlink:href="#path-1"></use>
<g id="Color/Gray" mask="url(#mask-2)" fill="#575E75">
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB