From 2eb920173a999e28df47a6b20e3f6fe7337bede8 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Tue, 13 Sep 2016 17:40:02 +0200 Subject: [PATCH 01/12] Added link to the dashboard in the Header. Closes #49 --- src/containers/App.css | 22 ++++++++++++++++++++++ src/containers/App.js | 10 +++++++--- src/index.css | 10 ---------- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/containers/App.css b/src/containers/App.css index 0e438444..59a39646 100644 --- a/src/containers/App.css +++ b/src/containers/App.css @@ -1,3 +1,25 @@ +.header { + display: flex; + align-items: center; + 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; +} + +.homeLink { + display: inline-block; + padding: .5em; + color: #fff; +} + +.findBar { + flex: 1; +} + .main { padding-top: 54px; } diff --git a/src/containers/App.js b/src/containers/App.js index 052af2c1..5b6af1c9 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import { IndexLink } from 'react-router'; import { loadConfig } from '../actions/config'; import { loginUser } from '../actions/auth'; import { currentBackend } from '../backends/backend'; @@ -105,15 +106,18 @@ class App extends React.Component { return (
-
-
+
+ + Dashboard + +
-
+
{children}
diff --git a/src/index.css b/src/index.css index 13806227..99b27725 100644 --- a/src/index.css +++ b/src/index.css @@ -17,16 +17,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%; } From 5409cc1022ca19cad2b93f7ed01d3f6d879d7b66 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 15 Sep 2016 11:12:33 +0200 Subject: [PATCH 02/12] Added "Create new" buttons to the header. Closes #49 Note that this is temp solution UI-wise since it won't scale. --- src/actions/findbar.js | 8 ++++++-- src/containers/App.css | 2 ++ src/containers/App.js | 27 ++++++++++++++++++++++++--- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/actions/findbar.js b/src/actions/findbar.js index 68db0399..2e990088 100644 --- a/src/actions/findbar.js +++ b/src/actions/findbar.js @@ -10,14 +10,18 @@ export function run(commandName, payload) { return { type: RUN_COMMAND, command: commandName, payload }; } +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.'); diff --git a/src/containers/App.css b/src/containers/App.css index 59a39646..defe191a 100644 --- a/src/containers/App.css +++ b/src/containers/App.css @@ -16,6 +16,8 @@ color: #fff; } +.actions {} + .findBar { flex: 1; } diff --git a/src/containers/App.js b/src/containers/App.js index 64a56d4d..c784d614 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,14 +1,19 @@ import React from 'react'; import { connect } from 'react-redux'; import { IndexLink } from 'react-router'; +import pluralize from 'pluralize'; 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 { + SHOW_COLLECTION, + CREATE_COLLECTION, + HELP, + createNewEntryInCollection +} from '../actions/findbar'; import FindBar from './FindBar'; import styles from './App.css'; -import pluralize from 'pluralize'; class App extends React.Component { componentDidMount() { @@ -84,8 +89,14 @@ class App extends React.Component { return { commands, defaultCommands }; } + handleCreatePostClick = collectionName => { + this.props.dispatch( + createNewEntryInCollection(collectionName) + ); + } + render() { - const { user, config, children } = this.props; + const { user, config, children, collections } = this.props; if (config === null) { return null; @@ -117,6 +128,16 @@ class App extends React.Component { defaultCommands={defaultCommands} />
+
+ { + collections.map(collection => + ) + } +
{children} From b2d4714c903b403eb4c5cbe0d0d218769408188f Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 15 Sep 2016 18:53:24 +0200 Subject: [PATCH 03/12] Integrated material-ui --- package.json | 6 ++++++ src/index.css | 2 ++ src/index.js | 5 +++-- src/material-icons.css | 35 +++++++++++++++++++++++++++++++++++ webpack.config.js | 9 ++++++++- 5 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/material-icons.css diff --git a/package.json b/package.json index 5a578c53..a5e4846f 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "lint-staged": "^3.0.2", "mocha": "^2.4.5", "moment": "^2.11.2", + "node-sass": "^3.10.0", "normalizr": "^2.0.0", "postcss-cssnext": "^2.7.0", "postcss-import": "^8.1.2", @@ -69,6 +70,7 @@ "react-router-redux": "^4.0.5", "redux": "^3.3.1", "redux-thunk": "^1.0.3", + "sass-loader": "^4.0.2", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.13.2", @@ -80,11 +82,14 @@ "bricks.js": "^1.7.0", "dateformat": "^1.0.12", "fuzzy": "^0.1.1", + "immutability-helper": "^2.0.0", "js-base64": "^2.1.9", "json-loader": "^0.5.4", "localforage": "^1.4.2", "lodash": "^4.13.1", "markup-it": "git+https://github.com/cassiozen/markup-it.git", + "material-design-icons": "^3.0.1", + "normalize.css": "^4.2.0", "pluralize": "^3.0.0", "prismjs": "^1.5.1", "react-addons-css-transition-group": "^15.3.1", @@ -92,6 +97,7 @@ "react-dnd": "^2.1.4", "react-dnd-html5-backend": "^2.1.2", "react-portal": "^2.2.1", + "react-toolbox": "^1.2.1", "selection-position": "^1.0.0", "semaphore": "^1.0.5", "slate": "^0.13.6" diff --git a/src/index.css b/src/index.css index b4d39330..aae19802 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import "material-icons.css"; + html { box-sizing: border-box; -ms-text-size-adjust: 100%; diff --git a/src/index.js b/src/index.js index ae127d1e..e7c8ffe1 100644 --- a/src/index.js +++ b/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 diff --git a/src/material-icons.css b/src/material-icons.css new file mode 100644 index 00000000..a2807ad5 --- /dev/null +++ b/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'; +} diff --git a/webpack.config.js b/webpack.config.js index 94222a49..f58687d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,7 +12,14 @@ module.exports = { test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=100000' }, - { test: /\.json$/, loader: 'json-loader' }, + { + test: /\.json$/, + loader: 'json-loader' + }, + { + test: /\.scss$/, + loader: 'style!css?modules!sass', + }, { test: /\.css$/, loader: 'style!css?modules&importLoaders=1&&localIdentName=cms__[name]__[local]!postcss', From 276f0c4a406a3e5ae7775577c369561d54101c86 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 15 Sep 2016 18:54:11 +0200 Subject: [PATCH 04/12] Removed global style for button --- src/index.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/index.css b/src/index.css index aae19802..296bdf5a 100644 --- a/src/index.css +++ b/src/index.css @@ -36,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; From 15d7043f9d9c987f987d4789057f26428816f410 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 15 Sep 2016 18:54:47 +0200 Subject: [PATCH 05/12] Simplified FindBar.css --- src/containers/FindBar.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/containers/FindBar.css b/src/containers/FindBar.css index be0abe88..ebc75482 100644 --- a/src/containers/FindBar.css +++ b/src/containers/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); From f6ab5e3d4710fad2a88b271b44adefcb1d3f0d1f Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 15 Sep 2016 18:56:08 +0200 Subject: [PATCH 06/12] Better AppHeader component. WIP. --- src/components/UI/AppHeader/AppHeader.css | 17 +++++ src/components/UI/AppHeader/AppHeader.js | 83 +++++++++++++++++++++++ src/components/UI/index.js | 1 + src/containers/App.js | 51 ++++++-------- 4 files changed, 120 insertions(+), 32 deletions(-) create mode 100644 src/components/UI/AppHeader/AppHeader.css create mode 100644 src/components/UI/AppHeader/AppHeader.js diff --git a/src/components/UI/AppHeader/AppHeader.css b/src/components/UI/AppHeader/AppHeader.css new file mode 100644 index 00000000..c1406f5d --- /dev/null +++ b/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; +} diff --git a/src/components/UI/AppHeader/AppHeader.js b/src/components/UI/AppHeader/AppHeader.js new file mode 100644 index 00000000..1c0e4946 --- /dev/null +++ b/src/components/UI/AppHeader/AppHeader.js @@ -0,0 +1,83 @@ +import React from 'react'; +import pluralize from 'pluralize'; +import { IndexLink } from 'react-router'; +import { Menu, MenuItem, Button } from 'react-toolbox'; +import AppBar from 'react-toolbox/lib/app_bar'; +import FindBar from '../../../containers/FindBar'; +import styles from './AppHeader.css'; + +export default class AppHeader extends React.Component { + + // props: { + // // collections: React., + // // commands, + // // defaultCommands + // } + + state = { + createMenuActive: false + } + + handleCreatePostClick = collectionName => { + const { onCreateEntryClick } = this.props; + if (onCreateEntryClick) { + onCreateEntryClick(collectionName); + } + } + + onCreateButtonClick = () => { + this.setState({ + createMenuActive: true + }); + } + + onCreateMenuHide = () => { + this.setState({ + createMenuActive: false + }); + } + + render() { + const { collections, commands, defaultCommands } = this.props; + const { createMenuActive } = this.state; + + return ( + + + Dashboard + + + + + ); + } +} diff --git a/src/components/UI/index.js b/src/components/UI/index.js index 87b473a5..f99eba1c 100644 --- a/src/components/UI/index.js +++ b/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'; diff --git a/src/containers/App.js b/src/containers/App.js index c784d614..391fa4af 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,21 +1,21 @@ import React from 'react'; -import { connect } from 'react-redux'; -import { IndexLink } from 'react-router'; import pluralize from 'pluralize'; +import { connect } from 'react-redux'; +import { Layout, Panel } 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, createNewEntryInCollection } from '../actions/findbar'; -import FindBar from './FindBar'; +import { AppHeader, Loader } from '../components/UI'; import styles from './App.css'; class App extends React.Component { + componentDidMount() { this.props.dispatch(loadConfig()); } @@ -68,7 +68,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')}`); @@ -78,7 +78,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') } }); } }); @@ -89,7 +89,7 @@ class App extends React.Component { return { commands, defaultCommands }; } - handleCreatePostClick = collectionName => { + onCreateEntryClick = collectionName => { this.props.dispatch( createNewEntryInCollection(collectionName) ); @@ -117,32 +117,19 @@ class App extends React.Component { const { commands, defaultCommands } = this.generateFindBarCommands(); return ( -
-
- - Dashboard - -
- + + + +
+ {children}
-
- { - collections.map(collection => - ) - } -
-
-
- {children} -
-
+ + ); } } From ede273a73297f6e44e3c3037af07a117eb770ca4 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 15 Sep 2016 20:04:45 +0200 Subject: [PATCH 07/12] Splitted webpack config into base and dev. Re-use it in .storybook webpack config. --- .storybook/webpack.config.js | 35 +------------------------ package.json | 3 ++- webpack.config.js => webpack.base.js | 38 +--------------------------- webpack.dev.js | 37 +++++++++++++++++++++++++++ 4 files changed, 41 insertions(+), 72 deletions(-) rename webpack.config.js => webpack.base.js (53%) create mode 100644 webpack.dev.js diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 08191f16..e62e19d4 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,34 +1 @@ -/* global module, __dirname, require */ -var webpack = require("webpack"); -const path = require("path"); - -module.exports = { - module: { - loaders: [ - { - test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url-loader?limit=100000' - }, - { test: /\.json$/, loader: 'json-loader' }, - { - test: /\.css$/, - loader: 'style!css?modules&importLoaders=1!postcss' - }, - { - loader: 'babel', - test: /\.js?$/, - exclude: /(node_modules|bower_components)/, - query: { - cacheDirectory: true, - presets: ['react', 'es2015'], - plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread'] - } - } - ] - }, - - postcss: [ - require("postcss-import")({addDependencyTo: webpack}), - require("postcss-cssnext")() - ], -}; +module.exports = require('../webpack.base.js'); diff --git a/package.json b/package.json index a5e4846f..9ae7f778 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Netlify CMS lets content editors work on structured content stored in git", "main": "index.js", "scripts": { - "start": "webpack-dev-server --config webpack.config.js", + "start": "webpack-dev-server --config webpack.dev.js", "test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js", "test:watch": "npm test -- --watch", "build": "webpack --config webpack.config.js", @@ -75,6 +75,7 @@ "url-loader": "^0.5.7", "webpack": "^1.13.2", "webpack-dev-server": "^1.15.1", + "webpack-merge": "^0.14.1", "webpack-postcss-tools": "^1.1.1", "whatwg-fetch": "^1.0.0" }, diff --git a/webpack.config.js b/webpack.base.js similarity index 53% rename from webpack.config.js rename to webpack.base.js index f58687d1..80a24194 100644 --- a/webpack.config.js +++ b/webpack.base.js @@ -1,9 +1,4 @@ -/* global module, __dirname, require */ -var webpack = require('webpack'); -var path = require('path'); - -const HOST = 'localhost'; -const PORT = '8080'; +const webpack = require('webpack'); module.exports = { module: { @@ -47,35 +42,4 @@ module.exports = { require('postcss-import')({ addDependencyTo: webpack }), require('postcss-cssnext') ], - - plugins: [ - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), - new webpack.ProvidePlugin({ - 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' - }) - ], - - context: path.join(__dirname, 'src'), - entry: { - cms: [ - 'webpack/hot/dev-server', - `webpack-dev-server/client?http://${HOST}:${PORT}/`, - 'react-hot-loader/patch', - './index' - ], - }, - output: { - path: path.join(__dirname, 'dist'), - filename: '[name].js', - publicPath: `http://${HOST}:${PORT}/`, - }, - externals: [/^vendor\/.+\.js$/], - devServer: { - hot: true, - contentBase: 'example/', - historyApiFallback: true, - devTool: 'cheap-module-source-map' - }, }; diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 00000000..894dfef0 --- /dev/null +++ b/webpack.dev.js @@ -0,0 +1,37 @@ +/* global module, __dirname, require */ +const path = require('path'); +const webpack = require('webpack'); +const merge = require('webpack-merge'); +const HOST = 'localhost'; +const PORT = '8080'; + +module.exports = merge.smart(require('./webpack.base.js'), { + entry: { + cms: [ + 'webpack/hot/dev-server', + `webpack-dev-server/client?http://${HOST}:${PORT}/`, + 'react-hot-loader/patch', + './index' + ], + }, + output: { + path: path.join(__dirname, 'dist'), + filename: '[name].js', + publicPath: `http://${HOST}:${PORT}/`, + }, + context: path.join(__dirname, 'src'), + plugins: [ + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + new webpack.ProvidePlugin({ + 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' + }) + ], + devServer: { + hot: true, + contentBase: 'example/', + historyApiFallback: true, + devTool: 'cheap-module-source-map' + }, +}); From 46667926b2c5bdc8856611ade43bfad57cee4953 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Fri, 16 Sep 2016 12:54:26 +0200 Subject: [PATCH 08/12] Moved findBar to components and decopuled it from redux as much as possible. Removed stories from containers. These aren't possible to write since containers depend on redux. --- .storybook/config.js | 1 - src/actions/findbar.js | 2 +- src/components/UI/AppHeader/AppHeader.js | 5 ++-- .../UI/FindBar}/FindBar.css | 0 .../UI/FindBar}/FindBar.js | 15 +++++------ .../stories/FindBar.js | 6 ++--- src/components/stories/index.js | 1 + src/containers/App.js | 26 ++++++++++++------- src/containers/stories/index.js | 1 - 9 files changed, 31 insertions(+), 26 deletions(-) rename src/{containers => components/UI/FindBar}/FindBar.css (100%) rename src/{containers => components/UI/FindBar}/FindBar.js (96%) rename src/{containers => components}/stories/FindBar.js (91%) delete mode 100644 src/containers/stories/index.js diff --git a/.storybook/config.js b/.storybook/config.js index 21edff7e..1977c69a 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -2,7 +2,6 @@ import { configure } from '@kadira/storybook'; import '../src/index.css'; function loadStories() { - require('../src/containers/stories/'); require('../src/components/stories/'); } diff --git a/src/actions/findbar.js b/src/actions/findbar.js index 2e990088..418c3296 100644 --- a/src/actions/findbar.js +++ b/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'; diff --git a/src/components/UI/AppHeader/AppHeader.js b/src/components/UI/AppHeader/AppHeader.js index 1c0e4946..846e5558 100644 --- a/src/components/UI/AppHeader/AppHeader.js +++ b/src/components/UI/AppHeader/AppHeader.js @@ -3,7 +3,7 @@ import pluralize from 'pluralize'; import { IndexLink } from 'react-router'; import { Menu, MenuItem, Button } from 'react-toolbox'; import AppBar from 'react-toolbox/lib/app_bar'; -import FindBar from '../../../containers/FindBar'; +import FindBar from '../FindBar/FindBar'; import styles from './AppHeader.css'; export default class AppHeader extends React.Component { @@ -38,7 +38,7 @@ export default class AppHeader extends React.Component { } render() { - const { collections, commands, defaultCommands } = this.props; + const { collections, commands, defaultCommands, runCommand } = this.props; const { createMenuActive } = this.state; return ( @@ -52,6 +52,7 @@ export default class AppHeader extends React.Component { + ); }