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

refactoring theming support

Browse Source
This commit is contained in:
megala21 2017-09-12 22:37:45 +05:30
parent 5614914efa
commit 8f3d11fa0e
13 changed files with 133 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -22,12 +22,14 @@
*/
class Theme {
constructor() {
const theme = require("../config.json").theme;
this.currentTheme = theme.type;
if (this.currentTheme === "default") {
this.selectedTheme = theme.value;
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.selectedTheme = theme.value;
this.currentTheme = theme.value;
}
}
}