diff --git a/src/components/button/button.css b/src/components/button/button.css
index 44243650f970d16aa787b8a44da3763e595802ce..1062748fea9954592d0631726cdbffafbad74d90 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,3 +1,14 @@
.button {
cursor: pointer;
+ border-radius: 4px;
+ padding: .75rem;
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+}
+
+.icon {
+ margin-right: .5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ vertical-align: middle;
}
diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx
index 59b39668fe9952a6425850fbe222266fc94639bb..a85e8e6abd5f5a962ec06eb46661e89d7c5f109d 100644
--- a/src/components/button/button.jsx
+++ b/src/components/button/button.jsx
@@ -6,14 +6,26 @@ import styles from './button.css';
const ButtonComponent = ({
className,
+ disabled,
+ iconClassName,
+ iconSrc,
onClick,
children,
...props
}) => {
- if (props.disabled === true) {
+
+ if (disabled) {
onClick = function () {};
}
+ const icon = iconSrc && (
+ <img
+ className={classNames(iconClassName, styles.icon)}
+ draggable={false}
+ src={iconSrc}
+ />
+ );
+
return (
<span
className={classNames(
@@ -24,6 +36,7 @@ const ButtonComponent = ({
onClick={onClick}
{...props}
>
+ {icon}
{children}
</span>
);
@@ -33,6 +46,8 @@ ButtonComponent.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
+ iconClassName: PropTypes.string,
+ iconSrc: PropTypes.string,
onClick: PropTypes.func.isRequired
};
diff --git a/src/components/language-selector/dropdown-caret.svg b/src/components/language-selector/dropdown-caret.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9ed9f8a5499f221d2ec0a7999fc3b4f6305d5243
Binary files /dev/null and b/src/components/language-selector/dropdown-caret.svg differ
diff --git a/src/components/language-selector/language-icon.svg b/src/components/language-selector/language-icon.svg
index 42bd409ab18e8ed0e737e6547c7ecc89ea57df0d..e3a712ffb3d7cf6cab15c7ea03751733a6852082 100644
Binary files a/src/components/language-selector/language-icon.svg and b/src/components/language-selector/language-icon.svg differ
diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css
index 0ae9e0a1028ec95ccd9e9896b57721e439e57e06..bae30cdd3c7ca8eef1d9cad1ab9b1f03e00a918c 100644
--- a/src/components/language-selector/language-selector.css
+++ b/src/components/language-selector/language-selector.css
@@ -9,8 +9,11 @@
}
.language-icon {
- height: 2rem;
- display: none;
+ height: 1.5rem;
+}
+
+.disabled {
+ opacity: .5;
}
.language-select {
diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx
index db846fef5953fa54c3f4847808b21735b60f2807..e4779d8c6b561d3df41575af07979fdc805d8fbb 100644
--- a/src/components/language-selector/language-selector.jsx
+++ b/src/components/language-selector/language-selector.jsx
@@ -1,27 +1,22 @@
+import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
-import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
import locales from 'scratch-l10n';
import languageIcon from './language-icon.svg';
+import dropdownCaret from './dropdown-caret.svg';
import styles from './language-selector.css';
const LanguageSelector = ({
currentLocale,
onChange,
+ open,
...props
}) => (
<Box {...props}>
- <ComingSoonTooltip
- place="bottom"
- tooltipId="language-selector"
- >
- <div className={styles.group}>
- <img
- className={styles.languageIcon}
- src={languageIcon}
- />
+ <div className={styles.group}>
+ {open ? (
<select
disabled
aria-label="language selector"
@@ -38,15 +33,27 @@ const LanguageSelector = ({
</option>
))}
</select>
- </div>
- </ComingSoonTooltip>
+ ) : (
+ <React.Fragment>
+ <img
+ className={classNames(styles.languageIcon, styles.disabled)}
+ src={languageIcon}
+ />
+ <img
+ className={classNames(styles.dropdownCaret, styles.disabled)}
+ src={dropdownCaret}
+ />
+ </React.Fragment>
+ )}
+ </div>
</Box>
);
LanguageSelector.propTypes = {
currentLocale: PropTypes.string,
- onChange: PropTypes.func
+ onChange: PropTypes.func,
+ open: PropTypes.boolean
};
export default LanguageSelector;
diff --git a/src/components/menu-bar/icon--mystuff.png b/src/components/menu-bar/icon--mystuff.png
new file mode 100644
index 0000000000000000000000000000000000000000..79bbcb7f9da39c0a73db5a142082b9c39c2825bc
Binary files /dev/null and b/src/components/menu-bar/icon--mystuff.png differ
diff --git a/src/components/menu-bar/icon--profile.png b/src/components/menu-bar/icon--profile.png
new file mode 100644
index 0000000000000000000000000000000000000000..41e62b6140efe34784c1c5fa697f1bf73c236b85
Binary files /dev/null and b/src/components/menu-bar/icon--profile.png differ
diff --git a/src/components/menu-bar/icon--see-community.svg b/src/components/menu-bar/icon--see-community.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1f5b6ee6e58a29ba0ddf03372fff213c0e2948b5
Binary files /dev/null and b/src/components/menu-bar/icon--see-community.svg differ
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index d1f4c3185d4b6b8200b46167eab8ea153b34c1cc..937908b641430c23e9f035d832a552bf4e9ee294 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -6,24 +6,26 @@
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
-
- /*
- For most things, we shouldn't explicitly set height, and let the
- content push the element to whatever fits. Using a fixed height
- instead, will help us subtract the value we assign from the body,
- adding up to a perfect 100%. This means we don't need to set
- overflow: hidden, which makes it hard to debug. border-box
- simplifies by all of this by removing padding from the equation.
+
+ /*
+ For most things, we shouldn't explicitly set height, and let the
+ content push the element to whatever fits. Using a fixed height
+ instead, will help us subtract the value we assign from the body,
+ adding up to a perfect 100%. This means we don't need to set
+ overflow: hidden, which makes it hard to debug. border-box
+ simplifies by all of this by removing padding from the equation.
*/
box-sizing: border-box;
- height: $menu-bar-height;
+ height: $menu-bar-height;
- /*
- @todo: This adds ~20px in Chrome, when scrolling to the right,
+ /*
+ @todo: This adds ~20px in Chrome, when scrolling to the right,
but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
- width: 100%;
+ width: 100%;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: .85rem;
+ font-weight: bold;
background-color: $motion-primary;
color: white;
}
@@ -33,18 +35,20 @@
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
+ align-items: center;
}
-/*
- Using a wrapper so when logo is hovered, it transforms via its center point
- @todo: not sure if this is needed
+/*
+ Using a wrapper so when logo is hovered, it transforms via its center point
+ @todo: not sure if this is needed
*/
.logo-wrapper {
}
.scratch-logo {
- height: $menu-bar-height;
+ height: $menu-bar-height;
padding: 0.8rem 0;
+ vertical-align: middle;
}
.scratch-logo:hover {
@@ -61,10 +65,10 @@
.menu-item {
display: block;
padding: 0 1.5rem;
- line-height: $menu-bar-height;
+ line-height: $menu-bar-height;
cursor: pointer;
text-decoration: none;
- color: $motion-tertiary;
+ color: #fff;
user-select: none;
}
@@ -75,21 +79,28 @@
}
.feedback-button {
- border-radius: 5px;
- padding: .75rem;
background-color: #FFF;
- cursor: pointer;
- font-size: .75rem;
- font-weight: bold;
color: $motion-primary;
}
-.feedback-button-icon {
- vertical-align: middle;
+.divider {
+ border-right: 1px dashed $menubar-gray;
+ margin: 0 1rem;
+ height: 1.5rem;
}
-.feedback-button-icon {
- margin-right: .5rem;
- width: 1.5rem;
+.title-field {
+ border: 1px dashed $menubar-gray;
+ border-radius: 4px;
+ width: 190px;
height: 1.5rem;
+ padding: .75rem;
+}
+
+.share-button {
+ background: #FFAB19;
+}
+
+.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 5807294541a08fcf03983f3542e77a0416bf3d17..6a760672f5269bfee55d95dcb60d9d9524387a9f 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -6,15 +6,18 @@ import React from 'react';
import Box from '../box/box.jsx';
import Button from '../button/button.jsx';
-import LoadButton from '../../containers/load-button.jsx';
-import SaveButton from '../../containers/save-button.jsx';
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
import LanguageSelector from '../../containers/language-selector.jsx';
import {openFeedbackForm} from '../../reducers/modals';
import styles from './menu-bar.css';
+import mystuffIcon from './icon--mystuff.png';
+import profileIcon from './icon--profile.png';
import feedbackIcon from './icon--feedback.svg';
+import communityIcon from './icon--see-community.svg';
+import dropdownCaret from '../language-selector/dropdown-caret.svg';
import scratchLogo from './scratch-logo.svg';
const MenuBar = props => (
@@ -32,29 +35,119 @@ const MenuBar = props => (
src={scratchLogo}
/>
</div>
- <SaveButton className={styles.menuItem} />
- <LoadButton className={styles.menuItem} />
- <LanguageSelector className={styles.menuItem} />
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="menubar-selector"
+ >
+ <LanguageSelector />
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="file-menu"
+ >
+ <div className={classNames(styles.fileMenu)}>File</div>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="edit-menu"
+ >
+ <div className={classNames(styles.editMenu)}>Edit</div>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.divider)} />
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="title-field"
+ >
+ <div className={classNames(styles.titleField)} />
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="share-button"
+ >
+ <Button className={classNames(styles.shareButton)}>
+ <FormattedMessage
+ defaultMessage="Share"
+ description="Label for project share button"
+ id="gui.menuBar.share"
+ />
+ </Button>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem, styles.communityButtonWrapper)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="community-button"
+ >
+ <Button
+ className={classNames(styles.communityButton)}
+ iconSrc={communityIcon}
+ >
+ <FormattedMessage
+ defaultMessage="See Community"
+ description="Label for see community button"
+ id="gui.menuBar.seeCommunity"
+ />
+ </Button>
+ </ComingSoonTooltip>
+ </div>
</div>
- <div className={styles.feedbackButtonWrapper}>
+ <div className={classNames(styles.menuItem, styles.feedbackButtonWrapper)}>
<Button
className={styles.feedbackButton}
+ iconSrc={feedbackIcon}
onClick={props.onGiveFeedback}
>
- <img
- className={styles.feedbackButtonIcon}
- draggable={false}
- src={feedbackIcon}
+ <FormattedMessage
+ defaultMessage="Give Feedback"
+ description="Label for feedback form modal button"
+ id="gui.menuBar.giveFeedback"
/>
- <span className={styles.feedbackText}>
- <FormattedMessage
- defaultMessage="Give Feedback"
- description="Label for feedback form modal button"
- id="gui.menuBar.giveFeedback"
- />
- </span>
</Button>
</div>
+ <div className={styles.accountInfoWrapper}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipId="mystuff"
+ >
+ <div className={classNames(styles.menuItem, styles.mystuffButton)}>
+ <img src={mystuffIcon} />
+ </div>
+ </ComingSoonTooltip>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipId="account-nav"
+ >
+
+ <div className={classNames(styles.menuItem, styles.accountNavMenu)}>
+ <img src={profileIcon} />
+ <span>scratch-cat</span>
+ <img src={dropdownCaret} />
+ </div>
+ </ComingSoonTooltip>
+ </div>
</Box>
);
diff --git a/src/css/colors.css b/src/css/colors.css
index be8a9a0dbe1ef45a5a3214f1d8d00b92f4b74d42..b46bc50bf79c6abe91c77aa1011b6eba17812ec3 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -4,6 +4,8 @@ $ui-background-blue: #e8edf1;
$text-primary: #575e75;
+$menubar-gray: rgba(0,0,0,0.25);
+
$motion-primary: #4C97FF;
$motion-tertiary: #3373CC;
$motion-transparent: hsla(215, 100%, 65%, 0.20);
@@ -11,6 +13,8 @@ $motion-transparent: hsla(215, 100%, 65%, 0.20);
$red-primary: #FF661A;
$red-tertiary: #E64D00;
+$share-orange: #FFAB19;
+
$sound-primary: #CF63CF;
$sound-tertiary: #A63FA6;