Merge branch 'react-pr' of https://github.com/netlify/netlify-cms into react-pr

src/actions/findbar.js

@@ -1,5 +1,5 @@
 import history from '../routing/history';
-import { SEARCH } from '../containers/FindBar';
+import { SEARCH } from '../components/UI/FindBar/FindBar';
 
 export const RUN_COMMAND = 'RUN_COMMAND';
 export const SHOW_COLLECTION = 'SHOW_COLLECTION';
@@ -10,14 +10,22 @@ export function run(commandName, payload) {
   return { type: RUN_COMMAND, command: commandName, payload };
 }
 
+export function navigateToCollection(collectionName) {
+  return runCommand(SHOW_COLLECTION, { collectionName });
+}
+
+export function createNewEntryInCollection(collectionName) {
+  return runCommand(CREATE_COLLECTION, { collectionName });
+}
+
 export function runCommand(commandName, payload) {
-  return (dispatch, getState) => {
+  return dispatch => {
     switch (commandName) {
       case SHOW_COLLECTION:
         history.push(`/collections/${payload.collectionName}`);
         break;
       case CREATE_COLLECTION:
-        window.alert(`Create a new ${payload.collectionName} - not supported yet`);
+        history.push(`/collections/${payload.collectionName}/entries/new`);
         break;
       case HELP:
         window.alert('Find Bar Help (PLACEHOLDER)\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.');

src/components/UI/AppHeader/AppHeader.css

@@ -0,0 +1,17 @@
+:root {
+  --foregroundColor: #fff;
+  --backgroundColor: #272e30;
+  --textFieldBorderColor: #e7e7e7;
+  --highlightFGColor: #fff;
+  --highlightBGColor: #3ab7a5;
+}
+
+.appBar {
+  background-color: var(--backgroundColor);
+}
+
+.createBtn {
+  position: fixed;
+  right: 2rem;
+  top: 3.5rem;
+}

src/components/UI/AppHeader/AppHeader.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import pluralize from 'pluralize';
+import { IndexLink } from 'react-router';
+import { Menu, MenuItem, Button, IconButton } from 'react-toolbox';
+import AppBar from 'react-toolbox/lib/app_bar';
+import FindBar from '../FindBar/FindBar';
+import styles from './AppHeader.css';
+
+export default class AppHeader extends React.Component {
+
+  state = {
+    createMenuActive: false
+  }
+
+  handleCreatePostClick = collectionName => {
+    const { onCreateEntryClick } = this.props;
+    if (onCreateEntryClick) {
+      onCreateEntryClick(collectionName);
+    }
+  }
+
+  handleCreateButtonClick = () => {
+    this.setState({
+      createMenuActive: true
+    });
+  }
+
+  handleCreateMenuHide = () => {
+    this.setState({
+      createMenuActive: false
+    });
+  }
+
+  render() {
+    const {
+      collections,
+      commands,
+      defaultCommands,
+      runCommand,
+      toggleNavDrawer
+    } = this.props;
+    const { createMenuActive } = this.state;
+
+    return (
+      <AppBar
+          fixed
+          theme={styles}
+      >
+        <IconButton
+            icon="menu"
+            inverse
+            onClick={toggleNavDrawer}
+        />
+        <IndexLink to="/">
+          Dashboard
+        </IndexLink>
+        <FindBar
+            commands={commands}
+            defaultCommands={defaultCommands}
+            runCommand={runCommand}
+        />
+        <Button
+            className={styles.createBtn}
+            icon='add'
+            floating
+            accent
+            onClick={this.handleCreateButtonClick}
+        >
+          <Menu
+              active={createMenuActive}
+              position="topRight"
+              onHide={this.handleCreateMenuHide}
+          >
+            {
+              collections.valueSeq().map(collection =>
+                <MenuItem
+                    key={collection.get('name')}
+                    value={collection.get('name')}
+                    onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
+                    caption={pluralize(collection.get('label'), 1)}
+                />
+              )
+            }
+          </Menu>
+        </Button>
+
+      </AppBar>
+    );
+  }
+}

src/components/UI/FindBar/FindBar.css

@@ -7,15 +7,14 @@
 }
 
 .root {
+  flex: 1;
   position: relative;
   background-color: var(--backgroundColor);
-  padding: 1px 0;
-  margin: 4px auto;
+  padding: 5px;
 }
 .inputArea {
   display: table;
-  width: calc(100% - 10px);
-  margin: 5px;
+  width: 100%;
   color: var(--foregroundColor);
   background-color: #fff;
   border: 1px solid var(--textFieldBorderColor);

src/components/UI/FindBar/FindBar.js

@@ -1,9 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import fuzzy from 'fuzzy';
 import _ from 'lodash';
-import { runCommand } from '../actions/findbar';
-import { connect } from 'react-redux';
-import { Icon } from '../components/UI';
+import { Icon } from '../index';
 import styles from './FindBar.css';
 
 export const SEARCH = 'SEARCH';
@@ -102,13 +100,15 @@ class FindBar extends Component {
     const paramName = command && command.param ? command.param.name : null;
     const enteredParamValue = command && command.param && match[1] ? match[1].trim() : null;
 
+    console.log(this.props.runCommand);
+
     if (command.search) {
       this.setState({
         activeScope: SEARCH,
         placeholder: ''
       });
 
-      enteredParamValue && this.props.dispatch(runCommand(SEARCH, { searchTerm: enteredParamValue }));
+      enteredParamValue && this.props.runCommand(SEARCH, { searchTerm: enteredParamValue });
     } else if (command.param && !enteredParamValue) {
       // Partial Match
       // Command was partially matched: It requires a param, but param wasn't entered
@@ -133,7 +133,7 @@ class FindBar extends Component {
       if (paramName) {
         payload[paramName] = enteredParamValue;
       }
-      this.props.dispatch(runCommand(command.type, payload));
+      this.props.runCommand(command.type, payload);
     }
   }
 
@@ -373,8 +373,7 @@ FindBar.propTypes = {
     pattern: PropTypes.string.isRequired
   })).isRequired,
   defaultCommands: PropTypes.arrayOf(PropTypes.string),
-  dispatch: PropTypes.func.isRequired,
+  runCommand: PropTypes.func.isRequired,
 };
 
-export { FindBar };
-export default connect()(FindBar);
+export default FindBar;

src/components/UI/index.js

@@ -2,3 +2,4 @@ export { default as Card } from './card/Card';
 export { default as Loader } from './loader/Loader';
 export { default as Icon } from './icon/Icon';
 export { default as Toast } from './toast/Toast';
+export { default as AppHeader } from './AppHeader/AppHeader';

src/components/stories/FindBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 
-import { FindBar } from '../FindBar';
+import FindBar from '../UI/FindBar/FindBar';
 
 const CREATE_COLLECTION = 'CREATE_COLLECTION';
 const CREATE_POST = 'CREATE_POST';
@@ -30,15 +30,13 @@ const style = {
   margin: 20
 };
 
-const dispatch = action('DISPATCH');
-
 storiesOf('FindBar', module)
   .add('Default View', () => (
     <div style={style}>
       <FindBar
           commands={commands}
           defaultCommands={[CREATE_POST, CREATE_COLLECTION, OPEN_SETTINGS, HELP, MORE_COMMANDS]}
-          dispatch={f => f(dispatch)}
+          runCommand={action}
       />
     </div>
   ));

src/components/stories/index.js

@@ -1,3 +1,4 @@
 import './Card';
 import './Icon';
 import './Toast';
+import './FindBar';

src/containers/App.css

@@ -1,3 +1,10 @@
+.layout .navDrawer .drawerContent {
+  padding-top: 54px;
+}
+.nav {
+  display: block;
+  padding: 1rem;
+}
 .main {
   padding-top: 54px;
 }

src/containers/App.js

@@ -1,15 +1,27 @@
 import React from 'react';
+import pluralize from 'pluralize';
 import { connect } from 'react-redux';
+import { Layout, Panel, NavDrawer, Navigation, Link } from 'react-toolbox';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
-import { Loader } from '../components/UI';
-import { SHOW_COLLECTION, CREATE_COLLECTION, HELP } from '../actions/findbar';
-import FindBar from './FindBar';
+import {
+  SHOW_COLLECTION,
+  CREATE_COLLECTION,
+  HELP,
+  runCommand,
+  navigateToCollection,
+  createNewEntryInCollection
+} from '../actions/findbar';
+import { AppHeader, Loader } from '../components/UI/index';
 import styles from './App.css';
-import pluralize from 'pluralize';
 
 class App extends React.Component {
+
+  state = {
+    navDrawerIsVisible: false
+  }
+
   componentDidMount() {
     this.props.dispatch(loadConfig());
   }
@@ -62,7 +74,7 @@ class App extends React.Component {
         id: `show_${collection.get('name')}`,
         pattern: `Show ${pluralize(collection.get('label'))}`,
         type: SHOW_COLLECTION,
-        payload: { collectionName:collection.get('name') }
+        payload: { collectionName: collection.get('name') }
       });
 
       if (defaultCommands.length < 5) defaultCommands.push(`show_${collection.get('name')}`);
@@ -72,7 +84,7 @@ class App extends React.Component {
           id: `create_${collection.get('name')}`,
           pattern: `Create new ${pluralize(collection.get('label'), 1)}(:itemName as ${pluralize(collection.get('label'), 1)} Name)`,
           type: CREATE_COLLECTION,
-          payload: { collectionName:collection.get('name') }
+          payload: { collectionName: collection.get('name') }
         });
       }
     });
@@ -83,8 +95,23 @@ class App extends React.Component {
     return { commands, defaultCommands };
   }
 
+  toggleNavDrawer = () => {
+    this.setState({
+      navDrawerIsVisible: !this.state.navDrawerIsVisible
+    });
+  }
+
   render() {
-    const { user, config, children } = this.props;
+    const { navDrawerIsVisible } = this.state;
+    const {
+      user,
+      config,
+      children,
+      collections,
+      runCommand,
+      navigateToCollection,
+      createNewEntryInCollection
+    } = this.props;
 
     if (config === null) {
       return null;
@@ -105,19 +132,42 @@ class App extends React.Component {
     const { commands, defaultCommands } = this.generateFindBarCommands();
 
     return (
-      <div>
-        <header>
-          <div className={styles.alignable}>
-            <FindBar
-                commands={commands}
-                defaultCommands={defaultCommands}
-            />
+      <Layout theme={styles}>
+        <NavDrawer
+            active={navDrawerIsVisible}
+            scrollY
+            permanentAt="md"
+        >
+          <nav className={styles.nav}>
+            <h1>Collections</h1>
+            <Navigation type='vertical'>
+              {
+                collections.valueSeq().map(collection =>
+                  <Link
+                      key={collection.get('name')}
+                      onClick={navigateToCollection.bind(this, collection.get('name'))}
+                  >
+                    {collection.get('label')}
+                  </Link>
+                )
+              }
+            </Navigation>
+          </nav>
+        </NavDrawer>
+        <Panel scrollY>
+          <AppHeader
+              collections={collections}
+              commands={commands}
+              defaultCommands={defaultCommands}
+              runCommand={runCommand}
+              onCreateEntryClick={createNewEntryInCollection}
+              toggleNavDrawer={this.toggleNavDrawer}
+          />
+          <div className={`${styles.alignable} ${styles.main}`}>
+            {children}
           </div>
-        </header>
-        <div className={`${styles.alignable} ${styles.main}`}>
-          {children}
-        </div>
-      </div>
+        </Panel>
+      </Layout>
     );
   }
 }
@@ -129,4 +179,19 @@ function mapStateToProps(state) {
   return { auth, config, collections, user };
 }
 
-export default connect(mapStateToProps)(App);
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+    runCommand: (type, payload) => {
+      dispatch(runCommand(type, payload));
+    },
+    navigateToCollection: (collection) => {
+      dispatch(navigateToCollection(collection));
+    },
+    createNewEntryInCollection: (collectionName) => {
+      dispatch(createNewEntryInCollection(collectionName));
+    }
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/containers/stories/index.js

@@ -1 +0,0 @@
-import './FindBar';

src/index.css

@@ -1,3 +1,5 @@
+@import "material-icons.css";
+
 html {
   box-sizing: border-box;
   -ms-text-size-adjust: 100%;
@@ -18,16 +20,6 @@ body {
   margin: 0;
 }
 
-header {
-  background-color: #272e30;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
-  height: 54px;
-  border-bottom: 2px solid #3ab7a5;
-  position: fixed;
-  width: 100%;
-  z-index: 999;
-}
-
 :global #root, :global #root > * {
   height: 100%;
 }
@@ -44,19 +36,6 @@ h1 {
   font-size: 25px;
 }
 
-header input {
-  margin-bottom: 0;
-}
-
-button {
-  border: 1px solid #3ab7a5;
-  padding: 3px 20px;
-  font-size: 12px;
-  line-height: 18px;
-  background-color: #fff;
-  cursor: pointer;
-}
-
 :global {
   & .cms-widget {
     border-bottom: 1px solid #e8eae8;

src/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { AppContainer } from 'react-hot-loader'
-import Root from './root'
+import { AppContainer } from 'react-hot-loader';
+import Root from './root';
 import registry from './lib/registry';
 import 'file?name=index.html!../example/index.html';
+import 'react-toolbox/lib/commons.scss';
 import './index.css';
 
 // Create mount element dynamically

src/material-icons.css

@@ -0,0 +1,35 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+  local('MaterialIcons-Regular'),
+  url('material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
+  url('material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
+  url('material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
+}
+
+:global .material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}