From a4dea8ac7a98e3fb836631d51ffa7e8faf6f1d0c Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Wed, 5 Oct 2016 18:55:35 +0200 Subject: [PATCH 1/5] Added logo as a link to dashboard. Cleaned up AppHeader a bit visually. --- src/components/AppHeader/AppHeader.css | 9 +++-- src/components/AppHeader/AppHeader.js | 55 +++++++++++--------------- src/components/AppHeader/logo.svg | 19 +++++++++ 3 files changed, 46 insertions(+), 37 deletions(-) create mode 100644 src/components/AppHeader/logo.svg diff --git a/src/components/AppHeader/AppHeader.css b/src/components/AppHeader/AppHeader.css index c1406f5d..11a4d56b 100644 --- a/src/components/AppHeader/AppHeader.css +++ b/src/components/AppHeader/AppHeader.css @@ -10,8 +10,9 @@ background-color: var(--backgroundColor); } -.createBtn { - position: fixed; - right: 2rem; - top: 3.5rem; +.logo { + background: url('./logo.svg'); + background-size: 100% 100%; + width: 32px; + height: 32px; } diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js index c8c7363c..e33600cc 100644 --- a/src/components/AppHeader/AppHeader.js +++ b/src/components/AppHeader/AppHeader.js @@ -1,7 +1,7 @@ import React from 'react'; import pluralize from 'pluralize'; import { IndexLink } from 'react-router'; -import { Menu, MenuItem, Button, IconButton } from 'react-toolbox'; +import { Menu, MenuItem } from 'react-toolbox'; import AppBar from 'react-toolbox/lib/app_bar'; import FindBar from '../FindBar/FindBar'; import styles from './AppHeader.css'; @@ -45,45 +45,34 @@ export default class AppHeader extends React.Component { - - - Dashboard - + - + + { + collections.valueSeq().map(collection => + + ) + } + ); } diff --git a/src/components/AppHeader/logo.svg b/src/components/AppHeader/logo.svg new file mode 100644 index 00000000..250d79fe --- /dev/null +++ b/src/components/AppHeader/logo.svg @@ -0,0 +1,19 @@ + + + icon + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file From b5849cd472385ae1ec3875ab25eaffcf051f0de5 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 6 Oct 2016 15:13:31 +0200 Subject: [PATCH 2/5] Removed logo --- src/components/AppHeader/AppHeader.css | 7 ------- src/components/AppHeader/AppHeader.js | 5 ++++- src/components/AppHeader/logo.svg | 19 ------------------- 3 files changed, 4 insertions(+), 27 deletions(-) delete mode 100644 src/components/AppHeader/logo.svg diff --git a/src/components/AppHeader/AppHeader.css b/src/components/AppHeader/AppHeader.css index 11a4d56b..55b25a48 100644 --- a/src/components/AppHeader/AppHeader.css +++ b/src/components/AppHeader/AppHeader.css @@ -9,10 +9,3 @@ .appBar { background-color: var(--backgroundColor); } - -.logo { - background: url('./logo.svg'); - background-size: 100% 100%; - width: 32px; - height: 32px; -} diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js index e33600cc..54ae8a3b 100644 --- a/src/components/AppHeader/AppHeader.js +++ b/src/components/AppHeader/AppHeader.js @@ -50,7 +50,10 @@ export default class AppHeader extends React.Component { onLeftIconClick={toggleNavDrawer} onRightIconClick={this.handleCreateButtonClick} > - + + Dashboard + + - - icon - Created with Sketch (http://www.bohemiancoding.com/sketch) - - - - - \ No newline at end of file From 60ec67c2a9550684d78df67f23ee7a650cbae529 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 6 Oct 2016 15:59:19 +0200 Subject: [PATCH 3/5] Added `process.env.NODE_ENV` to webpack.DefinePlugin --- webpack.base.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/webpack.base.js b/webpack.base.js index 80a24194..2052d935 100644 --- a/webpack.base.js +++ b/webpack.base.js @@ -1,3 +1,5 @@ +/* eslint global-require: 0 */ + const webpack = require('webpack'); module.exports = { @@ -5,11 +7,11 @@ module.exports = { loaders: [ { test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url-loader?limit=100000' + loader: 'url-loader?limit=100000', }, { test: /\.json$/, - loader: 'json-loader' + loader: 'json-loader', }, { test: /\.scss$/, @@ -31,15 +33,21 @@ module.exports = { 'transform-object-assign', 'transform-object-rest-spread', 'lodash', - 'react-hot-loader/babel' - ] - } - } - ] + 'react-hot-loader/babel', + ], + }, + }, + ], }, - postcss: [ require('postcss-import')({ addDependencyTo: webpack }), - require('postcss-cssnext') + require('postcss-cssnext'), + ], + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + }, + }), ], }; From 44d652de35c3342a8c161d6d266c781d6407a83e Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 6 Oct 2016 16:10:21 +0200 Subject: [PATCH 4/5] Added utils.css with .undefined global class --- src/utils.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/utils.css diff --git a/src/utils.css b/src/utils.css new file mode 100644 index 00000000..85da4449 --- /dev/null +++ b/src/utils.css @@ -0,0 +1,25 @@ +/* stylelint-disable */ +/* This is an utility file that should not be included in production build */ +:global { + & .undefined { + position: fixed !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + background: red !important; + color: white !important; + font-weight: bold !important; + font-size: 30px !important; + } + + & .undefined::after { + display: block !important; + padding: 15px 30px !important; + content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important; + } +} +/* stylelint-enable */ From b1a039701cfd5c0071364b68e12e2d9a0c9a0e75 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Thu, 6 Oct 2016 16:11:11 +0200 Subject: [PATCH 5/5] Require utils.css in dev mode only --- src/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index e7c8ffe1..ba980758 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,16 @@ import React from 'react'; import { render } from 'react-dom'; 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 Root from './root'; +import registry from './lib/registry'; import './index.css'; +if (process.env.NODE_ENV !== 'production') { + require('./utils.css'); // eslint-disable-line +} + // Create mount element dynamically const el = document.createElement('div'); el.id = 'root';