mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Package refactoring and adding release app component.
This commit is contained in:
Menaka Jayawardena
parent
db5d71b9a7
commit
828bb316f6
@ -23,7 +23,7 @@ import AuthHandler from "../../api/authHandler";
|
||||
import '../../css/font-wso2.css';
|
||||
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
|
||||
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
|
||||
import ApplicationCreate from '../Application/ApplicationCreate';
|
||||
import ApplicationCreate from '../Application/Create/ApplicationCreate';
|
||||
import {Button, Input, InputGroup,} from 'reactstrap';
|
||||
|
||||
|
||||
@ -22,7 +22,8 @@ import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import ApplicationMgtApi from '../../api/applicationMgtApi';
|
||||
import {Table} from 'reactstrap';
|
||||
import Drawer from '../UIComponents/Drawer/Drawer'
|
||||
import Drawer from '../UIComponents/Drawer/Drawer';
|
||||
import ApplicationEdit from './Edit/Base/ApplicationEditBaseLayout';
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
@ -236,42 +237,46 @@ class ApplicationListing extends Component {
|
||||
return (
|
||||
|
||||
<div id="application-list" style={this.state.appListStyle}>
|
||||
<Table striped hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{/* TODO: Remove console.log and add sort method. */}
|
||||
<th onClick={() => {console.log("sort")}}>Application Name</th>
|
||||
<th>Category</th>
|
||||
<th>Platform</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.applications.map(
|
||||
(application) => {
|
||||
return (
|
||||
<tr key={application.id} onClick={this.onRowClick}>
|
||||
<td>
|
||||
{/* TODO: Move this styles to css. */}
|
||||
<img
|
||||
src={application.icon}
|
||||
height='50px'
|
||||
width='50px'
|
||||
style={{border: 'solid 1px black', borderRadius: "100%"}}
|
||||
/></td>
|
||||
<td>{application.applicationName}</td>
|
||||
<td>{application.category}</td>
|
||||
<td>{application.platform}</td>
|
||||
<td>{application.status}</td>
|
||||
<td><i>Edit</i></td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
{/*<Table striped hover>*/}
|
||||
{/*<thead>*/}
|
||||
{/*<tr>*/}
|
||||
{/*<th></th>*/}
|
||||
{/*/!* TODO: Remove console.log and add sort method. *!/*/}
|
||||
{/*<th onClick={() => {console.log("sort")}}>Application Name</th>*/}
|
||||
{/*<th>Category</th>*/}
|
||||
{/*<th>Platform</th>*/}
|
||||
{/*<th>Status</th>*/}
|
||||
{/*<th></th>*/}
|
||||
{/*</tr>*/}
|
||||
{/*</thead>*/}
|
||||
{/*<tbody>*/}
|
||||
{/*{this.applications.map(*/}
|
||||
{/*(application) => {*/}
|
||||
{/*return (*/}
|
||||
{/*<tr key={application.id} onClick={this.onRowClick}>*/}
|
||||
{/*<td>*/}
|
||||
{/*/!* TODO: Move this styles to css. *!/*/}
|
||||
{/*<img*/}
|
||||
{/*src={application.icon}*/}
|
||||
{/*height='50px'*/}
|
||||
{/*width='50px'*/}
|
||||
{/*style={{border: 'solid 1px black', borderRadius: "100%"}}*/}
|
||||
{/*/></td>*/}
|
||||
{/*<td>{application.applicationName}</td>*/}
|
||||
{/*<td>{application.category}</td>*/}
|
||||
{/*<td>{application.platform}</td>*/}
|
||||
{/*<td>{application.status}</td>*/}
|
||||
{/*<td><i>Edit</i></td>*/}
|
||||
{/*</tr>*/}
|
||||
{/*)*/}
|
||||
{/*}*/}
|
||||
{/*)}*/}
|
||||
{/*</tbody>*/}
|
||||
{/*</Table>*/}
|
||||
|
||||
<ApplicationEdit/>
|
||||
|
||||
|
||||
<Drawer style={this.state.drawer}>
|
||||
<div id="application-view">
|
||||
|
||||
|
||||
@ -16,18 +16,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import Theme from '../../theme';
|
||||
import React, {Component} from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import {Step1, Step2, Step3, Step4} from './CreateSteps';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import ApplicationMgtApi from '../../api/applicationMgtApi';
|
||||
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
|
||||
import {Button, Modal, InputGroup, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup} from 'reactstrap';
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
|
||||
import ApplicationMgtApi from '../../../api/applicationMgtApi';
|
||||
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
@ -221,13 +215,18 @@ class ApplicationCreate extends Component {
|
||||
<div id="create-application-modal">
|
||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
|
||||
backdrop={'static'}>
|
||||
<ModalHeader toggle={this.toggle}><i style={{cursor: 'pointer'}} onClick={this.handlePrev}><strong>{'< '}</strong></i>Create Application</ModalHeader>
|
||||
<ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
|
||||
<ModalBody id="modal-body-content">
|
||||
{this.getStepContent(this.state.stepIndex)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{this.state.stepIndex === 0?
|
||||
<div/> : <Button color="primary" onClick={this.handlePrev}>Back</Button>}
|
||||
<Button color="secondary" onClick={this.close}>Cancel</Button>
|
||||
<Button color="primary" onClick={this.handleNext}>Continue</Button>{' '}
|
||||
{this.state.finished?
|
||||
<Button color="primary" onClick={this.handleSubmit}>Finish</Button>
|
||||
: <Button color="primary" onClick={this.handleNext}>Continue</Button> }
|
||||
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>);
|
||||
@ -16,11 +16,10 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import PlatformMgtApi from "../../../api/platformMgtApi";
|
||||
import AuthHandler from "../../../../api/authHandler";
|
||||
import PlatformMgtApi from "../../../../api/platformMgtApi";
|
||||
import {FormGroup, Input, Label} from 'reactstrap';
|
||||
|
||||
/**
|
||||
@ -57,17 +56,6 @@ class Step1 extends Component {
|
||||
this.scriptId = "application-create-step1";
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
/**
|
||||
*Loading the theme files based on the the user-preference.
|
||||
*/
|
||||
Theme.insertThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//Get the list of available platforms and set to the state.
|
||||
PlatformMgtApi.getPlatforms().then(response => {
|
||||
@ -17,7 +17,6 @@
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import Theme from '../../../theme';
|
||||
import React, {Component} from 'react';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
@ -61,17 +60,6 @@ class Step2 extends Component {
|
||||
this.scriptId = "application-create-step2";
|
||||
}
|
||||
|
||||
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.
|
||||
* Clears the tags text field.
|
||||
@ -17,7 +17,6 @@
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import Theme from '../../../theme';
|
||||
import Chip from 'material-ui/Chip';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import React, {Component} from 'react';
|
||||
@ -60,16 +59,6 @@ class Step3 extends Component {
|
||||
this.scriptId = "application-create-step2";
|
||||
}
|
||||
|
||||
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.
|
||||
@ -18,15 +18,8 @@
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
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';
|
||||
import {Button, Form, FormGroup, Label, Input, FormText, Badge, Collapse} from 'reactstrap';
|
||||
import Switch from '../../UIComponents/Switch/Switch'
|
||||
import {Collapse, FormGroup, Input, Label} from 'reactstrap';
|
||||
import Switch from '../../../UIComponents/Switch/Switch'
|
||||
|
||||
/**
|
||||
* The Third step of application create wizard. {Application Release Step}
|
||||
@ -65,17 +58,6 @@ class Step4 extends Component {
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles finish button click.
|
||||
* This invokes handleNext function in parent component.
|
||||
@ -1,37 +0,0 @@
|
||||
/*
|
||||
* 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 PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class ApplicationEdit extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="application-edit-base">
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ApplicationEdit;
|
||||
@ -0,0 +1,169 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import './baseLayout.css';
|
||||
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
|
||||
class ApplicationEdit extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getTabContent = this.getTabContent.bind(this);
|
||||
this.state = {
|
||||
general: "active",
|
||||
release: "",
|
||||
pkgmgt: "",
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
|
||||
handleClick(event) {
|
||||
event.stopPropagation();
|
||||
console.log(typeof event.target.value);
|
||||
const key = event.target.value;
|
||||
|
||||
switch (key) {
|
||||
case "1": {
|
||||
console.log("Step1");
|
||||
this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
|
||||
break;
|
||||
}
|
||||
case "2": {
|
||||
this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
|
||||
break;
|
||||
}
|
||||
case "3": {
|
||||
this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
return "No Content";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getTabContent(tab) {
|
||||
|
||||
switch (tab) {
|
||||
case 1: {
|
||||
return ("Step 1")
|
||||
}
|
||||
case 2: {
|
||||
return <ReleaseManager/>
|
||||
}
|
||||
case 3: {
|
||||
return ("Step3")
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state);
|
||||
return (
|
||||
<div id="application-edit-base">
|
||||
|
||||
<Row id="application-edit-header">
|
||||
<Col>Application Name</Col>
|
||||
</Row>
|
||||
<Row id="application-edit-main-container">
|
||||
<Col xs="3">
|
||||
<div className="tab">
|
||||
<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>
|
||||
General
|
||||
</button>
|
||||
<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>
|
||||
App
|
||||
Releases
|
||||
</button>
|
||||
<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>
|
||||
Package Manager
|
||||
</button>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs="9">
|
||||
<div id="app-edit-content">
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<div id="application-edit-outer-content">
|
||||
{/* Application edit content */}
|
||||
<div id="application-edit-content">
|
||||
{this.getTabContent(this.state.activeTab)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row >
|
||||
<Col xs="3 offset-9">
|
||||
<Button>Save</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*<Row>*/}
|
||||
{/*/!* Contains the application Name and Save button*!/*/}
|
||||
{/*<div id="application-edit-header">*/}
|
||||
{/*<Col>*/}
|
||||
{/*<span className="application-header-text">*/}
|
||||
{/*Header*/}
|
||||
{/*</span>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col>*/}
|
||||
{/*<Button id="app-save-btn" className="save-btn">Save</Button>*/}
|
||||
{/*</Col>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Row>*/}
|
||||
{/*<div id="application-edit-main-container">*/}
|
||||
{/*<Row>*/}
|
||||
{/*<Col xs="6" sm="4">*/}
|
||||
|
||||
{/*/!* Contains side bar items, General, App Release, Package Manager *!/*/}
|
||||
{/*<div className="tab">*/}
|
||||
{/*<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*General*/}
|
||||
{/*</button>*/}
|
||||
{/*<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*App*/}
|
||||
{/*Releases*/}
|
||||
{/*</button>*/}
|
||||
{/*<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*Package Manager*/}
|
||||
{/*</button>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col xs="6" sm="4">*/}
|
||||
{/*<div id="application-edit-outer-content">*/}
|
||||
{/*/!* Application edit content *!/*/}
|
||||
{/*<div id="application-edit-content">*/}
|
||||
{/*{this.getTabContent(this.state.activeTab)}*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Col>*/}
|
||||
{/*</Row>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ApplicationEdit;
|
||||
@ -0,0 +1,94 @@
|
||||
|
||||
#application-edit-base {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
border: solid 1px #828282;
|
||||
}
|
||||
|
||||
#application-edit-header {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #9a9a9a;
|
||||
border: solid 1px #a2a2a2;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.application-header-text {
|
||||
margin: 10px 0px 0px 10px;
|
||||
}
|
||||
|
||||
#save-btn-content {
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
#app-save-btn {
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
margin: 5px 5px 5px 0px;
|
||||
height: 70%;
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*Tab styling*/
|
||||
div.tab {
|
||||
float: left;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Style the tab buttons */
|
||||
div.tab button {
|
||||
display: block;
|
||||
background-color: inherit;
|
||||
color: black;
|
||||
padding: 15px 16px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
div.tab button:hover {
|
||||
background-color: #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Create an active/current "tab button" class */
|
||||
div.tab button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
#application-edit-main-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#application-edit-outer-content {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#application-edit-content {
|
||||
margin: 5px 10px 5px 10px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#app-edit-content {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@ -27,7 +27,7 @@ class PackageManager extends Component {
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
<div id="package-mgt-content">
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -16,22 +16,14 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class ReleaseManager extends Component {
|
||||
class ReleaseContent extends Component {
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ReleaseManager;
|
||||
|
||||
export default ReleaseContent;
|
||||
@ -0,0 +1,96 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import './release-mgt.css';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
|
||||
class ReleaseManager extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds a generic message saying there are no current release in the specified release channel.
|
||||
* */
|
||||
getNoReleaseContent(release) {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 4}}>
|
||||
<p>You have no on-going {release} Releases!</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 5}}>
|
||||
<Button className="button-add" id={release.toLowerCase()}>Create a Release</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="release-mgt-content">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="production">
|
||||
<span>Production Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
|
||||
{this.getNoReleaseContent("Production")}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="beta">
|
||||
<span>Beta Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Beta")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="alpha">
|
||||
<span>Alpha Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Alpha")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ReleaseManager;
|
||||
@ -0,0 +1,32 @@
|
||||
.release-content {
|
||||
height: 180px;
|
||||
width: 95%;
|
||||
border: dashed 1px #626262;
|
||||
border-radius: 2%;
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.release-content:after {
|
||||
content: "";
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.release {
|
||||
margin: 30px 10px 20px 30px;
|
||||
}
|
||||
|
||||
.no-release-content {
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.button-add:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.release-inner {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ import React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import DataTable from '../UIComponents/DataTable';
|
||||
import DataTable from '../UIComponents/DataTable/DataTable';
|
||||
import PlatformMgtApi from "../../api/platformMgtApi";
|
||||
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import Theme from '../../theme';
|
||||
import Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import DataTableRow from './DataTableRow';
|
||||
@ -16,7 +16,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import Theme from '../../theme';
|
||||
import Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
@ -16,7 +16,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import Theme from '../../theme';
|
||||
import Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
@ -0,0 +1,19 @@
|
||||
import React, {Component} from 'react';
|
||||
import './input.css';
|
||||
|
||||
class Input2 extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="custom-input">
|
||||
<input type="text" required/>
|
||||
<span className="highlight"></span>
|
||||
<span className="under-line"></span>
|
||||
<label>Name</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Input2;
|
||||
@ -0,0 +1,118 @@
|
||||
/** {*/
|
||||
/*box-sizing: border-box;*/
|
||||
/*}*/
|
||||
|
||||
/*.custom-input {*/
|
||||
/*position: relative;*/
|
||||
/*margin-bottom: 45px;*/
|
||||
/*}*/
|
||||
|
||||
/*input {*/
|
||||
/*font-size: 18px;*/
|
||||
/*padding: 10px 10px 10px 5px;*/
|
||||
/*display: block;*/
|
||||
/*width: 300px;*/
|
||||
/*border: none;*/
|
||||
/*border-bottom: 1px solid #757575;*/
|
||||
/*}*/
|
||||
|
||||
/*input:focus {*/
|
||||
/*outline: none;*/
|
||||
/*}*/
|
||||
|
||||
/*label {*/
|
||||
/*color: #999;*/
|
||||
/*font-size: 18px;*/
|
||||
/*font-weight: normal;*/
|
||||
/*position: absolute;*/
|
||||
/*pointer-events: none;*/
|
||||
/*left: 5px;*/
|
||||
/*top: 10px;*/
|
||||
/*transition: 0.2s ease all;*/
|
||||
/*-moz-transition: 0.2s ease all;*/
|
||||
/*-webkit-transition: 0.2s ease all;*/
|
||||
/*}*/
|
||||
|
||||
/*!* active state *!*/
|
||||
/*input:focus ~ label, input:valid ~ label {*/
|
||||
/*top: -20px;*/
|
||||
/*font-size: 14px;*/
|
||||
/*color: #5264AE;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line {*/
|
||||
/*position: relative;*/
|
||||
/*display: block;*/
|
||||
/*width: 300px;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line:before, .under-line:after {*/
|
||||
/*content: '';*/
|
||||
/*height: 2px;*/
|
||||
/*width: 0;*/
|
||||
/*bottom: 1px;*/
|
||||
/*position: absolute;*/
|
||||
/*background: #5264AE;*/
|
||||
/*transition: 0.2s ease all;*/
|
||||
/*-moz-transition: 0.2s ease all;*/
|
||||
/*-webkit-transition: 0.2s ease all;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line:before {*/
|
||||
/*left: 50%;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line:after {*/
|
||||
/*right: 50%;*/
|
||||
/*}*/
|
||||
|
||||
/*!* active state *!*/
|
||||
/*input:focus ~ .under-line:before, input:focus ~ .under-line:after {*/
|
||||
/*width: 50%;*/
|
||||
/*}*/
|
||||
|
||||
/*.highlight {*/
|
||||
/*position: absolute;*/
|
||||
/*height: 60%;*/
|
||||
/*width: 100px;*/
|
||||
/*top: 25%;*/
|
||||
/*left: 0;*/
|
||||
/*pointer-events: none;*/
|
||||
/*opacity: 0.5;*/
|
||||
/*}*/
|
||||
|
||||
/*input:focus ~ .highlight {*/
|
||||
/*-webkit-animation: inputHighlighter 0.3s ease;*/
|
||||
/*-moz-animation: inputHighlighter 0.3s ease;*/
|
||||
/*animation: inputHighlighter 0.3s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*@-webkit-keyframes inputHighlighter {*/
|
||||
/*from {*/
|
||||
/*background: #5264AE;*/
|
||||
/*}*/
|
||||
/*to {*/
|
||||
/*width: 0;*/
|
||||
/*background: transparent;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
|
||||
/*@-moz-keyframes inputHighlighter {*/
|
||||
/*from {*/
|
||||
/*background: #5264AE;*/
|
||||
/*}*/
|
||||
/*to {*/
|
||||
/*width: 0;*/
|
||||
/*background: transparent;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
|
||||
/*@keyframes inputHighlighter {*/
|
||||
/*from {*/
|
||||
/*background: #5264AE;*/
|
||||
/*}*/
|
||||
/*to {*/
|
||||
/*width: 0;*/
|
||||
/*background: transparent;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
@ -18,12 +18,12 @@
|
||||
|
||||
import Login from './User/Login/Login';
|
||||
import NotFound from './Error/NotFound';
|
||||
import BaseLayout from './Base/BaseLayout';
|
||||
import BaseLayout from './AppPublisherBase/BaseLayout';
|
||||
import PlatformCreate from './Platform/PlatformCreate';
|
||||
import PlatformListing from './Platform/PlatformListing';
|
||||
import ApplicationCreate from './Application/ApplicationCreate';
|
||||
import ApplicationCreate from './Application/Create/ApplicationCreate';
|
||||
import ApplicationListing from './Application/ApplicationListing';
|
||||
import ApplicationEdit from './Application/Edit/ApplicationEditBaseLayout';
|
||||
import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';
|
||||
|
||||
/**
|
||||
* Contains all UI components related to Application, Login and Platform
|
||||
|
||||
@ -80,7 +80,10 @@ body {
|
||||
left: 110px;
|
||||
top: 20px;
|
||||
height: 25px;
|
||||
border: hidden;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-bottom: solid 1px black;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
#application-list {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user