From adad9b307fac2faef7b35aaa4d4c0e699d8cc3e0 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Thu, 5 Oct 2017 03:05:05 +0530 Subject: [PATCH] Moved CSS files back to components. --- .../UIComponents/AppImage}/appImage.css | 1 - .../UIComponents/DataTable/DataTable.jsx | 91 ++----------------- .../DataTable/DataTableHeader.jsx | 33 +++---- .../UIComponents/DataTable/DataTableRow.jsx | 35 +------ .../UIComponents/DataTable/HeaderCell.js | 80 ++++++++++++++++ .../UIComponents/Drawer}/drawer.css | 16 ++-- .../FloatingButton}/floatingButton.css | 20 ++-- .../ImageUploader}/imageUploader.css | 0 .../Notifications}/notification.css | 0 .../UIComponents/Switch}/switch.css | 0 10 files changed, 119 insertions(+), 157 deletions(-) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{public/themes/default => src/components/UIComponents/AppImage}/appImage.css (98%) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{public/themes/default => src/components/UIComponents/Drawer}/drawer.css (90%) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{public/themes/default => src/components/UIComponents/FloatingButton}/floatingButton.css (74%) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{public/themes/default => src/components/UIComponents/ImageUploader}/imageUploader.css (100%) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{public/themes/default => src/components/UIComponents/Notifications}/notification.css (100%) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{public/themes/default => src/components/UIComponents/Switch}/switch.css (100%) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css similarity index 98% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css index 48bcc9e756b..2747960b965 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css @@ -31,7 +31,6 @@ height: auto; transition: .5s ease; backface-visibility: hidden; - width: 100%; } .btn-content { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx index 1ccd6f433dd..7869a8fe74b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx @@ -16,13 +16,7 @@ * under the License. */ -import Theme from '../../../theme'; -import PropTypes from 'prop-types'; import React, {Component} from 'react'; -import DataTableRow from './DataTableRow'; -import DataTableHeader from './DataTableHeader'; -import RaisedButton from 'material-ui/RaisedButton'; -import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table'; /** * The Custom Table Component. @@ -53,8 +47,6 @@ class DataTable extends Component { constructor() { super(); - this.handleRowClick = this.handleRowClick.bind(this); - this.handleBtnClick = this.handleBtnClick.bind(this); this.state = { data: [], headers: [], @@ -62,92 +54,21 @@ class DataTable extends Component { this.scriptId = "data-table" }; - componentWillMount() { - console.log("Will mount", this.props.data); //TODO: Remove this - this.setState({data: this.props.data, headers: this.props.headers}, Theme.insertThemingScripts(this.scriptId)); - - /** - *Loading the theme files based on the the user-preference. - */ - } - - componentWillUnmount() { - Theme.removeThemingScripts(this.scriptId); - } - - shouldComponentUpdate(nextProps, nextState) { - if (!nextProps.data) { - this.setState({data: nextState.data}); - return true; - } - this.setState({data: nextProps.data}); - return true; - } - /** * Triggers when user click on table row. * This method invokes the parent method handleRowClick, which is passed via props. * */ - handleRowClick(id) { - this.props.handleRowClick(id); - } - - handleBtnClick(id) { - this.props.onAppEditClick(id); - } render() { - const {data, headers} = this.state; - - //TODO: Remove this - console.log(data); - - let noDataContent = null; - - if (this.props.noDataMessage.type === 'button') { - noDataContent =
- } + return ( +
+ {this.props.children} +
+ ) - if (data) { - return ( - - - {headers.map((header) => { - return ( - - )} - )} - - - - {data.map((dataItem) => { - return ( - - ) - })} - -
) - } - return (
{noDataContent}
); } } -DataTable.prototypes = { - data: PropTypes.arrayOf(Object), - headers: PropTypes.arrayOf(Object), - sortData: PropTypes.func, - handleRowClick: PropTypes.func, - noDataMessage: PropTypes.object -}; +DataTable.prototypes = {}; export default DataTable; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx index 52fb8bb771e..bad2de74508 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx @@ -21,6 +21,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import FlatButton from 'material-ui/FlatButton'; import {TableHeaderColumn} from 'material-ui/Table'; +import {Col, Row} from "reactstrap"; /** * Data Table header component. @@ -55,33 +56,25 @@ class DataTableHeader extends Component { } render() { - let headerCell = null; - - /** - * If the header is sortable, create a button with onClick handler. - * else create a span element with label as the table header. - * */ - if (this.props.header.sortable) { - headerCell = - - } else { - headerCell = {this.props.header.label}; - } + /*margin-top: 30px + * margin-bottom: 10px + * */ return ( - - {headerCell} - + + {this.props.headers.map(header => { + + let headerStyle = header.size; + + return {header.label} + })} + ); } } DataTableHeader.prototypes = { - header: PropTypes.object + headers: PropTypes.array }; export default DataTableHeader; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx index 9046c2cbb44..7e250b0e43c 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx @@ -23,6 +23,7 @@ import IconButton from 'material-ui/IconButton'; import Create from 'material-ui/svg-icons/content/create' import {TableRow, TableRowColumn} from 'material-ui/Table'; import Avatar from 'material-ui/Avatar'; +import {Row} from "reactstrap"; /** @@ -68,38 +69,12 @@ class DataTableRow extends Component { render() { const {dataItem} = this.state; + + //height: 62px return ( - - - {dataItem.name} - - {Object.keys(dataItem).map((key) => { - if (key !== 'id') { - return ( - - {dataItem[key]} - ) - } + - })} - - - - - - + ); } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js new file mode 100644 index 00000000000..9462ec8e5bb --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js @@ -0,0 +1,80 @@ +/* + * 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 Theme from '../../../theme'; +import PropTypes from 'prop-types'; +import React, {Component} from 'react'; +import FlatButton from 'material-ui/FlatButton'; +import {TableHeaderColumn} from 'material-ui/Table'; +import {Col, Row} from "reactstrap"; + +/** + * Data Table header component. + * This component creates the header elements of the table. + * */ +class HeaderCell extends Component { + + constructor() { + super(); + this.tableHeaderClick = this.tableHeaderClick.bind(this); + this.scriptId = "data-table"; + } + + componentWillMount() { + /** + *Loading the theme files based on the the user-preference. + */ + Theme.insertThemingScripts(this.scriptId); + } + + componentWillUnmount() { + Theme.removeThemingScripts(this.scriptId); + + } + + /** + * The onClick function of the table header. + * Invokes the function passed in the header object. + * */ + tableHeaderClick() { + this.props.header.sort(); + } + + render() { + /*margin-top: 30px + * margin-bottom: 10px + * */ + + return ( + + {this.props.headers.map(header => { + + let headerStyle = header.size; + + return {header.label} + })} + + ); + } +} + +DataTableHeader.prototypes = { + headers: PropTypes.array +}; + +export default HeaderCell; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css similarity index 90% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css index eea79c5b694..37fabd76b68 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css @@ -25,21 +25,19 @@ right: 0%; background-color: #ffffff; overflow-x: hidden; /* Disable horizontal scroll */ - padding-top: 60px; /* Place content 60px from the top */ + padding: 60px 0px 0 5px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } -.app-view-drawer a { +.drawer-close-btn { padding: 8px 8px 8px 32px; text-decoration: none; - font-size: 25px; color: #818181; display: block; transition: 0.3s } - /* Position and style the close button (top right corner) */ .app-view-drawer .closebtn { position: absolute; @@ -49,9 +47,8 @@ margin-left: 50px; } -.drawer-close-btn { - height: 40px; - width: 30px; +.drawer-close-btn i { + font-size: 14px; } .drawer-close-btn:hover { @@ -67,7 +64,8 @@ /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} + .sidenav { + padding-top: 15px; + } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css similarity index 74% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css index 5cc8756320f..1f483c87133 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css @@ -16,23 +16,24 @@ * under the License. */ +/* + * Material design based Floating button. + */ .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); + text-align: center; + box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px } .btn-circle i { - position: absolute; - margin-top: 37%; - margin-left: 37%; + margin-top: 40%; } .small { - height: 50px; - width: 50px; + height: 56px; + width: 56px; } .medium { @@ -40,11 +41,6 @@ width: 100px; } -.btn-circle:hover { - cursor: pointer; - background-color: rgb(255, 93, 2); -} - .primary { background-color: blue; } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/imageUploader.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css similarity index 100% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/imageUploader.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/notification.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css similarity index 100% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/notification.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/switch.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css similarity index 100% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/switch.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css