Adding the flexibility to change the css files

4.x.x
megala21 7 years ago
parent 6e1a48f084
commit 9c490d1989

@ -31,18 +31,21 @@ import {
PlatformCreate,
PlatformListing
} from './components';
import Theme from './themes/theme';
const history = createHistory({basename: '/publisher'});
/**
* User can define the themes in the config.json. The themes will be loaded based on the user preference.
*Loading the theme files based on the the user-preference.
*/
const theme = require("./config.json").theme;
let muiTheme = null;
if (theme.current === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
let selected = Theme.selectedTheme;
if (Theme.currentTheme === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
muiTheme = getMuiTheme(defaultTheme.default);
} else {
let customTheme = require("./themes/" + theme.custom);
let customTheme = require("./themes/" + selected + "/theme.js");
muiTheme = getMuiTheme(customTheme.default);
}

@ -24,7 +24,7 @@ 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.
@ -51,6 +51,20 @@ 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");
}
}
}
/**
* Handles next button click event.
* */
@ -179,15 +193,15 @@ class ApplicationCreate extends Component {
return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<Card style={{maxHeight: '700px', overflow: 'auto'}}>
<div className="middle createapplicationmiddle">
<Card className="creataapplicationcard">
<CardTitle title="Create Application"/>
{/**
* The stepper goes here.
*/}
<CardActions>
<div style={{width: '100%', margin: 'auto'}}>
<div className="createapplicationcardaction">
<Stepper activeStep={stepIndex}>
<Step>
<StepLabel>Select Application Platform</StepLabel>
@ -199,7 +213,7 @@ class ApplicationCreate extends Component {
<StepLabel>Release</StepLabel>
</Step>
</Stepper>
<div style={contentStyle}>
<div className="createapplicationcontent">
{finished ? (
<div>
<p>Create App?</p>

@ -21,6 +21,7 @@ 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.
@ -112,6 +113,18 @@ class ApplicationListing extends Component {
componentWillMount() {
//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");
}
}
}
/**
@ -156,12 +169,11 @@ class ApplicationListing extends Component {
render() {
return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<Card style={{display: 'flex', flexWrap: 'wrap'}}>
<TextField hintText="Search"
style={{float:'right', paddingRight: '2px'}}
<div className="middle applicationListingMiddle">
<Card className="applicationListingCard">
<TextField hintText="Search" className="applicationListingSearch"
onChange={this._searchApplications.bind(this)}/>
<CardTitle title="Applications" style={{display: 'flex', flexWrap: 'wrap'}}/>
<CardTitle title="Applications" className="applicationListTitle"/>
<CardActions>
</CardActions>

@ -22,6 +22,9 @@ 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.
@ -51,6 +54,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");
}
}
//Get the list of available platforms and set to the state.
}
@ -105,10 +119,9 @@ class Step1 extends Component {
};
render() {
const contentStyle = {margin: '0 16px'};
return (
<div>
<div style={contentStyle}>
<div className="creatediv">
<div>
<div>
<SelectField
@ -134,7 +147,7 @@ class Step1 extends Component {
<br/>
<br/>
<div style={{marginTop: 12}}>
<div className="nextButton">
<RaisedButton
label="Next >"
primary={true}

@ -28,6 +28,7 @@ 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.
@ -66,18 +67,21 @@ class Step2 extends Component {
screenshots: [],
icon: []
};
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
}
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");
}
}
}
/**
* Create a tag on Enter key press and set it to the state.
@ -142,8 +146,7 @@ class Step2 extends Component {
<Chip
key={data.key}
onRequestDelete={() => this._handleRequestDelete(data.key)}
style={this.styles.chip}
>
className="applicationCreateChip">
{data.value}
</Chip>
);
@ -299,9 +302,8 @@ class Step2 extends Component {
render() {
console.log(this.state.visibilityComponent);
const contentStyle = {margin: '0 16px'};
return (
<div style={contentStyle}>
<div className="createStep2Content">
<div>
<div>
<TextField
@ -353,7 +355,7 @@ class Step2 extends Component {
onChange={this._handleTagChange.bind(this)}
onKeyPress={this._addTags.bind(this)}
/><br/>
<div style={this.styles.wrapper}>
<div className="applicationCreateWrapper">
{this.state.tags.map(this._renderChip, this)}
</div>
<br/>
@ -365,18 +367,14 @@ class Step2 extends Component {
<MenuItem value={0} primaryText="Business"/>
</SelectField> <br/>
{/*Platform Specific Properties.*/}
<div style={{border: 'solid #BDBDBD 1px'}}>
<p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
<div className="platformSpecificPropertyDiv">
<p className="platformSpecificPropertyP">Platform Specific Properties</p>
</div>
<br/>
<div>
<p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
<p style={{color: '#BDBDBD'}}>Banner*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
<p className="applicationCreateBannerError">{this.state.errors["Banner"]}</p>
<p className="applicationCreateBannerTitle">Banner*:</p>
<GridList className="applicationCreateGrid" cols={1.1}>
{this.state.banner.map((tile) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={tile.name}
@ -387,12 +385,11 @@ class Step2 extends Component {
<img src={tile.preview}/></GridTile>
))}
{this.state.banner.length === 0 ?
<Dropzone style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
accept="image/jpeg, image/png"
<Dropzone className="applicationCreateBannerDropZone" accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}>
<p style={{margin: '70px 40px 40px 150px'}}>+</p>
<p className="applicationCreateBannerp">+</p>
</Dropzone> : <div />}
</GridList>
@ -400,13 +397,9 @@ class Step2 extends Component {
</div>
<br/>
<div>
<p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
<p style={{color: '#BDBDBD'}}>Screenshots*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
<p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
<p className="applicationCreateScreenshotTitle">Screenshots*:</p>
<GridList className = "applicationCreateScreenshotGrid" cols={1.1}>
{this.state.screenshots.map((file) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={file[0].name}
@ -417,7 +410,7 @@ class Step2 extends Component {
<img src={file[0].preview}/></GridTile>
))}
{this.state.screenshots.length < 3 ?
<Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
<Dropzone className="applicationCreateScreenshotDropZone"
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
@ -425,19 +418,15 @@ class Step2 extends Component {
this.setState({
screenshots: tmpScreenshots});
}}>
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
<p className="applicationCreateScreenshotp">+</p>
</Dropzone> : <div />}
</GridList>
</div>
<br/>
<div>
<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
<p style={{color: '#BDBDBD'}}>Icon*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
<p className="applcationCreateIconError">{this.state.errors["Icon"]}</p>
<p className="applicationCreateIconTitle">Icon*:</p>
<GridList className="applicationCreateIconGrid" cols={1.1}>
{this.state.icon.map((tile) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={tile.name}
@ -448,10 +437,10 @@ class Step2 extends Component {
<img src={tile.preview}/></GridTile>
))}
{this.state.icon.length === 0 ?
<Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
<Dropzone className="applicationCreateIconDropZone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div />}
</GridList>
</div>
@ -460,12 +449,12 @@ class Step2 extends Component {
<br/>
<br/>
<div style={{marginTop: 12}}>
<div className="applicationCreateBackAndNext">
<FlatButton
label="< Back"
disabled={false}
onClick={this._handlePrev.bind(this)}
style={{marginRight: 12}}
className="applicationCreateBack"
/>
<RaisedButton
label="Next >"

@ -24,6 +24,7 @@ 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}
@ -57,6 +58,20 @@ 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");
}
}
}
/**
* Handles finish button click.
* This invokes handleNext function in parent component.
@ -81,9 +96,8 @@ class Step3 extends Component {
}
render() {
const contentStyle = {margin: '0 16px'};
return (
<div style={contentStyle}>
<div className="applicationCreateStepMiddle">
<div>
<Toggle
label="Release the Application"
@ -110,13 +124,9 @@ class Step3 extends Component {
/><br/>
</div>}
<div style={{marginTop: 12}}>
<FlatButton
label="< Back"
disabled={false}
onClick={this._handlePrev.bind(this)}
style={{marginRight: 12}}
/>
<div className="applicationCreateBackAndFinish">
<FlatButton label="< Back" disabled={false} onClick={this._handlePrev.bind(this)}
className="applicationCreateFinish"/>
<RaisedButton
label="Finish"
primary={true}

@ -31,6 +31,8 @@ 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';
/**
* Base Layout:
@ -49,7 +51,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");
}
}
}
handleApplicationClick() {
@ -142,16 +154,7 @@ class BaseLayout extends Component {
</List>
</Drawer>
</div>
<div style=
{
{
height: 'calc(100% - 64px)',
marginLeft: '16%',
width: 'calc(100%-15%)',
top: 64,
left: "-100px"
}
}>
<div className="basicLayoutDiv">
{this.props.children}
</div>
</div>);

@ -31,6 +31,7 @@ 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.
@ -64,6 +65,20 @@ 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");
}
}
}
/**
* Handles toggle button actions.
* One method is used for all the toggle buttons and, each toggle is identified by the id.
@ -184,12 +199,12 @@ class PlatformCreate extends Component {
property} = this.state;
return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<div className="middle createplatformmiddle">
<Card>
<CardTitle title="Create Platform"/>
<CardActions>
<div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
<div className="createplatformcardaction">
<form>
<TextField
hintText="Enter the Platform Name."
@ -224,17 +239,17 @@ class PlatformCreate extends Component {
toggled={enabled}
/> <br/>
<div>
<p style={{color: '#BaBaBa'}}>Platform Properties</p>
<p className="createplatformproperties">Platform Properties</p>
<div id="property-container">
{platformProperties.map((p) => {
return <div key={p.key}>{p.key} : {p.value}
<IconButton onClick={this._removeProperty.bind(this, p)}>
<Close style={{height: '10px', width: '10px'}}/>
<Close className="createplatformpropertyclose"/>
</IconButton>
</div>
})}
</div>
<div style={{display: 'flex'}}>
<div className="createplatformproperty">
<TextField
id="property"
hintText="Property Name"
@ -244,7 +259,7 @@ class PlatformCreate extends Component {
onChange={this._onTextChange.bind(this)}
/> <em/>
<SelectField
style={{flex: '1 1 23% 1', margin: '0 1%'}}
className="createplatformpropertyselect"
floatingLabelText="Property Type"
value={selectedProperty}
floatingLabelFixed={true}
@ -262,13 +277,8 @@ class PlatformCreate extends Component {
</div>
</div>
<div>
{/*<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>*/}
<p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
<p className="createplatformiconp">Platform Icon*:</p>
<GridList className="createplatformicon" cols={1.1}>
{this.state.icon.map((tile) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={tile.name}
@ -280,12 +290,10 @@ class PlatformCreate extends Component {
</GridTile>
))}
{this.state.icon.length === 0 ?
<Dropzone style={
{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}
}
<Dropzone className="createplatformdropzone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
<p className="createplatformdropzonep">+</p>
</Dropzone> : <div />}
</GridList>
</div>

@ -21,6 +21,7 @@ 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.
@ -40,6 +41,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");
}
}
//Fetch all the applications from backend and create application objects.
}
@ -75,12 +87,11 @@ class PlatformListing extends Component {
render() {
return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<Card style={{display: 'flex', flexWrap: 'wrap'}}>
<TextField hintText="Search"
style={{float:'right', paddingRight: '2px'}}
onChange={this._searchApplications.bind(this)}/>
<CardTitle title="Platforms" style={{display: 'flex', flexWrap: 'wrap'}}/>
<div className= 'middle listingplatformmiddle'>
<Card className='listingplatformcard'>
<TextField hintText="Search" onChange={this._searchApplications.bind(this)}
className='listingplatformsearch'/>
<CardTitle title="Platforms" className='listingplatformTitle'/>
<CardActions>
</CardActions>

@ -22,6 +22,7 @@ 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.
@ -60,7 +61,18 @@ class DataTable extends Component {
};
componentWillMount() {
this.setState({data: this.props.data, headers: this.props.headers})
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");
}
}
}
shouldComponentUpdate(nextProps, nextState) {
@ -95,8 +107,8 @@ class DataTable extends Component {
adjustForCheckbox={ false }>
<TableRow>
{headers.map((header) => {
return (<DataTableHeader key={header.data_id}
style={{display: 'flex'}} header={header}/>)
return (<DataTableHeader key={header.data_id} className="datatableRowColumn"
header={header}/>)
}
)}
</TableRow>

@ -20,6 +20,7 @@ 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.
@ -31,6 +32,20 @@ class DataTableHeader extends Component {
super();
}
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");
}
}
}
/**
* The onClick function of the table header.
* Invokes the function passed in the header object.
@ -48,20 +63,13 @@ class DataTableHeader extends Component {
* */
if (this.props.header.sortable) {
headerCell = <FlatButton label={this.props.header.label}
onClick={this._tableHeaderClick.bind(this)}
style={{color: '#bdbdbd'}}/>;
onClick={this._tableHeaderClick.bind(this)} className="sortableHeaderCell"/>;
} else {
headerCell = <span style={{position: 'relative',
paddingLeft: '16px',
paddingRight: '16px',
textTransform: 'uppercase',
fontWeight: 'normal',
color: '#bdbdbd',
fontSize: '14px'}}>{this.props.header.label}</span>;
headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
}
return (
<TableHeaderColumn key={this.props.header.id} style={{paddingLeft: '0px'}} >
<TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn" >
{headerCell}
</TableHeaderColumn>
);

@ -19,6 +19,7 @@
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.
@ -34,7 +35,18 @@ class DataTableRow extends Component {
}
componentWillMount() {
this.setState({dataItem: this.props.dataItem})
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");
}
}
}
/**
@ -50,7 +62,7 @@ class DataTableRow extends Component {
<TableRow key={this.props.key} onClick={this._handleClick.bind(this)} >
{Object.keys(dataItem).map((key) => {
if (key !== 'id') {
return <TableRowColumn style={{alignItems: 'center'}}
return <TableRowColumn className = "datatableRowColumn"
key={key}>{dataItem[key]}</TableRowColumn>
} else {
return <TableRowColumn key={key}/>

@ -1,7 +1,6 @@
{
"theme" : {
"current" : "default",
"default" : "lightBaseTheme",
"custom" : "custom-theme"
"theme": {
"type": "default",
"value": "lightBaseTheme"
}
}
}

@ -1,12 +0,0 @@
import {
indigo500, indigo700, redA200,
} from 'material-ui/styles/colors';
export default {
palette: {
primary1Color: indigo500,
primary2Color: indigo700,
accent1Color: redA200,
pickerHeaderColor: indigo500,
},
};

@ -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.
*/
/**
* This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
* {
* "theme" : {
* "type" : "custom",
* "value" : "custom-theme"
* }
* }
*/
import {
indigo500, indigo700, redA200,
} from 'material-ui/styles/colors';
export default {
palette: {
primary1Color: indigo500,
primary2Color: indigo700,
accent1Color: redA200,
pickerHeaderColor: indigo500,
},
};

@ -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,26 @@
/*
* 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,44 @@
/*
* 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;
}

@ -0,0 +1,35 @@
/*
* 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.currentTheme = theme.type;
if (this.currentTheme === "default") {
this.selectedTheme = theme.value;
} else {
this.selectedTheme = theme.value;
}
}
}
export default (new Theme);
Loading…
Cancel
Save