From 726eb401086cb665ce892f4098b147203c8b7f08 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 24 Oct 2018 18:13:07 -0400
Subject: [PATCH] shared and remix buttons, first pass
---
src/components/gui/gui.jsx | 3 ++
src/components/menu-bar/icon--remix.svg | Bin 0 -> 3221 bytes
src/components/menu-bar/menu-bar.css | 19 +++++++--
src/components/menu-bar/menu-bar.jsx | 52 ++++++++++++++++++++----
4 files changed, 63 insertions(+), 11 deletions(-)
create mode 100644 src/components/menu-bar/icon--remix.svg
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index e21062db1..b59c32682 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
GIT binary patch
literal 3221
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
Md;ZUe{{(LS3$-J*8~^|S
literal 0
HcmV?d00001
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 0e01803b5..683725c03 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 a67c97ceb..b69c2ef1d 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,
--
GitLab