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";
import Avatar from "@material-ui/core/Avatar";
import Typography from "@material-ui/core/Typography";
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 PropTypes from "prop-types";
import Fab from "@material-ui/core/Fab";
......@@ -171,10 +171,10 @@ class AppFrame extends React.Component {
const {classes} = this.props;
return (
<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}>
<Button color="default" className={classNames(classes.mainMenuButton, classes.contrastTextPrimary)}>
{name}
{label}
{<Icon className={classes.mainMenuButtonIcon}/>}
</Button>
</CustomNavLink>
......@@ -192,12 +192,12 @@ class AppFrame extends React.Component {
const {classes} = this.props;
return (
<div className={classes.ifNotTooSmallAndInlined}>
{items.map(({name, Icon, route}, idx) => (
{items.map(({label, Icon, route}, idx) => (
<CustomNavLink to={route} key={idx}>
<Fab size="medium"
color="primary"
classes={{primary: classes.primaryDark}}
aria-label={name}
aria-label={label}
className={classes.mobileIconContainer}>
{<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>}
</Fab>
......@@ -255,16 +255,12 @@ class AppFrame extends React.Component {
<IconWithMenu Icon={InfoIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[
{label: "Mes informations", route: APP_ROUTES.userCurrent},
{label: "Conditions d'utilisations", route: APP_ROUTES.aboutConditions},
{label: "Le projet REX-DRI", route: APP_ROUTES.aboutProject}]}
/>
menuItems={infoMenuItems} />
<IconWithMenu Icon={SettingsIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[{label: "Thème", route: APP_ROUTES.themeSettings}]}
/>
menuItems={settingsMenuItems} />
</div>
);
}
......
......@@ -3,28 +3,47 @@ import PropTypes from "prop-types";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
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 ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import CustomNavLink from "../common/CustomNavLink";
import SettingsIcon from "@material-ui/icons/Settings";
import InfoIcon from "@material-ui/icons/Info";
class DrawerMenu extends React.Component {
toListItem(items) {
return items.map(({name, route, Icon}, idx) => (
toListItem(items, inset = false) {
return items.map(({label, route, Icon}, idx) => (
<CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}>
<ListItem button onClick={() => this.props.closeDrawer()}>
<ListItemIcon>
<Icon/>
</ListItemIcon>
<ListItemText primary={name}/>
{
Icon !== null ?
<ListItemIcon>
<Icon/>
</ListItemIcon>
:
<></>
}
<ListItemText primary={label} inset={inset}/>
</ListItem>
</CustomNavLink>
));
}
toListItemBasic(label, Icon) {
return (
<ListItem>
<ListItemIcon>
<Icon/>
</ListItemIcon>
<ListItemText primary={label}/>
</ListItem>
);
}
render() {
return (
<div>
......@@ -35,7 +54,17 @@ class DrawerMenu extends React.Component {
<Divider/>
<List>{this.toListItem(secondaryMenuItems)}</List>
<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>
</div>
);
......
import MapIcon from "@material-ui/icons/Map";
import LocationCityIcon from "@material-ui/icons/LocationCity";
import PersonIcon from "@material-ui/icons/Person";
import HomeIcon from "@material-ui/icons/Home";
import SearchIcon from "@material-ui/icons/Search";
import SettingsIcon from "@material-ui/icons/Settings";
import AssignmentIcon from "@material-ui/icons/Assignment";
import {APP_ROUTES} from "../../config/appRoutes";
function item(name, route, Icon) {
return {type: "item", name, route, Icon};
function item(label, route, Icon, hardRedirect = false) {
return {label, route, Icon, hardRedirect};
}
export const mainMenuItems = [
......@@ -23,7 +21,13 @@ export const secondaryMenuItems = [
item("Mes listes", APP_ROUTES.lists, AssignmentIcon),
];
export const thirdMenuItems = [
item("Mes informations", APP_ROUTES.userCurrent, PersonIcon),
item("Réglage du thème", APP_ROUTES.themeSettings, SettingsIcon),
export const infoMenuItems = [
item("Mes informations", APP_ROUTES.userCurrent, null),
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 {
open={open}
onClose={this.handleCloseMenu}>
{this.props.menuItems.map(
({label, route}, idx) => <MenuItem key={idx} component={NavLink}
to={route} onClick={this.handleCloseMenu}>{label}</MenuItem>)}
({label, route, hardRedirect}, idx) =>
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>
</>
);
......
......@@ -82,7 +82,7 @@ class PendingModeration extends CustomComponentForAPI {
return (
<>
<Button
variant='outlined'
variant="contained"
color="primary"
className={this.props.classes.editButton}
onClick={() => this.props.editFromPendingModeration(rawModelData)}
......
......@@ -17,7 +17,8 @@ const base = "/app/",
themeSettings = settings + "theme/",
about = base + "about/",
aboutProject = about + "project/",
aboutConditions = about + "conditions/";
aboutConditions = about + "conditions/",
logout = "/user/logout";
export const APP_ROUTES = {
base,
......@@ -39,4 +40,5 @@ export const APP_ROUTES = {
about,
aboutProject,
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