refactoring theming support

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

@@ -31,7 +31,7 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
-import Theme from './themes/theme';
+import Theme from './theme';
 
 
 const history = createHistory({basename: '/publisher'});
@@ -40,8 +40,8 @@ const history = createHistory({basename: '/publisher'});
  *Loading the theme files based on the the user-preference.
  */
 let muiTheme = null;
-let selected = Theme.selectedTheme;
+let selected = Theme.currentTheme;
-if (Theme.currentTheme === "default") {
+if (Theme.currentThemeType === "default") {
     let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
     muiTheme = getMuiTheme(defaultTheme.default);
 } else {

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

@@ -24,7 +24,6 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -52,16 +51,17 @@ class ApplicationCreate extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../theme").default;
-            require("../../themes/default/application-create.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const applicationCreateCss = "application-create.css";
-                require("../../themes/" + selected + "/application-create.css");
+
-            } catch (ex){
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + selected + "/" + applicationCreateCss);
-                require("../../themes/default/application-create.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreateCss);
         }
     }
 

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

@@ -21,7 +21,6 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -114,16 +113,17 @@ class ApplicationListing extends Component {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
 
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../theme").default;
-            require("../../themes/default/application-listing.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const applicationListingCss = "application-listing.css";
-                require("../../themes/" + selected + "/application-listing.css");
+
-            } catch (ex) {
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + selected + "/" + applicationListingCss);
-                require("../../themes/default/application-listing.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationListingCss);
         }
     }
 

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

@@ -22,9 +22,6 @@ import MenuItem from 'material-ui/MenuItem';
 import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../themes/theme';
-
-
 
 /**
  * The first step of the application creation wizard.
@@ -54,16 +51,17 @@ class Step1 extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../../theme").default;
-            require("../../../themes/default/application-create-step1.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const applicationCreationStepCss = "application-create-step1.css";
-                require("../../../themes/" + selected + "/application-create-step1.css");
+
-            } catch (ex){
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
-                require("../../../themes/default/application-create-step1.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
         }
         //Get the list of available platforms and set to the state.
     }

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

@@ -28,7 +28,6 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
-import Theme from '../../../themes/theme';
 
 /**
  * The Second step of application create wizard.
@@ -70,16 +69,17 @@ class Step2 extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../../theme").default;
-            require("../../../themes/default/application-create-step2.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const applicationCreationStepCss = "application-create-step2.css";
-                require("../../../themes/" + selected + "/application-create-step2.css");
+
-            } catch (ex){
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
-                require("../../../themes/default/application-create-step2.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
         }
     }
 

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

@@ -24,7 +24,6 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../themes/theme';
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -59,16 +58,17 @@ class Step3 extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../../theme").default;
-            require("../../../themes/default/application-create-step3.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const applicationCreationStepCss = "application-create-step1.css";
-                require("../../../themes/" + selected + "/application-create-step3.css");
+
-            } catch (ex){
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
-                require("../../../themes/default/application-create-step3.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
         }
     }
 

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

@@ -31,7 +31,6 @@ import Dashboard from 'material-ui/svg-icons/action/dashboard';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import Theme from '../../themes/theme';
 
 
 /**
@@ -51,16 +50,17 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../theme").default;
-          require("../../themes/default/basic-layout.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const basicLayoutCss = "basic-layout.css";
-                require("../../themes/" + selected + "/basic-layout.css");
+
-            } catch (ex){
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + selected + "/" + basicLayoutCss);
-                require("../../themes/default/basic-layout.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + basicLayoutCss);
         }
     }
 

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

@@ -31,7 +31,6 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
-import Theme from '../../themes/theme';
 
 /**
  * Platform Create component.
@@ -66,16 +65,17 @@ class PlatformCreate extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../theme").default;
-            require("../../themes/default/platform-create.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const platformCreateCss = "platform-create.css";
-                require("../../themes/" + selected + "/platform-create.css");
+
-            } catch (ex) {
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + selected + "/" + platformCreateCss);
-                require("../../themes/default/platform-create.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformCreateCss);
         }
     }
 

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

@@ -21,7 +21,6 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -41,16 +40,17 @@ class PlatformListing extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../theme").default;
-            require("../../themes/default/platform-listing.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const platformListingCss = "platform-listing.css";
-                require("../../themes/" + selected + "/platform-listing.css");
+
-            } catch (ex) {
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + selected + "/" + platformListingCss);
-                require("../../themes/default/platform-listing.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformListingCss);
         }
         //Fetch all the applications from backend and create application objects.
     }

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

@@ -22,7 +22,6 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
-import Theme from '../../themes/theme';
 
 /**
  * The Custom Table Component.
@@ -62,16 +61,18 @@ class DataTable extends Component {
 
     componentWillMount() {
         this.setState({data: this.props.data, headers: this.props.headers});
-        let selected = Theme.selectedTheme;
+
-        if (Theme.currentTheme === "default") {
+        //Using the particular style specific to user selected theme.
-            require("../../themes/default/data-table.css");
+        const theme = require("../../theme").default;
-        } else {
+        const selected =
-            try {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-                require("../../themes/" + selected + "/data-table.css");
+        const dataTableCss = "data-table.css";
-            } catch (ex) {
+
-                // If the particular customized file does not exist, use the default one.
+        try {
-                require("../../themes/default/data-table.css");
+            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
-            }
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
         }
     }
 

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

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
-import Theme from '../../themes/theme';
 
 /**
  * Data Table header component.
@@ -33,16 +32,17 @@ class DataTableHeader extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
+        //Using the particular style specific to user selected theme.
-        if (Theme.currentTheme === "default") {
+        const theme = require("../../theme").default;
-            require("../../themes/default/data-table.css");
+        const selected =
-        } else {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-            try {
+        const dataTableCss = "data-table.css";
-                require("../../themes/" + selected + "/data-table.css");
+
-            } catch (ex) {
+        try {
-                // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
-                require("../../themes/default/data-table.css");
+        } catch (ex){
-            }
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
         }
     }
 

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

@@ -19,7 +19,6 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
-import Theme from '../../themes/theme';
 
 /**
  * Data table row component.
@@ -36,16 +35,18 @@ class DataTableRow extends Component {
 
     componentWillMount() {
         this.setState({dataItem: this.props.dataItem});
-        let selected = Theme.selectedTheme;
+
-        if (Theme.currentTheme === "default") {
+        //Using the particular style specific to user selected theme.
-            require("../../themes/default/data-table.css");
+        const theme = require("../../theme").default;
-        } else {
+        const selected =
-            try {
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-                require("../../themes/" + selected + "/data-table.css");
+        const dataTableCss = "data-table.css";
-            } catch (ex) {
+
-                // If the particular customized file does not exist, use the default one.
+        try {
-                require("../../themes/default/data-table.css");
+            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
-            }
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
         }
     }
 

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

@@ -22,12 +22,14 @@
  */
 class Theme {
     constructor() {
-        const theme = require("../config.json").theme;
+        const theme = require("./config.json").theme;
-        this.currentTheme = theme.type;
+        this.currentThemeType = theme.type;
-        if (this.currentTheme === "default") {
+        this.defaultThemeType = "default";
-            this.selectedTheme = theme.value;
+        this.themeFolder = "themes";
+        if (this.currentThemeType === this.defaultThemeType) {
+            this.currentTheme = theme.value;
         } else {
-            this.selectedTheme = theme.value;
+            this.currentTheme = theme.value;
         }
     }
 }