CCC/spaceapi-ccc-de
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix styles

Browse source
This commit is contained in:
gidsi 2019-04-05 23:53:16 +02:00
commit 7ac5da8356
No known key found for this signature in database
GPG key ID: B47291090A6E5604
3 changed files with 109 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/components/EventList.jsx
View file

@ -1,80 +1,3 @@
/* import React from 'react';
import { connect } from 'react-redux';
// import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import PropTypes from 'prop-types';
import { AutoSizer, Column, SortDirection, Table } from 'react-virtualized';
import InfoIcon from '@material-ui/icons/InfoOutlined';
import { actions as calendarActions, eventStruct } from '../redux/modules/calendar';
import {actions as spaceDataActions, spacedataStruct} from '../redux/modules/spacedata';
class EventList extends React.Component {
static propTypes = {
events: PropTypes.arrayOf(
PropTypes.shape(eventStruct),
),
fetchCalendars: PropTypes.func,
spacedata: spacedataStruct,
};
static defaultProps = {
events: [],
};
componentWillMount() {
this.props.fetchCalendars();
}
formatDate = date => (date.format('DD.MM.YYYY'));
formatTime = date => (date.format('HH:mm'));
render() {
return (
<Table headerRenderer={()=>{}}>
<TableBody>
{this.props.events
.filter(event =>
(
this.props.spacedata.filter.indexOf(event.space) !== -1
|| this.props.spacedata.filter.length === 0
)
)
.map(event => (
<TableRow
key={event.importId + event.start.toLocaleString() + event.description}
>
<TableCell style={{ width: '80px', padding: '5px' }}>
{this.formatDate(event.start)}
</TableCell>
<TableCell style={{ width: '55px', padding: '5px' }}>
{event.wholeDayEvent ? null : this.formatTime(event.start)}
</TableCell>
<TableCell>
{event.summary || event.description}
</TableCell>
<TableCell>
{event.space}
</TableCell>
<TableCell style={{ textAlign: 'right' }}>
{event.url && <a href={event.url}>
<InfoIcon style={{ cursor: 'pointer' }} />
</a>}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EventList);
*/
import React from 'react';
import { connect } from 'react-redux';
import TableCell from '@material-ui/core/TableCell';
@ -89,23 +12,26 @@ import { AutoSizer, Column, Table } from 'react-virtualized';
const styles = theme => ({
table: {
fontFamily: theme.typography.fontFamily,
border: 0,
},
flexContainer: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
},
tableRow: {
border: 0,
},
tableRow: {},
tableRowHover: {
'&:hover': {
backgroundColor: theme.palette.grey[600],
},
},
tableRowEven: {
backgroundColor: theme.palette.grey[700],
},
tableCell: {
flex: 1,
color: '#fff',
border: 0,
},
noClick: {
cursor: 'initial',
@ -114,10 +40,11 @@ const styles = theme => ({
class MuiVirtualizedTable extends React.PureComponent {
getRowClassName = ({ index }) => {
const { classes, rowClassName, onRowClick } = this.props;
const { classes, rowClassName } = this.props;
return classNames(classes.tableRow, classes.flexContainer, rowClassName, {
[classes.tableRowHover]: index !== -1 && onRowClick != null,
[classes.tableRowHover]: index !== -1,
[classes.tableRowEven]: index % 2,
});
};

66
frontend/src/components/SpaceApiInput.jsx
View file

@ -2,11 +2,68 @@ import React from 'react';
import request from 'superagent';
import TextField from '@material-ui/core/TextField';
import FloatingActionButton from '@material-ui/core/Fab';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import ContentAdd from '@material-ui/icons/AddOutlined';
import Snackbar from '@material-ui/core/Snackbar';
import PropTypes from 'prop-types';
import InfoIcon from '@material-ui/icons/Info';
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
import { withStyles } from '@material-ui/core/styles';
import config from '../api/config';
const styles = theme => ({
table: {
fontFamily: theme.typography.fontFamily,
border: 0,
},
flexContainer: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
},
snackbar: {
backgroundColor: theme.palette.grey[700],
width: '100%',
},
});
class MuiSnackbarContent extends React.PureComponent {
render() {
console.log(this.props.classes);
return (
<SnackbarContent
aria-describedby="client-snackbar"
className={this.props.classes.snackbar}
message={
<div>
<InfoIcon/>
<div style={{ paddingLeft: '10px', paddingTop: '3px', float: 'right' }} >
Die URL wurde hinzugefuegt und befindet sich nun im review.
</div>
</div>
}
action={[
<IconButton
key="close"
aria-label="Close"
color="inherit"
onClick={() => this.setState({open: false})}
>
<CloseIcon/>
</IconButton>,
]}
/>
);
}
}
MuiSnackbarContent.propTypes = {
classes: PropTypes.object.isRequired,
};
const MySnackbarContent = withStyles(styles)(MuiSnackbarContent);
class SpaceApiInput extends React.Component {
static propTypes = {
style: PropTypes.shape({}),
@ -86,19 +143,20 @@ class SpaceApiInput extends React.Component {
/>
<FloatingActionButton
style={{ marginLeft: '20px' }}
mini
onClick={this.handleButtonClick}
>
<ContentAdd />
</FloatingActionButton>
</div>
<Snackbar
variant={'info'}
open={this.state.open}
message={'Die URL wurde hinzugefuegt und befindet sich nun im review.'}
autoHideDuration={4000}
style={{ minWidth: '490px' }}
onRequestClose={() => this.setState({ open: false })}
/>
onClose={() => this.setState({ open: false })}
>
<MySnackbarContent />
</Snackbar>
</div>
);
}

43
frontend/src/components/SpaceList.jsx
View file

@ -4,7 +4,38 @@ import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { spacedataStruct } from '../redux/modules/spacedata';
import {withStyles} from "@material-ui/core";
const styles = theme => ({
table: {
fontFamily: theme.typography.fontFamily,
border: 0,
},
flexContainer: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
},
tableRow: {},
tableRowHover: {
'&:hover': {
backgroundColor: theme.palette.grey[600],
},
},
tableRowEven: {
backgroundColor: theme.palette.grey[700],
},
tableCell: {
flex: 1,
color: '#fff',
border: 0,
},
noClick: {
cursor: 'initial',
},
});
export class SpaceList extends React.Component {
static propTypes = {
@ -31,12 +62,14 @@ export class SpaceList extends React.Component {
<Table>
<TableBody>
{items
.map(space => (
<TableRow key={space.space}>
<TableCell style={{ color: '#fff' }}>
.map((space, index) => (
<TableRow key={space.space} className={classNames({
[this.props.classes.tableRowEven]: index % 2
})} >
<TableCell style={{ color: '#fff', border: 0 }}>
{space.space}
</TableCell>
<TableCell>
<TableCell style={{ border: 0 }}>
<a
href={space.url}
style={{ textDecoration: 'none', color: 'white' }}
@ -54,4 +87,4 @@ export class SpaceList extends React.Component {
}
}
export default SpaceList;
export default withStyles(styles)(SpaceList);