Merge pull request #959 from Megala21/appm_new
Adding the flexibility to change the css filesmerge-requests/7/head
sinthuja
7 years ago
committed by
GitHub
commit
549e71317a
@ -0,0 +1,6 @@
|
||||
{
|
||||
"theme": {
|
||||
"type": "default",
|
||||
"value": "lightBaseTheme"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.creatediv {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.nextButton {
|
||||
margin-top: 12px;
|
||||
}
|
||||
@ -0,0 +1,120 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.applicationCreateChip {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.createStep2Content {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
|
||||
.applicationCreateWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
.platformSpecificPropertyDiv {
|
||||
border: solid #BDBDBD 1px;
|
||||
}
|
||||
|
||||
.platformSpecificPropertyP {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
.applicationCreateBannerError {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.applicationCreateBannerTitle {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
.applicationCreateGrid {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.applicationCreateBannerDropZone {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
border: dashed #BDBDBD 1px
|
||||
}
|
||||
|
||||
.applicationCreateBannerp {
|
||||
margin: 70px 40px 40px 150px;
|
||||
}
|
||||
|
||||
.applicationCreateScreenshotError {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.applicationCreateScreenshotTitle {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
.applicationCreateScreenshotGrid {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.applicationCreateScreenshotDropZone {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: dashed #BDBDBD 1px;
|
||||
}
|
||||
|
||||
.applicationCreateScreenshotp {
|
||||
margin: 70px 40px 70px 70px;
|
||||
}
|
||||
|
||||
.applcationCreateIconError {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.applicationCreateIconTitle {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
.applicationCreateIconGrid {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.applicationCreateIconDropZone {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: dashed #BDBDBD 1px;
|
||||
}
|
||||
|
||||
.applicationCreateIconp {
|
||||
margin: 70px 40px 70px 70px;
|
||||
}
|
||||
|
||||
.applicationCreateBackAndNext {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.applicationCreateBack {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.applicationCreateStepMiddle {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.applicationCreateBackAndFinish {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.applicationCreateFinish {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.createapplicationmiddle {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.creataapplicationcard {
|
||||
max-height: 700px;
|
||||
overflow: auto;
|
||||
}
|
||||
.createapplicationcardaction {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.createapplicationcontent {
|
||||
margin: 0 16px;
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.applicationListingMiddle {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.applicationListingCard {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.applicationListingSearch {
|
||||
float:right;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.applicationListTitle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.basicLayoutDiv {
|
||||
height: calc(100% - 64px);
|
||||
margin-left: 16%;
|
||||
width: calc(100% - 15%);
|
||||
top: 64px;
|
||||
left: -100px;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.tableRow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.datatableRowColumn {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sortableHeaderCell {
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
.notsortableHeaderCell {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
color: #bdbdbd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.datatableHeaderColumn {
|
||||
padding-left: 0;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.createplatformmiddle {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin-top: 1%
|
||||
}
|
||||
|
||||
.createplatformcardaction {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.createplatformproperties {
|
||||
color: #BaBaBa;
|
||||
}
|
||||
|
||||
.createplatformpropertyclose {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
|
||||
.createplatformproperty {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.createplatformpropertyselect {
|
||||
flex: 1 1 23% 1;
|
||||
margin: 0 1%
|
||||
}
|
||||
|
||||
.createplatformicon {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.createplatformiconp {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
.createplatformdropzone {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: dashed #BDBDBD 1px;
|
||||
}
|
||||
|
||||
.createplatformdropzonep {
|
||||
margin: 70px 40px 70px 70px
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
|
||||
.listingplatformmiddle {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.listingplatformcard {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.listingplatformsearch {
|
||||
float:right;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.listingplatformTitle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
{
|
||||
"theme" : {
|
||||
"current" : "default",
|
||||
"default" : "lightBaseTheme",
|
||||
"custom" : "custom-theme"
|
||||
"theme": {
|
||||
"type": "default",
|
||||
"value": "lightBaseTheme"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
/*
|
||||
* 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() {
|
||||
this.defaultThemeType = "default";
|
||||
this.currentThemeType = this.defaultThemeType;
|
||||
this.currentTheme = "lightBaseTheme";
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* To load the theme related configurations from the configuration file.
|
||||
* @returns the http response.
|
||||
*/
|
||||
loadThemeConfigs () {
|
||||
let httpClient = axios.create({
|
||||
baseURL: this.baseURL + "/" + this.appContext + "/config.json",
|
||||
timeout: 2000
|
||||
});
|
||||
httpClient.defaults.headers.post['Content-Type'] = 'application/json';
|
||||
return httpClient.get();
|
||||
}
|
||||
|
||||
/**
|
||||
* To load the particular theme file from the path.
|
||||
* @param path Path to load the theme files
|
||||
* @returns Http response from the particular file.
|
||||
*/
|
||||
loadThemeFiles (path) {
|
||||
let httpClient = axios.create({
|
||||
baseURL: this.baseURL + "/" + this.appContext + path,
|
||||
timeout: 2000
|
||||
});
|
||||
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);
|
||||
Loading…
Reference in new issue