From 594996b3fed10d53c70d290e0da8d4b50544fbe0 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Thu, 5 Oct 2017 03:04:23 +0530 Subject: [PATCH] Modified Chip component based on Material Design specs. --- .../publisher/public/themes/default/chip.css | 48 ------------- .../src/components/UIComponents/Chip/Chip.jsx | 22 +++++- .../src/components/UIComponents/Chip/chip.css | 67 +++++++++++++++++++ 3 files changed, 86 insertions(+), 51 deletions(-) delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css deleted file mode 100644 index d52e34b9f2..0000000000 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css +++ /dev/null @@ -1,48 +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. - */ - -.chip { - display: inline-block; - padding: 0 25px; - height: 50px; - font-size: 16px; - line-height: 50px; - border-radius: 25px; - background-color: #f1f1f1; -} - -.chip img { - float: left; - margin: 0 10px 0 -25px; - height: 50px; - width: 50px; - border-radius: 50%; -} - -.close-btn { - padding-left: 10px; - color: #888; - font-weight: bold; - float: right; - font-size: 20px; - cursor: pointer; -} - -.close-btn:hover { - color: #000; -} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx index d614564b61..957686b4c3 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx @@ -16,20 +16,36 @@ * under the License. */ +import PropTypes from 'prop-types'; import React, {Component} from 'react'; import './chip.css'; class Chip extends Component { + constructor() { + super(); + this.onDeleteClick = this.onDeleteClick.bind(this); + } + + onDeleteClick() { + this.props.onDelete(this.props.content.key); + } + render() { return (
- {this.props.image?Person:
} - {this.props.text} - × +
{this.props.content.value}
+
+ +
) } } +Chip.propTypes = { + onDelete: PropTypes.func, + content: PropTypes.object +}; + export default Chip; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css new file mode 100644 index 0000000000..7d8962b287 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css @@ -0,0 +1,67 @@ +/* + * 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. + */ + +/* + * Chip component with the material design specs. + * Chip with a close button. + * (-12px-{text (Roboto-Regular 13px)}-4px-{close button}-4px-) + */ +.chip { + display: flex; + height: 32px; + background-color: #f1f1f1; + border-radius: 16px; + padding: 3px; + border: 10px; +} + +.chip-text { + padding-top: 4px; + font-family: "Roboto-Regular"; + font-size: 13px; + font-weight: 400; + color: rgba(0, 0, 0, 0.87); + line-height: 20px; + padding-left: 12px; + padding-right: 4px; + user-select: none; + white-space: nowrap; +} + +.chip-close-btn { + padding-left: 7px; + padding-bottom: 6px; + border-radius: 50%; + display: inline-block; + height: 24px; + width: 24px; + user-select: none; + transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; + cursor: pointer; + margin-right: 4px; +} + +.chip-close-btn i { + font-size: 10px; + color: rgba(0, 0, 0, 0.258824); + fill: rgba(0, 0, 0, 0.258824); +} + +.chip-close-btn:hover { + background-color: #e1e1e1; +} \ No newline at end of file