Merge pull request #129 from bartvde/custom-theme

Allow passing in custom theme

Author: bartvde

src/components/geonode.jsx

@@ -56,7 +56,7 @@ class GeoNodeViewer extends React.Component {
   getChildContext() {
     return {
       proxy: this.props.proxy,
-      muiTheme: getMuiTheme()
+      muiTheme: getMuiTheme(this.props.theme)
     };
   }
   componentWillMount() {
@@ -139,6 +139,7 @@ class GeoNodeViewer extends React.Component {
 GeoNodeViewer.props = {
   config: React.PropTypes.object,
   proxy: React.PropTypes.string,
+  theme: React.PropTypes.object,
   mode: React.PropTypes.string,
   server: React.PropTypes.string,
   addLayerSources: React.PropTypes.arrayOf(React.PropTypes.shape({
@@ -150,6 +151,27 @@ GeoNodeViewer.props = {
 };
 
 GeoNodeViewer.defaultProps = {
+  theme: {
+    floatingActionButton: {
+      iconColor: '#fff',
+      color: '#2c689c'
+    },
+    toolbar: {
+      backgroundColor: '#333'
+    },
+    palette: {
+      primary1Color: '#2c689c',
+      primary2Color: '#2c689c',
+      primary3Color: '#2c689c',
+      accent1Color: '#2c689c',
+      accent2Color: '#2c689c',
+      accent3Color: '#2c689c',
+      textColor: '#2E506D',
+      secondaryTextColor: '#fff',
+      alternateTextColor: '#fff',
+      canvasColor: '#fff'
+    }
+  },
   printLayouts: [{"width": 297.0, "elements": [{"name": "Title", "height": 12.105490848585688, "width": 143.0648918469218, "y": 2.7512479201331113, "x": 5.777620632279534, "font": "", "type": "label", "id": "cc8bd50f36e44ac3a3e5daf48d038f7c", "size": 18}, {"height": 187.0, "width": 286.0, "grid": {"intervalX": 0.0, "intervalY": 0.0, "annotationEnabled": false, "crs": ""}, "y": 17.0, "x": 6.0, "type": "map", "id": "3bde6dd61cdf480eae1a67db59d74035"}], "thumbnail": "geonode_thumbnail.png", "name": "geonode", "height": 210.0}]
 };
 

src/components/save.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ol from 'openlayers';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import Button from 'boundless-sdk/components/Button';
 import classNames from 'classnames';
 import SaveIcon from 'material-ui/svg-icons/content/save';
@@ -18,41 +17,25 @@ const messages = defineMessages({
   }
 });
 export class Save extends React.Component {
-  constructor(props, context) {
+  constructor(props) {
     super(props);
-    this.state = {
-      muiTheme: context.muiTheme || getMuiTheme()
-    };
   }
   _openSaveModal() {
     this.props.save(getMapConfigFromMap(this.props.map));
     this.refs.savemapmodal.getWrappedInstance().refs.wrappedInstance.open();
   }
-  getStyles() {
-    const muiTheme = this.state.muiTheme;
-    const rawTheme = muiTheme.rawTheme;
-    return {
-      root: Object.assign(this.props.style || {}, {
-        background: rawTheme.palette.primary1Color
-      })
-    };
-  }
   render() {
     const {formatMessage} = this.props.intl;
     const tooltip = formatMessage(messages.savetext);
     const icon = <SaveIcon/>;
-    let styles = this.getStyles();
     return (
       <div className="save-item">
-        <Button tooltipPosition={this.props.tooltipPosition} buttonType='Action' mini={true} secondary={true} className={classNames('geonode-save', this.props.className)} style={styles.root} tooltip={tooltip} onTouchTap={this._openSaveModal.bind(this)}>{icon}</Button>
+        <Button tooltipPosition={this.props.tooltipPosition} buttonType='Action' mini={true} secondary={true} className={classNames('geonode-save', this.props.className)} tooltip={tooltip} onTouchTap={this._openSaveModal.bind(this)}>{icon}</Button>
         <SaveContainer ref='savemapmodal' />
       </div>
     );
   }
 }
-Save.contextTypes = {
-  muiTheme: React.PropTypes.object
-};
 Save.propTypes = {
   save: React.PropTypes.func,
   map: React.PropTypes.instanceOf(ol.Map).isRequired,

src/components/saveContainer.jsx

@@ -10,8 +10,9 @@ import {connectAdvanced} from 'react-redux';
 import SaveView from './saveView';
 
 export class SaveContainer extends React.Component {
-  constructor(props) {
+  constructor(props, context) {
     super(props);
+    this._muiTheme = context.muiTheme || getMuiTheme();
     this.state = {
       error: false,
       errorOpen: false,
@@ -22,7 +23,7 @@ export class SaveContainer extends React.Component {
     };
   }
   getChildContext() {
-    return {muiTheme: getMuiTheme()};
+    return {muiTheme: this._muiTheme};
   }
   componentWillReceiveProps(nextProps) {
     if (nextProps.success && !nextProps.isSaving && !this.state.saved) {

src/components/saveView.jsx

@@ -55,16 +55,17 @@ const messages = defineMessages({
 });
 
 export class SaveView extends React.Component {
-  constructor(props) {
+  constructor(props, context) {
     super(props);
+    this._muiTheme = context.muiTheme || getMuiTheme();
     this.state = {
       open: this.props.open,
       maptititle: '',
       mapabstract: ''
     };
   }
   getChildContext() {
-    return {muiTheme: getMuiTheme()};
+    return {muiTheme: this._muiTheme};
   }
   componentWillReceiveProps(nextProps) {
     if (nextProps.titleError) {

src/composer.jsx

@@ -19,6 +19,7 @@ class Composer {
     this._proxy = options.proxy;
     this._mapId = options.mapId;
     this._printLayouts = options.printLayouts;
+    this._theme = options.theme;
   }
   set server(value) {
     this._server = value;
@@ -35,11 +36,14 @@ class Composer {
   set printLayouts(value) {
     this._printLayouts = value;
   }
+  set theme(value) {
+    this._theme = value;
+  }
   compose(layerSources) {
     store.dispatch(setServerUrl(this._server));
     store.dispatch(setMapId(this._mapId));
     store.dispatch(setMapConfig(this._mapConfig));
-    ReactDOM.render(<Provider store={store}><IntlProvider locale='en' messages={enMessages}><GeonodeComposer printLayouts={this._printLayouts} addLayerSources={layerSources} mode='composer' config={this._mapConfig} proxy={this._proxy} /></IntlProvider></Provider>, document.getElementById(this._domId));
+    ReactDOM.render(<Provider store={store}><IntlProvider locale='en' messages={enMessages}><GeonodeComposer theme={this._theme} printLayouts={this._printLayouts} addLayerSources={layerSources} mode='composer' config={this._mapConfig} proxy={this._proxy} /></IntlProvider></Provider>, document.getElementById(this._domId));
   }
 }
 

src/viewer.jsx

@@ -11,6 +11,7 @@ class Viewer {
     this._proxy = options.proxy;
     this._zoomToLayer = options.zoomToLayer;
     this._printLayouts = options.printLayouts;
+    this._theme = options.theme;
   }
   set mapConfig(value) {
     this._mapConfig = value;
@@ -24,8 +25,11 @@ class Viewer {
   set printLayouts(value) {
     this._printLayouts = value;
   }
+  set theme(value) {
+    this._theme = value;
+  }
   view() {
-    ReactDOM.render(<IntlProvider locale='en' messages={enMessages}><GeoNodeViewer printLayouts={this._printLayouts} zoomToLayer={this._zoomToLayer} config={this._mapConfig} proxy={this._proxy} /></IntlProvider>, document.getElementById(this._domId));
+    ReactDOM.render(<IntlProvider locale='en' messages={enMessages}><GeoNodeViewer theme={this._theme} printLayouts={this._printLayouts} zoomToLayer={this._zoomToLayer} config={this._mapConfig} proxy={this._proxy} /></IntlProvider>, document.getElementById(this._domId));
   }
 }