Added material design button styles.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 8f1c09f779
commit 6b944a4e9f

@ -249,7 +249,7 @@ class ApplicationListing extends Component {
className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name} className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name}
</Col> </Col>
<Col> <Col>
<Button id="secondary-button" onClick={() => this.onAppEditClick(application.uuid)}> <Button className="custom-flat grey rounded" onClick={() => this.onAppEditClick(application.uuid)}>
<i className="fw fw-edit"></i> <i className="fw fw-edit"></i>
</Button> </Button>
</Col> </Col>

@ -253,7 +253,9 @@ class Step1 extends Component {
<FormFeedback id="form-error">{this.state.errors.name}</FormFeedback> <FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label for="app-short-description">Short Description*</Label> <Label for="app-short-description">
<FormattedMessage id="shortDescription" defaultMessage="shortDescription"/>*
</Label>
<Input <Input
required required
type="textarea" type="textarea"
@ -343,8 +345,8 @@ class Step1 extends Component {
</div> </div>
</div> </div>
<ModalFooter> <ModalFooter>
<Button id="material-btn" onClick={this.onCancelClick}>Cancel</Button> <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>Cancel</Button>
<Button color="primary" onClick={this.setStepData}>Continue</Button> <Button className="custom-raised primary" onClick={this.setStepData}>Continue</Button>
</ModalFooter> </ModalFooter>
</div> </div>
); );

@ -173,9 +173,9 @@ class Step2 extends Component {
<FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback> <FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
</FormGroup> </FormGroup>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={this.onBackClick}>Back</Button> <Button className="custom-flat primary-flat" onClick={this.onBackClick}>Back</Button>
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button> <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>Cancel</Button>
<Button color="primary" onClick={this.setStepData}>Continue</Button> <Button className="custom-raised primary" onClick={this.setStepData}>Continue</Button>
</ModalFooter> </ModalFooter>
</div> </div>
); );

@ -225,9 +225,9 @@ class Step3 extends Component {
</div> </div>
</div> </div>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={this.onBackClick}>Back</Button> <Button className="custom-flat primary-flat" onClick={this.onBackClick}>Back</Button>
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button> <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>Cancel</Button>
<Button color="primary" onClick={this.setStepData}>Continue</Button> <Button className="custom-raised primary" onClick={this.setStepData}>Continue</Button>
</ModalFooter> </ModalFooter>
</div> </div>
); );

@ -147,9 +147,9 @@ class Step4 extends Component {
</Collapse> </Collapse>
</div> </div>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={this.onBackClick}>Back</Button> <Button className="custom-flat primary-flat" onClick={this.onBackClick}>Back</Button>
<Button color="danger" onClick={this.onCancelClick}>Cancel</Button> <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>Cancel</Button>
<Button color="primary" onClick={this.onSubmit}>Finish</Button> <Button className="custom-raised primary" onClick={this.onSubmit}>Finish</Button>
</ModalFooter> </ModalFooter>
</div> </div>
); );

@ -17,16 +17,24 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Badge, Button, FormGroup, Input, Label, Row} from 'reactstrap'; import {Button, FormGroup, Input, Label, Row} from 'reactstrap';
import Dropzone from 'react-dropzone'; import Dropzone from 'react-dropzone';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import Chip from "../../../UIComponents/Chip/Chip";
class GeneralInfo extends Component { class GeneralInfo extends Component {
constructor() { constructor() {
super(); super();
this.onTextFieldChange = this.onTextFieldChange.bind(this);
this.addTags = this.addTags.bind(this);
this.handleRequestDelete = this.handleRequestDelete.bind(this);
this.handleTagChange = this.handleTagChange.bind(this);
this.state = { this.state = {
defValue: "", defValue: "",
title: "",
description: "",
shortDescription: "",
tags: [], tags: [],
screenshots: [], screenshots: [],
icon: [], icon: [],
@ -34,6 +42,62 @@ class GeneralInfo extends Component {
} }
} }
/**
* Set text field values to state.
* */
onTextFieldChange(event) {
let field = event.target.name;
console.log(event.target.value);
switch (field) {
case "appName": {
this.setState({name: event.target.value});
break;
}
case "appDescription": {
this.setState({description: event.target.value});
break;
}
case "appShortDescription": {
this.setState({shortDescription: event.target.value});
}
}
};
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
addTags(event) {
let tags = this.state.tags;
if (event.charCode === 13) {
event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""}, console.log(tags));
}
}
/**
* Set the value for tag.
* */
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(key) {
let chipData = this.state.tags;
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
chipData.splice(chipToDelete, 1);
this.setState({tags: chipData});
};
//TODO: Remove Console logs. //TODO: Remove Console logs.
render() { render() {
return ( return (
@ -44,13 +108,31 @@ class GeneralInfo extends Component {
<Label for="app-title"> <Label for="app-title">
<FormattedMessage id="Title" defaultMessage="Title"/>* <FormattedMessage id="Title" defaultMessage="Title"/>*
</Label> </Label>
<Input required type="text" name="appName" id="app-title"/> <Input required type="text" name="appName" id="app-title"
onChange={this.onTextFieldChange}/>
</FormGroup>
<FormGroup>
<Label for="app-short-description">
<FormattedMessage id="shortDescription" defaultMessage="shortDescription"/>*
</Label>
<Input
required
type="textarea"
name="appShortDescription"
id="app-short-description"
onChange={this.onTextFieldChange}
/>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label for="app-title"> <Label for="app-title">
<FormattedMessage id="Description" defaultMessage="Description"/>* <FormattedMessage id="Description" defaultMessage="Description"/>*
</Label> </Label>
<Input required type="textarea" multiline name="appName" id="app-title"/> <Input
required
type="textarea"
name="appDescription"
id="app-description"
onChange={this.onTextFieldChange}/>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label for="app-category"> <Label for="app-category">
@ -74,16 +156,23 @@ class GeneralInfo extends Component {
<Label for="app-tags"> <Label for="app-tags">
<FormattedMessage id="Tags" defaultMessage="Tags"/>* <FormattedMessage id="Tags" defaultMessage="Tags"/>*
</Label> </Label>
<Input required type="text" value={this.state.defValue} name="app-tags" id="app-tags"/> <Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
onChange={this.handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)}
/>
<div id="batch-content"> <div id="batch-content">
{this.state.tags.map(tag => { {this.state.tags.map(tag => {
return ( return (
<Badge <Chip
style={{margin: '0 2px 0 2px'}} key={tag.key}
value={tag.value} content={tag}
> onDelete={this.handleRequestDelete}
{tag.value} />
</Badge>
) )
} }
)} )}
@ -185,7 +274,8 @@ class GeneralInfo extends Component {
</div> </div>
</div> </div>
<div className="save-info"> <div className="save-info">
<Button>Save</Button> <Button className="custom-flat danger-flat">Cancel</Button>
<Button className="custom-raised primary">Save</Button>
</div> </div>
</form> </form>
</Row> </Row>

@ -16,7 +16,7 @@
* under the License. * under the License.
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Col, Row} from "reactstrap"; import {Button, Col, Row} from "reactstrap";
/** /**
* Platform component. * Platform component.
@ -47,10 +47,10 @@ class Platform extends Component {
</Row> </Row>
<hr/> <hr/>
<Row style={{fontSize: '12px'}}> <Row style={{fontSize: '20px'}}>
<Col xs="3"><a>{platform.enabled ? "Disable" : "Activate"}</a></Col> <Col xs="3"><Button className="custom-flat grey">{platform.enabled ? "Disable" : "Activate"}</Button></Col>
<Col xs="6"><a>Share With Tenants</a></Col> <Col xs="6"><Button className="custom-flat grey">Share With Tenants</Button></Col>
<Col xs="1"><i className="fw fw-down"></i></Col> <Col xs="1"><Button className="custom-flat grey rounded"><i className="fw fw-down"></i></Button></Col>
</Row> </Row>
</div> </div>
); );

@ -60,8 +60,8 @@ class PlatformCreate extends Component {
</FormGroup> </FormGroup>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button onClick={this.onCancelClick}>Cancel</Button> <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>Cancel</Button>
<Button color="primary">Create</Button> <Button className="custom-raised primary">Create</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</div> </div>

@ -54,7 +54,7 @@ class PlatformListing extends Component {
<div id="platform-listing"> <div id="platform-listing">
<Row> <Row>
<div className="create-platform"> <div className="create-platform">
<Button id="secondary-button" onClick={this.onPlatformCreateClick}> <Button className="custom-flat grey" onClick={this.onPlatformCreateClick}>
<i className="fw fw-add"></i>Create Platform <i className="fw fw-add"></i>Create Platform
</Button> </Button>
</div> </div>

Loading…
Cancel
Save