Merge pull request #956 from Megala21/appm_new

Adding support for custom theming
feature/appm-store/pbac
Megala Uthayakumar 7 years ago committed by GitHub
commit df59cccf8a

@ -20,6 +20,8 @@ import './App.css';
import React, {Component} from 'react'; import React, {Component} from 'react';
import createHistory from 'history/createBrowserHistory'; import createHistory from 'history/createBrowserHistory';
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom' import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { import {
ApplicationCreate, ApplicationCreate,
ApplicationListing, ApplicationListing,
@ -29,9 +31,21 @@ import {
PlatformCreate, PlatformCreate,
PlatformListing PlatformListing
} from './components'; } from './components';
const history = createHistory({basename: '/publisher'}); const history = createHistory({basename: '/publisher'});
/**
* User can define the themes in the config.json. The themes will be loaded based on the user preference.
*/
const theme = require("./config.json").theme;
let muiTheme = null;
if (theme.current === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
muiTheme = getMuiTheme(defaultTheme.default);
} else {
let customTheme = require("./themes/" + theme.custom);
muiTheme = getMuiTheme(customTheme.default);
}
/** /**
* This component defines the layout and the routes for the app. * This component defines the layout and the routes for the app.
* All the content will be loaded inside the Base component. * All the content will be loaded inside the Base component.
@ -45,7 +59,6 @@ const history = createHistory({basename: '/publisher'});
* HashRouter is used because the other router types need the server to serve those urls. In hashRouter, server does * HashRouter is used because the other router types need the server to serve those urls. In hashRouter, server does
* not want to serve the URL. * not want to serve the URL.
* */ * */
class Base extends Component { class Base extends Component {
constructor() { constructor() {
super(); super();
@ -91,6 +104,7 @@ class Publisher extends Component {
render() { render() {
return ( return (
<div className="App"> <div className="App">
<MuiThemeProvider muiTheme={muiTheme}>
<Router basename="publisher" history={history}> <Router basename="publisher" history={history}>
<Switch> <Switch>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
@ -98,6 +112,7 @@ class Publisher extends Component {
<Route component={Base}/> <Route component={Base}/>
</Switch> </Switch>
</Router> </Router>
</MuiThemeProvider>
</div> </div>
); );
} }

@ -0,0 +1,7 @@
{
"theme" : {
"current" : "default",
"default" : "lightBaseTheme",
"custom" : "custom-theme"
}
}

@ -21,10 +21,9 @@ import React from 'react';
import Publisher from './App'; import Publisher from './App';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
/** /**
* This is the base js file of the app. All the content will be rendered in the root element. * This is the base js file of the app. All the content will be rendered in the root element.
* */ * */
ReactDOM.render(<MuiThemeProvider><Publisher/></MuiThemeProvider>, document.getElementById('root')); ReactDOM.render(<Publisher/>, document.getElementById('root'));
registerServiceWorker(); registerServiceWorker();

@ -0,0 +1,12 @@
import {
indigo500, indigo700, redA200,
} from 'material-ui/styles/colors';
export default {
palette: {
primary1Color: indigo500,
primary2Color: indigo700,
accent1Color: redA200,
pickerHeaderColor: indigo500,
},
};
Loading…
Cancel
Save