Skip to content

Commit

Permalink
Fixes #1584: theme selection in plugins and api examples (#1585)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbarto authored Mar 16, 2017
1 parent c5ef1e6 commit 9caf2ae
Show file tree
Hide file tree
Showing 59 changed files with 2,540 additions and 133 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ web/.project
_site
.sass-cache
.jekyll-metadata
*.lock
*.lock
docs/developer-guide/reference/
11 changes: 8 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.19.0",
"docma": "1.5.1",
"download-cli": "1.0.1",
Expand All @@ -28,8 +29,8 @@
"glob": "7.1.1",
"html-webpack-plugin": "2.17.0",
"istanbul-instrumenter-loader": "2.0.0",
"jsdoc": "^3.4.3",
"jsdoc-jsx": "^0.1.0",
"jsdoc": "3.4.3",
"jsdoc-jsx": "0.1.0",
"karma": "1.5.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
Expand All @@ -48,6 +49,9 @@
"mocha": "2.4.5",
"ncp": "2.0.0",
"parallelshell": "1.2.0",
"postcss": "5.2.16",
"postcss-loader": "1.3.3",
"postcss-prefix-selector": "1.6.0",
"raw-loader": "0.5.1",
"react-addons-css-transition-group": "15.4.2",
"react-addons-test-utils": "15.4.2",
Expand Down Expand Up @@ -76,7 +80,7 @@
"axios": "0.11.1",
"babel-polyfill": "6.8.0",
"babel-standalone": "6.7.7",
"bootstrap": "3.3.6",
"bootstrap": "3.3.5",
"canvas-to-blob": "0.0.0",
"canvg-browser": "1.0.0",
"classnames": "2.2.5",
Expand Down Expand Up @@ -130,6 +134,7 @@
"react-select": "1.0.0-rc.1",
"react-selectize": "2.0.3",
"react-share": "1.8.0",
"react-side-effect": "1.1.0",
"react-sidebar": "2.3.0",
"react-sortable-items": "https://github.com/geosolutions-it/react-sortable-items/tarball/react15",
"react-spinkit": "2.1.1",
Expand Down
14 changes: 13 additions & 1 deletion prod-webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,24 @@ var DefinePlugin = require("webpack/lib/DefinePlugin");
var NormalModuleReplacementPlugin = require("webpack/lib/NormalModuleReplacementPlugin");
const extractThemesPlugin = require('./themes.js').extractThemesPlugin;
var assign = require('object-assign');
var CopyWebpackPlugin = require('copy-webpack-plugin');

assign(webpackConfig.entry, require('./examples.js'));

webpackConfig.plugins = [
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'node_modules', 'bootstrap', 'less'), to: path.join(__dirname, "web", "client", "dist", "bootstrap", "less") }
]),
new LoaderOptionsPlugin({
debug: false
debug: false,
options: {
postcss: {
plugins: [
require('postcss-prefix-selector')({prefix: '.ms2', exclude: ['.ms2']})
]
},
context: __dirname
}
}),
new DefinePlugin({
"__DEVTOOLS__": false
Expand Down
4 changes: 2 additions & 2 deletions themes.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const extractThemesPlugin = new ExtractTextPlugin({

const themeEntries = (() => {
const globPath = path.join(__dirname, "web", "client", "themes", "*");
var files = glob.sync(globPath);
return files.reduce((res, curr) => {
var files = glob.sync(globPath, {mark: true});
return files.filter((f) => f.lastIndexOf('/') === f.length - 1).reduce((res, curr) => {
var finalRes = res || {};
finalRes["themes/" + path.basename(curr, path.extname(curr))] = path.join(__dirname, "web", "client", "themes", `${path.basename(curr, path.extname(curr))}`, "theme.less");
return finalRes;
Expand Down
13 changes: 10 additions & 3 deletions web/client/components/app/StandardRouter.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,23 @@ const {Router, Route, hashHistory} = require('react-router');

const Localized = require('../I18N/Localized');

const Theme = connect((state) => ({
theme: state.theme && state.theme.selectedTheme && state.theme.selectedTheme.id
}))(require('../theme/Theme'));

const StandardRouter = React.createClass({
propTypes: {
plugins: React.PropTypes.object,
locale: React.PropTypes.object,
pages: React.PropTypes.array
pages: React.PropTypes.array,
className: React.PropTypes.string
},
getDefaultProps() {
return {
plugins: {},
locale: {messages: {}, current: 'en-US'},
pages: []
pages: [],
className: "ms2 fill"
};
},
renderPages() {
Expand All @@ -40,7 +46,8 @@ const StandardRouter = React.createClass({
render() {
return (

<div className="fill">
<div className={this.props.className}>
<Theme/>
<Localized messages={this.props.locale.messages} locale={this.props.locale.current} loadingError={this.props.locale.localeError}>
<Router history={hashHistory}>
{this.renderPages()}
Expand Down
7 changes: 6 additions & 1 deletion web/client/components/app/__tests__/StandardRouter-test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ describe('StandardApp', () => {
});

it('creates a default router app', () => {
const app = ReactDOM.render(<StandardRouter/>, document.getElementById("container"));
const store = {
dispatch: () => {},
subscribe: () => {},
getState: () => ({})
};
const app = ReactDOM.render(<Provider store={store}><StandardRouter/></Provider>, document.getElementById("container"));
expect(app).toExist();
});

Expand Down
46 changes: 46 additions & 0 deletions web/client/components/theme/Theme.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const withSideEffect = require('react-side-effect');

const reducePropsToState = (props) => {
const innermostProps = props[props.length - 1];
if (innermostProps) {
return {theme: innermostProps.theme || 'default', themeElement: innermostProps.themeElement || 'theme_stylesheet'};
}
return null;
};

const handleStateChangeOnClient = (themeCfg) => {
if (themeCfg) {
const link = document.getElementById(themeCfg.themeElement);
if (link && themeCfg.theme) {
const basePath = link.href && link.href.substring(0, link.href.lastIndexOf("/"));
link.setAttribute('href', basePath + "/" + themeCfg.theme + ".css");
}
}
};

const Theme = React.createClass({
propTypes: {
theme: React.PropTypes.string.isRequired
},
getDefaultProps() {
return {
theme: 'default'
};
},
render() {
if (this.props.children) {
return React.Children.only(this.props.children);
}
return null;
}
});

module.exports = withSideEffect(reducePropsToState, handleStateChangeOnClient)(Theme);
48 changes: 48 additions & 0 deletions web/client/components/theme/ThemeSwitcher.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

const React = require('react');
const {head} = require('lodash');
const {FormGroup, Label, FormControl} = require('react-bootstrap');
const Message = require('../I18N/Message');

const ThemeSwitcher = React.createClass({
propTypes: {
themes: React.PropTypes.array,
selectedTheme: React.PropTypes.object,
onThemeSelected: React.PropTypes.func,
style: React.PropTypes.object
},
getDefaultProps() {
return {
onThemeSelected: () => {},
style: {
width: "300px",
margin: "20px auto"
}
};
},

onChangeTheme(themeId) {
const theme = head(this.props.themes.filter((t) => t.id === themeId));
this.props.onThemeSelected(theme);
},
render() {
return (
<FormGroup className="theme-switcher" style={this.props.style} bsSize="small">
<Label><Message msgId="manager.theme_combo"/></Label>
<FormControl
value={this.props.selectedTheme && this.props.selectedTheme.id}
componentClass="select" ref="mapType" onChange={(e) => this.onChangeTheme(e.target.value)}>
{this.props.themes.map( (t) => <option key={t.id} value={t.id}>{t.label || t.id}</option>)}
</FormControl>
</FormGroup>);
}
});

module.exports = ThemeSwitcher;
2 changes: 1 addition & 1 deletion web/client/examples/3dviewer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}
</style>
</head>
<body>
<body class="ms2">
<div id="container"></div>
<script src="../../dist/3dviewer.js"></script>
</body>
Expand Down
Binary file added web/client/examples/api/icons/icons.eot
Binary file not shown.
Loading

0 comments on commit 9caf2ae

Please sign in to comment.