diff --git a/package.json b/package.json index dec19e1..3438e69 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,15 @@ "react-dom": "^15.5.4", "react-redux": "^5.0.5", "redux": "^3.6.0", - "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" + }, + "devDependencies": { + "css-loader": "^0.28.4", + "extract-text-webpack-plugin": "^3.0.0", + "file-loader": "^0.11.2", + "style-loader": "^0.18.2", + "stylus": "^0.54.5", + "stylus-loader": "^3.0.1", + "webpack": "^3.4.1" } } diff --git a/src/components/GoldenLayoutWrapper.jsx b/src/components/GoldenLayoutWrapper.jsx index 3e668c7..7f7bc28 100644 --- a/src/components/GoldenLayoutWrapper.jsx +++ b/src/components/GoldenLayoutWrapper.jsx @@ -3,8 +3,33 @@ import {Provider} from 'react-redux'; import {IncrementButtonContainer} from './IncrementButton'; import {DecrementButtonContainer} from './DecrementButton'; import {TestComponentContainer} from './TestComponent'; +import '../index.styl' class GoldenLayoutWrapper extends React.Component { + constructor(props) { + super(props); + this.setNode = this.setNode.bind(this); + this.updateDimensions=this.updateDimensions.bind(this); + this.state = { + ht:500, + } + } + setNode(node) { + this.node = node; + } + updateDimensions() { + if (this.node && this.myLayout) { + this.setState({ + ht: $(window).height() - this.node.getBoundingClientRect().top-5, + }); + + this.myLayout.updateSize(); + } + } + componentWillUnmount() { + window.removeEventListener("resize", this.updateDimensions); + } + componentDidMount() { // Build basic golden-layout config const config = { @@ -36,7 +61,7 @@ class GoldenLayoutWrapper extends React.Component { return Wrapped; }; - var layout = new GoldenLayout(config, '#goldenLayout'); + var layout = new GoldenLayout(config, this.node); layout.registerComponent('IncrementButtonContainer', wrapComponent(IncrementButtonContainer, this.context.store) ); @@ -47,11 +72,15 @@ class GoldenLayoutWrapper extends React.Component { wrapComponent(TestComponentContainer, this.context.store) ); layout.init(); + + window.addEventListener("resize", this.updateDimensions); + this.myLayout=layout; + this.updateDimensions(); } render() { return ( -
+
); } } diff --git a/src/index.html b/src/index.html index feaff97..5864f69 100644 --- a/src/index.html +++ b/src/index.html @@ -2,14 +2,8 @@ - - - - React-Redux with GoldenLayout - +
diff --git a/src/index.styl b/src/index.styl new file mode 100644 index 0000000..bfe3ff7 --- /dev/null +++ b/src/index.styl @@ -0,0 +1,3 @@ +@import '~golden-layout/src/css/goldenlayout-base.css' +@import '~golden-layout/src/css/goldenlayout-light-theme.css' + diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 67447e6..52c1f4e 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -1,6 +1,7 @@ import path from 'path'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import webpack from 'webpack'; +import ExtractTextPlugin from 'extract-text-webpack-plugin'; export default () => ({ entry: [ @@ -43,7 +44,30 @@ export default () => ({ ] } }] - }] + }, + { + test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, + loader: 'file-loader?name=fonts/[name].[ext]' + }, + { + test: /\.styl$/i, + exclude: /node_modules/, + use: ['style-loader','css-loader','stylus-loader'] + }, + { + test: /\.css$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: [ + { + loader: 'css-loader', + options : { autoprefixer: false, sourceMap: true, importLoaders: 1 } + }, + 'postcss-loader' + ] + }) + }, + ] }, resolve: { extensions: ['.js', '.jsx']