From c2789ff9bebedc4ec3c33e8ade38f1b43333571c Mon Sep 17 00:00:00 2001 From: megala21 Date: Thu, 14 Sep 2017 15:56:30 +0530 Subject: [PATCH] Moving the theme loading method to a common place --- .../src/main/resources/publisher/src/App.jsx | 2 + .../Application/ApplicationCreate.jsx | 35 ++-------------- .../Application/ApplicationListing.jsx | 37 +++-------------- .../Application/CreateSteps/Step1.jsx | 34 ++------------- .../Application/CreateSteps/Step2.jsx | 35 ++-------------- .../Application/CreateSteps/Step3.jsx | 37 ++--------------- .../src/components/Base/BaseLayout.jsx | 39 ++---------------- .../components/Platform/PlatformCreate.jsx | 37 ++--------------- .../components/Platform/PlatformListing.jsx | 38 ++--------------- .../src/components/UIComponents/DataTable.jsx | 37 +++-------------- .../UIComponents/DataTableHeader.jsx | 36 ++-------------- .../components/UIComponents/DataTableRow.jsx | 36 ++-------------- .../src/main/resources/publisher/src/theme.js | 41 +++++++++++++++++++ 13 files changed, 85 insertions(+), 359 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 4798f122cd3..9dac4fa9c29 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 @@ -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); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx index 48aa9549e06..870ed0cdb9f 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx index 60ee588a811..fcceb20ca5b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx @@ -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); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx index d2c615057d3..f414a8c278c 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx index 968891111b5..198055a0925 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx index 548e6806583..1245d1df3c1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx index b1cf9c5f76a..da98a075c52 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx @@ -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() { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx index a5053e68197..3c9c8acabf9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx index bd6325f616a..34387fca7ea 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx index 461d4790c80..beb6086b58d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx @@ -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) { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx index 1fbf4f96792..8d655c66179 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx index 073a37aacb1..292f0e4eab6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx @@ -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); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js index c2a3028b21e..9243f7713e1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js @@ -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);