From 8ebfd675ba80d81c068f56b4279ebafece31a7f5 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Wed, 23 Aug 2017 14:06:34 -0400 Subject: [PATCH] update to react-toolbox 2.0 beta --- package.json | 6 +- src/containers/App.js | 10 ++- src/index.css | 1 + src/index.js | 2 +- src/react-toolbox-global.css | 114 +++++++++++++++++++++++++++++++++++ webpack.base.js | 24 ++++---- 6 files changed, 133 insertions(+), 24 deletions(-) create mode 100644 src/react-toolbox-global.css diff --git a/package.json b/package.json index 859f8eeb..d3ceafb0 100644 --- a/package.json +++ b/package.json @@ -84,13 +84,11 @@ "jest": "^20.0.4", "jest-cli": "^20.0.4", "lint-staged": "^3.3.1", - "node-sass": "^3.10.0", "npm-check": "^5.2.3", "postcss-cssnext": "^2.7.0", "postcss-import": "^10.0.0", "postcss-loader": "^2.0.5", "react-addons-test-utils": "^15.4.2", - "sass-loader": "^6.0.5", "style-loader": "^0.18.2", "stylefmt": "^4.3.1", "stylelint": "^7.9.0", @@ -137,8 +135,8 @@ "react-sidebar": "^2.2.1", "react-simple-dnd": "^0.1.2", "react-sortable": "^1.2.0", - "react-split-pane": "^0.1.57", - "react-toolbox": "^1.2.1", + "react-split-pane": "^0.1.66", + "react-toolbox": "^2.0.0-beta.12", "react-topbar-progress-indicator": "^1.0.0", "react-transition-group": "^2.2.1", "react-waypoint": "^7.1.0", diff --git a/src/containers/App.js b/src/containers/App.js index ece0b2cb..dda0d420 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -4,7 +4,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; import { IndexLink } from "react-router"; import FontIcon from 'react-toolbox/lib/font_icon'; -import { Layout, Panel } from 'react-toolbox/lib/layout'; import { Navigation } from 'react-toolbox/lib/navigation'; import { Notifs } from 'redux-notifications'; import TopBarProgress from 'react-topbar-progress-indicator'; @@ -181,7 +180,7 @@ class App extends React.Component { return ( - +
- +
{ isFetching && }
{children}
- - - +
+
); } diff --git a/src/index.css b/src/index.css index 53705baf..578b784b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,4 @@ +@import "react-toolbox-global.css"; @import "material-icons.css"; @import "components/UI/theme.css"; diff --git a/src/index.js b/src/index.js index be5d2cf6..b5e1a56d 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import createReactClass from 'create-react-class'; import { render } from 'react-dom'; import { AppContainer } from 'react-hot-loader'; import 'file-loader?name=index.html!../example/index.html'; -import 'react-toolbox/lib/commons.scss'; +import 'normalize.css'; import Root from './root'; import registry from './lib/registry'; import './index.css'; diff --git a/src/react-toolbox-global.css b/src/react-toolbox-global.css new file mode 100644 index 00000000..21510c94 --- /dev/null +++ b/src/react-toolbox-global.css @@ -0,0 +1,114 @@ +/* + * Manual copy of global styles from React Toolbox 1.x, per the migration guide: + * https://github.com/react-toolbox/react-toolbox/wiki/Migrating-from-version-1.3-to-2.0/9f5056c60d9ed7f3765908f68aca20c373e6f3e9 + * + * Should eventually be removed, but currently required. + */ +:global { + & html { + font-size: 62.5%; + } + + & body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + font-size: 1.6rem; + -webkit-touch-callout: none; + * { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + } + } + + & a, & abbr, & address, & article, & aside, & audio, & b, & blockquote, & body, & caption, & cite, + & code, & dd, & del, & dfn, & dialog, & div, & dl, & dt, & em, & fieldset, & figure, & footer, + & form, & h1, & h2, & h3, & h4, & h5, & h6, & header, & hgroup, & hr, & html, & i, & iframe, + & img, & ins, & kbd, & label, & legend, & li, & mark, & menu, & nav, & object, & ol, & p, & pre, + & q, & samp, & section, & small, & span, & strong, & sub, & sup, & table, & tbody, & td, & tfoot, + & th, & thead, & time, & tr, & ul, & var, & video { + padding: 0; + margin: 0; + border: 0; + outline: 0; + } + + & *, & *:before, & *:after { + box-sizing: border-box; + padding: 0; + margin: 0; + } + + & a { + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + & input:not([type="checkbox"]):not([type="radio"]), + & button { + outline: none; + appearance: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + } + + /* Remove firefox default style for required inputs */ + & input[required]:-moz-ui-invalid { + box-shadow: none; + } + + & h1, & h2, & h3, & h4, & h5, & h6, & label, & p, & button, & abbr, & a, & span, & small { + font-smoothing: antialiased; + text-size-adjust: 100%; + } + + & h1 small, & h2 small, & h3 small, & h4 small, & h5 small, & h6 small { + font-size: 5.6rem; + font-weight: 400; + line-height: 1.35; + opacity: .54; + } + + & h1 { + font-size: 5.6rem; + font-weight: 400; + line-height: 1.35; + } + + & h2 { + font-size: 4.5rem; + font-weight: 400; + line-height: 4.8rem; + } + + & h3 { + font-size: 3.4rem; + font-weight: 400; + line-height: 4rem; + } + + & h4 { + font-size: 2.4rem; + font-weight: 400; + line-height: 3.2rem; + -moz-osx-font-smoothing: grayscale; + } + + & h5 { + font-size: 2rem; + font-weight: 500; + line-height: 1; + } + + & h6 { + font-size: 1.6rem; + font-weight: 400; + line-height: 2.4rem; + } + + & p { + font-size: 1.4rem; + font-weight: 400; + line-height: 2.4rem; + } +} diff --git a/webpack.base.js b/webpack.base.js index d2e4073c..a428e392 100644 --- a/webpack.base.js +++ b/webpack.base.js @@ -17,28 +17,26 @@ module.exports = { List all of theme in the array */ test: /\.css$/, - include: [/redux-notifications/], - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader', - }), - }, - { - /* React-toolbox still relies on SCSS and css-modules */ - test: /\.scss$/, - include: [/react-toolbox/], + include: [/redux-notifications/, /react-toolbox/, /normalize.css/], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ - { loader: "css-loader", options: { modules: true } }, - "sass-loader", + { + loader: 'css-loader', + options: { + modules: true, + importLoaders: 1, + localIdentName: "[name]__[local]__[hash:base64:8]" + }, + }, + { loader: 'postcss-loader' }, ], }), }, { /* We use CSS-modules and PostCSS for CMS styles */ test: /\.css$/, - exclude: /node_modules/, + exclude: [/node_modules/], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [