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/l10n.json b/src/l10n.json index a72a5de67..3b5dbc393 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -140,7 +140,8 @@ "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.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.", 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/ev3/ev3.jsx b/src/views/ev3/ev3.jsx index 6666490e9..c6ca1c240 100644 --- a/src/views/ev3/ev3.jsx +++ b/src/views/ev3/ev3.jsx @@ -17,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 TipBox = require('../../components/extension-landing/tip-box.jsx'); const ProjectCard = require('../../components/extension-landing/project-card.jsx'); @@ -24,6 +25,7 @@ const Steps = require('../../components/steps/steps.jsx'); const Step = require('../../components/steps/step.jsx'); 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 ac274423b..9e9beda27 100644 --- a/src/views/microbit/microbit.jsx +++ b/src/views/microbit/microbit.jsx @@ -10,12 +10,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 Button = require('../../components/forms/button.jsx'); @@ -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/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/images/scratchlink/mac-store-badge.svg b/static/images/scratchlink/mac-store-badge.svg deleted file mode 100755 index 072b425a1..000000000 --- a/static/images/scratchlink/mac-store-badge.svg +++ /dev/null @@ -1,46 +0,0 @@ - - Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/images/scratchlink/windows-store-badge.svg b/static/images/scratchlink/windows-store-badge.svg deleted file mode 100755 index 21c139edd..000000000 --- a/static/images/scratchlink/windows-store-badge.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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