Ça avance !

frontend/src/components/other/TextLink.js

+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+import { lighten, darken } from '@material-ui/core/styles/colorManipulator';
+
+const styles = (theme) => {
+  const { palette } = theme;
+  const linkColor = palette.type == 'dark' ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3);
+  return {
+    link: {
+      color: linkColor,
+      textDecoration: "none",
+      borderBottom: "1px dotted"
+    },
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
+  <a href={props.href} className={classes.link} target="_blank">
+    {props.children}
+  </a>
+))

frontend/src/components/pages/PageHome.js

@@ -3,7 +3,7 @@ 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 Markdown from '../../utils/Markdown'
+import Markdown from '../shared/Markdown';
 
 const styles = theme => ({
     myPaper: {
@@ -26,6 +26,7 @@ Les objectifs de ce service sont :
 | Départs possibles | ✔ |
 | Informatio sur les universités | ✔ |
 
+[Rendez-vous sur le GitLab de l'UTC !](https://gitlab.utc.fr)
 `;
 
 class PageHome extends React.Component {

frontend/src/components/pages/PageUniversity.js

@@ -104,7 +104,7 @@ class PageUniversity extends MyComponent {
 }
 
 PageUniversity.propTypes = {
-  classes: PropTypes.object.isRequired,
+  // classes: PropTypes.object.isRequired,
 };
 
 

frontend/src/components/settings/ColorDemo.js

@@ -8,7 +8,6 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Typography from '@material-ui/core/Typography';
 import AddIcon from '@material-ui/icons/Add';
-// import MarkdownElement from '@material-ui/docs/MarkdownElement';
 
 const styles = theme => ({
   root: {

frontend/src/components/shared/FullScreenDialog.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import Slide from '@material-ui/core/Slide';
+
+const styles = {
+  appBar: {
+    position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
+};
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+class FullScreenDialog extends React.Component {
+
+    render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <Dialog
+          fullScreen
+          open={this.props.open}
+          onClose={this.props.handleClose}
+          TransitionComponent={Transition}
+        >
+          <AppBar className={classes.appBar}>
+            <Toolbar>
+              <IconButton color="inherit" onClick={this.props.handleClose} aria-label="Close">
+                <CloseIcon />
+              </IconButton>
+              <Typography variant="title" color="inherit" className={classes.flex}>
+                Sound
+              </Typography>
+              <Button color="inherit" onClick={this.props.handleClose}>
+                save
+              </Button>
+            </Toolbar>
+          </AppBar>
+          <List>
+            <ListItem button>
+              <ListItemText primary="Phone ringtone" secondary="Titania" />
+            </ListItem>
+            <Divider />
+            <ListItem button>
+              <ListItemText primary="Default notification ringtone" secondary="Tethys" />
+            </ListItem>
+          </List>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+FullScreenDialog.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+FullScreenDialog.defaultProps = {
+    open: false,
+    handleClose: () => console.log("Dev forgot something...")
+  };
+
+export default withStyles(styles)(FullScreenDialog);

frontend/src/utils/Markdown.js → frontend/src/components/shared/Markdown.js

@@ -11,8 +11,9 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
-import { rgbToHex, lighten, darken } from '@material-ui/core/styles/colorManipulator';
+import { lighten, darken } from '@material-ui/core/styles/colorManipulator';
 import { Divider } from '@material-ui/core';
+import LinkText from '../other/TextLink';
 
 const styles = (theme) => {
   const { palette } = theme;
@@ -100,11 +101,7 @@ const renderers = {
     </li>
   )),
   paragraph: props => <Typography {...props} paragraph />,
-  link: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
-    <a href={props.href} className={classes.link}>
-      {props.children}
-    </a>
-  )),
+  link: props => <LinkText {...props}/>,
   code: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
     <Typography variant={"body1"} paragraph>
       <pre ><code>

frontend/src/components/university/modules/GenericModule.js

@@ -2,14 +2,18 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 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';
 
 import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
 import CreateIcon from '@material-ui/icons/Create';
 import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
 
-
+import FullScreenDialog from '../../shared/FullScreenDialog';
 
 import red from '@material-ui/core/colors/red';
 import orange from '@material-ui/core/colors/orange';
@@ -18,6 +22,14 @@ import green from '@material-ui/core/colors/green';
 const styles = theme => ({
   root: {
     flexGrow: 1,
+    padding: 1 * theme.spacing.unit,
+    // marginBottom: 2 * theme.spacing.unit
+  },
+  badge: {
+    // margin: 0.5 * theme.spacing.unit,
+    top: -0.5 * theme.spacing.unit,
+    right: -0.5 * theme.spacing.unit,
+    border: `2px solid ${theme.palette.background.paper}`,
   },
   green: {
     color: green.A700,
@@ -32,50 +44,75 @@ const styles = theme => ({
     color: theme.palette.action.disabled
   },
   button: {
-    margin: 0.5 * theme.spacing.unit,
+    width: 5*theme.spacing.unit,
+    height: 5*theme.spacing.unit,
+    // margin: 0.5 * theme.spacing.unit,
   },
 })
 
+
 class GenericModule extends React.Component {
+  state = {
+    fullScreenDialogOpen: false,
+  };
+
+  handleClickOpenFullScreenDialog = () => {
+    this.setState({ fullScreenDialogOpen: true });
+  };
+
+  handleCloseFullScreenDialog = () => {
+    this.setState({ fullScreenDialogOpen: false });
+  };
+
   render() {
-    const { classes } = this.props;
+    const { classes, title } = this.props;
     return (
-      <div className={classes.root}>
-        <Grid container spacing={24}>
-          <Grid item xs={6}>
-            Titre
-          </Grid>
-          <Grid item xs={6} style={{ textAlign: 'right' }}>
-            <Tooltip title="Informations sur la modération" placement="top">
-              <Button variant="fab" mini aria-label="Restorer" className={classes.button}>
-                <Badge className={classes.margin} badgeContent={4} color="secondary">
-                  <VerifiedUserIcon className={classes.red} />
+      <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>
-              </Button>
-
-            </Tooltip>
-
-            <Tooltip title="Informations sur les possibilités d'éditions" placement="top">
-              <Button variant="fab" mini aria-label="Restorer" className={classes.button}>
-                <CreateIcon className={classes.green} />
-              </Button>
-            </Tooltip>
+              </Tooltip>
 
-            <Tooltip title="Informations sur les versions disponibles" placement="top">
-              <Button variant="fab" mini aria-label="Restorer" className={classes.button}>
-                <Badge className={classes.margin} badgeContent={4} color="secondary">
+              <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>
 
-                  <SettingsBackRestoreIcon className={classes.orange} />
+              <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>
 
-              </Button>
-            </Tooltip>
           </Grid>
-
-        </Grid>
+          <div>
+            {this.props.children}
+          </div>
+        </Paper>
       </div>
     )
   }
 }
 
+
+GenericModule.defaultProps = {
+  title: "Titre du module"
+};
+
 export default withStyles(styles, { withTheme: true })(GenericModule);
\ No newline at end of file

frontend/src/components/university/modules/UniversityGeneral.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import PhotoIcon from '@material-ui/icons/Photo';
+
+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';
+
+
+const styles = theme => ({
+
+});
+
+
+
+
+class UniversityGeneral extends React.Component {
+  render() {
+    const { classes, theme } = this.props;
+    return (
+      <GenericModule title={"Introduction"}>
+
+        <Grid container spacing={16} direction='row'>
+          <Grid item xs={4}>
+            <img style={{ width: "100%" }} src={"https://upload.wikimedia.org/wikipedia/commons/f/f4/Logo_EPFL.svg"} />
+          </Grid>
+          <Grid item xs>
+            <Typography variant='headline'> École Polytechnique Fédérale de Lausanne</Typography>
+            <Typography variant='title'> EPFL</Typography>
+            <Divider />
+            <Typography variant='subheading'>Lausanne, Suisse</Typography>
+            <Typography variant='body1'> Site internet : <TextLink href={"https://www.epfl.ch"}> www.epfl.ch </TextLink> </Typography>
+          </Grid>
+        </Grid>
+
+      </GenericModule>
+    )
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(UniversityGeneral);

frontend/src/components/university/tabs/GeneralInfoTab.js

@@ -4,6 +4,11 @@ import { withStyles } from '@material-ui/core/styles';
 import MyComponent from '../../MyComponent';
 
 import GenericModule from '../modules/GenericModule';
+import UniversityGeneral from '../modules/UniversityGeneral';
+import Grid from '@material-ui/core/Grid';
+
+import Typography from '@material-ui/core/Typography';
+import Lorem from 'react-lorem-component';
 
 const styles = theme => ({
   root: {},
@@ -14,8 +19,26 @@ class GeneralInfo extends MyComponent {
   myRender() {
     return (
       <div>
-        Informations Générales
-        <GenericModule/>
+        <Grid container spacing={16}>
+          <Grid item xs={8}>
+            <UniversityGeneral />
+          </Grid>
+          <Grid item xs={4}>
+            <GenericModule title={"Date des semestres"} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <GenericModule title={"DRI"} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <GenericModule title={"Offres de départs"} />
+          </Grid>
+          <Grid item xs={12}>
+            <GenericModule title={"Résumé Départs"} />
+          </Grid>
+          
+        </Grid>
+
+        <Lorem count={20} />
       </div>
     );
   }