From da146bfb07ace9641f09d679a5aab9cc9c788ed0 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Thu, 28 Sep 2017 15:25:07 +0530
Subject: [PATCH] Created Floating action button component.

---
 .../FloatingButton/FloatingButton.jsx         | 45 +++++++++++++++++
 .../FloatingButton/floatingButton.css         | 49 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
new file mode 100644
index 00000000000..59d9a50b56e
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
@@ -0,0 +1,45 @@
+/*
+ * 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';
+import './floatingButton.css';
+
+class FloatingButton extends Component {
+
+    handleClick(event) {
+        console.log("click");
+        this.props.onClick(event);
+    }
+
+    render() {
+        let classes = 'btn-circle ' + this.props.className;
+        return (
+            <div className={classes} onClick={this.handleClick.bind(this)}>
+                <i className="fw fw-add"></i>
+            </div>
+        )
+    }
+}
+
+FloatingButton.propTypes = {
+    classNames: PropTypes.string,
+    onClick: PropTypes.func
+};
+
+export default FloatingButton;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
new file mode 100644
index 00000000000..a4257ac2cda
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+.btn-circle {
+    color: white;
+    position: relative;
+    background-color: #e65100;
+    border-radius: 50%;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.btn-circle i {
+    position: absolute;
+    margin-top: 37%;
+    margin-left: 37%;
+}
+
+.small {
+    height: 50px;
+    width: 50px;
+}
+
+.medium {
+    height: 100px;
+    width: 100px;
+}
+
+.btn-circle:hover {
+    cursor: pointer;
+}
+
+.primary {
+    background-color: blue;
+}