community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added material design button styles.

Browse Source
This commit is contained in:
Menaka Jayawardena 2017-10-05 21:39:38 +05:30
parent 8f1c09f779
commit 6b944a4e9f
9 changed files with 124 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,7 +249,7 @@ class ApplicationListing extends Component {
className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name}
</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>
</Button>
</Col>

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

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

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

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

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

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

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

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

112
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
View File

@ -17,16 +17,24 @@
*/
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 {FormattedMessage} from 'react-intl';
import Chip from "../../../UIComponents/Chip/Chip";
class GeneralInfo extends Component {
constructor() {
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 = {
defValue: "",
title: "",
description: "",
shortDescription: "",
tags: [],
screenshots: [],
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.
render() {
return (
@ -44,13 +108,31 @@ class GeneralInfo extends Component {
<Label for="app-title">
<FormattedMessage id="Title" defaultMessage="Title"/>*
</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>
<Label for="app-title">
<FormattedMessage id="Description" defaultMessage="Description"/>*
</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>
<Label for="app-category">
@ -74,16 +156,23 @@ class GeneralInfo extends Component {
<Label for="app-tags">
<FormattedMessage id="Tags" defaultMessage="Tags"/>*
</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">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
>
{tag.value}
</Badge>
<Chip
key={tag.key}
content={tag}
onDelete={this.handleRequestDelete}
/>
)
}
)}
@ -185,7 +274,8 @@ class GeneralInfo extends Component {
</div>
</div>
<div className="save-info">
<Button>Save</Button>
<Button className="custom-flat danger-flat">Cancel</Button>
<Button className="custom-raised primary">Save</Button>
</div>
</form>
</Row>

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

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

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

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

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

@ -54,7 +54,7 @@ class PlatformListing extends Component {
<div id="platform-listing">
<Row>
<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
</Button>
</div>