Skip to content

Customize menubar #4960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 23, 2019
Merged

Customize menubar #4960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
48c5069
Add flags for language and file menus
chrisgarrity Jun 28, 2019
6d482fd
Allow customized logo
chrisgarrity Jun 28, 2019
6bf9fac
addressing comments
chrisgarrity Jul 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/components/gui/gui.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,10 @@ const GUIComponent = props => {
backpackVisible,
blocksTabVisible,
cardsVisible,
canChangeLanguage,
canCreateNew,
canEditTitle,
canManageFiles,
canRemix,
canSave,
canCreateCopy,
Expand All @@ -85,6 +87,7 @@ const GUIComponent = props => {
isRtl,
isShared,
loading,
logo,
renderLogin,
onClickAccountNav,
onCloseAccountNav,
Expand Down Expand Up @@ -202,15 +205,18 @@ const GUIComponent = props => {
authorId={authorId}
authorThumbnailUrl={authorThumbnailUrl}
authorUsername={authorUsername}
canChangeLanguage={canChangeLanguage}
canCreateCopy={canCreateCopy}
canCreateNew={canCreateNew}
canEditTitle={canEditTitle}
canManageFiles={canManageFiles}
canRemix={canRemix}
canSave={canSave}
canShare={canShare}
className={styles.menuBarPosition}
enableCommunity={enableCommunity}
isShared={isShared}
logo={logo}
renderLogin={renderLogin}
showComingSoon={showComingSoon}
onClickAccountNav={onClickAccountNav}
Expand Down Expand Up @@ -359,9 +365,11 @@ GUIComponent.propTypes = {
backpackVisible: PropTypes.bool,
basePath: PropTypes.string,
blocksTabVisible: PropTypes.bool,
canChangeLanguage: PropTypes.bool,
canCreateCopy: PropTypes.bool,
canCreateNew: PropTypes.bool,
canEditTitle: PropTypes.bool,
canManageFiles: PropTypes.bool,
canRemix: PropTypes.bool,
canSave: PropTypes.bool,
canShare: PropTypes.bool,
Expand All @@ -378,6 +386,7 @@ GUIComponent.propTypes = {
isRtl: PropTypes.bool,
isShared: PropTypes.bool,
loading: PropTypes.bool,
logo: PropTypes.string,
onActivateCostumesTab: PropTypes.func,
onActivateSoundsTab: PropTypes.func,
onActivateTab: PropTypes.func,
Expand Down Expand Up @@ -411,8 +420,10 @@ GUIComponent.defaultProps = {
backpackHost: null,
backpackVisible: false,
basePath: './',
canChangeLanguage: true,
canCreateNew: false,
canEditTitle: false,
canManageFiles: true,
canRemix: false,
canSave: false,
canCreateCopy: false,
Expand Down
154 changes: 81 additions & 73 deletions src/components/menu-bar/menu-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ class MenuBar extends React.Component {
'handleKeyPress',
'handleLanguageMouseUp',
'handleRestoreOption',
'handleSaveToComputer',
'getSaveToComputerHandler',
'restoreOptionMessage'
]);
}
Expand Down Expand Up @@ -225,7 +225,7 @@ class MenuBar extends React.Component {
event.preventDefault();
}
}
handleSaveToComputer (downloadProjectCallback) {
getSaveToComputerHandler (downloadProjectCallback) {
return () => {
this.props.onRequestCloseFile();
downloadProjectCallback();
Expand Down Expand Up @@ -327,11 +327,11 @@ class MenuBar extends React.Component {
[styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
})}
draggable={false}
src={scratchLogo}
src={this.props.logo}
onClick={this.props.onClickLogo}
/>
</div>
<div
{(this.props.canChangeLanguage) && (<div
className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
>
<div>
Expand All @@ -345,82 +345,86 @@ class MenuBar extends React.Component {
/>
</div>
<LanguageSelector label={this.props.intl.formatMessage(ariaMessages.language)} />
</div>
<div
className={classNames(styles.menuBarItem, styles.hoverable, {
[styles.active]: this.props.fileMenuOpen
})}
onMouseUp={this.props.onClickFile}
>
<FormattedMessage
defaultMessage="File"
description="Text for file dropdown menu"
id="gui.menuBar.file"
/>
<MenuBarMenu
className={classNames(styles.menuBarMenu)}
open={this.props.fileMenuOpen}
place={this.props.isRtl ? 'left' : 'right'}
onRequestClose={this.props.onRequestCloseFile}
</div>)}
{(this.props.canManageFiles) && (
<div
className={classNames(styles.menuBarItem, styles.hoverable, {
[styles.active]: this.props.fileMenuOpen
})}
onMouseUp={this.props.onClickFile}
>
<MenuSection>
<MenuItem
isRtl={this.props.isRtl}
onClick={this.handleClickNew}
>
{newProjectMessage}
</MenuItem>
</MenuSection>
{(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
<FormattedMessage
defaultMessage="File"
description="Text for file dropdown menu"
id="gui.menuBar.file"
/>
<MenuBarMenu
className={classNames(styles.menuBarMenu)}
open={this.props.fileMenuOpen}
place={this.props.isRtl ? 'left' : 'right'}
onRequestClose={this.props.onRequestCloseFile}
>
<MenuSection>
{this.props.canSave ? (
<MenuItem onClick={this.handleClickSave}>
{saveNowMessage}
</MenuItem>
) : []}
{this.props.canCreateCopy ? (
<MenuItem onClick={this.handleClickSaveAsCopy}>
{createCopyMessage}
</MenuItem>
) : []}
{this.props.canRemix ? (
<MenuItem onClick={this.handleClickRemix}>
{remixMessage}
</MenuItem>
) : []}
<MenuItem
isRtl={this.props.isRtl}
onClick={this.handleClickNew}
>
{newProjectMessage}
</MenuItem>
</MenuSection>
)}
<MenuSection>
<SBFileUploader
canSave={this.props.canSave}
userOwnsProject={this.props.userOwnsProject}
onUpdateProjectTitle={this.props.onUpdateProjectTitle}
>
{(className, renderFileInput, loadProject) => (
{(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
<MenuSection>
{this.props.canSave && (
<MenuItem onClick={this.handleClickSave}>
{saveNowMessage}
</MenuItem>
)}
{this.props.canCreateCopy && (
<MenuItem onClick={this.handleClickSaveAsCopy}>
{createCopyMessage}
</MenuItem>
)}
{this.props.canRemix && (
<MenuItem onClick={this.handleClickRemix}>
{remixMessage}
</MenuItem>
)}
</MenuSection>
)}
<MenuSection>
<SBFileUploader
canSave={this.props.canSave}
userOwnsProject={this.props.userOwnsProject}
onUpdateProjectTitle={this.props.onUpdateProjectTitle}
>
{(className, renderFileInput, handleLoadProject) => (
<MenuItem
className={className}
onClick={handleLoadProject}
>
{/* eslint-disable max-len */}
{this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
{/* eslint-enable max-len */}
{renderFileInput()}
</MenuItem>
)}
</SBFileUploader>
<SB3Downloader>{(className, downloadProjectCallback) => (
<MenuItem
className={className}
onClick={loadProject}
onClick={this.getSaveToComputerHandler(downloadProjectCallback)}
>
{this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
{renderFileInput()}
<FormattedMessage
defaultMessage="Save to your computer"
description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
id="gui.menuBar.downloadToComputer"
/>
</MenuItem>
)}
</SBFileUploader>
<SB3Downloader>{(className, downloadProjectCallback) => (
<MenuItem
className={className}
onClick={this.handleSaveToComputer(downloadProjectCallback)}
>
<FormattedMessage
defaultMessage="Save to your computer"
description="Menu bar item for downloading a project to your computer"
id="gui.menuBar.downloadToComputer"
/>
</MenuItem>
)}</SB3Downloader>
</MenuSection>
</MenuBarMenu>
</div>
)}</SB3Downloader>
</MenuSection>
</MenuBarMenu>
</div>
)}
<div
className={classNames(styles.menuBarItem, styles.hoverable, {
[styles.active]: this.props.editMenuOpen
Expand Down Expand Up @@ -698,9 +702,11 @@ MenuBar.propTypes = {
authorThumbnailUrl: PropTypes.string,
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
autoUpdateProject: PropTypes.func,
canChangeLanguage: PropTypes.bool,
canCreateCopy: PropTypes.bool,
canCreateNew: PropTypes.bool,
canEditTitle: PropTypes.bool,
canManageFiles: PropTypes.bool,
canRemix: PropTypes.bool,
canSave: PropTypes.bool,
canShare: PropTypes.bool,
Expand All @@ -717,6 +723,7 @@ MenuBar.propTypes = {
languageMenuOpen: PropTypes.bool,
locale: PropTypes.string.isRequired,
loginMenuOpen: PropTypes.bool,
logo: PropTypes.string,
onClickAccount: PropTypes.func,
onClickEdit: PropTypes.func,
onClickFile: PropTypes.func,
Expand Down Expand Up @@ -751,6 +758,7 @@ MenuBar.propTypes = {
};

MenuBar.defaultProps = {
logo: scratchLogo,
onShare: () => {}
};

Expand Down
7 changes: 4 additions & 3 deletions src/containers/sb-file-uploader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,14 @@ import {
/**
* SBFileUploader component passes a file input, load handler and props to its child.
* It expects this child to be a function with the signature
* function (renderFileInput, loadProject) {}
* function (renderFileInput, handleLoadProject) {}
* The component can then be used to attach project loading functionality
* to any other component:
*
* <SBFileUploader>{(renderFileInput, loadProject) => (
* <SBFileUploader>{(className, renderFileInput, handleLoadProject) => (
* <MyCoolComponent
* onClick={loadProject}
* className={className}
* onClick={handleLoadProject}
* >
* {renderFileInput()}
* </MyCoolComponent>
Expand Down