Commit 479992e9 authored by Florent Chehab's avatar Florent Chehab

More Components

parent e96dfcb7
Pipeline #27061 passed with stages
in 2 minutes and 25 seconds
......@@ -4,20 +4,21 @@ import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import PhoneIcon from '@material-ui/icons/Phone';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PersonPinIcon from '@material-ui/icons/PersonPin';
import HelpIcon from '@material-ui/icons/Help';
import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
import ThumbDown from '@material-ui/icons/ThumbDown';
import ThumbUp from '@material-ui/icons/ThumbUp';
import StarsIcon from '@material-ui/icons/Stars';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
import HistoryIcon from '@material-ui/icons/History';
import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
import Typography from '@material-ui/core/Typography';
import AwesomeSlider from 'react-awesome-slider';
import AwsSliderStyles from 'react-awesome-slider/src/styles';
import Lorem from 'react-lorem-component';
import CoverGallery from './CoverGallery';
import CampusesTab from './tabs/CampusesTab';
import GeneralInfoTab from './tabs/GeneralInfoTab';
import MoreTab from './tabs/MoreTab';
import PreviousDeparturesTab from './tabs/PreviousDeparturesTab';
import ScholarshipsTab from './tabs/ScholarshipsTab';
function TabContainer(props) {
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
......@@ -68,6 +69,9 @@ class UniversityTemplate extends React.Component {
body = d.getElementsByTagName('body')[0],
width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
height = w.innerHeight || documentElement.clientHeight || body.clientHeight;
const { univId } = this.props;
return (
<div>
......@@ -75,7 +79,7 @@ class UniversityTemplate extends React.Component {
<CoverGallery></CoverGallery>
</div>
<div className={classes.root}>
<AppBar position="sticky" color="default">
<AppBar position="sticky" color="default" style={{ minHeight: "72px" }}>
<Tabs
value={value}
onChange={this.handleChange}
......@@ -85,18 +89,18 @@ class UniversityTemplate extends React.Component {
indicatorColor="primary"
textColor="primary"
>
<Tab label="Généralités" icon={<PhoneIcon />} />
<Tab label="Précédents départs" icon={<HelpIcon />} />
<Tab label="Campus" icon={<FavoriteIcon />} />
<Tab label="Bourses" icon={<PersonPinIcon />} />
<Tab label="Autres" icon={<ShoppingBasket />} />
<Tab label="Généralités" icon={<StarsIcon />} />
<Tab label="Précédents départs" icon={<HistoryIcon />} />
<Tab label="Campus" icon={<LocationOnIcon />} />
<Tab label="Bourses" icon={<AttachMoneyIcon />} />
<Tab label="Autres" icon={<MoreHorizIcon />} />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>Item One <Lorem count={10} /></TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
{value === 3 && <TabContainer>Item Four</TabContainer>}
{value === 4 && <TabContainer>Item Five</TabContainer>}
{value === 0 && <TabContainer> <GeneralInfoTab univId={univId} /> </TabContainer>}
{value === 1 && <TabContainer> <PreviousDeparturesTab univId={univId} /> </TabContainer>}
{value === 2 && <TabContainer> <CampusesTab univId={univId} /> </TabContainer>}
{value === 3 && <TabContainer> <ScholarshipsTab univId={univId} /> </TabContainer>}
{value === 4 && <TabContainer> <MoreTab univId={univId} /> </TabContainer>}
</div>
</div>
......
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 Badge from '@material-ui/core/Badge';
import Grid from '@material-ui/core/Grid';
import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
import CreateIcon from '@material-ui/icons/Create';
import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
import red from '@material-ui/core/colors/red';
import orange from '@material-ui/core/colors/orange';
import green from '@material-ui/core/colors/green';
const styles = theme => ({
root: {
flexGrow: 1,
},
green: {
color: green.A700,
},
orange: {
color: orange.A700,
},
red: {
color: red.A700
},
disabled: {
color: theme.palette.action.disabled
},
button: {
margin: 0.5 * theme.spacing.unit,
},
})
class GenericModule extends React.Component {
render() {
const { classes } = 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} />
</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 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">
<SettingsBackRestoreIcon className={classes.orange} />
</Badge>
</Button>
</Tooltip>
</Grid>
</Grid>
</div>
)
}
}
export default withStyles(styles, { withTheme: true })(GenericModule);
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent';
const styles = theme => ({
root: {},
});
class CampusesTab extends MyComponent {
myRender() {
return (
<div>
Informations sur les campus
</div>
);
}
}
// CampusesTab.propTypes = {
// classes: PropTypes.object.isRequired,
// univId: PropTypes.string.isRequired,
// };
export default withStyles(styles)(CampusesTab);
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent';
import GenericModule from '../modules/GenericModule';
const styles = theme => ({
root: {},
});
class GeneralInfo extends MyComponent {
myRender() {
return (
<div>
Informations Générales
<GenericModule/>
</div>
);
}
}
// GeneralInfo.propTypes = {
// classes: PropTypes.object.isRequired,
// univId: PropTypes.string.isRequired,
// };
export default withStyles(styles)(GeneralInfo);
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent';
const styles = theme => ({
root: {},
});
class MoreTab extends MyComponent {
myRender() {
return (
<div>
C'est la pluie des tags ici !!
</div>
);
}
}
// MoreTab.propTypes = {
// classes: PropTypes.object.isRequired,
// univId: PropTypes.string.isRequired,
// };
export default withStyles(styles)(MoreTab);
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent';
const styles = theme => ({
root: {},
});
class PreviousDeparturesTab extends MyComponent {
myRender() {
return (
<div>
Précédents départs
</div>
);
}
}
// PreviousDeparturesTab.propTypes = {
// classes: PropTypes.object.isRequired,
// univId: PropTypes.string.isRequired,
// };
export default withStyles(styles)(PreviousDeparturesTab);
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent';
const styles = theme => ({
root: {},
});
class ScholarshipsTab extends MyComponent {
myRender() {
return (
<div>
Toutes les informations sur les bourses
</div>
);
}
}
// ScholarshipsTab.propTypes = {
// classes: PropTypes.object.isRequired,
// univId: PropTypes.string.isRequired,
// };
export default withStyles(styles)(ScholarshipsTab);
\ 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