From de9bda94dca9effd054536973ab43341fa92937d Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 12 Dec 2018 15:16:06 -0500
Subject: [PATCH] Add onClick prop for the logo
Toward LLK/scratch-www#2296
This allows us to take you to any destination when clicking the logo, or to do something else, or nothing at all.
If no handler is provided, the logo will not be clickable.
---
src/components/gui/gui.jsx | 3 +++
src/components/menu-bar/menu-bar.css | 4 ++++
src/components/menu-bar/menu-bar.jsx | 18 ++++++++++--------
src/playground/render-gui.jsx | 5 +++++
4 files changed, 22 insertions(+), 8 deletions(-)
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 238a02ee0..3eef5b1a3 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 798ceb95c..aa893a097 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 4eac08361..07f18d314 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 86100c12f..f3acac2ee 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);
};
--
GitLab