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 => ({
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
},
primaryDark: {
backgroundColor: theme.palette.primary.dark,
boxShadow: theme.shadows[1],
},
desktopOnly: {
[theme.breakpoints.down("md")]: {
display: "none"
......@@ -190,7 +194,11 @@ class AppFrame extends React.Component {
<div className={classes.ifNotTooSmallAndInlined}>
{items.map(({name, Icon, route}, 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)}/>}
</Fab>
</CustomNavLink>
......@@ -246,7 +254,7 @@ class AppFrame extends React.Component {
<div className={classes.ifNotTooSmallAndInlined}>
<IconWithMenu Icon={InfoIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "secondary", className: classes.mobileIconContainer}}
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},
......@@ -254,7 +262,7 @@ class AppFrame extends React.Component {
/>
<IconWithMenu Icon={SettingsIcon}
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}]}
/>
</div>
......
......@@ -15,7 +15,7 @@ class DrawerMenu extends React.Component {
toListItem(items) {
return items.map(({name, route, Icon}, idx) => (
<CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}>
<ListItem button>
<ListItem button onClick={() => this.props.closeDrawer()}>
<ListItemIcon>
<Icon/>
</ListItemIcon>
......
......@@ -14,23 +14,11 @@ export const styles = theme => ({
link: {
color: theme.palette.text.primary,
textDecoration: "none",
position: "relative",
zIndex: 1,
// fontWeight: "bold",
["&::after"]: {
position: "absolute",
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,
}
boxShadow: `0px 0.08em 0.01em -0.01em ${getLinkColor(theme)}, inset 0px -0.1em 0.03em -0.03em ${getLinkColor(theme)}`,
borderTopRightRadius: "100%",
borderTopLeftRadius: "100%",
borderBottomLeftRadius: "10%",
borderBottomRightRadius: "30%",
},
});
......
......@@ -13,6 +13,7 @@ import SameLine from "../common/SameLine";
import {compose} from "recompose";
import UserInfoEditor from "./UserInfoEditor";
import CreateIcon from "@material-ui/icons/Create";
import {classNames} from "../../utils/classNames";
function TypographyWithIcon(props) {
return (
......@@ -57,7 +58,7 @@ class UserInfo extends CustomComponentForAPI {
this.setState({editorOpen: false});
}
check(){
check() {
const userId = parseInt(this.props.userId);
if (lastUserId !== userId) {
// we make sure to update the data if the userId changes
......@@ -94,104 +95,108 @@ class UserInfo extends CustomComponentForAPI {
displayData = isOwner || userSharesInfo;
return (
<>
<TypographyWithIcon public={userSharesInfo}
variant="h3"
text={displayData && firstName && lastName ? `${firstName} ${lastName.toUpperCase()}` : "Prénom et Nom"}/>
<div className={classes.root}>
<div className={classNames(classes.wrapper, classes.centered)}>
<TypographyWithIcon public={userSharesInfo}
variant="h3"
text={displayData && firstName && lastName ? `${firstName} ${lastName.toUpperCase()}` : "Prénom et Nom"}/>
<TypographyWithIcon public={userSharesInfo}
variant="h5"
text={displayData ? login : "Login UTC"}
typographyClass={classes.login}/>
<TypographyWithIcon public={userSharesInfo}
variant="h5"
text={displayData ? login : "Login UTC"}
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}
variant="h6"
text="Pseudo"/>
<TypographyWithIcon public={true}
variant="h6"
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}
variant="h6"
text="Adresse mail UTC"/>
{
displayData && email ?
<>
<Button
variant="outlined"
color="secondary"
className={classes.button}
href={`mailto:${email}`}
>
{email} <SendIcon className={classes.rightIcon}/>
</Button>
<TypographyWithIcon public={userSharesInfo}
variant="h6"
text="Adresse mail UTC"/>
{
displayData && email ?
<>
<Button
variant="outlined"
color="secondary"
className={classes.button}
href={`mailto:${email}`}
>
{email} <SendIcon className={classes.rightIcon}/>
</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">
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é.
Aucune adresse mail rattachée à ce compte (compte créé hors CAS).
</Typography>
</>
:
<Typography variant="caption">
Aucune adresse mail rattachée à ce compte (compte créé hors CAS).
</Typography>
}
<div className={classes.spacer}/>
<TypographyWithIcon public={userSharesInfo}
variant={"h6"}
text={"Autre adresse de contact"}/>
{
displayData && secondaryEmail !== null ?
<>
<Button variant="outlined"
color="secondary"
className={classes.button}
href={`mailto:${secondaryEmail}`}>
{secondaryEmail} <SendIcon className={classes.rightIcon}/>
</Button>
}
<div className={classes.spacer}/>
<TypographyWithIcon public={userSharesInfo}
variant={"h6"}
text={"Autre adresse de contact"}/>
{
displayData && secondaryEmail !== null ?
<>
<Button variant="outlined"
color="secondary"
className={classes.button}
href={`mailto:${secondaryEmail}`}>
{secondaryEmail} <SendIcon className={classes.rightIcon}/>
</Button>
<Typography variant="caption">
Cette adresse mail a été mise à disposition par la personne comme autre point de contact.
</Typography>
</>
:
<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 variant="caption">
Aucune addresse email secondaire n'est disponible.
</Typography>
}
<div className={classes.spacer}/>
{
isOwner ?
<>
<Button variant={"contained"}
color={"primary"}
fullWidth
onClick={() => this.openEditorPanel()}>
Éditer<CreateIcon className={classes.rightIcon}/>
</Button>
<UserInfoEditor open={this.state.editorOpen}
closeEditorPanel={() => this.closeEditorPanel()}
rawModelData={userModelData}/>
</>
:
<></>
}
</>
}
<div className={classes.spacer}/>
{
isOwner ?
<>
<div style={{width: "100%"}}>
<Button variant={"contained"}
color={"primary"}
fullWidth
onClick={() => this.openEditorPanel()} >
Éditer<CreateIcon className={classes.rightIcon}/>
</Button>
</div>
<UserInfoEditor open={this.state.editorOpen}
closeEditorPanel={() => this.closeEditorPanel()}
rawModelData={userModelData}/>
</>
:
<></>
}
</div>
</div>
);
}
}
......@@ -218,6 +223,12 @@ const mapDispatchToProps = (dispatch) => {
};
const styles = theme => ({
root: {
width: "100%",
},
wrapper: {
maxWidth: "800px",
},
button: {
margin: theme.spacing.unit,
},
......@@ -231,6 +242,10 @@ const styles = theme => ({
marginTop: 2 * 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