Commit 6b4719a2 authored by Florent Chehab's avatar Florent Chehab

fix(new theme): links & other

* Change the way links are styled to handle multiline
* Make sure the drawer menu closes on item click
* Limit width of user info
* Less flashy main menu icons
parent 4cfe777a
Pipeline #38660 passed with stages
in 3 minutes and 12 seconds
...@@ -105,6 +105,10 @@ const styles = theme => ({ ...@@ -105,6 +105,10 @@ const styles = theme => ({
marginLeft: theme.spacing.unit, marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
}, },
primaryDark: {
backgroundColor: theme.palette.primary.dark,
boxShadow: theme.shadows[1],
},
desktopOnly: { desktopOnly: {
[theme.breakpoints.down("md")]: { [theme.breakpoints.down("md")]: {
display: "none" display: "none"
...@@ -190,7 +194,11 @@ class AppFrame extends React.Component { ...@@ -190,7 +194,11 @@ class AppFrame extends React.Component {
<div className={classes.ifNotTooSmallAndInlined}> <div className={classes.ifNotTooSmallAndInlined}>
{items.map(({name, Icon, route}, idx) => ( {items.map(({name, Icon, route}, idx) => (
<CustomNavLink to={route} key={idx}> <CustomNavLink to={route} key={idx}>
<Fab size="medium" color="secondary" aria-label={name} className={classes.mobileIconContainer}> <Fab size="medium"
color="primary"
classes={{primary: classes.primaryDark}}
aria-label={name}
className={classes.mobileIconContainer}>
{<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>} {<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>}
</Fab> </Fab>
</CustomNavLink> </CustomNavLink>
...@@ -246,7 +254,7 @@ class AppFrame extends React.Component { ...@@ -246,7 +254,7 @@ class AppFrame extends React.Component {
<div className={classes.ifNotTooSmallAndInlined}> <div className={classes.ifNotTooSmallAndInlined}>
<IconWithMenu Icon={InfoIcon} <IconWithMenu Icon={InfoIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}} iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "secondary", className: classes.mobileIconContainer}} fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[ menuItems={[
{label: "Mes informations", route: APP_ROUTES.userCurrent}, {label: "Mes informations", route: APP_ROUTES.userCurrent},
{label: "Conditions d'utilisations", route: APP_ROUTES.aboutConditions}, {label: "Conditions d'utilisations", route: APP_ROUTES.aboutConditions},
...@@ -254,7 +262,7 @@ class AppFrame extends React.Component { ...@@ -254,7 +262,7 @@ class AppFrame extends React.Component {
/> />
<IconWithMenu Icon={SettingsIcon} <IconWithMenu Icon={SettingsIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}} iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "secondary", className: classes.mobileIconContainer}} fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[{label: "Thème", route: APP_ROUTES.themeSettings}]} menuItems={[{label: "Thème", route: APP_ROUTES.themeSettings}]}
/> />
</div> </div>
......
...@@ -15,7 +15,7 @@ class DrawerMenu extends React.Component { ...@@ -15,7 +15,7 @@ class DrawerMenu extends React.Component {
toListItem(items) { toListItem(items) {
return items.map(({name, route, Icon}, idx) => ( return items.map(({name, route, Icon}, idx) => (
<CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}> <CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}>
<ListItem button> <ListItem button onClick={() => this.props.closeDrawer()}>
<ListItemIcon> <ListItemIcon>
<Icon/> <Icon/>
</ListItemIcon> </ListItemIcon>
......
...@@ -14,23 +14,11 @@ export const styles = theme => ({ ...@@ -14,23 +14,11 @@ export const styles = theme => ({
link: { link: {
color: theme.palette.text.primary, color: theme.palette.text.primary,
textDecoration: "none", textDecoration: "none",
position: "relative", boxShadow: `0px 0.08em 0.01em -0.01em ${getLinkColor(theme)}, inset 0px -0.1em 0.03em -0.03em ${getLinkColor(theme)}`,
zIndex: 1, borderTopRightRadius: "100%",
// fontWeight: "bold", borderTopLeftRadius: "100%",
["&::after"]: { borderBottomLeftRadius: "10%",
position: "absolute", borderBottomRightRadius: "30%",
content: "no-close-quote",
height: "0.4em",
maxHeight: 6,
left: -2,
top: "1em",
backgroundColor: getLinkColor(theme),
borderBottomLeftRadius: "100%",
borderBottomRightRadius: "50%",
borderTopRightRadius: "30%",
width: "calc(100% + 4px)",
zIndex: -1,
}
}, },
}); });
......
...@@ -13,6 +13,7 @@ import SameLine from "../common/SameLine"; ...@@ -13,6 +13,7 @@ import SameLine from "../common/SameLine";
import {compose} from "recompose"; import {compose} from "recompose";
import UserInfoEditor from "./UserInfoEditor"; import UserInfoEditor from "./UserInfoEditor";
import CreateIcon from "@material-ui/icons/Create"; import CreateIcon from "@material-ui/icons/Create";
import {classNames} from "../../utils/classNames";
function TypographyWithIcon(props) { function TypographyWithIcon(props) {
return ( return (
...@@ -57,7 +58,7 @@ class UserInfo extends CustomComponentForAPI { ...@@ -57,7 +58,7 @@ class UserInfo extends CustomComponentForAPI {
this.setState({editorOpen: false}); this.setState({editorOpen: false});
} }
check(){ check() {
const userId = parseInt(this.props.userId); const userId = parseInt(this.props.userId);
if (lastUserId !== userId) { if (lastUserId !== userId) {
// we make sure to update the data if the userId changes // we make sure to update the data if the userId changes
...@@ -94,104 +95,108 @@ class UserInfo extends CustomComponentForAPI { ...@@ -94,104 +95,108 @@ class UserInfo extends CustomComponentForAPI {
displayData = isOwner || userSharesInfo; displayData = isOwner || userSharesInfo;
return ( return (
<> <div className={classes.root}>
<TypographyWithIcon public={userSharesInfo} <div className={classNames(classes.wrapper, classes.centered)}>
variant="h3" <TypographyWithIcon public={userSharesInfo}
text={displayData && firstName && lastName ? `${firstName} ${lastName.toUpperCase()}` : "Prénom et Nom"}/> variant="h3"
text={displayData && firstName && lastName ? `${firstName} ${lastName.toUpperCase()}` : "Prénom et Nom"}/>
<TypographyWithIcon public={userSharesInfo} <TypographyWithIcon public={userSharesInfo}
variant="h5" variant="h5"
text={displayData ? login : "Login UTC"} text={displayData ? login : "Login UTC"}
typographyClass={classes.login}/> typographyClass={classes.login}/>
<Typography variant="caption">Les prénom, nom et login sont fournis par le CAS de l'UTC.</Typography> <Typography variant="caption">Les prénom, nom et login sont fournis par le CAS de l'UTC.</Typography>
<div className={classes.spacer}/> <div className={classes.spacer}/>
<TypographyWithIcon public={true} <TypographyWithIcon public={true}
variant="h6" variant="h6"
text="Pseudo"/> text="Pseudo"/>
<Typography variant="body1"><em>{pseudo}</em></Typography> <Typography variant="body1"><em>{pseudo}</em></Typography>
<div className={classes.spacer}/> <div className={classes.spacer}/>
<TypographyWithIcon public={userSharesInfo} <TypographyWithIcon public={userSharesInfo}
variant="h6" variant="h6"
text="Adresse mail UTC"/> text="Adresse mail UTC"/>
{ {
displayData && email ? displayData && email ?
<> <>
<Button <Button
variant="outlined" variant="outlined"
color="secondary" color="secondary"
className={classes.button} className={classes.button}
href={`mailto:${email}`} href={`mailto:${email}`}
> >
{email} <SendIcon className={classes.rightIcon}/> {email} <SendIcon className={classes.rightIcon}/>
</Button> </Button>
<Typography variant="caption">
Cette adresse mail a été fournie par le CAS de l'UTC lors de la connexion de la personne.
Si la personne n"est plus à l"UTC, il se peut que cette adresse ne soit plus d'actualité.
</Typography>
</>
:
<Typography variant="caption"> <Typography variant="caption">
Cette adresse mail a été fournie par le CAS de l'UTC lors de la connexion de la personne. Aucune adresse mail rattachée à ce compte (compte créé hors CAS).
Si la personne n"est plus à l"UTC, il se peut que cette adresse ne soit plus d'actualité.
</Typography> </Typography>
</> }
:
<Typography variant="caption">
Aucune adresse mail rattachée à ce compte (compte créé hors CAS). <div className={classes.spacer}/>
</Typography>
}
<TypographyWithIcon public={userSharesInfo}
variant={"h6"}
<div className={classes.spacer}/> text={"Autre adresse de contact"}/>
{
displayData && secondaryEmail !== null ?
<TypographyWithIcon public={userSharesInfo} <>
variant={"h6"} <Button variant="outlined"
text={"Autre adresse de contact"}/> color="secondary"
{ className={classes.button}
displayData && secondaryEmail !== null ? href={`mailto:${secondaryEmail}`}>
<> {secondaryEmail} <SendIcon className={classes.rightIcon}/>
<Button variant="outlined" </Button>
color="secondary" <Typography variant="caption">
className={classes.button} Cette adresse mail a été mise à disposition par la personne comme autre point de contact.
href={`mailto:${secondaryEmail}`}> </Typography>
{secondaryEmail} <SendIcon className={classes.rightIcon}/> </>
</Button> :
<Typography variant="caption"> <Typography variant="caption">
Cette adresse mail a été mise à disposition par la personne comme autre point de contact. Aucune addresse email secondaire n'est disponible.
</Typography> </Typography>
</> }
:
<Typography variant="caption">
Aucune addresse email secondaire n'est disponible. <div className={classes.spacer}/>
</Typography>
} {
isOwner ?
<>
<div className={classes.spacer}/> <div style={{width: "100%"}}>
<Button variant={"contained"}
{ color={"primary"}
isOwner ? fullWidth
<> onClick={() => this.openEditorPanel()} >
<Button variant={"contained"} Éditer<CreateIcon className={classes.rightIcon}/>
color={"primary"} </Button>
fullWidth </div>
onClick={() => this.openEditorPanel()}> <UserInfoEditor open={this.state.editorOpen}
Éditer<CreateIcon className={classes.rightIcon}/> closeEditorPanel={() => this.closeEditorPanel()}
</Button> rawModelData={userModelData}/>
<UserInfoEditor open={this.state.editorOpen} </>
closeEditorPanel={() => this.closeEditorPanel()} :
rawModelData={userModelData}/> <></>
</> }
:
<></> </div>
} </div>
</>
); );
} }
} }
...@@ -218,6 +223,12 @@ const mapDispatchToProps = (dispatch) => { ...@@ -218,6 +223,12 @@ const mapDispatchToProps = (dispatch) => {
}; };
const styles = theme => ({ const styles = theme => ({
root: {
width: "100%",
},
wrapper: {
maxWidth: "800px",
},
button: { button: {
margin: theme.spacing.unit, margin: theme.spacing.unit,
}, },
...@@ -231,6 +242,10 @@ const styles = theme => ({ ...@@ -231,6 +242,10 @@ const styles = theme => ({
marginTop: 2 * theme.spacing.unit, marginTop: 2 * theme.spacing.unit,
marginBottom: theme.spacing.unit, marginBottom: theme.spacing.unit,
}, },
centered: {
margin: "0 auto",
display: "block",
}
}); });
......
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