Skip to content

GitLab

Commit 4ba197b3 authored by Florent Chehab's avatar Florent Chehab
Browse files

MyBadge added and less grid => no more glitch

parent ec8fbab1
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 79 deletions
frontend/src/components/shared/MyBadge.js 0 → 100644
View file @ 4ba197b3
import React from 'react';
import Badge from '@material-ui/core/Badge';
// Function that renders the badge only if there is content to render.
export default function MyBadge(props) {
if (props.badgeContent) {
return (
<Badge {...props} >
{props.children}
</Badge>
)
} else {
return (props.children);
}
}
\ No newline at end of file
frontend/src/components/university/modules/GenericModule.js
View file @ 4ba197b3
......@@ -4,7 +4,6 @@ import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import Badge from '@material-ui/core/Badge';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
......@@ -17,6 +16,7 @@ import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
import LinkIcon from '@material-ui/icons/Link';
import FullScreenDialog from '../../shared/FullScreenDialog';
import MyBadge from '../../shared/MyBadge';
import red from '@material-ui/core/colors/red';
import orange from '@material-ui/core/colors/orange';
......@@ -61,6 +61,97 @@ const styles = theme => ({
},
})
function renderFirstRow() {
const { classes, title, automaticData, theme } = this.props;
let classEdit = "green",
classModer = "orange",
classVersion = "red";
if (automaticData) {
classEdit = "disabled";
classModer = "disabled";
classVersion = "disabled";
}
return (
<Grid container spacing={8}>
<Grid item xs>
<Typography variant='display1'> {title} </Typography>
<Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: 'right' }}>
<Tooltip title="Informations sur la modération" placement="top">
<div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip! */}
<MyBadge classes={{ badge: classes.badge }} badgeContent={null} color="secondary">
<IconButton aria-label="Modération" disabled={automaticData} className={classes.button}>
<VerifiedUserIcon className={classes[classModer]} />
</IconButton>
</MyBadge>
</div>
</Tooltip>
<Tooltip title="Informations sur les possibilités d'éditions" placement="top">
<div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip! */}
<IconButton aria-label="Éditer" className={classes.button} disabled={automaticData} onClick={this.handleClickOpenFullScreenDialog}>
<CreateIcon className={classes[classEdit]} />
</IconButton>
</div>
</Tooltip>
<Tooltip title="Informations sur les versions disponibles" placement="top">
<div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip! */}
<MyBadge classes={{ badge: classes.badge }} badgeContent={40} color="secondary">
<IconButton aria-label="Restorer" disabled={automaticData} className={classes.button}>
<SettingsBackRestoreIcon className={classes[classVersion]} />
</IconButton>
</MyBadge>
</div>
</Tooltip>
</Grid>
</Grid>
)
}
function renderUsefulLinks() {
const { classes, usefulLinks } = this.props;
const nbItems = usefulLinks.length;
if (nbItems == 0) {
return (<div></div>)
}
const s = nbItems > 1 ? "s" : "";
return (
<div>
<Typography variant='caption'> Source{s} :</Typography>
<div className={classes.rootLinks}>
{
usefulLinks.map((el, index) => {
return (
<Chip
key={index}
avatar={
<Avatar>
<LinkIcon />
</Avatar>
}
label={el.description}
className={classes.chip}
color="secondary"
onClick={() => open(el.url, '_blank')}
variant="outlined"
/>
)
})
}
</div>
</div>
)
}
class GenericModule extends React.Component {
state = {
......@@ -81,54 +172,12 @@ class GenericModule extends React.Component {
<div>
<FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog} />
<Paper className={classes.root} square={true}>
<Grid container spacing={8}>
<Grid item xs>
<Typography variant='display1'> {title} </Typography>
<Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: 'right' }}>
<Tooltip title="Informations sur la modération" placement="top">
<Badge classes={{ badge: classes.badge }} badgeContent={4} color="secondary">
<IconButton aria-label="Modération" className={classes.button}>
<VerifiedUserIcon className={classes.red} />
</IconButton>
</Badge>
</Tooltip>
<Tooltip title="Informations sur les possibilités d'éditions" placement="top">
<IconButton aria-label="Éditer" className={classes.button} onClick={this.handleClickOpenFullScreenDialog}>
<CreateIcon className={classes.green} />
</IconButton>
</Tooltip>
<Tooltip title="Informations sur les versions disponibles" placement="top">
<Badge classes={{ badge: classes.badge }} badgeContent={40} color="secondary">
<IconButton aria-label="Restorer" className={classes.button}>
<SettingsBackRestoreIcon className={classes.orange} />
</IconButton>
</Badge>
</Tooltip>
</Grid>
</Grid>
{renderFirstRow.bind(this)()}
<div>
{this.props.children}
</div>
<div className={classes.rootLinks}>
<Chip
avatar={
<Avatar>
<LinkIcon />
</Avatar>
}
label="Site de l'EPFL"
className={classes.chip}
color="secondary"
onClick={() => console.log("test")}
variant="outlined"
/>
</div>
{renderUsefulLinks.bind(this)()}
</Paper>
</div>
)
......@@ -137,7 +186,9 @@ class GenericModule extends React.Component {
GenericModule.defaultProps = {
title: "Titre du module"
title: "Titre du module",
automaticData: false,
usefulLinks: []
};
export default withStyles(styles, { withTheme: true })(GenericModule);
\ No newline at end of file
frontend/src/components/university/modules/UniversitySemestersDates.js
View file @ 4ba197b3
......@@ -45,7 +45,7 @@ class UniversitySemestersDates extends React.Component {
render() {
const { classes, theme } = this.props;
return (
<GenericModule title={"Date des semestres"}>
<GenericModule title={"Date des semestres"} usefulLinks={[{ description: "Site de l'EPFL", url: "https://epfl.ch" }]}>
<div className={classes.root}>
<Table >
<TableHead>
......@@ -71,7 +71,7 @@ class UniversitySemestersDates extends React.Component {
<TableRow key={2}>
<TableCell className={classes.tableCell} component="td">
<div className={classes.content}>
<LocalFloristIcon color='disabled' className={classes.icon}/>
<LocalFloristIcon color='disabled' className={classes.icon} />
<div>Printemps</div>
</div>
</TableCell>
......@@ -82,8 +82,8 @@ class UniversitySemestersDates extends React.Component {
</TableBody>
</Table>
</div>
<Markdown source={comment}/>
</GenericModule>
<Markdown source={comment} />
</GenericModule >
)
}
}
......
frontend/src/components/university/tabs/GeneralInfoTab.js
View file @ 4ba197b3
......@@ -15,48 +15,53 @@ import UniversitySemestersDates from '../modules/UniversitySemestersDates';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
const styles = theme => ({
root: { flexGrow: 1, },
root1: {
display: 'flex',
width: "90%",
marginLeft: "auto",
marginRight: "auto"
},
root2: {
display: 'flex',
width: "100%"
},
});
class GeneralInfo extends MyComponent {
myRender() {
const { classes } = this.props;
const { classes, theme } = this.props;
// Resizing with the grid was causing weird gaps so we rerender depending on the width
if (isWidthUp('lg', this.props.width)) {
return (
<div className={classes.root}>
<Grid container spacing={16} justify='center' alignItems="flex-start" >
<div className={classes.root1}>
<Grid item lg={7}>
<Grid className={classes.root} container spacing={16} direction='column' >
<Grid item xs>
<UniversityGeneral />
</Grid>
<Grid item xs>
<GenericModule title={"DRI"} />
</Grid>
<div style={{ flexGrow: 6, paddingRight: 2 * theme.spacing.unit }}>
<Grid container direction='column' >
<Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }} >
<UniversityGeneral />
</Grid>
<Grid item xs>
<GenericModule title={"DRI"} />
</Grid>
</Grid>
<Grid item lg={5}>
<Grid className={classes.root} container spacing={16} direction='column' >
<Grid item xs>
<UniversitySemestersDates />
</Grid>
<Grid item xs>
<GenericModule title={"Offres de départs"} />
</Grid>
</div>
<div style={{ flexGrow: 4 }} >
<Grid container direction='column' >
<Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }}>
<UniversitySemestersDates />
</Grid>
<Grid item xs>
<GenericModule title={"Offres de départs"} automaticData={true} />
</Grid>
</Grid>
</div>
</Grid>
<Lorem count={20} />
</div>
);
} else {
return (
<div className={classes.root}>
<div className={classes.root2}>
<Grid container spacing={16} >
<Grid item xs={12}>
......@@ -69,12 +74,11 @@ class GeneralInfo extends MyComponent {
<UniversitySemestersDates />
</Grid>
<Grid item xs={12}>
<GenericModule title={"Offres de départs"} />
<GenericModule title={"Offres de départs"} automaticData={true} />
</Grid>
</Grid>
<Lorem count={20} />
</div>
);
}
......@@ -89,5 +93,5 @@ class GeneralInfo extends MyComponent {
export default compose(
withWidth({ noSSR: true }),
withStyles(styles)
withStyles(styles, { withTheme: true })
)(GeneralInfo);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment