From 7a08f421b1bbae2e372dc7c244a645fd2da3d0af Mon Sep 17 00:00:00 2001 From: megala21 Date: Mon, 11 Sep 2017 12:17:18 +0530 Subject: [PATCH 1/3] Adding support for custom theming --- .../src/main/resources/publisher/src/App.jsx | 14 +++++++++++++- .../src/main/resources/publisher/src/config.json | 7 +++++++ .../resources/publisher/src/themes/custom-theme.js | 12 ++++++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx index 1d7c315caa8..c76c69af13e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx +++ b/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,7 +31,6 @@ import { PlatformCreate, PlatformListing } from './components'; - const history = createHistory({basename: '/publisher'}); /** @@ -45,6 +46,15 @@ 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. * */ +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); +} class Base extends Component { constructor() { @@ -58,6 +68,7 @@ class Base extends Component { if (this.state.user) { return (
+ @@ -74,6 +85,7 @@ class Base extends Component { +
) } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json new file mode 100644 index 00000000000..62a1565130f --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js new file mode 100644 index 00000000000..6664416c93c --- /dev/null +++ b/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, + }, +}; \ No newline at end of file From 4df74315758b71d8eacfc8fd76509e36f69874e0 Mon Sep 17 00:00:00 2001 From: megala21 Date: Mon, 11 Sep 2017 13:06:05 +0530 Subject: [PATCH 2/3] Refactoring --- .../src/main/resources/publisher/src/App.jsx | 23 +++++++++++-------- .../main/resources/publisher/src/config.json | 2 +- .../publisher/src/themes/custom-theme.js | 2 +- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx index c76c69af13e..6ba02176e57 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx @@ -33,6 +33,19 @@ import { } 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. @@ -46,16 +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. * */ -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); -} - class Base extends Component { constructor() { super(); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json index 62a1565130f..cb7ead56b15 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json @@ -4,4 +4,4 @@ "default" : "lightBaseTheme", "custom" : "custom-theme" } -} \ No newline at end of file +} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js index 6664416c93c..8342d4da36d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js @@ -9,4 +9,4 @@ export default { accent1Color: redA200, pickerHeaderColor: indigo500, }, -}; \ No newline at end of file +}; From 6e1a48f08465642f742c8bc2bebecc942947b9a7 Mon Sep 17 00:00:00 2001 From: megala21 Date: Mon, 11 Sep 2017 13:12:53 +0530 Subject: [PATCH 3/3] Modify theme support --- .../src/main/resources/publisher/src/App.jsx | 4 ++-- .../src/main/resources/publisher/src/index.js | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx index 6ba02176e57..58002cfb62d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx @@ -71,7 +71,6 @@ class Base extends Component { if (this.state.user) { return (
- @@ -88,7 +87,6 @@ class Base extends Component { -
) } @@ -106,6 +104,7 @@ class Publisher extends Component { render() { return (
+ @@ -113,6 +112,7 @@ class Publisher extends Component { +
); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js index e94b5727376..025a12afbe6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js +++ b/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(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); registerServiceWorker();