Skip to content

Commit c4122ec

Browse files
chrisgarritychrisgarrity
authored
Merge pull request scratchfoundation#4960 from chrisgarrity/customize-menubar
Customize menubar
2 parents 288aa72 + 6bf9fac commit c4122ec

File tree

3 files changed

+96
-76
lines changed

3 files changed

+96
-76
lines changed

‎src/components/gui/gui.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@ const GUIComponent = props => {
6666
backpackVisible,
6767
blocksTabVisible,
6868
cardsVisible,
69+
canChangeLanguage,
6970
canCreateNew,
7071
canEditTitle,
72+
canManageFiles,
7173
canRemix,
7274
canSave,
7375
canCreateCopy,
@@ -85,6 +87,7 @@ const GUIComponent = props => {
8587
isRtl,
8688
isShared,
8789
loading,
90+
logo,
8891
renderLogin,
8992
onClickAccountNav,
9093
onCloseAccountNav,
@@ -202,15 +205,18 @@ const GUIComponent = props => {
202205
authorId={authorId}
203206
authorThumbnailUrl={authorThumbnailUrl}
204207
authorUsername={authorUsername}
208+
canChangeLanguage={canChangeLanguage}
205209
canCreateCopy={canCreateCopy}
206210
canCreateNew={canCreateNew}
207211
canEditTitle={canEditTitle}
212+
canManageFiles={canManageFiles}
208213
canRemix={canRemix}
209214
canSave={canSave}
210215
canShare={canShare}
211216
className={styles.menuBarPosition}
212217
enableCommunity={enableCommunity}
213218
isShared={isShared}
219+
logo={logo}
214220
renderLogin={renderLogin}
215221
showComingSoon={showComingSoon}
216222
onClickAccountNav={onClickAccountNav}
@@ -359,9 +365,11 @@ GUIComponent.propTypes = {
359365
backpackVisible: PropTypes.bool,
360366
basePath: PropTypes.string,
361367
blocksTabVisible: PropTypes.bool,
368+
canChangeLanguage: PropTypes.bool,
362369
canCreateCopy: PropTypes.bool,
363370
canCreateNew: PropTypes.bool,
364371
canEditTitle: PropTypes.bool,
372+
canManageFiles: PropTypes.bool,
365373
canRemix: PropTypes.bool,
366374
canSave: PropTypes.bool,
367375
canShare: PropTypes.bool,
@@ -378,6 +386,7 @@ GUIComponent.propTypes = {
378386
isRtl: PropTypes.bool,
379387
isShared: PropTypes.bool,
380388
loading: PropTypes.bool,
389+
logo: PropTypes.string,
381390
onActivateCostumesTab: PropTypes.func,
382391
onActivateSoundsTab: PropTypes.func,
383392
onActivateTab: PropTypes.func,
@@ -411,8 +420,10 @@ GUIComponent.defaultProps = {
411420
backpackHost: null,
412421
backpackVisible: false,
413422
basePath: './',
423+
canChangeLanguage: true,
414424
canCreateNew: false,
415425
canEditTitle: false,
426+
canManageFiles: true,
416427
canRemix: false,
417428
canSave: false,
418429
canCreateCopy: false,

‎src/components/menu-bar/menu-bar.jsx

Lines changed: 81 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ class MenuBar extends React.Component {
154154
'handleKeyPress',
155155
'handleLanguageMouseUp',
156156
'handleRestoreOption',
157-
'handleSaveToComputer',
157+
'getSaveToComputerHandler',
158158
'restoreOptionMessage'
159159
]);
160160
}
@@ -225,7 +225,7 @@ class MenuBar extends React.Component {
225225
event.preventDefault();
226226
}
227227
}
228-
handleSaveToComputer (downloadProjectCallback) {
228+
getSaveToComputerHandler (downloadProjectCallback) {
229229
return () => {
230230
this.props.onRequestCloseFile();
231231
downloadProjectCallback();
@@ -327,11 +327,11 @@ class MenuBar extends React.Component {
327327
[styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
328328
})}
329329
draggable={false}
330-
src={scratchLogo}
330+
src={this.props.logo}
331331
onClick={this.props.onClickLogo}
332332
/>
333333
</div>
334-
<div
334+
{(this.props.canChangeLanguage) && (<div
335335
className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
336336
>
337337
<div>
@@ -345,82 +345,86 @@ class MenuBar extends React.Component {
345345
/>
346346
</div>
347347
<LanguageSelector label={this.props.intl.formatMessage(ariaMessages.language)} />
348-
</div>
349-
<div
350-
className={classNames(styles.menuBarItem, styles.hoverable, {
351-
[styles.active]: this.props.fileMenuOpen
352-
})}
353-
onMouseUp={this.props.onClickFile}
354-
>
355-
<FormattedMessage
356-
defaultMessage="File"
357-
description="Text for file dropdown menu"
358-
id="gui.menuBar.file"
359-
/>
360-
<MenuBarMenu
361-
className={classNames(styles.menuBarMenu)}
362-
open={this.props.fileMenuOpen}
363-
place={this.props.isRtl ? 'left' : 'right'}
364-
onRequestClose={this.props.onRequestCloseFile}
348+
</div>)}
349+
{(this.props.canManageFiles) && (
350+
<div
351+
className={classNames(styles.menuBarItem, styles.hoverable, {
352+
[styles.active]: this.props.fileMenuOpen
353+
})}
354+
onMouseUp={this.props.onClickFile}
365355
>
366-
<MenuSection>
367-
<MenuItem
368-
isRtl={this.props.isRtl}
369-
onClick={this.handleClickNew}
370-
>
371-
{newProjectMessage}
372-
</MenuItem>
373-
</MenuSection>
374-
{(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
356+
<FormattedMessage
357+
defaultMessage="File"
358+
description="Text for file dropdown menu"
359+
id="gui.menuBar.file"
360+
/>
361+
<MenuBarMenu
362+
className={classNames(styles.menuBarMenu)}
363+
open={this.props.fileMenuOpen}
364+
place={this.props.isRtl ? 'left' : 'right'}
365+
onRequestClose={this.props.onRequestCloseFile}
366+
>
375367
<MenuSection>
376-
{this.props.canSave ? (
377-
<MenuItem onClick={this.handleClickSave}>
378-
{saveNowMessage}
379-
</MenuItem>
380-
) : []}
381-
{this.props.canCreateCopy ? (
382-
<MenuItem onClick={this.handleClickSaveAsCopy}>
383-
{createCopyMessage}
384-
</MenuItem>
385-
) : []}
386-
{this.props.canRemix ? (
387-
<MenuItem onClick={this.handleClickRemix}>
388-
{remixMessage}
389-
</MenuItem>
390-
) : []}
368+
<MenuItem
369+
isRtl={this.props.isRtl}
370+
onClick={this.handleClickNew}
371+
>
372+
{newProjectMessage}
373+
</MenuItem>
391374
</MenuSection>
392-
)}
393-
<MenuSection>
394-
<SBFileUploader
395-
canSave={this.props.canSave}
396-
userOwnsProject={this.props.userOwnsProject}
397-
onUpdateProjectTitle={this.props.onUpdateProjectTitle}
398-
>
399-
{(className, renderFileInput, loadProject) => (
375+
{(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
376+
<MenuSection>
377+
{this.props.canSave && (
378+
<MenuItem onClick={this.handleClickSave}>
379+
{saveNowMessage}
380+
</MenuItem>
381+
)}
382+
{this.props.canCreateCopy && (
383+
<MenuItem onClick={this.handleClickSaveAsCopy}>
384+
{createCopyMessage}
385+
</MenuItem>
386+
)}
387+
{this.props.canRemix && (
388+
<MenuItem onClick={this.handleClickRemix}>
389+
{remixMessage}
390+
</MenuItem>
391+
)}
392+
</MenuSection>
393+
)}
394+
<MenuSection>
395+
<SBFileUploader
396+
canSave={this.props.canSave}
397+
userOwnsProject={this.props.userOwnsProject}
398+
onUpdateProjectTitle={this.props.onUpdateProjectTitle}
399+
>
400+
{(className, renderFileInput, handleLoadProject) => (
401+
<MenuItem
402+
className={className}
403+
onClick={handleLoadProject}
404+
>
405+
{/* eslint-disable max-len */}
406+
{this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
407+
{/* eslint-enable max-len */}
408+
{renderFileInput()}
409+
</MenuItem>
410+
)}
411+
</SBFileUploader>
412+
<SB3Downloader>{(className, downloadProjectCallback) => (
400413
<MenuItem
401414
className={className}
402-
onClick={loadProject}
415+
onClick={this.getSaveToComputerHandler(downloadProjectCallback)}
403416
>
404-
{this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
405-
{renderFileInput()}
417+
<FormattedMessage
418+
defaultMessage="Save to your computer"
419+
description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
420+
id="gui.menuBar.downloadToComputer"
421+
/>
406422
</MenuItem>
407-
)}
408-
</SBFileUploader>
409-
<SB3Downloader>{(className, downloadProjectCallback) => (
410-
<MenuItem
411-
className={className}
412-
onClick={this.handleSaveToComputer(downloadProjectCallback)}
413-
>
414-
<FormattedMessage
415-
defaultMessage="Save to your computer"
416-
description="Menu bar item for downloading a project to your computer"
417-
id="gui.menuBar.downloadToComputer"
418-
/>
419-
</MenuItem>
420-
)}</SB3Downloader>
421-
</MenuSection>
422-
</MenuBarMenu>
423-
</div>
423+
)}</SB3Downloader>
424+
</MenuSection>
425+
</MenuBarMenu>
426+
</div>
427+
)}
424428
<div
425429
className={classNames(styles.menuBarItem, styles.hoverable, {
426430
[styles.active]: this.props.editMenuOpen
@@ -698,9 +702,11 @@ MenuBar.propTypes = {
698702
authorThumbnailUrl: PropTypes.string,
699703
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
700704
autoUpdateProject: PropTypes.func,
705+
canChangeLanguage: PropTypes.bool,
701706
canCreateCopy: PropTypes.bool,
702707
canCreateNew: PropTypes.bool,
703708
canEditTitle: PropTypes.bool,
709+
canManageFiles: PropTypes.bool,
704710
canRemix: PropTypes.bool,
705711
canSave: PropTypes.bool,
706712
canShare: PropTypes.bool,
@@ -717,6 +723,7 @@ MenuBar.propTypes = {
717723
languageMenuOpen: PropTypes.bool,
718724
locale: PropTypes.string.isRequired,
719725
loginMenuOpen: PropTypes.bool,
726+
logo: PropTypes.string,
720727
onClickAccount: PropTypes.func,
721728
onClickEdit: PropTypes.func,
722729
onClickFile: PropTypes.func,
@@ -751,6 +758,7 @@ MenuBar.propTypes = {
751758
};
752759

753760
MenuBar.defaultProps = {
761+
logo: scratchLogo,
754762
onShare: () => {}
755763
};
756764

‎src/containers/sb-file-uploader.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ import {
2626
/**
2727
* SBFileUploader component passes a file input, load handler and props to its child.
2828
* It expects this child to be a function with the signature
29-
* function (renderFileInput, loadProject) {}
29+
* function (renderFileInput, handleLoadProject) {}
3030
* The component can then be used to attach project loading functionality
3131
* to any other component:
3232
*
33-
* <SBFileUploader>{(renderFileInput, loadProject) => (
33+
* <SBFileUploader>{(className, renderFileInput, handleLoadProject) => (
3434
* <MyCoolComponent
35-
* onClick={loadProject}
35+
* className={className}
36+
* onClick={handleLoadProject}
3637
* >
3738
* {renderFileInput()}
3839
* </MyCoolComponent>

0 commit comments

Comments
 (0)