From b2b00ee867af2f81b92ea8369c5fcbd704ea2634 Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Mon, 14 Jan 2019 15:32:00 -0500 Subject: [PATCH 1/2] Support link to cloud variable log MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add Cloud Variables to the ‘Extension’ Chips when there are cloud variables in the project. If the user is logged in, also link to the cloud variable log for the project. --- src/views/preview/extension-chip.jsx | 13 ++++++++- src/views/preview/extension-chip.scss | 17 ++++++++++++ src/views/preview/l10n.json | 2 ++ src/views/preview/presentation.jsx | 38 +++++++++++---------------- src/views/preview/project-view.jsx | 21 ++++++++++++++- static/svgs/project/clouddata.svg | 9 +++++++ static/svgs/project/r-arrow.svg | 20 ++++++++++++++ 7 files changed, 96 insertions(+), 24 deletions(-) create mode 100644 static/svgs/project/clouddata.svg create mode 100644 static/svgs/project/r-arrow.svg diff --git a/src/views/preview/extension-chip.jsx b/src/views/preview/extension-chip.jsx index 7ed7bbc28..a55e16a3f 100644 --- a/src/views/preview/extension-chip.jsx +++ b/src/views/preview/extension-chip.jsx @@ -22,16 +22,27 @@ const ExtensionChip = props => ( )} + {props.action && ( + +
+ + +
+ + )} ); ExtensionChip.propTypes = { + action: PropTypes.shape({ + l10nId: PropTypes.string, + uri: PropTypes.string + }), extensionL10n: PropTypes.string, extensionName: PropTypes.string, hasStatus: PropTypes.bool, iconURI: PropTypes.string }; - module.exports = ExtensionChip; diff --git a/src/views/preview/extension-chip.scss b/src/views/preview/extension-chip.scss index be207fb19..923c87fb6 100644 --- a/src/views/preview/extension-chip.scss +++ b/src/views/preview/extension-chip.scss @@ -38,4 +38,21 @@ color: $ui-white; font-size: .675rem; } + + .extension-action { + display: flex; + justify-content: center; + border-radius: 10px; + background-color: $ui-blue; + padding: 0 5px; + text-align: center; + color: $ui-white; + font-size: .675rem; + font-weight: normal; + + img { + width: 15px; + height: 15px; + } + } } diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index f335bc1d4..b818b261e 100644 --- a/src/views/preview/l10n.json +++ b/src/views/preview/l10n.json @@ -35,5 +35,7 @@ "project.notesPlaceholder": "How did you make this project? Did you use ideas, scripts or artwork from other people? Thank them here.", "project.descriptionPlaceholder": "Tell people how to use your project (such as which keys to press).", "project.cloudDataAlert": "This project uses cloud data - a feature that is only available to signed in Scratchers.", + "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." } diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index a13ed21aa..282574112 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -182,6 +182,20 @@ const PreviewPresentation = ({ } } + const extensionChips = ( + + {extensions && extensions.map(extension => ( + + ))} + + ); return (
{showAdminPanel && ( @@ -344,17 +358,7 @@ const PreviewPresentation = ({ {/* eslint-disable max-len */} - - {extensions && extensions.map(extension => ( - - ))} - + {extensionChips} {showInstructions && ( @@ -475,17 +479,7 @@ const PreviewPresentation = ({ - - {extensions && extensions.map(extension => ( - - ))} - + {extensionChips} {showModInfo && diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 17546dc1f..eb4ce59d3 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -273,9 +273,28 @@ class Preview extends React.Component { const helpers = ProjectInfo[projectData[0].projectVersion]; if (!helpers) return; // sb1 not handled - newState.extensions = helpers.extensions(projectData[0]); + newState.extensions = Array.from(helpers.extensions(projectData[0])); newState.modInfo.scriptCount = helpers.scriptCount(projectData[0]); newState.modInfo.spriteCount = helpers.spriteCount(projectData[0]); + if (helpers.cloudData(projectData[0])) { + if (this.props.isLoggedIn) { + // show cloud variables log link if logged in + newState.extensions.push({ + action: { + l10nId: 'project.cloudDataLink', + uri: `/cloudmonitor/${projectId}/` + }, + icon: 'clouddata.svg', + l10nId: 'project.cloudVariables', + linked: true + }); + } else { + newState.extensions.push({ + icon: 'clouddata.svg', + l10nId: 'project.cloudVariables' + }); + } + } if (showAlerts) { // Check for username block only if user is logged in diff --git a/static/svgs/project/clouddata.svg b/static/svgs/project/clouddata.svg new file mode 100644 index 000000000..5d122bdae --- /dev/null +++ b/static/svgs/project/clouddata.svg @@ -0,0 +1,9 @@ + + + + Extensions/Software/Cloud-Data-Block + Created with Sketch. + + + + \ No newline at end of file diff --git a/static/svgs/project/r-arrow.svg b/static/svgs/project/r-arrow.svg new file mode 100644 index 000000000..6178a2083 --- /dev/null +++ b/static/svgs/project/r-arrow.svg @@ -0,0 +1,20 @@ + + + + Tutorials/Navigation/Next + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file From ed1cf35721c104991dc4debdcef4b5fcf09bc86d Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Tue, 15 Jan 2019 10:10:36 -0500 Subject: [PATCH 2/2] de-dup `helpers.cloudData` --- src/views/preview/project-view.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index eb4ce59d3..fd79e81fa 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -276,7 +276,8 @@ class Preview extends React.Component { newState.extensions = Array.from(helpers.extensions(projectData[0])); newState.modInfo.scriptCount = helpers.scriptCount(projectData[0]); newState.modInfo.spriteCount = helpers.spriteCount(projectData[0]); - if (helpers.cloudData(projectData[0])) { + const hasCloudData = helpers.cloudData(projectData[0]); + if (hasCloudData) { if (this.props.isLoggedIn) { // show cloud variables log link if logged in newState.extensions.push({ @@ -301,7 +302,7 @@ class Preview extends React.Component { if (this.props.isLoggedIn) { newState.showUsernameBlockAlert = helpers.usernameBlock(projectData[0]); } else { // Check for cloud vars only if user is logged out - newState.showCloudDataAlert = helpers.cloudData(projectData[0]); + newState.showCloudDataAlert = hasCloudData; } } this.setState(newState);