Commit df33a510 authored by Florent Chehab's avatar Florent Chehab

enhanced(new theme, menus):

* Added a logout option in the settings menu
* Centralized secondary menus definitions
* The menus in the drawer are now fully synced
parent 6bb5f9fa
Pipeline #38711 passed with stages
in 3 minutes and 14 seconds
...@@ -9,7 +9,7 @@ import Chip from "@material-ui/core/Chip"; ...@@ -9,7 +9,7 @@ import Chip from "@material-ui/core/Chip";
import Avatar from "@material-ui/core/Avatar"; import Avatar from "@material-ui/core/Avatar";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import {mainMenuItems, secondaryMenuItems} from "./menuItems"; import {infoMenuItems, mainMenuItems, secondaryMenuItems, settingsMenuItems} from "./menuItems";
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Fab from "@material-ui/core/Fab"; import Fab from "@material-ui/core/Fab";
...@@ -171,10 +171,10 @@ class AppFrame extends React.Component { ...@@ -171,10 +171,10 @@ class AppFrame extends React.Component {
const {classes} = this.props; const {classes} = this.props;
return ( return (
<div className={classNames(classes.desktopOnly, classes.centered, classes.widthFitContent)}> <div className={classNames(classes.desktopOnly, classes.centered, classes.widthFitContent)}>
{items.map(({name, Icon, route}, idx) => ( {items.map(({label, Icon, route}, idx) => (
<CustomNavLink to={route} key={idx}> <CustomNavLink to={route} key={idx}>
<Button color="default" className={classNames(classes.mainMenuButton, classes.contrastTextPrimary)}> <Button color="default" className={classNames(classes.mainMenuButton, classes.contrastTextPrimary)}>
{name} {label}
{<Icon className={classes.mainMenuButtonIcon}/>} {<Icon className={classes.mainMenuButtonIcon}/>}
</Button> </Button>
</CustomNavLink> </CustomNavLink>
...@@ -192,12 +192,12 @@ class AppFrame extends React.Component { ...@@ -192,12 +192,12 @@ class AppFrame extends React.Component {
const {classes} = this.props; const {classes} = this.props;
return ( return (
<div className={classes.ifNotTooSmallAndInlined}> <div className={classes.ifNotTooSmallAndInlined}>
{items.map(({name, Icon, route}, idx) => ( {items.map(({label, Icon, route}, idx) => (
<CustomNavLink to={route} key={idx}> <CustomNavLink to={route} key={idx}>
<Fab size="medium" <Fab size="medium"
color="primary" color="primary"
classes={{primary: classes.primaryDark}} classes={{primary: classes.primaryDark}}
aria-label={name} aria-label={label}
className={classes.mobileIconContainer}> className={classes.mobileIconContainer}>
{<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>} {<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>}
</Fab> </Fab>
...@@ -255,16 +255,12 @@ class AppFrame extends React.Component { ...@@ -255,16 +255,12 @@ class AppFrame extends React.Component {
<IconWithMenu Icon={InfoIcon} <IconWithMenu Icon={InfoIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}} iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}} fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[ menuItems={infoMenuItems} />
{label: "Mes informations", route: APP_ROUTES.userCurrent},
{label: "Conditions d'utilisations", route: APP_ROUTES.aboutConditions},
{label: "Le projet REX-DRI", route: APP_ROUTES.aboutProject}]}
/>
<IconWithMenu Icon={SettingsIcon} <IconWithMenu Icon={SettingsIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}} iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}} fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[{label: "Thème", route: APP_ROUTES.themeSettings}]} menuItems={settingsMenuItems} />
/>
</div> </div>
); );
} }
......
...@@ -3,28 +3,47 @@ import PropTypes from "prop-types"; ...@@ -3,28 +3,47 @@ import PropTypes from "prop-types";
import Drawer from "@material-ui/core/Drawer"; import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List"; import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider"; import Divider from "@material-ui/core/Divider";
import {mainMenuHome, mainMenuItems, secondaryMenuItems, thirdMenuItems} from "./menuItems"; import {infoMenuItems, mainMenuHome, mainMenuItems, secondaryMenuItems, settingsMenuItems,} from "./menuItems";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText"; import ListItemText from "@material-ui/core/ListItemText";
import CustomNavLink from "../common/CustomNavLink"; import CustomNavLink from "../common/CustomNavLink";
import SettingsIcon from "@material-ui/icons/Settings";
import InfoIcon from "@material-ui/icons/Info";
class DrawerMenu extends React.Component { class DrawerMenu extends React.Component {
toListItem(items) { toListItem(items, inset = false) {
return items.map(({name, route, Icon}, idx) => ( return items.map(({label, route, Icon}, idx) => (
<CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}> <CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}>
<ListItem button onClick={() => this.props.closeDrawer()}> <ListItem button onClick={() => this.props.closeDrawer()}>
<ListItemIcon> {
<Icon/> Icon !== null ?
</ListItemIcon> <ListItemIcon>
<ListItemText primary={name}/> <Icon/>
</ListItemIcon>
:
<></>
}
<ListItemText primary={label} inset={inset}/>
</ListItem> </ListItem>
</CustomNavLink> </CustomNavLink>
)); ));
} }
toListItemBasic(label, Icon) {
return (
<ListItem>
<ListItemIcon>
<Icon/>
</ListItemIcon>
<ListItemText primary={label}/>
</ListItem>
);
}
render() { render() {
return ( return (
<div> <div>
...@@ -35,7 +54,17 @@ class DrawerMenu extends React.Component { ...@@ -35,7 +54,17 @@ class DrawerMenu extends React.Component {
<Divider/> <Divider/>
<List>{this.toListItem(secondaryMenuItems)}</List> <List>{this.toListItem(secondaryMenuItems)}</List>
<Divider/> <Divider/>
<List>{this.toListItem(thirdMenuItems)}</List> <List>
{this.toListItemBasic(<em>Informations</em>, InfoIcon)}
<Divider variant="inset"/>
{this.toListItem(infoMenuItems, true)}
</List>
<Divider/>
<List>
{this.toListItemBasic(<em>Paramètres</em>, SettingsIcon)}
<Divider variant="inset"/>
{this.toListItem(settingsMenuItems, true)}
</List>
</Drawer> </Drawer>
</div> </div>
); );
......
import MapIcon from "@material-ui/icons/Map"; import MapIcon from "@material-ui/icons/Map";
import LocationCityIcon from "@material-ui/icons/LocationCity"; import LocationCityIcon from "@material-ui/icons/LocationCity";
import PersonIcon from "@material-ui/icons/Person";
import HomeIcon from "@material-ui/icons/Home"; import HomeIcon from "@material-ui/icons/Home";
import SearchIcon from "@material-ui/icons/Search"; import SearchIcon from "@material-ui/icons/Search";
import SettingsIcon from "@material-ui/icons/Settings";
import AssignmentIcon from "@material-ui/icons/Assignment"; import AssignmentIcon from "@material-ui/icons/Assignment";
import {APP_ROUTES} from "../../config/appRoutes"; import {APP_ROUTES} from "../../config/appRoutes";
function item(name, route, Icon) { function item(label, route, Icon, hardRedirect = false) {
return {type: "item", name, route, Icon}; return {label, route, Icon, hardRedirect};
} }
export const mainMenuItems = [ export const mainMenuItems = [
...@@ -23,7 +21,13 @@ export const secondaryMenuItems = [ ...@@ -23,7 +21,13 @@ export const secondaryMenuItems = [
item("Mes listes", APP_ROUTES.lists, AssignmentIcon), item("Mes listes", APP_ROUTES.lists, AssignmentIcon),
]; ];
export const thirdMenuItems = [ export const infoMenuItems = [
item("Mes informations", APP_ROUTES.userCurrent, PersonIcon), item("Mes informations", APP_ROUTES.userCurrent, null),
item("Réglage du thème", APP_ROUTES.themeSettings, SettingsIcon), item("Conditions d'utilisations", APP_ROUTES.aboutConditions, null),
item("Le projet REX-DRI", APP_ROUTES.aboutProject, null),
]; ];
export const settingsMenuItems = [
item("Personnalisation du thème", APP_ROUTES.themeSettings, null),
item("Se déconnecter", APP_ROUTES.logout, null, true),
];
\ No newline at end of file
...@@ -38,8 +38,22 @@ class IconWithMenu extends React.Component { ...@@ -38,8 +38,22 @@ class IconWithMenu extends React.Component {
open={open} open={open}
onClose={this.handleCloseMenu}> onClose={this.handleCloseMenu}>
{this.props.menuItems.map( {this.props.menuItems.map(
({label, route}, idx) => <MenuItem key={idx} component={NavLink} ({label, route, hardRedirect}, idx) =>
to={route} onClick={this.handleCloseMenu}>{label}</MenuItem>)} hardRedirect ?
<MenuItem key={idx}
component="a"
href={route}
onClick={this.handleCloseMenu}>
{label}
</MenuItem>
:
<MenuItem key={idx}
component={NavLink}
to={route}
onClick={this.handleCloseMenu}>
{label}
</MenuItem>
)}
</Menu> </Menu>
</> </>
); );
......
...@@ -82,7 +82,7 @@ class PendingModeration extends CustomComponentForAPI { ...@@ -82,7 +82,7 @@ class PendingModeration extends CustomComponentForAPI {
return ( return (
<> <>
<Button <Button
variant='outlined' variant="contained"
color="primary" color="primary"
className={this.props.classes.editButton} className={this.props.classes.editButton}
onClick={() => this.props.editFromPendingModeration(rawModelData)} onClick={() => this.props.editFromPendingModeration(rawModelData)}
......
...@@ -17,7 +17,8 @@ const base = "/app/", ...@@ -17,7 +17,8 @@ const base = "/app/",
themeSettings = settings + "theme/", themeSettings = settings + "theme/",
about = base + "about/", about = base + "about/",
aboutProject = about + "project/", aboutProject = about + "project/",
aboutConditions = about + "conditions/"; aboutConditions = about + "conditions/",
logout = "/user/logout";
export const APP_ROUTES = { export const APP_ROUTES = {
base, base,
...@@ -39,4 +40,5 @@ export const APP_ROUTES = { ...@@ -39,4 +40,5 @@ export const APP_ROUTES = {
about, about,
aboutProject, aboutProject,
aboutConditions, aboutConditions,
logout,
}; };
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