mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Moved CSS files back to components.
This commit is contained in:
Menaka Jayawardena
parent
594996b3fe
commit
adad9b307f
@ -31,7 +31,6 @@
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
@ -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;
|
||||
return (
|
||||
<div className="data-table">
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
|
||||
//TODO: Remove this
|
||||
console.log(data);
|
||||
|
||||
let noDataContent = null;
|
||||
|
||||
if (this.props.noDataMessage.type === 'button') {
|
||||
noDataContent = <div><RaisedButton label={this.props.noDataMessage.text}/></div>
|
||||
}
|
||||
|
||||
if (data) {
|
||||
return (<Table
|
||||
selectable={false}>
|
||||
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
|
||||
<TableRow>
|
||||
{headers.map((header) => {
|
||||
return (
|
||||
<DataTableHeader
|
||||
key={header.data_id}
|
||||
className="datatableRowColumn"
|
||||
header={header}
|
||||
/>
|
||||
)}
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((dataItem) => {
|
||||
return (
|
||||
<DataTableRow
|
||||
key={dataItem.id}
|
||||
dataItem={dataItem}
|
||||
handleButtonClick={this.handleBtnClick}
|
||||
handleClick={this.handleRowClick}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>)
|
||||
}
|
||||
return (<div>{noDataContent}</div>);
|
||||
}
|
||||
}
|
||||
|
||||
DataTable.prototypes = {
|
||||
data: PropTypes.arrayOf(Object),
|
||||
headers: PropTypes.arrayOf(Object),
|
||||
sortData: PropTypes.func,
|
||||
handleRowClick: PropTypes.func,
|
||||
noDataMessage: PropTypes.object
|
||||
};
|
||||
DataTable.prototypes = {};
|
||||
|
||||
export default DataTable;
|
||||
|
||||
@ -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 =
|
||||
<FlatButton
|
||||
label={this.props.header.label}
|
||||
onClick={this.tableHeaderClick}
|
||||
className="sortableHeaderCell"
|
||||
/>
|
||||
} else {
|
||||
headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
|
||||
}
|
||||
/*margin-top: 30px
|
||||
* margin-bottom: 10px
|
||||
* */
|
||||
|
||||
return (
|
||||
<TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn">
|
||||
{headerCell}
|
||||
</TableHeaderColumn>
|
||||
<Row className="data-table-header">
|
||||
{this.props.headers.map(header => {
|
||||
|
||||
let headerStyle = header.size;
|
||||
|
||||
return <Col className={headerStyle}>{header.label}</Col>
|
||||
})}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DataTableHeader.prototypes = {
|
||||
header: PropTypes.object
|
||||
headers: PropTypes.array
|
||||
};
|
||||
|
||||
export default DataTableHeader;
|
||||
|
||||
@ -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;
|
||||
return (
|
||||
<TableRow
|
||||
key={this.props.key}
|
||||
onClick={this.handleClick.bind(this)}
|
||||
>
|
||||
<TableRowColumn
|
||||
className="datatableRowColumn"
|
||||
key={Math.random()}
|
||||
>
|
||||
<Avatar>{dataItem.name}</Avatar>
|
||||
</TableRowColumn>
|
||||
{Object.keys(dataItem).map((key) => {
|
||||
if (key !== 'id') {
|
||||
return (
|
||||
<TableRowColumn
|
||||
className="datatableRowColumn"
|
||||
key={key}
|
||||
>
|
||||
{dataItem[key]}
|
||||
</TableRowColumn>)
|
||||
}
|
||||
|
||||
})}
|
||||
<TableRowColumn
|
||||
className="datatableRowColumn"
|
||||
key={dataItem.id}
|
||||
>
|
||||
<IconButton id={dataItem.id} onClick={this.handleBtnClick.bind(this)}>
|
||||
<Create id={dataItem.id}/>
|
||||
</IconButton>
|
||||
</TableRowColumn>
|
||||
</TableRow>
|
||||
//height: 62px
|
||||
return (
|
||||
<Row className="data-table-row">
|
||||
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Row className="data-table-header">
|
||||
{this.props.headers.map(header => {
|
||||
|
||||
let headerStyle = header.size;
|
||||
|
||||
return <Col className={headerStyle}>{header.label}</Col>
|
||||
})}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DataTableHeader.prototypes = {
|
||||
headers: PropTypes.array
|
||||
};
|
||||
|
||||
export default HeaderCell;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user