community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moving the theme loading method to a common place

Browse Source
This commit is contained in:
megala21 2017-09-14 15:56:30 +05:30
parent e5ca86cc66
commit c2789ff9be
13 changed files with 85 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,6 +125,8 @@ class Publisher extends Component {
Theme.currentThemeType = this.state.selectedType;
Theme.currentTheme = this.state.selectedTheme;
Theme.selectedTheme =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
if (this.state.selectedType === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);

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

@ -37,6 +37,7 @@ import Theme from '../../theme';
class ApplicationCreate extends Component {
constructor() {
super();
this.scriptId = "application-create";
this.setStepData.bind(this);
this.removeStepData.bind(this);
this.handleSubmit.bind(this);
@ -55,41 +56,11 @@ class ApplicationCreate extends Component {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreateStepCss = "application-create.css";
const applicationCreateStepId = "application-create";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStepCss;
let themeFilefig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(applicationCreateStepId);
let head = document.getElementsByTagName("head")[0];
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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -37,7 +37,8 @@ class ApplicationListing extends Component {
this.state = {
data: [],
asc: true
}
};
this.scriptId = "application-listing";
}
data = [
@ -113,43 +114,15 @@ class ApplicationListing extends Component {
componentWillMount() {
//Fetch all the applications from backend and create application objects.
this.setState({data: this.data});
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationListingCss = "application-listing.css";
const applicationListingId = "application-listing";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationListingCss;
let themeFilefig = 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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-listing");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}

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

@ -48,46 +48,18 @@ class Step1 extends Component {
title: "",
titleError: ""
};
this.scriptId = "application-create-step1";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreateStep1Css = "application-create-step1.css";
const applicationCreateStep1Id = "application-create-step1";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep1Css;
let themeFilefig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(applicationCreateStep1Id);
let head = document.getElementsByTagName("head")[0];
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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create-step1");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -67,47 +67,18 @@ class Step2 extends Component {
screenshots: [],
icon: []
};
this.scriptId = "application-create-step2";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreateStep2Css = "application-create-step2.css";
const applicationCreateStep2Id = "application-create-step2";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep2Css;
let themeFilefig = Theme.loadThemeFiles(themePath);
let styleSheet = document.getElementById(applicationCreateStep2Id);
let head = document.getElementsByTagName("head")[0];
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);
}
themeFilefig.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;
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create-step2");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -55,48 +55,19 @@ class Step3 extends Component {
showForm: false,
releaseChannel: 1,
errors: {}
}
};
this.scriptId = "application-create-step3";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const applicationCreateStep3Css = "application-create-step3.css";
const applicationCreateStep3Id = "application-create-step3";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep3Css;
let themeFilefig = 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;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("application-create-step3");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -46,50 +46,19 @@ class BaseLayout extends Component {
this.state = {
notifications: 0,
user: 'Admin'
}
};
this.scriptId = "basic-layout";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
console.log(Theme.currentThemeType);
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const basicLayoutCss = "basic-layout.css";
const basicLayoutId = "basic-layout";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + basicLayoutCss;
let themeFilefig = 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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("basic-layout");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId)
}
handleApplicationClick() {

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

@ -62,48 +62,19 @@ class PlatformCreate extends Component {
{key: 1, value: 'Number'},
{key: 2, value: 'Boolean'},
{key: 3, value: 'File'}]
}
};
this.scriptId = "platform-create";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const platformCreateCss = "platform-create.css";
const platformCreateId = "application-listing";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + platformCreateCss;
let themeFilefig = 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;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("platform-create");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -37,49 +37,19 @@ class PlatformListing extends Component {
this.state = {
data: [],
asc: true
}
};
this.scriptId = "platform-listing";
}
componentWillMount() {
console.log(Theme.currentThemeType);
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const platformListingCss = "platform-listing.css";
const platformListingId = "platform-listing";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + platformListingCss;
let themeFilefig = 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;
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("platform-listing");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -56,48 +56,21 @@ class DataTable extends Component {
this.state = {
data: [],
headers: [],
}
};
this.scriptId = "data-table"
};
componentWillMount() {
this.setState({data: this.props.data, headers: this.props.headers});
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const dataTableCss = "data-table.css";
const dataTableId = "data-table";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
let themeFilefig = 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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("data-table");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
shouldComponentUpdate(nextProps, nextState) {

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

@ -30,48 +30,18 @@ class DataTableHeader extends Component {
constructor() {
super();
this.scriptId = "data-table";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
const dataTableCss = "data-table.css";
const dataTableId = "data-table";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
let themeFilefig = 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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("data-table");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -31,7 +31,8 @@ class DataTableRow extends Component {
super();
this.state = {
dataItem: {}
}
};
this.scriptId = "data-table";
}
componentWillMount() {
@ -40,40 +41,11 @@ class DataTableRow extends Component {
/**
*Loading the theme files based on the the user-preference.
*/
const selected =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentThemeType;
const dataTableCss = "data-table.css";
const dataTableId = "data-table";
let themePath = "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
let themeFilefig = 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);
}
themeFilefig.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);
});
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
let styleSheet = document.getElementById("data-table");
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
Theme.removeThemingScripts(this.scriptId);
}
/**

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

@ -30,12 +30,15 @@ class Theme {
this.themeFolder = "themes";
this.styleSheetType = "text/css";
this.styleSheetRel = "stylesheet";
this.selectedTheme = this.defaultThemeType;
//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.loadThemeConfigs.bind(this);
this.loadThemeFiles.bind(this);
this.insertThemingScripts.bind(this);
this.removeThemingScripts.bind(this);
}
/**
@ -64,6 +67,44 @@ class Theme {
return httpClient.get();
}
/**
* To insert the css files to the document.
* @param scriptId ID of the script that need to be inserted
*/
insertThemingScripts(scriptId) {
const script = scriptId + ".css";
let themePath = "/" + this.themeFolder + "/" + this.selectedTheme + "/" + script;
let themeFile = this.loadThemeFiles(themePath);
let head = document.getElementsByTagName("head")[0];
let link = document.createElement("link");
link.type = this.styleSheetType;
link.href = this.baseURL + "/" + this.appContext + themePath;
link.id = scriptId;
link.rel = this.styleSheetRel;
this.removeThemingScripts(scriptId);
themeFile.then(function () {
head.appendChild(link);
}).catch(error => {
// If there is no customized css file, load the default one.
themePath = "/" + this.themeFolder + "/" + this.defaultThemeType + "/" + script;
link.href = this.baseURL + "/" + this.appContext + themePath;
head.appendChild(link);
});
}
/**
* To remove the css scripts that are inserted before.
* @param scriptId Id of the script that need to be removed
*/
removeThemingScripts(scriptId) {
let styleSheet = document.getElementById(scriptId);
if (styleSheet !== null) {
styleSheet.disabled = true;
styleSheet.parentNode.removeChild(styleSheet);
}
}
}
export default (new Theme);