From 6b944a4e9f8ccd418b16ad465a226b59a4eea2ee Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Thu, 5 Oct 2017 21:39:38 +0530
Subject: [PATCH] Added material design button styles.

---
 .../Application/ApplicationListing.jsx        |   2 +-
 .../Application/Create/CreateSteps/Step1.jsx  |   8 +-
 .../Application/Create/CreateSteps/Step2.jsx  |   6 +-
 .../Application/Create/CreateSteps/Step3.jsx  |   6 +-
 .../Application/Create/CreateSteps/Step4.jsx  |   6 +-
 .../Edit/GenenralInfo/GeneralInfo.jsx         | 112 ++++++++++++++++--
 .../src/components/Platform/Platform.jsx      |  10 +-
 .../components/Platform/PlatformCreate.jsx    |   4 +-
 .../components/Platform/PlatformListing.jsx   |   2 +-
 9 files changed, 124 insertions(+), 32 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index a3e5d3571ca..f830c880580 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -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>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index 8c1a5dce1d7..ce5fc7f1e12 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -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>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
index d6d627cee04..f25c0a17c81 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
@@ -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>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
index 76384d2214e..76cce9508b5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
@@ -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>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
index 318a7116b0b..9672c989867 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
@@ -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>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
index 8e252a01d8c..521f91ef1bc 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
@@ -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>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
index 8548b7ab9f8..e6c929abc7c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
@@ -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>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index 6d8d3162d6b..28460613f39 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -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>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 147677a3c17..94f4c106198 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -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>