Commit a4804b04 authored by Florent Chehab's avatar Florent Chehab
Browse files

Introduction of more modules and handling of importance level

parent 4ba197b3
...@@ -3,6 +3,8 @@ import { withStyles } from '@material-ui/core/styles'; ...@@ -3,6 +3,8 @@ import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import classNames from 'classnames';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
...@@ -14,6 +16,7 @@ import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore'; ...@@ -14,6 +16,7 @@ import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
import CreateIcon from '@material-ui/icons/Create'; import CreateIcon from '@material-ui/icons/Create';
import VerifiedUserIcon from '@material-ui/icons/VerifiedUser'; import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
import LinkIcon from '@material-ui/icons/Link'; import LinkIcon from '@material-ui/icons/Link';
import NotificationImportantIcon from '@material-ui/icons/NotificationImportant';
import FullScreenDialog from '../../shared/FullScreenDialog'; import FullScreenDialog from '../../shared/FullScreenDialog';
import MyBadge from '../../shared/MyBadge'; import MyBadge from '../../shared/MyBadge';
...@@ -59,8 +62,59 @@ const styles = theme => ({ ...@@ -59,8 +62,59 @@ const styles = theme => ({
chip: { chip: {
margin: theme.spacing.unit, margin: theme.spacing.unit,
}, },
titleContainer:{
display: "flex",
alignItems: "center",
},
titleIcon: {
paddingRight: theme.spacing.unit,
fontSize: theme.typography.display1.fontSize
}
}) })
function renderTitle() {
const { title, classes, importanceLevel } = this.props;
if (title) {
if (importanceLevel) {
let c = classNames(classes.titleIcon);
if (importanceLevel == "IMPORTANT"){
c = classNames(classes.titleIcon, classes.red)
} else if (importanceLevel == "important"){
c = classNames(classes.titleIcon, classes.orange)
}
return (
<div className={classes.titleContainer}>
<NotificationImportantIcon className={c} />
<Typography variant='display1'>{title}</Typography>
</div>
)
} else {
return (
<Typography variant='display1'>{title}</Typography>
)
}
} else {
return (<div></div>)
}
}
function renderUpdateInfo() {
const { automaticData } = this.props;
if (automaticData) {
return (
<Typography variant='caption'>Dernière mise à jour le 08/09/2018 à 15h20</Typography>
)
} else {
return (
<Typography variant='caption'>Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
)
}
}
function renderFirstRow() { function renderFirstRow() {
const { classes, title, automaticData, theme } = this.props; const { classes, title, automaticData, theme } = this.props;
...@@ -74,11 +128,12 @@ function renderFirstRow() { ...@@ -74,11 +128,12 @@ function renderFirstRow() {
classVersion = "disabled"; classVersion = "disabled";
} }
return ( return (
<Grid container spacing={8}> <Grid container spacing={8}>
<Grid item xs> <Grid item xs>
<Typography variant='display1'> {title} </Typography> {renderTitle.bind(this)()}
<Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography> {renderUpdateInfo.bind(this)()}
</Grid> </Grid>
<Grid item xs={4} style={{ textAlign: 'right' }}> <Grid item xs={4} style={{ textAlign: 'right' }}>
...@@ -186,7 +241,8 @@ class GenericModule extends React.Component { ...@@ -186,7 +241,8 @@ class GenericModule extends React.Component {
GenericModule.defaultProps = { GenericModule.defaultProps = {
title: "Titre du module", title: null,
importanceLevel: null,
automaticData: false, automaticData: false,
usefulLinks: [] usefulLinks: []
}; };
......
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Divider from '@material-ui/core/Divider';
const styles = theme => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
});
function SimpleExpansionPanel(props) {
const { classes } = props;
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}><em>En lire d'avantage...</em> </Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Divider />
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
SimpleExpansionPanel.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleExpansionPanel);
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import MyComponent from '../../MyComponent';
import TextLink from '../../other/TextLink';
import GenericModule from './GenericModule';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import AddIcon from '@material-ui/icons/Add';
import green from '@material-ui/core/colors/green';
const styles = theme => ({
root: {
padding: 3 * theme.spacing.unit,
flexGrow: 1,
},
green: {
color: green.A200,
},
button: {
width: 5 * theme.spacing.unit,
height: 5 * theme.spacing.unit,
boxShadow: 'none',
marginBottom: theme.spacing.unit,
},
});
class UniversityDri extends React.Component {
render() {
const { classes, theme } = this.props;
return (
<Paper className={classes.root}>
<Grid container spacing={8} alignItems='center'>
<Grid item xs>
<Typography variant='title' align='center' color="textSecondary"><em>Informations émanant de la DRI</em></Typography>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
<Tooltip title="Ajouter un élément" placement="top">
<div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip! */}
<Button variant='fab' mini aria-label="Ajouter un élément DRI" disabled={false} style={{ backgroundColor: green.A700 }} className={classes.button}>
<AddIcon />
</Button>
</div>
</Tooltip>
</Grid>
</Grid>
<Divider />
<GenericModule title={"DRI"} importanceLevel={'IMPORTANT'}/>
</Paper>
)
}
}
export default withStyles(styles, { withTheme: true })(UniversityDri);
...@@ -30,7 +30,7 @@ class UniversityGeneral extends React.Component { ...@@ -30,7 +30,7 @@ class UniversityGeneral extends React.Component {
</Grid> </Grid>
<Grid item xs> <Grid item xs>
<Typography variant='headline'> École Polytechnique Fédérale de Lausanne</Typography> <Typography variant='headline'> École Polytechnique Fédérale de Lausanne</Typography>
<Typography variant='title'> EPFL</Typography> <Typography variant='title'>EPFL</Typography>
<Divider /> <Divider />
<Typography variant='subheading'>Lausanne, Suisse</Typography> <Typography variant='subheading'>Lausanne, Suisse</Typography>
<Typography variant='body1'> Site internet : <TextLink href={"https://www.epfl.ch"}> www.epfl.ch </TextLink> </Typography> <Typography variant='body1'> Site internet : <TextLink href={"https://www.epfl.ch"}> www.epfl.ch </TextLink> </Typography>
......
...@@ -12,6 +12,7 @@ import Lorem from 'react-lorem-component'; ...@@ -12,6 +12,7 @@ import Lorem from 'react-lorem-component';
import UniversityGeneral from '../modules/UniversityGeneral'; import UniversityGeneral from '../modules/UniversityGeneral';
import UniversitySemestersDates from '../modules/UniversitySemestersDates'; import UniversitySemestersDates from '../modules/UniversitySemestersDates';
import UniversityDri from '../modules/UniversityDri';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'; import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
const styles = theme => ({ const styles = theme => ({
...@@ -35,17 +36,17 @@ class GeneralInfo extends MyComponent { ...@@ -35,17 +36,17 @@ class GeneralInfo extends MyComponent {
return ( return (
<div className={classes.root1}> <div className={classes.root1}>
<div style={{ flexGrow: 6, paddingRight: 2 * theme.spacing.unit }}> <div style={{ flexGrow: 8, paddingRight: 2 * theme.spacing.unit }}>
<Grid container direction='column' > <Grid container direction='column' >
<Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }} > <Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }} >
<UniversityGeneral /> <UniversityGeneral />
</Grid> </Grid>
<Grid item xs> <Grid item xs>
<GenericModule title={"DRI"} /> <UniversityDri />
</Grid> </Grid>
</Grid> </Grid>
</div> </div>
<div style={{ flexGrow: 4 }} > <div style={{ flexGrow: 6 }} >
<Grid container direction='column' > <Grid container direction='column' >
<Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }}> <Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }}>
<UniversitySemestersDates /> <UniversitySemestersDates />
...@@ -68,7 +69,7 @@ class GeneralInfo extends MyComponent { ...@@ -68,7 +69,7 @@ class GeneralInfo extends MyComponent {
<UniversityGeneral /> <UniversityGeneral />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<GenericModule title={"DRI"} /> <UniversityDri />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<UniversitySemestersDates /> <UniversitySemestersDates />
......
...@@ -3,6 +3,9 @@ import PropTypes from 'prop-types'; ...@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent'; import MyComponent from '../../MyComponent';
import PreviousDeparture from '../modules/PreviousDeparture';
import GenericModule from '../modules/GenericModule';
const styles = theme => ({ const styles = theme => ({
root: {}, root: {},
}); });
...@@ -11,9 +14,9 @@ class PreviousDeparturesTab extends MyComponent { ...@@ -11,9 +14,9 @@ class PreviousDeparturesTab extends MyComponent {
myRender() { myRender() {
return ( return (
<div> <GenericModule title="Florent Chehab | GI05~FDD | Automne 2018~échange">
Précédents départs <PreviousDeparture />
</div> </GenericModule>
); );
} }
......
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