Design pass: layout panes, sprite libraries, info area, import button…

…s, + menu bar (scratchfoundation#83)

* Covers parts of these issues: GUI layout panes (scratchfoundation#69), sprite libraries (scratchfoundation#12), import buttons (scratchfoundation#64), menu bar (scratchfoundation#67), and sprite info area (scratchfoundation#53)

~ Refactored layout pane structure by removing `display: flex` from `.box`, by default. Declaring flex instead only where specifically needed. This helped fix layout quirks, and should help us avoid hard to find issues related to nested flex boxes

~ Added descriptive classnames to boxes/containers/wrappers. Moved more padding, margins + layout into these wrappers to help with component reusability.

~ Set up a spacer unit variable inside `gui.css`, to start keeping consistent padding, margins and rounded corners between panes. Used [CSS/PostCSS Modules](https://github.com/css-modules/postcss-modules-values) to avoid SCSS dependency.

~ Refactored inline styles from JSX, into CSS files. 2 reasons: a) prepping for reuse of CSS Module variables. b) Feels easier to debug complex flex layouts when all the styles are in one place vs JS/HTML/CSS syntax mixed together

~ Added menu bar into layout via new component, and sprite info header in sprite selector pane, with stubs for the labels + forms. Sprite items are correctly scrolling, while leaving the header fixed, in Chrome. Mostly working in FFx. Not working in Safari, IE yet.

~ Style pass on library modal

~ Experimenting with a few different transition styles: Logo in menu bar, sprite library items, Add buttons.

package.json

@@ -50,6 +50,7 @@
     "minilog": "3.1.0",
     "opt-cli": "1.5.1",
     "postcss-loader": "1.2.2",
+    "postcss-modules-values": "1.2.2",
     "react": "15.4.2",
     "react-dom": "15.4.2",
     "react-modal": "1.6.5",

src/components/blocks/blocks.css

@@ -4,4 +4,10 @@
     right: 0;
     bottom: 0;
     left: 0;
+
+    /* 
+        TODO: using _space (0.5rem doesn't compute to the right amount? 
+        Related to `scratch-blocks` 
+    */
+    border-top-right-radius: 0.75rem;
 }

src/components/box/box.css

@@ -1,5 +1,2 @@
 .box {
-    display: flex;
-    position: relative;
-    background-color: #E9EEF2;
 }

src/components/green-flag/green-flag.css

@@ -1,9 +1,12 @@
 .green-flag {
-    width: 16px;
-    height: 16px;
+    width: 1.1rem;
+    height: 1.1rem;
     opacity: 0.5;
-    margin: 5px;
+    margin: 0.25rem 0.6rem;
+    cursor: pointer;
+    transition: opacity 0.2s ease-out; /* TODO: standardize with var */ 
 }
+
 .green-flag.is-active,
 .green-flag:hover {
     opacity: 1;

src/components/green-flag/green-flag.jsx

@@ -1,7 +1,7 @@
 const classNames = require('classnames');
 const React = require('react');
 
-const greenFlagIcon = require('./green-flag.svg');
+const greenFlagIcon = require('./icon--green-flag.svg');
 const styles = require('./green-flag.css');
 
 const GreenFlagComponent = function (props) {

src/components/gui/gui.css

@@ -0,0 +1,103 @@
+/* 
+    OQ: convention: _ for variables?
+    TODO: refactor into resuable vars file
+    https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
+*/
+@value _space: 0.5rem;
+
+.page-wrapper {
+    height: 100%;
+}
+
+.body-wrapper {
+    /*  
+        Calc the height by subtracting the menu bar height
+        TODO: Make height a reusable variable, link to use in .menu-bar
+    */
+    height: calc(100% - 3rem); 
+    background-color: #e8edf1;
+}
+
+.flex-wrapper {
+    display: flex;
+
+    /* 
+        Make 2 columns: 
+        a) for the blocks + workspace panes, and 
+        b) for combined stage menu + stage + sprite/stage selectors 
+    */
+    flex-direction: row; 
+    height: 100%;
+}
+
+.blocks-wrapper {
+    /* 
+        scratch-blocks is based on absolute positioning, which injects 
+        inside this element and becomes the child
+    */
+    position: relative; 
+
+    flex-basis: 600px;
+    flex-grow: 1;
+    flex-shrink: 0;
+
+    /* 
+        Normally we'd use padding, but the absolute positioning ignores it, 
+        so use margin instead. Temporary, until tabs are inserted. 
+    */
+    margin-top: 3rem;  
+
+    background: #e8edf1;
+}
+
+.stage-and-target-wrapper {
+    /*  
+        Make rows for children: 
+          1) stage menu
+          2) stage
+          3) sprite/stage selectors
+        Only reason we need this, is so .targetWrapper, which holds the selectors, 
+        goes to full vertical height of the window
+    */
+    display: flex;
+    flex-direction: column; 
+
+    /* 
+        Calc the minimum width for this pane, accounting for left + right spacing. 
+        If and when the width doesn't need to be fixed, we can move the spacing out 
+        of this calc, and into padding instead  
+    */
+    flex-basis: calc(480px + (_space * 2));  
+}    
+
+.stage-wrapper {
+    padding-left: _space;
+    padding-right: _space;
+}
+
+.target-wrapper {
+    /*  Take all the available vertical space available.
+        Works in tandem with height: 100%; which is set on the child: .targetPane 
+        TODO: Not working in Safari, not great in FFx 
+    */
+    flex-grow: 1;
+    flex-basis: 0;
+
+    padding-top: _space;
+    padding-left: _space;
+    padding-right: _space;
+
+    /* 
+        For making the sprite-selector a scrollable pane.
+        TODO: Not working in Safari 
+    */
+    overflow: hidden;
+}
+
+.stage-menu-wrapper {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: 3rem;
+    padding: _space;
+}

src/components/gui/gui.jsx

@@ -6,8 +6,10 @@ const GreenFlag = require('../../containers/green-flag.jsx');
 const TargetPane = require('../../containers/target-pane.jsx');
 const Stage = require('../../containers/stage.jsx');
 const StopAll = require('../../containers/stop-all.jsx');
+const MenuBar = require('../menu-bar/menu-bar.jsx');
 
 const Box = require('../box/box.jsx');
+const styles = require('./gui.css');
 
 const GUIComponent = props => {
     const {
@@ -25,55 +27,42 @@ const GUIComponent = props => {
     }
     return (
         <Box
-            grow={1}
-            height="100%"
-            style={{overflow: 'hidden'}}
+            className={styles.pageWrapper}
             {...componentProps}
         >
-            <Box
-                direction="column"
-                grow={1}
-                shrink={0}
-                width={600}
-            >
-                <Box
-                    height={32}
-                    style={{
-                        marginTop: 8
-                    }}
-                />
-                <Blocks
-                    grow={1}
-                    options={{
-                        media: `${basePath}static/blocks-media/`
-                    }}
-                    vm={vm}
-                />
-            </Box>
-            <Box
-                direction="column"
-                shrink={0}
-                width={480}
-            >
-                <Box
-                    alignItems="center"
-                    height={32}
-                    shrink={0}
-                    style={{
-                        marginTop: 8
-                    }}
-                >
-                    <GreenFlag vm={vm} />
-                    <StopAll vm={vm} />
+            <MenuBar />
+            <Box className={styles.bodyWrapper}>
+                <Box className={styles.flexWrapper}>
+                    <Box className={styles.blocksWrapper}>
+                        <Blocks
+                            grow={1}
+                            options={{
+                                media: `${basePath}static/blocks-media/`
+                            }}
+                            vm={vm}
+                        />
+                    </Box>
+
+                    <Box className={styles.stageAndTargetWrapper} >
+                        <Box className={styles.stageMenuWrapper} >
+                            <GreenFlag vm={vm} />
+                            <StopAll vm={vm} />
+                        </Box>
+
+                        <Box className={styles.stageWrapper} >
+                            <Stage
+                                shrink={0}
+                                vm={vm}
+                            />
+                        </Box>
+
+                        <Box className={styles.targetWrapper} >
+                            <TargetPane
+                                vm={vm}
+                            />
+                        </Box>
+                    </Box>
                 </Box>
-                <Stage
-                    shrink={0}
-                    vm={vm}
-                />
-                <TargetPane
-                    grow={1}
-                    vm={vm}
-                />
             </Box>
         </Box>
     );

src/components/library-item/library-item.css

@@ -1,17 +1,53 @@
 .library-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-basis: 160px;
+    height: 160px;
+    padding: 1rem 1rem 0 1rem;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #575e75;
     cursor: pointer;
-    text-align: center;
-    width: 140px;
+    border-radius: 0.5rem;
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    transition: all 1s ease-out;  /* slower fade out */ 
+}
+
+.library-item:hover {
+    border-color: #e1e1e1;
+    transition: 0.25s ease-out;
+    background: #f0f0f0;
 }
+
 .library-item.is-selected {
-    background: #aaa;
-    border-radius: 6px;
+    border-color: #1dacf4;
+    background: #f0f0f0;
+    transition: 0.25s ease-out;
 }
+
 .library-item-image-container {
-    height: 140px;
+    height: 100px;
 }
+
 .library-item-image {
-    align-self: center;
     max-width: 100%;
     max-height: 100%;
 }
+
+.library-item-name {
+    width: 80%;
+    margin: 0.25rem 0;
+    text-align: center;
+
+    /* 
+        For truncating overflowing text gracefully
+        Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
+    */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0; 
+}

src/components/library-item/library-item.jsx

@@ -17,13 +17,10 @@ class LibraryItem extends React.Component {
     render () {
         return (
             <Box
-                alignContent="center"
-                alignItems="center"
                 className={classNames({
                     [styles.libraryItem]: true,
                     [styles.isSelected]: this.props.selected
                 })}
-                direction="column"
                 onClick={this.handleClick}
             >
                 <Box className={styles.libraryItemImageContainer}>
@@ -32,7 +29,7 @@ class LibraryItem extends React.Component {
                         src={this.props.iconURL}
                     />
                 </Box>
-                <p>{this.props.name}</p>
+                <span className={styles.libraryItemName}>{this.props.name}</span>
             </Box>
         );
     }

src/components/library/library.css

@@ -1,3 +1,16 @@
 .library-scroll-grid {
-    overflow-y: auto;
+    display: flex;
+    overflow-y: scroll;
+    height: 100%;
+}
+
+.modal-header {
+    width: 100%;
+    margin-bottom: 3rem;
+    padding: 0.5rem;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1.5rem;
+    font-weight: normal;
+    color: #8e8f95;
+    border-bottom: 1px solid lightgray;
 }

src/components/library/library.jsx

@@ -29,7 +29,7 @@ class LibraryComponent extends React.Component {
                 visible={this.props.visible}
                 onRequestClose={this.props.onRequestClose}
             >
-                <h1>{this.props.title}</h1>
+                <h1 className={styles.modalHeader}>{this.props.title}</h1>
                 <Box
                     className={styles.libraryScrollGrid}
                     grow={1}