diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 238a02ee0b8d79dd8319583e244cb9ede2e9c22e..3eef5b1a30b026f35a1541ee47af9a6d4c445079 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -96,6 +96,7 @@ const GUIComponent = props => { onActivateCostumesTab, onActivateSoundsTab, onActivateTab, + onClickLogo, onExtensionButtonClick, onRequestCloseBackdropLibrary, onRequestCloseCostumeLibrary, @@ -205,6 +206,7 @@ const GUIComponent = props => { renderLogin={renderLogin} showComingSoon={showComingSoon} onClickAccountNav={onClickAccountNav} + onClickLogo={onClickLogo} onCloseAccountNav={onCloseAccountNav} onLogOut={onLogOut} onOpenRegistration={onOpenRegistration} @@ -370,6 +372,7 @@ GUIComponent.propTypes = { onActivateSoundsTab: PropTypes.func, onActivateTab: PropTypes.func, onClickAccountNav: PropTypes.func, + onClickLogo: PropTypes.func, onCloseAccountNav: PropTypes.func, onExtensionButtonClick: PropTypes.func, onLogOut: PropTypes.func, diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 798ceb95cd700a4c2ba0cbf29fe1b09ef89c8eba..aa893a097accde74e67b3a53e57a0e539465e905 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -45,6 +45,10 @@ vertical-align: middle; } +.scratch-logo.clickable { + cursor: pointer; +} + .language-icon { height: 1.5rem; vertical-align: middle; diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 4eac0836156419ec6b7dfc1294b4c6e579c606bd..07f18d3147d34d0b67c9351077b5403caf33e3c6 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -298,14 +298,15 @@ class MenuBar extends React.Component { <div className={styles.mainMenu}> <div className={styles.fileGroup}> <div className={classNames(styles.menuBarItem)}> - <a href="https://scratch.mit.edu"> - <img - alt="Scratch" - className={styles.scratchLogo} - draggable={false} - src={scratchLogo} - /> - </a> + <img + alt="Scratch" + className={classNames(styles.scratchLogo, { + [styles.clickable]: typeof this.props.onClickLogo !== 'undefined' + })} + draggable={false} + src={scratchLogo} + onClick={this.props.onClickLogo} + /> </div> <div className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)} @@ -715,6 +716,7 @@ MenuBar.propTypes = { onClickFile: PropTypes.func, onClickLanguage: PropTypes.func, onClickLogin: PropTypes.func, + onClickLogo: PropTypes.func, onClickNew: PropTypes.func, onClickRemix: PropTypes.func, onClickSave: PropTypes.func, diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx index 86100c12f7bb093bb650140f293d32b204ec8004..f3acac2eefdb0d512f8407d7cf4caafe7be5ecab 100644 --- a/src/playground/render-gui.jsx +++ b/src/playground/render-gui.jsx @@ -7,6 +7,10 @@ import GUI from '../containers/gui.jsx'; import HashParserHOC from '../lib/hash-parser-hoc.jsx'; import TitledHOC from '../lib/titled-hoc.jsx'; +const onClickLogo = () => { + window.location = 'https://scratch.mit.edu'; +}; + /* * Render the GUI playground. This is a separate function because importing anything * that instantiates the VM causes unsupported browsers to crash @@ -40,6 +44,7 @@ export default appTarget => { showPreviewInfo backpackHost={backpackHost} canSave={false} + onClickLogo={onClickLogo} />, appTarget); };