diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index e21062db1ca7385b05186ba812ce3c063c9f9934..b59c3268289a665ec24c66a7c5f11f180495ea5b 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -77,6 +77,7 @@ const GUIComponent = props => { intl, isPlayerOnly, isRtl, + isShared, loading, renderLogin, onClickAccountNav, @@ -185,6 +186,7 @@ const GUIComponent = props => { canShare={canShare} className={styles.menuBarPosition} enableCommunity={enableCommunity} + isShared={isShared} renderLogin={renderLogin} showComingSoon={showComingSoon} onClickAccountNav={onClickAccountNav} @@ -342,6 +344,7 @@ GUIComponent.propTypes = { intl: intlShape.isRequired, isPlayerOnly: PropTypes.bool, isRtl: PropTypes.bool, + isShared: PropTypes.bool, loading: PropTypes.bool, onActivateCostumesTab: PropTypes.func, onActivateSoundsTab: PropTypes.func, diff --git a/src/components/menu-bar/icon--remix.svg b/src/components/menu-bar/icon--remix.svg new file mode 100644 index 0000000000000000000000000000000000000000..a82c1bf6d5b93362bb8b06f88aac1e66a6fcfe1f Binary files /dev/null and b/src/components/menu-bar/icon--remix.svg differ diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 0e01803b57ab6f388d1e349197da6d3c7e2995d7..683725c03c66d4d206c8de4219b2cb32eebdb2dc 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -125,14 +125,19 @@ height: 34px; } +.menu-bar-button { + height: 2rem; +} + .share-button { background: $data-primary; - height: 32px; - box-shadow: 0 0 0 1px $ui-black-transparent; +} + +.share-button-is-shared { + background: $ui-black-transparent; } .community-button { - height: 32px; box-shadow: 0 0 0 1px $ui-black-transparent; } @@ -140,6 +145,14 @@ height: 1.25rem; } +.remix-button { + background-color: $pen-primary +} + +.remix-button-icon { + height: 1.25rem; +} + .coming-soon >:not(.coming-soon-tooltip) { opacity: 0.5; } diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index a67c97cebb5e146748d880d98a1308fccb748313..b69c2ef1dcaa00c06dd63517f367c10a2dbcd0d8 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -55,6 +55,7 @@ import mystuffIcon from './icon--mystuff.png'; import feedbackIcon from './icon--feedback.svg'; import profileIcon from './icon--profile.png'; import communityIcon from './icon--see-community.svg'; +import remixIcon from './icon--remix.svg'; import dropdownCaret from './dropdown-caret.svg'; import languageIcon from '../language-selector/language-icon.svg'; @@ -241,16 +242,43 @@ class MenuBar extends React.Component { id="gui.menuBar.new" /> ); + const shareMessage = ( + <FormattedMessage + defaultMessage="Share" + description="Label for project share button" + id="gui.menuBar.share" + /> + ); + const isSharedMessage = ( + <FormattedMessage + defaultMessage="Shared" + description="Label for shared project" + id="gui.menuBar.isShared" + /> + ); const shareButton = ( <Button - className={classNames(styles.shareButton)} + className={classNames( + styles.menuBarButton, + styles.shareButton, + {[styles.shareButtonIsShared]: this.props.isShared} + )} onClick={this.props.onShare} > - <FormattedMessage - defaultMessage="Share" - description="Label for project share button" - id="gui.menuBar.share" - /> + {this.props.isShared ? isSharedMessage : shareMessage} + </Button> + ); + const remixButton = ( + <Button + className={classNames( + styles.menuBarButton, + styles.remixButto + )} + iconClassName={styles.remixButtonIcon} + iconSrc={remixIcon} + onClick={this.handleClickRemix} + > + {remixMessage} </Button> ); return ( @@ -458,11 +486,15 @@ class MenuBar extends React.Component { </MenuBarItemTooltip> ) : [] )} + {this.props.canRemix ? remixButton : []} </div> <div className={classNames(styles.menuBarItem, styles.communityButtonWrapper)}> {this.props.enableCommunity ? ( <Button - className={classNames(styles.communityButton)} + className={classNames( + styles.menuBarButton, + styles.communityButton + )} iconClassName={styles.communityButtonIcon} iconSrc={communityIcon} onClick={this.props.onSeeCommunity} @@ -476,7 +508,10 @@ class MenuBar extends React.Component { ) : (this.props.showComingSoon ? ( <MenuBarItemTooltip id="community-button"> <Button - className={classNames(styles.communityButton)} + className={classNames( + styles.menuBarButton, + styles.communityButton + )} iconClassName={styles.communityButtonIcon} iconSrc={communityIcon} > @@ -652,6 +687,7 @@ MenuBar.propTypes = { fileMenuOpen: PropTypes.bool, intl: intlShape, isRtl: PropTypes.bool, + isShared: PropTypes.bool, isShowingProject: PropTypes.bool, isUpdating: PropTypes.bool, languageMenuOpen: PropTypes.bool,