@@ -17,7 +17,6 @@ import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
1717import Divider from '../divider/divider.jsx' ;
1818import LanguageSelector from '../../containers/language-selector.jsx' ;
1919import SaveStatus from './save-status.jsx' ;
20- import SBFileUploader from '../../containers/sb-file-uploader.jsx' ;
2120import ProjectWatcher from '../../containers/project-watcher.jsx' ;
2221import MenuBarMenu from './menu-bar-menu.jsx' ;
2322import { MenuItem , MenuSection } from '../menu/menu.jsx' ;
@@ -46,6 +45,9 @@ import {
4645 saveProjectAsCopy
4746} from '../../reducers/project-state' ;
4847import {
48+ openAboutMenu ,
49+ closeAboutMenu ,
50+ aboutMenuOpen ,
4951 openAccountMenu ,
5052 closeAccountMenu ,
5153 accountMenuOpen ,
@@ -300,6 +302,56 @@ class MenuBar extends React.Component {
300302 }
301303 }
302304 }
305+ buildAboutMenu ( onClickAbout ) {
306+ if ( ! onClickAbout ) {
307+ // hide the button
308+ return null ;
309+ }
310+ if ( typeof onClickAbout === 'function' ) {
311+ // make a button which calls a function
312+ return < AboutButton onClick = { onClickAbout } /> ;
313+ }
314+ // assume it's an array of objects
315+ // each item must have a 'title' FormattedMessage and a 'handleClick' function
316+ // generate a menu with items for each object in the array
317+ return (
318+ < div
319+ className = { classNames ( styles . menuBarItem , styles . hoverable , {
320+ [ styles . active ] : this . props . aboutMenuOpen
321+ } ) }
322+ onMouseUp = { this . props . onRequestOpenAbout }
323+ >
324+ < img
325+ className = { styles . aboutIcon }
326+ src = { aboutIcon }
327+ />
328+ < MenuBarMenu
329+ className = { classNames ( styles . menuBarMenu ) }
330+ open = { this . props . aboutMenuOpen }
331+ place = { this . props . isRtl ? 'right' : 'left' }
332+ onRequestClose = { this . props . onRequestCloseAbout }
333+ >
334+ {
335+ onClickAbout . map ( itemProps => (
336+ < MenuItem
337+ key = { itemProps . title }
338+ isRtl = { this . props . isRtl }
339+ onClick = { this . wrapAboutMenuCallback ( itemProps . onClick ) }
340+ >
341+ { itemProps . title }
342+ </ MenuItem >
343+ ) )
344+ }
345+ </ MenuBarMenu >
346+ </ div >
347+ ) ;
348+ }
349+ wrapAboutMenuCallback ( callback ) {
350+ return ( ) => {
351+ callback ( ) ;
352+ this . props . onRequestCloseAbout ( ) ;
353+ } ;
354+ }
303355 render ( ) {
304356 const saveNowMessage = (
305357 < FormattedMessage
@@ -357,7 +409,7 @@ class MenuBar extends React.Component {
357409 </ Button >
358410 ) ;
359411 // Show the About button only if we have a handler for it (like in the desktop app)
360- const aboutButton = this . props . onClickAbout ? < AboutButton onClick = { this . props . onClickAbout } /> : null ;
412+ const aboutButton = this . buildAboutMenu ( this . props . onClickAbout ) ;
361413 return (
362414 < Box
363415 className = { classNames (
@@ -439,22 +491,11 @@ class MenuBar extends React.Component {
439491 </ MenuSection >
440492 ) }
441493 < MenuSection >
442- < SBFileUploader
443- canSave = { this . props . canSave }
444- userOwnsProject = { this . props . userOwnsProject }
494+ < MenuItem
495+ onClick = { this . props . onStartSelectingFileUpload }
445496 >
446- { ( className , renderFileInput , handleLoadProject ) => (
447- < MenuItem
448- className = { className }
449- onClick = { handleLoadProject }
450- >
451- { /* eslint-disable max-len */ }
452- { this . props . intl . formatMessage ( sharedMessages . loadFromComputerTitle ) }
453- { /* eslint-enable max-len */ }
454- { renderFileInput ( ) }
455- </ MenuItem >
456- ) }
457- </ SBFileUploader >
497+ { this . props . intl . formatMessage ( sharedMessages . loadFromComputerTitle ) }
498+ </ MenuItem >
458499 < SB3Downloader > { ( className , downloadProjectCallback ) => (
459500 < MenuItem
460501 className = { className }
@@ -786,6 +827,7 @@ class MenuBar extends React.Component {
786827}
787828
788829MenuBar . propTypes = {
830+ aboutMenuOpen : PropTypes . bool ,
789831 accountMenuOpen : PropTypes . bool ,
790832 authorId : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . bool ] ) ,
791833 authorThumbnailUrl : PropTypes . string ,
@@ -814,7 +856,15 @@ MenuBar.propTypes = {
814856 locale : PropTypes . string . isRequired ,
815857 loginMenuOpen : PropTypes . bool ,
816858 logo : PropTypes . string ,
817- onClickAbout : PropTypes . func ,
859+ onClickAbout : PropTypes . oneOfType ( [
860+ PropTypes . func , // button mode: call this callback when the About button is clicked
861+ PropTypes . arrayOf ( // menu mode: list of items in the About menu
862+ PropTypes . shape ( {
863+ title : PropTypes . string , // text for the menu item
864+ onClick : PropTypes . func // call this callback when the menu item is clicked
865+ } )
866+ )
867+ ] ) ,
818868 onClickAccount : PropTypes . func ,
819869 onClickEdit : PropTypes . func ,
820870 onClickOther : PropTypes . func ,
@@ -832,6 +882,8 @@ MenuBar.propTypes = {
832882 onOpenRegistration : PropTypes . func ,
833883 // onOpenTipLibrary: PropTypes.func,
834884 onProjectTelemetryEvent : PropTypes . func ,
885+ onRequestOpenAbout : PropTypes . func ,
886+ onRequestCloseAbout : PropTypes . func ,
835887 onRequestCloseAccount : PropTypes . func ,
836888 onRequestCloseEdit : PropTypes . func ,
837889 onRequestCloseFile : PropTypes . func ,
@@ -841,6 +893,8 @@ MenuBar.propTypes = {
841893 onSeeCommunity : PropTypes . func ,
842894 onShare : PropTypes . func ,
843895 // onToggleLoginOpen: PropTypes.func,
896+ onStartSelectingFileUpload : PropTypes . func ,
897+ onToggleLoginOpen : PropTypes . func ,
844898 projectTitle : PropTypes . string ,
845899 renderLogin : PropTypes . func ,
846900 sessionExists : PropTypes . bool ,
@@ -861,6 +915,7 @@ const mapStateToProps = (state, ownProps) => {
861915 const loadingState = state . scratchGui . projectState . loadingState ;
862916 const user = state . session && state . session . session && state . session . session . user ;
863917 return {
918+ aboutMenuOpen : aboutMenuOpen ( state ) ,
864919 accountMenuOpen : accountMenuOpen ( state ) ,
865920 fileMenuOpen : fileMenuOpen ( state ) ,
866921 editMenuOpen : editMenuOpen ( state ) ,
@@ -897,6 +952,8 @@ const mapDispatchToProps = dispatch => ({
897952 onRequestCloseLanguage : ( ) => dispatch ( closeLanguageMenu ( ) ) ,
898953 onClickLogin : ( ) => dispatch ( openLoginMenu ( ) ) ,
899954 onRequestCloseLogin : ( ) => dispatch ( closeLoginMenu ( ) ) ,
955+ onRequestOpenAbout : ( ) => dispatch ( openAboutMenu ( ) ) ,
956+ onRequestCloseAbout : ( ) => dispatch ( closeAboutMenu ( ) ) ,
900957 onClickNew : needSave => dispatch ( requestNewProject ( needSave ) ) ,
901958 onClickRemix : ( ) => dispatch ( remixProject ( ) ) ,
902959 onClickSave : ( ) => dispatch ( manualUpdateProject ( ) ) ,
0 commit comments