diff --git a/.gitattributes b/.gitattributes index e81c38bb5152eff82556a0701f95af1f3c4d00fd..eb2e827d17f4b30e7ee8cb1a64dbe0d162867965 100644 --- a/.gitattributes +++ b/.gitattributes @@ -12,6 +12,7 @@ *.svg binary # Prefer LF for most file types +*.css text eol=lf *.frag text eol=lf *.htm text eol=lf *.html text eol=lf diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 8524b2ba36cdf19ebe818ece46fa79021042dc64..314a254a2c85e7502a412a9d83ecf14b81606e31 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -89,6 +89,7 @@ const GUIComponent = props => { loading, logo, renderLogin, + onClickAbout, onClickAccountNav, onCloseAccountNav, onLogOut, @@ -219,6 +220,7 @@ const GUIComponent = props => { logo={logo} renderLogin={renderLogin} showComingSoon={showComingSoon} + onClickAbout={onClickAbout} onClickAccountNav={onClickAccountNav} onClickLogo={onClickLogo} onCloseAccountNav={onCloseAccountNav} @@ -390,6 +392,7 @@ GUIComponent.propTypes = { onActivateCostumesTab: PropTypes.func, onActivateSoundsTab: PropTypes.func, onActivateTab: PropTypes.func, + onClickAbout: PropTypes.func, onClickAccountNav: PropTypes.func, onClickLogo: PropTypes.func, onCloseAccountNav: PropTypes.func, diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index aa893a097accde74e67b3a53e57a0e539465e905..78c639c15f5d4349d2358044b42587846cb7066e 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -218,3 +218,9 @@ .mystuff > a { background-image: url("/images/mystuff.png"); } + +.about-icon { + height: 1.25rem; + margin: 0.5rem; + vertical-align: middle; +} diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 05a5294bc30eadfe41a723f7712bc4b3fcb0e837..92bf3f46e851d66d90bb67c424e9faf1b01cc88a 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -68,6 +68,7 @@ import profileIcon from './icon--profile.png'; import remixIcon from './icon--remix.svg'; import dropdownCaret from './dropdown-caret.svg'; import languageIcon from '../language-selector/language-icon.svg'; +import aboutIcon from './icon--about.svg'; import scratchLogo from './scratch-logo.svg'; @@ -310,6 +311,17 @@ class MenuBar extends React.Component { {remixMessage} </Button> ); + const handleClickAbout = this.props.onClickAbout; + // Show the About button only if we have a handler for it (like in the desktop app) + const aboutButton = handleClickAbout ? ( + <div className={classNames(styles.menuBarItem, styles.hoverable)}> + <img + className={styles.aboutIcon} + onClick={handleClickAbout} + src={aboutIcon} + /> + </div> + ) : null; return ( <Box className={classNames( @@ -677,6 +689,8 @@ class MenuBar extends React.Component { </React.Fragment> )} </div> + + {aboutButton} </Box> ); } @@ -710,6 +724,7 @@ MenuBar.propTypes = { locale: PropTypes.string.isRequired, loginMenuOpen: PropTypes.bool, logo: PropTypes.string, + onClickAbout: PropTypes.func, onClickAccount: PropTypes.func, onClickEdit: PropTypes.func, onClickFile: PropTypes.func,