Merge pull request #956 from Megala21/appm_new

Adding support for custom theming

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx

@@ -20,6 +20,8 @@ import './App.css';
 import React, {Component} from 'react';
 import createHistory from 'history/createBrowserHistory';
 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 {
     ApplicationCreate,
     ApplicationListing,
@@ -29,9 +31,21 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
-
 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.
  * 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
  * not want to serve the URL.
  * */
-
 class Base extends Component {
     constructor() {
         super();
@@ -91,6 +104,7 @@ class Publisher extends Component {
     render() {
         return (
             <div className="App">
+                <MuiThemeProvider muiTheme={muiTheme}>
                 <Router basename="publisher" history={history}>
                     <Switch>
                         <Route path="/login" component={Login}/>
@@ -98,6 +112,7 @@ class Publisher extends Component {
                         <Route component={Base}/>
                     </Switch>
                 </Router>
+                </MuiThemeProvider>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json

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

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js

@@ -21,10 +21,9 @@ import React from 'react';
 import Publisher from './App';
 import ReactDOM from 'react-dom';
 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.
  * */
-ReactDOM.render(<MuiThemeProvider><Publisher/></MuiThemeProvider>, document.getElementById('root'));
+ReactDOM.render(<Publisher/>, document.getElementById('root'));
 registerServiceWorker();

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js

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