diff --git a/src/components/extension-landing/extension-landing.jsx b/src/components/extension-landing/extension-landing.jsx index 44cb3fb01..c883d294f 100644 --- a/src/components/extension-landing/extension-landing.jsx +++ b/src/components/extension-landing/extension-landing.jsx @@ -1,7 +1,7 @@ const bindAll = require('lodash.bindall'); const React = require('react'); -const OS_ENUM = require('./os-enum.js'); +const detectOS = require('../../lib/detect-os.js').default; class ExtensionLanding extends React.Component { constructor (props) { @@ -10,16 +10,8 @@ class ExtensionLanding extends React.Component { 'onSetOS' ]); - // @todo use bowser for browser detection - let detectedOS = OS_ENUM.WINDOWS; - if (window.navigator && window.navigator.platform) { - if (window.navigator.platform === 'MacIntel') { - detectedOS = OS_ENUM.MACOS; - } - } - this.state = { - OS: detectedOS + OS: detectOS() }; } diff --git a/src/components/extension-landing/extension-requirements.jsx b/src/components/extension-landing/extension-requirements.jsx index 67bc2ba46..3754eb02c 100644 --- a/src/components/extension-landing/extension-requirements.jsx +++ b/src/components/extension-landing/extension-requirements.jsx @@ -4,6 +4,8 @@ const React = require('react'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); +const {CHROME_APP_RELEASED} = require('../../lib/feature-flags.js'); + require('./extension-landing.scss'); const ExtensionRequirements = props => ( @@ -12,13 +14,64 @@ const ExtensionRequirements = props => ( - {props.children} + {props.bluetoothStandard ? ( + + + + Windows 10 version 1709+ + + + + macOS 10.13+ + + {CHROME_APP_RELEASED && ( + + + + ChromeOS + + + + Android 5.0+ + + + )} + + + Bluetooth + + + + Scratch Link + + + ) : props.children} ); ExtensionRequirements.propTypes = { + bluetoothStandard: PropTypes.bool, children: PropTypes.node }; +ExtensionRequirements.defaultProps = { + bluetoothStandard: false +}; + module.exports = ExtensionRequirements; diff --git a/src/components/extension-landing/install-scratch-link.jsx b/src/components/extension-landing/install-scratch-link.jsx index b8186fbcf..507cdbeb7 100644 --- a/src/components/extension-landing/install-scratch-link.jsx +++ b/src/components/extension-landing/install-scratch-link.jsx @@ -2,13 +2,14 @@ const PropTypes = require('prop-types'); const FormattedMessage = require('react-intl').FormattedMessage; const React = require('react'); -const OS_ENUM = require('./os-enum.js'); +const OS_ENUM = require('../../lib/os-enum.js'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const Steps = require('../../components/steps/steps.jsx'); const Step = require('../../components/steps/step.jsx'); require('./extension-landing.scss'); +// Assumes this will only be called with an OS that needs Scratch Link const InstallScratchLink = ({ currentOS }) => ( @@ -37,20 +38,20 @@ const InstallScratchLink = ({ - + - + diff --git a/src/components/install-scratch/install-scratch.jsx b/src/components/install-scratch/install-scratch.jsx new file mode 100644 index 000000000..eff760cff --- /dev/null +++ b/src/components/install-scratch/install-scratch.jsx @@ -0,0 +1,146 @@ +const PropTypes = require('prop-types'); +const FormattedMessage = require('react-intl').FormattedMessage; +const React = require('react'); + +const OS_ENUM = require('../../lib/os-enum.js'); +const {CHROME_APP_RELEASED} = require('../../lib/feature-flags.js'); + +const {isDownloaded, isFromGooglePlay} = require('./install-util.js'); + +const FlexRow = require('../../components/flex-row/flex-row.jsx'); +const Steps = require('../../components/steps/steps.jsx'); +const Step = require('../../components/steps/step.jsx'); + +require('./install-scratch.scss'); + +const InstallScratch = ({ + currentOS +}) => ( +
+ +

+ {CHROME_APP_RELEASED ? ( + + ) : ( + + {isDownloaded(currentOS) && ( + + )} + {isFromGooglePlay(currentOS) && ( + + )} + + )} +

+ +
+ + + + {isDownloaded(currentOS) && ( + + )} + {isFromGooglePlay(currentOS) && ( + + )} + + +
+ {currentOS === OS_ENUM.WINDOWS && ( + + + + )} + {currentOS === OS_ENUM.MACOS && ( + + + + )} + {isFromGooglePlay(currentOS) && ( + + + + + )} + {isDownloaded(currentOS) && ( + + + + + + + + + )} +
+ + +
+ {isDownloaded(currentOS) && ( + + + {currentOS === OS_ENUM.WINDOWS ? + : + + } + + +
+ +
+ + )} + + +
+); + +InstallScratch.propTypes = { + currentOS: PropTypes.string +}; + +module.exports = InstallScratch; diff --git a/src/components/install-scratch/install-scratch.scss b/src/components/install-scratch/install-scratch.scss new file mode 100644 index 000000000..953b93d5a --- /dev/null +++ b/src/components/install-scratch/install-scratch.scss @@ -0,0 +1,95 @@ +@import "../../colors"; +@import "../../frameless"; + +#view { + padding: 0; +} + +.install-scratch { + padding: 2rem 0; + + .inner { + align-items: flex-start; + } + + .downloads-container { + text-align: center; + + .horizontal-divider { + display: block; + margin: 20px; + } + + .horizontal-divider:before, + .horizontal-divider:after { + display: inline-block; + position: relative; + background-color: $ui-dark-gray; + width: 50%; + height: 1px; + vertical-align: middle; + content: ""; + } + + .horizontal-divider:before { + right: .5em; + margin-left: -50%; + } + + .horizontal-divider:after { + left: .5em; + margin-right: -50%; + } + } + + .step-image { + height: 14rem; + } + + .title { + margin-bottom: 2rem; + font-size: 2rem; + } + + .legacy-link { + display: flex; + } + + .download-button { + display: inline-block; + margin: .5em 0; + border: 0; + border-radius: 8px; + background-color: $ui-blue; + cursor: pointer; + padding: 1rem 2rem; + color: $ui-white; + font-size: 1rem; + } + + .macos-badge img { + height: 50px; + } + + .ms-badge img { + height: 50px; + } + + .play-badge img { + height: 50px; + } + + .download-image { + width: 100%; + max-width: $cols6; + + img { + max-width: 100%; + max-height: 100%; + } + } + + .blue { + background-color: $ui-blue-10percent; + } +} diff --git a/src/components/install-scratch/install-util.js b/src/components/install-scratch/install-util.js new file mode 100644 index 000000000..20f667c21 --- /dev/null +++ b/src/components/install-scratch/install-util.js @@ -0,0 +1,13 @@ +const OS_ENUM = require('../../lib/os-enum.js'); + +module.exports = {}; + +module.exports.isDownloaded = os => { + if (os === OS_ENUM.WINDOWS || os === OS_ENUM.MACOS) return true; + return false; +}; + +module.exports.isFromGooglePlay = os => { + if (os === OS_ENUM.ANDROID || os === OS_ENUM.CHROMEOS) return true; + return false; +}; diff --git a/src/components/os-chooser/os-chooser.jsx b/src/components/os-chooser/os-chooser.jsx index 977c207ea..5d77d19e2 100644 --- a/src/components/os-chooser/os-chooser.jsx +++ b/src/components/os-chooser/os-chooser.jsx @@ -4,11 +4,12 @@ const FormattedMessage = require('react-intl').FormattedMessage; const PropTypes = require('prop-types'); const React = require('react'); +const {CHROME_APP_RELEASED} = require('../../lib/feature-flags.js'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const Button = require('../../components/forms/button.jsx'); -const OS_ENUM = require('../../components/extension-landing/os-enum.js'); +const OS_ENUM = require('../../lib/os-enum.js'); require('./os-chooser.scss'); @@ -34,6 +35,28 @@ const OSChooser = props => ( macOS + {CHROME_APP_RELEASED && ( + + + + + )} ); diff --git a/src/l10n.json b/src/l10n.json index 2e0eba247..b8f94ce88 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -134,10 +134,17 @@ "oschooser.choose": "Choose your OS:", + "installScratch.or": "or", + "installScratch.directDownload": "Direct download", + "installScratch.desktopHeaderTitle": "Install Scratch Desktop", + "installScratch.appHeaderTitle": "Install Scratch for {operatingsystem}", + "installScratch.downloadScratchDesktop": "Download Scratch Desktop", + "installScratch.downloadScratchAppGeneric": "Download Scratch for {operatingsystem}", + "installScratch.getScratchAppPlay": "Get Scratch on the Google Play Store", + "installScratch.useScratchApp": "Open the Scratch app on your device.", + "installScratchLink.installHeaderTitle": "Install Scratch Link", "installScratchLink.downloadAndInstall": "Download and install Scratch Link.", - "installScratchLink.or": "or", - "installScratchLink.directDownload": "Direct download", "installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.", "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.", diff --git a/src/lib/detect-os.js b/src/lib/detect-os.js new file mode 100644 index 000000000..fa94c3229 --- /dev/null +++ b/src/lib/detect-os.js @@ -0,0 +1,18 @@ +import bowser from 'bowser'; +import OS_ENUM from './os-enum.js'; +import {CHROME_APP_RELEASED} from './feature-flags.js'; + +/** + * Helper function to the current Operating System. + * @returns {OS_ENUM} Returns the OS value, defaults to WINDOWS + */ +export default function () { + // matching OS strings from https://github.com/lancedikson/bowser/blob/master/src/constants.js + if (bowser.osname === 'macOS') return OS_ENUM.MACOS; + if (CHROME_APP_RELEASED) { + if (bowser.osname === 'Chrome OS') return OS_ENUM.CHROMEOS; + if (bowser.osname === 'Android') return OS_ENUM.ANDROID; + } + // if (bowser.osname === 'iOS') return OS_ENUM.IOS; // @todo + return OS_ENUM.WINDOWS; +} diff --git a/src/lib/feature-flags.js b/src/lib/feature-flags.js new file mode 100644 index 000000000..2965c1e9c --- /dev/null +++ b/src/lib/feature-flags.js @@ -0,0 +1,10 @@ +const isStaging = () => process.env.SCRATCH_ENV === 'staging'; + +const flagInUrl = flag => { + const url = (window.location && window.location.search) || ''; + return url.indexOf(`${flag}=true`) !== -1; +}; + +module.exports = { + CHROME_APP_RELEASED: isStaging() && flagInUrl('CHROME_APP_RELEASED') +}; diff --git a/src/components/extension-landing/os-enum.js b/src/lib/os-enum.js similarity index 51% rename from src/components/extension-landing/os-enum.js rename to src/lib/os-enum.js index b8cde494e..24d41c018 100644 --- a/src/components/extension-landing/os-enum.js +++ b/src/lib/os-enum.js @@ -1,6 +1,8 @@ const OS_ENUM = { WINDOWS: 'Windows', - MACOS: 'macOS' + MACOS: 'macOS', + CHROMEOS: 'ChromeOS', + ANDROID: 'Android' }; module.exports = OS_ENUM; diff --git a/src/views/boost/boost.jsx b/src/views/boost/boost.jsx index d4abeac54..5c3b885eb 100644 --- a/src/views/boost/boost.jsx +++ b/src/views/boost/boost.jsx @@ -9,12 +9,14 @@ const render = require('../../lib/render.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); +const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js'); const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx'); const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx'); const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx'); const ExtensionSection = require('../../components/extension-landing/extension-section.jsx'); const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx'); +const InstallScratch = require('../../components/install-scratch/install-scratch.jsx'); const ProjectCard = require('../../components/extension-landing/project-card.jsx'); const Steps = require('../../components/steps/steps.jsx'); @@ -56,45 +58,23 @@ class Boost extends ExtensionLanding { src="/images/boost/boost-header.svg" />} renderRequirements={ - - - - Windows 10 version 1709+ - - - - macOS 10.13+ - - - - Bluetooth 4.0 - - - - Scratch Link - - + } /> - + {(isDownloaded(this.state.OS)) && ( + + )} + {(isFromGooglePlay(this.state.OS)) && ( + + )}

@@ -109,20 +89,25 @@ class Boost extends ExtensionLanding { />

- - Scratch - - ) - }} - /> + {isDownloaded(this.state.OS) && ( + + Scratch + + ) + }} + /> + )} + {isFromGooglePlay(this.state.OS) && ( + + )}

@@ -208,36 +193,40 @@ class Boost extends ExtensionLanding {

-

-

- -

-

-

- - - - ), - macOSVersionLink: ( - - - - ) - }} - /> -

+ {isDownloaded(this.state.OS) && ( + +

+

+ +

+

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+ + )}

diff --git a/src/views/download/download.jsx b/src/views/download/download.jsx index 2c935f04b..b0f77a4a8 100644 --- a/src/views/download/download.jsx +++ b/src/views/download/download.jsx @@ -5,13 +5,14 @@ const React = require('react'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const bindAll = require('lodash.bindall'); -const Steps = require('../../components/steps/steps.jsx'); -const Step = require('../../components/steps/step.jsx'); const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); -const OS_ENUM = require('../../components/extension-landing/os-enum.js'); +const detectOS = require('../../lib/detect-os.js').default; +const {CHROME_APP_RELEASED} = require('../../lib/feature-flags.js'); const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); +const InstallScratch = require('../../components/install-scratch/install-scratch.jsx'); +const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js'); require('./download.scss'); require('../../components/forms/button.scss'); @@ -22,15 +23,9 @@ class Download extends React.Component { bindAll(this, [ 'onSetOS' ]); - let detectedOS = OS_ENUM.WINDOWS; - if (window.navigator && window.navigator.platform) { - if (window.navigator.platform === 'MacIntel') { - detectedOS = OS_ENUM.MACOS; - } - } this.state = { - OS: detectedOS + OS: detectOS() }; } @@ -55,10 +50,16 @@ class Download extends React.Component { src="/images/download/icon.png" width="40" /> - + - + @@ -80,6 +81,24 @@ class Download extends React.Component { /> macOS 10.13+ + {CHROME_APP_RELEASED && ( + + + + ChromeOS + + + + Android 5.0+ + + + )} @@ -95,89 +114,150 @@ class Download extends React.Component { currentOS={this.state.OS} handleSetOS={this.onSetOS} /> -

- -

- -

- -
- - - - -
+ + {isDownloaded(this.state.OS) && ( +
+ +

+ +

+

+ +

+ + - - -
- - - {this.state.OS === OS_ENUM.WINDOWS ? - : - - } - - -
- +

- - - -
+
+ + + +

+ + + + +

+
+ + +
+ )}

+ {isDownloaded(this.state.OS) && ( + +

+ +

+

+ +

+ + )} + {isFromGooglePlay(this.state.OS) && ( + +

+ +

+

+ +

+ + )}

- -

-

- -

-

- + {isFromGooglePlay(this.state.OS) ? + : + + }

-

- -

-

- -

-

- -

-

- -

+ {isDownloaded(this.state.OS) && (CHROME_APP_RELEASED ? ( + +

+ +

+

+ +

+ + ) : ( + +

+ +

+

+ +

+ + ))} + {isFromGooglePlay(this.state.OS) && ( + +

+ +

+

+ +

+ + )} + {!CHROME_APP_RELEASED && ( + +

+ +

+

+ +

+ + )}

@@ -186,64 +266,7 @@ class Download extends React.Component {

-
- -

- -

-

- -

- -
- - - -

- - - - -

-
-
- - - -

- - - - -

-
- - -
+
); diff --git a/src/views/download/download.scss b/src/views/download/download.scss index e53275950..3e2b4064c 100644 --- a/src/views/download/download.scss +++ b/src/views/download/download.scss @@ -27,6 +27,18 @@ font-size: 1rem; } + .macos-badge img { + height: 50px; + } + + .ms-badge img { + height: 50px; + } + + .play-badge img { + height: 50px; + } + .download-header { background-color: $ui-blue; padding: 4rem 0; @@ -80,6 +92,7 @@ .download-requirements { justify-content: space-between; + line-height: 2rem; } .download-requirements span { diff --git a/src/views/download/l10n.json b/src/views/download/l10n.json index e475c8a75..c1559b070 100644 --- a/src/views/download/l10n.json +++ b/src/views/download/l10n.json @@ -1,11 +1,10 @@ { "download.title": "Scratch Desktop", "download.intro": "You can install the Scratch Desktop editor to work on projects without an internet connection. This version will work on Windows and MacOS.", + "download.appTitle": "Download Scratch", + "download.appIntro": "You can install Scratch for free to work on projects without an internet connection.", "download.requirements": "Requirements", "download.imgAltDownloadIllustration" : "Scratch 3.0 Desktop screenshot", - "download.installHeaderTitle": "Install Scratch Desktop", - "download.downloadScratchDesktop": "Download Scratch Desktop", - "download.downloadButton": "Download", "download.troubleshootingTitle": "FAQ", "download.startScratchDesktop": "Start Scratch Desktop", "download.howDoIInstall": "How do I install Scratch Desktop?", @@ -14,17 +13,23 @@ "download.supportChromeOS" : "When will you have Scratch Desktop for Chromebooks?", "download.supportChromeOSAnswer": "Scratch Desktop for Chromebooks is not yet available. We are working on it and expect to release later in 2019.", "download.olderVersionsTitle" : "Older Versions", - "download.olderVersions": "Looking for the Scratch 2.0 Offline Editor or Scratch 1.4?", - "download.scratch1-4Desktop" : "Scratch 1.4 Desktop", - "download.scratch2Desktop" : "Scratch 2.0 Desktop", + "download.olderVersions": "Looking for earlier Scratch Offline Editors?", + "download.scratch1-4Desktop" : "Scratch 1.4", + "download.scratch2Desktop" : "Scratch 2.0 Offline Editor", "download.cannotAccessMacStore" : "What if I can't access the Mac App Store?", "download.cannotAccessWindowsStore" : "What if I can't access the Microsoft Store?", "download.macMoveToApplications" : "Open the .dmg file. Move Scratch Desktop into Applications.", "download.winMoveToApplications" : "Run the .exe file.", "download.canIUseScratchLink" : "Can I use Scratch Link to connect to extensions?", "download.canIUseScratchLinkAnswer" : "Yes. However, you will need an Internet connection to use Scratch Link.", + "download.canIUseExtensions" : "Can I connect to hardware extensions?", + "download.canIUseExtensionsAnswer" : "Yes. With the Scratch app you can connect to extensions, and you do not need Scratch Link.", "download.desktopAndBrowser": "Can I use Scratch Desktop and also have Scratch open in the browser?", + "download.appAndBrowser": "Can I use the Scratch app and also have Scratch open in the browser?", "download.yesAnswer" : "Yes.", "download.canIShare": "Can I share from Scratch Desktop?", - "download.canIShareAnswer": "This isn’t supported currently. For now, you can save a project from Scratch Desktop, upload it to your Scratch account, and share it there. In a later version we will add the ability to upload to your Scratch account directly in Scratch Desktop." + "download.canIShareAnswer": "This isn’t supported currently. For now, you can save a project from Scratch Desktop, upload it to your Scratch account, and share it there. In a later version we will add the ability to upload to your Scratch account directly in Scratch Desktop.", + "download.canIShareApp": "Can I share from Scratch for {operatingsystem}?", + "download.canIShareAnswerPlayStore": "Yes. Click the 3-dots menu on a project in the lobby and select Share from the options. In addition to sharing by email you can sign in to your Scratch account and share the project on the Scratch Community.", + "download.canIShareAnswerDownloaded": "This isn’t supported currently. For now, you can save a project from Scratch for {operatingsystem}, upload it to your Scratch account, and share it there. In a later version we will add the ability to upload to your Scratch account directly in Scratch for {operatingsystem}." } diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx index a03b55a14..c6ca1c240 100644 --- a/src/views/ev3/ev3.jsx +++ b/src/views/ev3/ev3.jsx @@ -17,13 +17,15 @@ const ExtensionVideo = require('../../components/extension-landing/extension-vid const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx'); const ExtensionSection = require('../../components/extension-landing/extension-section.jsx'); const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx'); +const InstallScratch = require('../../components/install-scratch/install-scratch.jsx'); const TipBox = require('../../components/extension-landing/tip-box.jsx'); const ProjectCard = require('../../components/extension-landing/project-card.jsx'); const Steps = require('../../components/steps/steps.jsx'); const Step = require('../../components/steps/step.jsx'); -const OS_ENUM = require('../../components/extension-landing/os-enum.js'); +const OS_ENUM = require('../../lib/os-enum.js'); +const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js'); require('../../components/extension-landing/extension-landing.scss'); require('./ev3.scss'); @@ -60,42 +62,23 @@ class EV3 extends ExtensionLanding { videoId="0huu6wfiki" />} renderRequirements={ - - - - Windows 10 version 1709+ - - - - macOS 10.13+ - - - - Bluetooth - - - - Scratch Link - - + } /> - + {(isDownloaded(this.state.OS)) && ( + + )} + {(isFromGooglePlay(this.state.OS)) && ( + + )}

@@ -119,20 +102,25 @@ class EV3 extends ExtensionLanding { />

- - Scratch - - ) - }} - /> + {(isDownloaded(this.state.OS)) && ( + + Scratch + + ) + }} + /> + )} + {(isFromGooglePlay(this.state.OS)) && ( + + )}

@@ -168,27 +156,51 @@ class EV3 extends ExtensionLanding {

-
- {this.props.intl.formatMessage({id: -
-

- {this.state.OS === OS_ENUM.WINDOWS ? - : - - } -

+ {this.state.OS === OS_ENUM.WINDOWS && ( + +
+ {this.props.intl.formatMessage( +
+

+ +

+ + )} + {this.state.OS === OS_ENUM.MACOS && ( + +
+ {this.props.intl.formatMessage( +
+

+ +

+ + )} + {this.state.OS === OS_ENUM.CHROMEOS && ( + +
+ {this.props.intl.formatMessage( +
+

+ +

+ + )} @@ -269,32 +281,36 @@ class EV3 extends ExtensionLanding {

-

-

- - - - ), - macOSVersionLink: ( - - - - ) - }} - /> -

+ {isDownloaded(this.state.OS) && ( + +

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+ + )}

} renderRequirements={ - - - - Windows 10 version 1709+ - - - - macOS 10.13+ - - - - Bluetooth 4.0 - - - - Scratch Link - - + } /> - + {(isDownloaded(this.state.OS)) && ( + + )} + {(isFromGooglePlay(this.state.OS)) && ( + + )}

@@ -117,20 +97,25 @@ class GdxFor extends ExtensionLanding { />

- - Scratch - - ) - }} - /> + {isDownloaded(this.state.OS) && ( + + Scratch + + ) + }} + /> + )} + {isFromGooglePlay(this.state.OS) && ( + + )}

@@ -221,32 +206,36 @@ class GdxFor extends ExtensionLanding {

-

-

- - - - ), - macOSVersionLink: ( - - - - ) - }} - /> -

+ {isDownloaded(this.state.OS) && ( + +

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+ + )}

diff --git a/src/views/microbit/l10n.json b/src/views/microbit/l10n.json index fd97d6ef6..4b57e29c2 100644 --- a/src/views/microbit/l10n.json +++ b/src/views/microbit/l10n.json @@ -7,6 +7,7 @@ "microbit.downloadCardsTitle": "Download micro:bit Cards", "microbit.downloadHex": "Download the Scratch micro:bit HEX file", "microbit.dragDropHex": "Drag and drop the HEX file onto your micro:bit", + "microbit.installHexAndroid": "Please follow the instructions to install the HEX file on a computer running Windows, MacOS or ChromeOS.", "microbit.connectingMicrobit": "Connecting micro:bit to Scratch", "microbit.powerMicrobit": "Power your micro:bit with USB or a battery pack.", "microbit.useScratch3": "Use the {scratch3Link} editor.", diff --git a/src/views/microbit/microbit.jsx b/src/views/microbit/microbit.jsx index 1b36c4ba3..9e9beda27 100644 --- a/src/views/microbit/microbit.jsx +++ b/src/views/microbit/microbit.jsx @@ -10,19 +10,21 @@ const render = require('../../lib/render.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); +const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js'); const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx'); const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx'); const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx'); const ExtensionSection = require('../../components/extension-landing/extension-section.jsx'); const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx'); +const InstallScratch = require('../../components/install-scratch/install-scratch.jsx'); const ProjectCard = require('../../components/extension-landing/project-card.jsx'); const Button = require('../../components/forms/button.jsx'); const Steps = require('../../components/steps/steps.jsx'); const Step = require('../../components/steps/step.jsx'); -const OS_ENUM = require('../../components/extension-landing/os-enum.js'); +const OS_ENUM = require('../../lib/os-enum.js'); require('../../components/extension-landing/extension-landing.scss'); require('./microbit.scss'); @@ -59,90 +61,96 @@ class MicroBit extends ExtensionLanding { src="/images/microbit/microbit-heart.png" />} renderRequirements={ - - - - Windows 10 version 1709+ - - - - macOS 10.13+ - - - - Bluetooth 4.0 - - - - Scratch Link - - + } /> - + {(isDownloaded(this.state.OS)) && ( + + )} + {(isFromGooglePlay(this.state.OS)) && ( + + )}

- - -
- -
-

- -

- - -
- -
- - - - - -
- {this.props.intl.formatMessage({id: -
-

- -

- - + {this.state.OS !== OS_ENUM.ANDROID && ( + + +
+ +
+

+ +

+ + +
+ +
+ + + + + + {this.state.OS === OS_ENUM.WINDOWS && ( +
+ {this.props.intl.formatMessage({id: +
+ )} + {this.state.OS === OS_ENUM.MACOS && ( +
+ {this.props.intl.formatMessage({id: +
+ )} + {this.state.OS === OS_ENUM.CHROMEOS && ( +
+ {this.props.intl.formatMessage({id: +
+ )} +

+ +

+ + + )} + {this.state.OS === OS_ENUM.ANDROID && ( + + +

+ +

+ + + )} +
@@ -166,20 +174,25 @@ class MicroBit extends ExtensionLanding { />

- - Scratch - - ) - }} - /> + {isDownloaded(this.state.OS) && ( + + Scratch + + ) + }} + /> + )} + {isFromGooglePlay(this.state.OS) && ( + + )}

@@ -307,32 +320,36 @@ class MicroBit extends ExtensionLanding {

-

-

- - - - ), - macOSVersionLink: ( - - - - ) - }} - /> -

+ {isDownloaded(this.state.OS) && ( + +

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+ + )}

diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx index 21506aa64..3a4714cfe 100644 --- a/src/views/wedo2/wedo2.jsx +++ b/src/views/wedo2/wedo2.jsx @@ -9,6 +9,7 @@ const render = require('../../lib/render.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); +const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js'); const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx'); const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx'); @@ -16,6 +17,7 @@ const ExtensionVideo = require('../../components/extension-landing/extension-vid const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx'); const ExtensionSection = require('../../components/extension-landing/extension-section.jsx'); const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx'); +const InstallScratch = require('../../components/install-scratch/install-scratch.jsx'); const ProjectCard = require('../../components/extension-landing/project-card.jsx'); const Steps = require('../../components/steps/steps.jsx'); @@ -57,45 +59,23 @@ class Wedo2 extends ExtensionLanding { /> } renderRequirements={ - - - - Windows 10 version 1709+ - - - - macOS 10.13+ - - - - Bluetooth 4.0 - - - - Scratch Link - - + } /> - + {(isDownloaded(this.state.OS)) && ( + + )} + {(isFromGooglePlay(this.state.OS)) && ( + + )}

@@ -110,20 +90,25 @@ class Wedo2 extends ExtensionLanding { />

- - Scratch - - ) - }} - /> + {isDownloaded(this.state.OS) && ( + + Scratch + + ) + }} + /> + )} + {isFromGooglePlay(this.state.OS) && ( + + )}

@@ -207,32 +192,36 @@ class Wedo2 extends ExtensionLanding {

-

-

- - - - ), - macOSVersionLink: ( - - - - ) - }} - /> -

+ {isDownloaded(this.state.OS) && ( + +

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+ + )}

diff --git a/static/images/badges/google-play-badge.png b/static/images/badges/google-play-badge.png new file mode 100644 index 000000000..27392d217 Binary files /dev/null and b/static/images/badges/google-play-badge.png differ diff --git a/static/images/scratchlink/mac-store-badge.svg b/static/images/badges/mac-store-badge.svg similarity index 100% rename from static/images/scratchlink/mac-store-badge.svg rename to static/images/badges/mac-store-badge.svg diff --git a/static/images/scratchlink/windows-store-badge.svg b/static/images/badges/windows-store-badge.svg similarity index 100% rename from static/images/scratchlink/windows-store-badge.svg rename to static/images/badges/windows-store-badge.svg diff --git a/static/images/ev3/chromeos-enter-passcode.png b/static/images/ev3/chromeos-enter-passcode.png new file mode 100644 index 000000000..0177172ec Binary files /dev/null and b/static/images/ev3/chromeos-enter-passcode.png differ diff --git a/static/images/microbit/chromeos-copy-hex.png b/static/images/microbit/chromeos-copy-hex.png new file mode 100644 index 000000000..8e6ad6115 Binary files /dev/null and b/static/images/microbit/chromeos-copy-hex.png differ diff --git a/static/svgs/download/mac-badge.svg b/static/svgs/download/mac-badge.svg new file mode 100755 index 000000000..072b425a1 --- /dev/null +++ b/static/svgs/download/mac-badge.svg @@ -0,0 +1,46 @@ + + Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/svgs/download/ms-badge.svg b/static/svgs/download/ms-badge.svg new file mode 100755 index 000000000..21c139edd --- /dev/null +++ b/static/svgs/download/ms-badge.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/svgs/extensions/android.svg b/static/svgs/extensions/android.svg new file mode 100644 index 000000000..2a13660a3 --- /dev/null +++ b/static/svgs/extensions/android.svg @@ -0,0 +1,14 @@ + + + + Android + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/chromeos.svg b/static/svgs/extensions/chromeos.svg new file mode 100644 index 000000000..a26c55c29 --- /dev/null +++ b/static/svgs/extensions/chromeos.svg @@ -0,0 +1,14 @@ + + + + Chrome + Created with Sketch. + + + + + + + + + \ No newline at end of file