Merge pull request #959 from Megala21/appm_new

Adding the flexibility to change the css files
4.x.x
sinthuja 7 years ago committed by GitHub
commit 549e71317a

@ -31,32 +31,6 @@
<build>
<plugins>
<plugin>
<groupId>org.wso2.maven</groupId>
<artifactId>carbon-p2-plugin</artifactId>
<version>${carbon.p2.plugin.version}</version>
<executions>
<execution>
<id>4-p2-feature-generation</id>
<phase>package</phase>
<goals>
<goal>p2-feature-gen</goal>
</goals>
<configuration>
<id>org.wso2.carbon.device.application.mgt</id>
<propertiesFile>../../etc/feature.properties</propertiesFile>
<adviceFile>
<properties>
<propertyDef>org.wso2.carbon.p2.category.type:server
</propertyDef>
<propertyDef>org.eclipse.equinox.p2.type.group:false
</propertyDef>
</properties>
</adviceFile>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
@ -96,8 +70,15 @@
<workingDirectory>${npm.working.dir}</workingDirectory>
</configuration>
</plugin>
</plugins>
<resources>
<resource>
<directory>${project.build.directory}/target</directory>
</resource>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
</build>
<profiles>
<profile>

@ -39,11 +39,11 @@
<title>WSO2 IoT App Publisher</title>
</head>
<body>
<script src='./dist/index.js'></script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src='./dist/index.js'></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

@ -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;
}

@ -31,20 +31,11 @@ import {
PlatformCreate,
PlatformListing
} from './components';
import Theme from './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.
*/
const theme = require("./config.json").theme;
let muiTheme = null;
if (theme.current === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
muiTheme = getMuiTheme(defaultTheme.default);
} else {
let customTheme = require("./themes/" + theme.custom);
muiTheme = getMuiTheme(customTheme.default);
}
/**
* This component defines the layout and the routes for the app.
@ -101,10 +92,59 @@ class Base extends Component {
*
* */
class Publisher extends Component {
constructor() {
super();
this.state = {
muiTheme: null,
selectedType: null,
selectedTheme: null
};
this.setTheme = this.setTheme.bind(this);
}
componentDidMount() {
/**
*Loading the theme files based on the the user-preference.
*/
let themeConfig = Theme.loadThemeConfigs();
themeConfig.then(this.setTheme).catch(function (error) {
console.log(error);
});
}
/**
* To set the theme based on the configuration file.
* @param response Configuration file data.
*/
setTheme(response) {
this.setState({
selectedType: response.data.theme.type,
selectedTheme: response.data.theme.value
});
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);
this.setState({
muiTheme : getMuiTheme(defaultTheme.default)
});
} else {
let customTheme = require("./themes/" + this.state.selectedTheme);
this.setState({
muiTheme : getMuiTheme(customTheme.default)
});
}
}
render() {
return (
<div className="App">
<MuiThemeProvider muiTheme={muiTheme}>
<MuiThemeProvider muiTheme={this.state.muiTheme}>
<Router basename="publisher" history={history}>
<Switch>
<Route path="/login" component={Login}/>

@ -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 '../../theme';
/**
* The App Create Component.
@ -37,6 +37,7 @@ import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
class ApplicationCreate extends Component {
constructor() {
super();
this.scriptId = "application-create";
this.setStepData.bind(this);
this.removeStepData.bind(this);
this.handleSubmit.bind(this);
@ -51,6 +52,17 @@ class ApplicationCreate extends Component {
};
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Handles next button click event.
* */
@ -179,15 +191,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 +211,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 '../../theme';
/**
* The App Create Component.
@ -36,7 +37,8 @@ class ApplicationListing extends Component {
this.state = {
data: [],
asc: true
}
};
this.scriptId = "application-listing";
}
data = [
@ -112,8 +114,18 @@ 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.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Handles the search action.
* When typing in the search bar, this method will be invoked.
@ -156,12 +168,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>

@ -19,9 +19,9 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
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 '../../../theme';
/**
* The first step of the application creation wizard.
@ -48,10 +48,18 @@ class Step1 extends Component {
title: "",
titleError: ""
};
this.scriptId = "application-create-step1";
}
componentWillMount() {
//Get the list of available platforms and set to the state.
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
@ -105,10 +113,9 @@ class Step1 extends Component {
};
render() {
const contentStyle = {margin: '0 16px'};
return (
<div>
<div style={contentStyle}>
<div className="creatediv">
<div>
<div>
<SelectField
@ -134,7 +141,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 '../../../theme';
/**
* The Second step of application create wizard.
@ -66,18 +67,19 @@ class Step2 extends Component {
screenshots: [],
icon: []
};
this.scriptId = "application-create-step2";
}
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Create a tag on Enter key press and set it to the state.
@ -142,8 +144,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 +300,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 +353,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 +365,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 +383,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 +395,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 +408,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 +416,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 +435,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 +447,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 '../../../theme';
/**
* The Third step of application create wizard. {Application Release Step}
@ -54,7 +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.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
@ -81,9 +94,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 +122,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}

@ -27,10 +27,11 @@ import {List, ListItem} from 'material-ui/List';
import Apps from 'material-ui/svg-icons/navigation/apps';
import Add from 'material-ui/svg-icons/content/add-circle';
import Feedback from 'material-ui/svg-icons/action/feedback';
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 '../../theme';
/**
* Base Layout:
@ -45,11 +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.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId)
}
handleApplicationClick() {
@ -86,6 +95,7 @@ class BaseLayout extends Component {
render() {
return (
<div>
<AppBar title="App Publisher"
iconElementRight={
@ -142,16 +152,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 '../../theme';
/**
* Platform Create component.
@ -61,7 +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.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
@ -184,12 +197,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 +237,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 +257,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 +275,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 +288,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 '../../theme';
/**
* The App Create Component.
@ -36,11 +37,19 @@ class PlatformListing extends Component {
this.state = {
data: [],
asc: true
}
};
this.scriptId = "platform-listing";
}
componentWillMount() {
//Fetch all the applications from backend and create application objects.
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
@ -75,12 +84,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 '../../theme';
/**
* The Custom Table Component.
@ -55,12 +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})
this.setState({data: this.props.data, headers: this.props.headers});
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
shouldComponentUpdate(nextProps, nextState) {
@ -95,8 +105,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 '../../theme';
/**
* Data Table header component.
@ -29,6 +30,18 @@ class DataTableHeader extends Component {
constructor() {
super();
this.scriptId = "data-table";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
@ -48,20 +61,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 '../../theme';
/**
* Data table row component.
@ -30,11 +31,21 @@ class DataTableRow extends Component {
super();
this.state = {
dataItem: {}
}
};
this.scriptId = "data-table";
}
componentWillMount() {
this.setState({dataItem: this.props.dataItem})
this.setState({dataItem: this.props.dataItem});
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
@ -50,7 +61,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"
}
}

@ -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);

@ -1,3 +1,30 @@
/*
* 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';

@ -58,7 +58,12 @@ const config = {
}]
}
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['.jsx', '.js']
}
};
if (process.env.NODE_ENV === "development") {

Loading…
Cancel
Save