Moving the css files to public folder

feature/appm-store/pbac
megala21 7 years ago
parent 8f3d11fa0e
commit aae017d6f4

@ -31,32 +31,6 @@
<build> <build>
<plugins> <plugins>
<plugin>
<groupId>org.wso2.maven</groupId>
<artifactId>carbon-p2-plugin</artifactId>
<version>${carbon.p2.plugin.version}</version>
<executions>
<execution>
<id>4-p2-feature-generation</id>
<phase>package</phase>
<goals>
<goal>p2-feature-gen</goal>
</goals>
<configuration>
<id>org.wso2.carbon.device.application.mgt</id>
<propertiesFile>../../etc/feature.properties</propertiesFile>
<adviceFile>
<properties>
<propertyDef>org.wso2.carbon.p2.category.type:server
</propertyDef>
<propertyDef>org.eclipse.equinox.p2.type.group:false
</propertyDef>
</properties>
</adviceFile>
</configuration>
</execution>
</executions>
</plugin>
<plugin> <plugin>
<groupId>org.codehaus.mojo</groupId> <groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId> <artifactId>exec-maven-plugin</artifactId>
@ -96,8 +70,15 @@
<workingDirectory>${npm.working.dir}</workingDirectory> <workingDirectory>${npm.working.dir}</workingDirectory>
</configuration> </configuration>
</plugin> </plugin>
</plugins> </plugins>
<resources>
<resource>
<directory>${project.build.directory}/target</directory>
</resource>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
</build> </build>
<profiles> <profiles>
<profile> <profile>
@ -116,7 +97,7 @@
<properties> <properties>
<maven.test.skip>false</maven.test.skip> <maven.test.skip>false</maven.test.skip>
<npm.executable>npm</npm.executable> <npm.executable>npm</npm.executable>
<npm.build.command>build_prod</npm.build.command> <npm.build.command>build_dev</npm.build.command>
<npm.working.dir>./src/main/</npm.working.dir> <npm.working.dir>./src/main/</npm.working.dir>
</properties> </properties>
</project> </project>

@ -39,11 +39,11 @@
<title>WSO2 IoT App Publisher</title> <title>WSO2 IoT App Publisher</title>
</head> </head>
<body> <body>
<script src='./dist/index.js'></script>
<noscript> <noscript>
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="root"></div> <div id="root"></div>
<script src='./dist/index.js'></script>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.

@ -31,23 +31,26 @@ import {
PlatformCreate, PlatformCreate,
PlatformListing PlatformListing
} from './components'; } from './components';
import Theme from './theme'; import Theme from './themes/theme';
const history = createHistory({basename: '/publisher'}); const history = createHistory({basename: '/publisher'});
<<<<<<< HEAD
=======
/** /**
*Loading the theme files based on the the user-preference. *Loading the theme files based on the the user-preference.
*/ */
let muiTheme = null; let muiTheme = null;
let selected = Theme.currentTheme; let selected = Theme.selectedTheme;
if (Theme.currentThemeType === "default") { if (Theme.currentTheme === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + selected); let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
muiTheme = getMuiTheme(defaultTheme.default); muiTheme = getMuiTheme(defaultTheme.default);
} else { } else {
let customTheme = require("./themes/" + selected + "/theme.js"); let customTheme = require("./themes/" + selected + "/theme.js");
muiTheme = getMuiTheme(customTheme.default); muiTheme = getMuiTheme(customTheme.default);
} }
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* This component defines the layout and the routes for the app. * This component defines the layout and the routes for the app.
@ -104,10 +107,53 @@ class Base extends Component {
* *
* */ * */
class Publisher extends Component { class Publisher extends Component {
constructor() {
super();
this.state = {
muiTheme: null,
selectedType: null,
selectedTheme: null
};
this.setTheme = this.setTheme.bind(this);
}
componentDidMount() {
/**
*Loading the theme files based on the the user-preference.
*/
let promisedConfig = Theme.loadThemeProperties();
promisedConfig.then(this.setTheme).catch(function (error) {
console.log(error);
});
}
setTheme(response) {
this.setState({
selectedType: response.data.theme.type,
selectedTheme: response.data.theme.value
});
Theme.currentThemeType = this.state.selectedType;
Theme.currentTheme = this.state.selectedTheme;
if (this.state.selectedType === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);
this.setState({
muiTheme : getMuiTheme(defaultTheme.default)
});
} else {
let customTheme = require("./themes/" + this.state.selectedTheme);
this.setState({
muiTheme : getMuiTheme(customTheme.default)
});
}
}
render() { render() {
return ( return (
<div className="App"> <div className="App">
<MuiThemeProvider muiTheme={muiTheme}> <MuiThemeProvider muiTheme={this.state.muiTheme}>
<Router basename="publisher" history={history}> <Router basename="publisher" history={history}>
<Switch> <Switch>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>

@ -24,6 +24,11 @@ import {Step1, Step2, Step3} from './CreateSteps';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card'; import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper'; import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The App Create Component. * The App Create Component.
@ -51,17 +56,56 @@ class ApplicationCreate extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreateCss = "application-create.css"; const applicationCreateStepCss = "application-create.css";
const applicationCreateStepId = "application-create";
try { let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStepCss;
require("../../" + theme.themeFolder + "/" + selected + "/" + applicationCreateCss); let promisedConfig = Theme.loadThemeFiles(themePath);
} catch (ex){ let styleSheet = document.getElementById(applicationCreateStepId);
// If the particular customized file does not exist, use the default one. let head = document.getElementsByTagName("head")[0];
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreateCss); let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = applicationCreateStepId;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function () {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStepCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/application-create.css");
} else {
try {
require("../../themes/" + selected + "/application-create.css");
} catch (ex){
// If the particular customized file does not exist, use the default one.
require("../../themes/default/application-create.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -21,6 +21,11 @@ import {withRouter} from 'react-router-dom';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import DataTable from '../UIComponents/DataTable'; import DataTable from '../UIComponents/DataTable';
import {Card, CardActions, CardTitle} from 'material-ui/Card'; import {Card, CardActions, CardTitle} from 'material-ui/Card';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The App Create Component. * The App Create Component.
@ -112,21 +117,60 @@ class ApplicationListing extends Component {
componentWillMount() { componentWillMount() {
//Fetch all the applications from backend and create application objects. //Fetch all the applications from backend and create application objects.
this.setState({data: this.data}); this.setState({data: this.data});
<<<<<<< HEAD
//Using the particular style specific to user selected theme. /**
const theme = require("../../theme").default; *Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationListingCss = "application-listing.css"; const applicationListingCss = "application-listing.css";
const applicationListingId = "application-listing";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationListingCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(applicationListingId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = applicationListingId;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function () {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationListingCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
try { componentWillUnmount() {
require("../../" + theme.themeFolder + "/" + selected + "/" + applicationListingCss); let styleSheet = document.getElementById("application-listing");
} catch (ex){ if (styleSheet !== null) {
// If the particular customized file does not exist, use the default one. styleSheet.disabled = true;
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationListingCss); styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/application-listing.css");
} else {
try {
require("../../themes/" + selected + "/application-listing.css");
} catch (ex) {
// If the particular customized file does not exist, use the default one.
require("../../themes/default/application-listing.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }
/** /**
* Handles the search action. * Handles the search action.
* When typing in the search bar, this method will be invoked. * When typing in the search bar, this method will be invoked.

@ -19,9 +19,15 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField'; import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
<<<<<<< HEAD
import Theme from '../../../theme';
=======
import Theme from '../../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The first step of the application creation wizard. * The first step of the application creation wizard.
@ -51,19 +57,56 @@ class Step1 extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreationStepCss = "application-create-step1.css"; const applicationCreateStep1Css = "application-create-step1.css";
const applicationCreateStep1Id = "application-create-step1";
try { let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep1Css;
require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss); let promisedConfig = Theme.loadThemeFiles(themePath);
} catch (ex){ let styleSheet = document.getElementById(applicationCreateStep1Id);
// If the particular customized file does not exist, use the default one. let head = document.getElementsByTagName("head")[0];
require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss); let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = applicationCreateStep1Id;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function () {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep1Css;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create-step1");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../../themes/default/application-create-step1.css");
} else {
try {
require("../../../themes/" + selected + "/application-create-step1.css");
} catch (ex){
// If the particular customized file does not exist, use the default one.
require("../../../themes/default/application-create-step1.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
//Get the list of available platforms and set to the state.
} }
/** /**

@ -28,6 +28,11 @@ import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import Clear from 'material-ui/svg-icons/content/clear'; import Clear from 'material-ui/svg-icons/content/clear';
import {GridList, GridTile} from 'material-ui/GridList'; import {GridList, GridTile} from 'material-ui/GridList';
<<<<<<< HEAD
import Theme from '../../../theme';
=======
import Theme from '../../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The Second step of application create wizard. * The Second step of application create wizard.
@ -69,17 +74,56 @@ class Step2 extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreationStepCss = "application-create-step2.css"; const applicationCreateStep2Css = "application-create-step2.css";
const applicationCreateStep2Id = "application-create-step2";
try { let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep2Css;
require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss); let promisedConfig = Theme.loadThemeFiles(themePath);
} catch (ex){ let styleSheet = document.getElementById(applicationCreateStep2Id);
// If the particular customized file does not exist, use the default one. let head = document.getElementsByTagName("head")[0];
require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss); let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = applicationCreateStep2Id;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function() {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep2Css;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
});
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create-step2");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../../themes/default/application-create-step2.css");
} else {
try {
require("../../../themes/" + selected + "/application-create-step2.css");
} catch (ex){
// If the particular customized file does not exist, use the default one.
require("../../../themes/default/application-create-step2.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -24,6 +24,11 @@ import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField'; import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
<<<<<<< HEAD
import Theme from '../../../theme';
=======
import Theme from '../../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The Third step of application create wizard. {Application Release Step} * The Third step of application create wizard. {Application Release Step}
@ -58,17 +63,56 @@ class Step3 extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreationStepCss = "application-create-step1.css"; const applicationCreateStep3Css = "application-create-step3.css";
const applicationCreateStep3Id = "application-create-step3";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep3Css;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(applicationCreateStep3Id);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = applicationCreateStep3Id;
link.rel = Theme.styleSheetRel;
try { if (styleSheet !== null) {
require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss); styleSheet.disabled = true;
} catch (ex){ styleSheet.parentNode.removeChild(styleSheet);
// If the particular customized file does not exist, use the default one. }
require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
promisedConfig.then(function() {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep3Css;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create-step3");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../../themes/default/application-create-step3.css");
} else {
try {
require("../../../themes/" + selected + "/application-create-step3.css");
} catch (ex){
// If the particular customized file does not exist, use the default one.
require("../../../themes/default/application-create-step3.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -27,10 +27,14 @@ import {List, ListItem} from 'material-ui/List';
import Apps from 'material-ui/svg-icons/navigation/apps'; import Apps from 'material-ui/svg-icons/navigation/apps';
import Add from 'material-ui/svg-icons/content/add-circle'; import Add from 'material-ui/svg-icons/content/add-circle';
import Feedback from 'material-ui/svg-icons/action/feedback'; import Feedback from 'material-ui/svg-icons/action/feedback';
import Dashboard from 'material-ui/svg-icons/action/dashboard';
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other'; import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle'; import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
@ -50,17 +54,58 @@ class BaseLayout extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
console.log(Theme.currentThemeType);
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const basicLayoutCss = "basic-layout.css"; const basicLayoutCss = "basic-layout.css";
const basicLayoutId = "basic-layout";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + basicLayoutCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(basicLayoutId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = basicLayoutId;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function() {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + basicLayoutCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
try { }
require("../../" + theme.themeFolder + "/" + selected + "/" + basicLayoutCss);
} catch (ex){ componentWillUnmount() {
// If the particular customized file does not exist, use the default one. let styleSheet = document.getElementById("basic-layout");
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + basicLayoutCss); if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/basic-layout.css");
} else {
try {
require("../../themes/" + selected + "/basic-layout.css");
} catch (ex){
// If the particular customized file does not exist, use the default one.
require("../../themes/default/basic-layout.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }
@ -98,6 +143,7 @@ class BaseLayout extends Component {
render() { render() {
return ( return (
<div> <div>
<AppBar title="App Publisher" <AppBar title="App Publisher"
iconElementRight={ iconElementRight={

@ -31,6 +31,11 @@ import {GridList, GridTile} from 'material-ui/GridList';
import Close from 'material-ui/svg-icons/navigation/close'; import Close from 'material-ui/svg-icons/navigation/close';
import {Card, CardActions, CardTitle} from 'material-ui/Card'; import {Card, CardActions, CardTitle} from 'material-ui/Card';
import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline'; import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* Platform Create component. * Platform Create component.
@ -65,17 +70,56 @@ class PlatformCreate extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const platformCreateCss = "platform-create.css"; const platformCreateCss = "platform-create.css";
const platformCreateId = "application-listing";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + platformCreateCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(platformCreateId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = platformCreateId;
link.rel = Theme.styleSheetRel;
try { if (styleSheet !== null) {
require("../../" + theme.themeFolder + "/" + selected + "/" + platformCreateCss); styleSheet.disabled = true;
} catch (ex){ styleSheet.parentNode.removeChild(styleSheet);
// If the particular customized file does not exist, use the default one. }
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformCreateCss);
promisedConfig.then(function(){
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + platformCreateCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
componentWillUnmount() {
let styleSheet = document.getElementById("platform-create");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/platform-create.css");
} else {
try {
require("../../themes/" + selected + "/platform-create.css");
} catch (ex) {
// If the particular customized file does not exist, use the default one.
require("../../themes/default/platform-create.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -21,6 +21,11 @@ import {withRouter} from 'react-router-dom';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import DataTable from '../UIComponents/DataTable'; import DataTable from '../UIComponents/DataTable';
import {Card, CardActions, CardTitle} from 'material-ui/Card'; import {Card, CardActions, CardTitle} from 'material-ui/Card';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The App Create Component. * The App Create Component.
@ -40,19 +45,58 @@ class PlatformListing extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../theme").default; console.log(Theme.currentThemeType);
/**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const platformListingCss = "platform-listing.css"; const platformListingCss = "platform-listing.css";
const platformListingId = "platform-listing";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + platformListingCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(platformListingId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.id = platformListingId;
link.rel = Theme.styleSheetRel;
try { if (styleSheet !== null) {
require("../../" + theme.themeFolder + "/" + selected + "/" + platformListingCss); styleSheet.disabled = true;
} catch (ex){ styleSheet.parentNode.removeChild(styleSheet);
// If the particular customized file does not exist, use the default one. }
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformListingCss);
promisedConfig.then(function () {
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + platformListingCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
componentWillUnmount() {
let styleSheet = document.getElementById("platform-listing");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/platform-listing.css");
} else {
try {
require("../../themes/" + selected + "/platform-listing.css");
} catch (ex) {
// If the particular customized file does not exist, use the default one.
require("../../themes/default/platform-listing.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
//Fetch all the applications from backend and create application objects.
} }
/** /**

@ -22,6 +22,11 @@ import DataTableRow from './DataTableRow';
import DataTableHeader from './DataTableHeader'; import DataTableHeader from './DataTableHeader';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table'; import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* The Custom Table Component. * The Custom Table Component.
@ -61,18 +66,54 @@ class DataTable extends Component {
componentWillMount() { componentWillMount() {
this.setState({data: this.props.data, headers: this.props.headers}); this.setState({data: this.props.data, headers: this.props.headers});
<<<<<<< HEAD
//Using the particular style specific to user selected theme. /**
const theme = require("../../theme").default; *Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const dataTableCss = "data-table.css"; const dataTableCss = "data-table.css";
const dataTableId = "data-table";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(dataTableId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link"); link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = dataTableId;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function() {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
try { componentWillUnmount() {
require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss); let styleSheet = document.getElementById("data-table");
} catch (ex){ if (styleSheet !== null) {
// If the particular customized file does not exist, use the default one. styleSheet.disabled = true;
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss); styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/data-table.css");
} else {
try {
require("../../themes/" + selected + "/data-table.css");
} catch (ex) {
// If the particular customized file does not exist, use the default one.
require("../../themes/default/data-table.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -20,6 +20,11 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import {TableHeaderColumn} from 'material-ui/Table'; import {TableHeaderColumn} from 'material-ui/Table';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* Data Table header component. * Data Table header component.
@ -32,17 +37,57 @@ class DataTableHeader extends Component {
} }
componentWillMount() { componentWillMount() {
//Using the particular style specific to user selected theme. <<<<<<< HEAD
const theme = require("../../theme").default; /**
*Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const dataTableCss = "data-table.css"; const dataTableCss = "data-table.css";
const dataTableId = "data-table";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(dataTableId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = dataTableId;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function() {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
try { }
require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
} catch (ex){ componentWillUnmount() {
// If the particular customized file does not exist, use the default one. let styleSheet = document.getElementById("data-table");
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss); if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/data-table.css");
} else {
try {
require("../../themes/" + selected + "/data-table.css");
} catch (ex) {
// If the particular customized file does not exist, use the default one.
require("../../themes/default/data-table.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -19,6 +19,11 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import {TableRow, TableRowColumn} from 'material-ui/Table'; import {TableRow, TableRowColumn} from 'material-ui/Table';
<<<<<<< HEAD
import Theme from '../../theme';
=======
import Theme from '../../themes/theme';
>>>>>>> parent of 8f3d11f... refactoring theming support
/** /**
* Data table row component. * Data table row component.
@ -35,18 +40,56 @@ class DataTableRow extends Component {
componentWillMount() { componentWillMount() {
this.setState({dataItem: this.props.dataItem}); this.setState({dataItem: this.props.dataItem});
<<<<<<< HEAD
//Using the particular style specific to user selected theme. /**
const theme = require("../../theme").default; *Loading the theme files based on the the user-preference.
*/
const selected = const selected =
(theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme; (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const dataTableCss = "data-table.css"; const dataTableCss = "data-table.css";
const dataTableId = "data-table";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
let promisedConfig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(dataTableId);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = Theme.styleSheetType;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
link.id = dataTableId;
link.rel = Theme.styleSheetRel;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
promisedConfig.then(function() {
head.appendChild(link);
}).catch(function () {
// If there is no customized css file, load the default one.
themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
head.appendChild(link);
});
}
try { componentWillUnmount() {
require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss); let styleSheet = document.getElementById("data-table");
} catch (ex){ if (styleSheet !== null) {
// If the particular customized file does not exist, use the default one. styleSheet.disabled = true;
require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss); styleSheet.parentNode.removeChild(styleSheet);
=======
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
require("../../themes/default/data-table.css");
} else {
try {
require("../../themes/" + selected + "/data-table.css");
} catch (ex) {
// If the particular customized file does not exist, use the default one.
require("../../themes/default/data-table.css");
}
>>>>>>> parent of 8f3d11f... refactoring theming support
} }
} }

@ -1,37 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/**
* This class will read through the configuration file and saves the theme names for the usage in other files.
* User can define the themes in the config.json. The themes will be loaded based on the user preference.
*/
class Theme {
constructor() {
const theme = require("./config.json").theme;
this.currentThemeType = theme.type;
this.defaultThemeType = "default";
this.themeFolder = "themes";
if (this.currentThemeType === this.defaultThemeType) {
this.currentTheme = theme.value;
} else {
this.currentTheme = theme.value;
}
}
}
export default (new Theme);

@ -0,0 +1,78 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import axios from 'axios';
/**
* This class will read through the configuration file and saves the theme names for the usage in other files.
* User can define the themes in the config.json. The themes will be loaded based on the user preference.
*/
class Theme {
constructor() {
<<<<<<< HEAD:components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
this.defaultThemeType = "default";
this.currentThemeType = this.defaultThemeType;
this.currentTheme = "lightBaseTheme";
this.themeFolder = "themes";
this.styleSheetType = "text/css";
this.styleSheetRel = "stylesheet";
//TODO Need to get the app context properly when the server is ready
this.baseURL = window.location.origin;
this.appContext = window.location.pathname.split("/")[1];
this.loadThemeProperties.bind(this);
this.loadThemeFiles.bind(this);
=======
const theme = require("../config.json").theme;
this.currentTheme = theme.type;
if (this.currentTheme === "default") {
this.selectedTheme = theme.value;
} else {
this.selectedTheme = theme.value;
}
>>>>>>> parent of 8f3d11f... refactoring theming support:components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
}
loadThemeProperties () {
let httpClient = axios.create({
baseURL: this.baseURL + "/" + this.appContext + "/config.json",
timeout: 2000
});
httpClient.defaults.headers.post['Content-Type'] = 'application/json';
return httpClient.get();
}
loadTheme () {
let httpClient = axios.create({
baseURL: this.baseURL + "/" + this.appContext + "/themes/custom-theme/theme.js",
timeout: 2000
});
return httpClient.get();
}
loadThemeFiles (path) {
let httpClient = axios.create({
baseURL: this.baseURL + "/" + this.appContext + path,
timeout: 2000
});
return httpClient.get();
}
}
export default (new Theme);

@ -58,7 +58,12 @@ const config = {
}] }]
} }
] ]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['.jsx', '.js']
} }
}; };
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {

Loading…
Cancel
Save