diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css new file mode 100644 index 0000000000000000000000000000000000000000..be60ca9779ae504487bbef3cbb5e520573495dcc --- /dev/null +++ b/src/components/backpack/backpack.css @@ -0,0 +1,20 @@ +@import "../../css/units.css"; +@import "../../css/colors.css"; + +.backpack-container { + flex-shrink: 1; + position: relative; +} + +.backpack-header { + margin-top: 0.5rem; + border: 1px solid $ui-black-transparent; + border-top-right-radius: $space; + background: $ui-white; + padding: 0.25rem; + text-align: center; + font-size: 0.85rem; + color: $text-primary; + transition: 0.2s; + cursor: pointer; +} diff --git a/src/components/backpack/backpack.jsx b/src/components/backpack/backpack.jsx new file mode 100644 index 0000000000000000000000000000000000000000..6720faaf57d850fda52d29523d96ec72ac04816f --- /dev/null +++ b/src/components/backpack/backpack.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import {FormattedMessage} from 'react-intl'; +import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx'; +import styles from './backpack.css'; + +const Backpack = () => ( + <div className={styles.backpackContainer}> + <div className={styles.backpackHeader}> + <ComingSoonTooltip place="top"> + <FormattedMessage + defaultMessage="Backpack" + description="Button to open the backpack" + id="gui.backpack.header" + /> + </ComingSoonTooltip> + </div> + </div> +); + +export default Backpack; diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css index 8b6205093d63dd0f346a64c1111a3b8dee451402..ff8bc950295cca74bc22f63784298f893212a044 100644 --- a/src/components/blocks/blocks.css +++ b/src/components/blocks/blocks.css @@ -9,6 +9,7 @@ left: 0; border: 1px solid $ui-black-transparent; border-top-right-radius: $space; + border-bottom-right-radius: $space; } .blocks :global(.blocklyMainBackground) { diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index ad02b2feda7d185e3cd468347363b93a77e58ac7..cdc559464ba97a27e8e4590f289f9177b1b555d6 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -15,6 +15,7 @@ import StageWrapper from '../../containers/stage-wrapper.jsx'; import Loader from '../loader/loader.jsx'; import Box from '../box/box.jsx'; import MenuBar from '../menu-bar/menu-bar.jsx'; +import Backpack from '../backpack/backpack.jsx'; import PreviewModal from '../../containers/preview-modal.jsx'; import ImportModal from '../../containers/import-modal.jsx'; @@ -44,6 +45,7 @@ const GUIComponent = props => { const { activeTabIndex, basePath, + backpackVisible, blocksTabVisible, cardsVisible, children, @@ -202,6 +204,9 @@ const GUIComponent = props => { {soundsTabVisible ? <SoundTab vm={vm} /> : null} </TabPanel> </Tabs> + {backpackVisible ? ( + <Backpack /> + ) : null} </Box> <Box className={styles.stageAndTargetWrapper}> @@ -220,6 +225,7 @@ const GUIComponent = props => { }; GUIComponent.propTypes = { activeTabIndex: PropTypes.number, + backpackVisible: PropTypes.null, basePath: PropTypes.string, blocksTabVisible: PropTypes.bool, cardsVisible: PropTypes.bool, @@ -242,6 +248,7 @@ GUIComponent.propTypes = { vm: PropTypes.instanceOf(VM).isRequired }; GUIComponent.defaultProps = { + backpackVisible: false, basePath: './' }; export default injectIntl(GUIComponent); diff --git a/src/playground/index.jsx b/src/playground/index.jsx index 278d2dd43a1c9331a087da2774f449dcf5e651bf..7bcadca5b4e4fb1f286294e1ff1c17616c71ec76 100644 --- a/src/playground/index.jsx +++ b/src/playground/index.jsx @@ -24,4 +24,4 @@ document.body.appendChild(appTarget); GUI.setAppElement(appTarget); const WrappedGui = HashParserHOC(AppStateHOC(GUI)); -ReactDOM.render(<WrappedGui />, appTarget); +ReactDOM.render(<WrappedGui backpackVisible />, appTarget);