Skip to content
Snippets Groups Projects
Commit 1736aa26 authored by Larbi Gharib's avatar Larbi Gharib
Browse files

User display page avatar 

Change-Id: I6a30cde51d99dbc3c8a857050b8b7731734c1a9b
parent d911c20f
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js
+ 19
− 0
View file @ 1736aa26
...@@ -26,6 +26,25 @@ const cardAvatarStyle = { ...@@ -26,6 +26,25 @@ const cardAvatarStyle = {
marginTop: "0" marginTop: "0"
} }
}, },
cardAvatarDisplayProfile: {
maxWidth: "200px",
maxHeight: "200px",
margin: "-50px 10px 0",
borderRadius: "50%",
overflow: "hidden",
padding: "0",
boxShadow:
"0 6px 8px -12px rgba(" +
hexToRgb(blackColor) +
", 0.56), 0 4px 25px 0px rgba(" +
hexToRgb(blackColor) +
", 0.12), 0 8px 10px -5px rgba(" +
hexToRgb(blackColor) +
", 0.2)",
"&$cardAvatarPlain": {
marginTop: "0"
}
},
cardAvatarEditProfile: { cardAvatarEditProfile: {
maxWidth: "200px", maxWidth: "200px",
maxHeight: "200px", maxHeight: "200px",
......
jams-react-client/src/components/Card/CardAvatar.js
+ 3
− 1
View file @ 1736aa26
...@@ -14,10 +14,11 @@ const useStyles = makeStyles(styles); ...@@ -14,10 +14,11 @@ const useStyles = makeStyles(styles);
export default function CardAvatar(props) { export default function CardAvatar(props) {
const classes = useStyles(); const classes = useStyles();
const { children, className, plain, profile, editProfile, ...rest } = props; const { children, className, plain, profile, displayProfile, editProfile, ...rest } = props;
const cardAvatarClasses = classNames({ const cardAvatarClasses = classNames({
[classes.cardAvatar]: true, [classes.cardAvatar]: true,
[classes.cardAvatarProfile]: profile, [classes.cardAvatarProfile]: profile,
[classes.cardAvatarDisplayProfile]: displayProfile,
[classes.cardAvatarEditProfile]: editProfile, [classes.cardAvatarEditProfile]: editProfile,
[classes.cardAvatarPlain]: plain, [classes.cardAvatarPlain]: plain,
[className]: className !== undefined [className]: className !== undefined
...@@ -33,6 +34,7 @@ CardAvatar.propTypes = { ...@@ -33,6 +34,7 @@ CardAvatar.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
className: PropTypes.string, className: PropTypes.string,
profile: PropTypes.bool, profile: PropTypes.bool,
displayProfile: PropTypes.bool,
editProfile: PropTypes.bool, editProfile: PropTypes.bool,
plain: PropTypes.bool plain: PropTypes.bool
}; };
jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+ 16
− 17
View file @ 1736aa26
...@@ -32,6 +32,7 @@ import PermIdentityOutlinedIcon from '@material-ui/icons/PermIdentityOutlined'; ...@@ -32,6 +32,7 @@ import PermIdentityOutlinedIcon from '@material-ui/icons/PermIdentityOutlined';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import Chip from '@material-ui/core/Chip'; import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done'; import DoneIcon from '@material-ui/icons/Done';
import CancelIcon from '@material-ui/icons/Cancel';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
...@@ -63,6 +64,7 @@ import IconButton from '@material-ui/core/IconButton'; ...@@ -63,6 +64,7 @@ import IconButton from '@material-ui/core/IconButton';
import {Formik} from 'formik'; import {Formik} from 'formik';
import FormikField from 'components/FormikField/FormikField'; import FormikField from 'components/FormikField/FormikField';
import * as Yup from 'yup'; import * as Yup from 'yup';
import CardAvatar from "components/Card/CardAvatar";
const styles = (theme)=> ( { const styles = (theme)=> ( {
...dashboardStyle, ...dashboardStyle,
...@@ -202,9 +204,9 @@ export default function DisplayUserProfile(props) { ...@@ -202,9 +204,9 @@ export default function DisplayUserProfile(props) {
const getUserStatus = (user) => { const getUserStatus = (user) => {
if(userStatus === false) { if(userStatus === false) {
return <Chip label="Active" avatar={<Avatar alt={user.username} src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} />} color="primary" deleteIcon={<DoneIcon />}/> return <Chip style={{ flex: 1 }} label="Active" variant="outlined" clickable={false} />
}else{ }else{
return <Chip label="Revoked" avatar={<Avatar alt={user.username} src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} />} deleteIcon={<DoneIcon />}/> return <Chip style={{ flex: 1 }} label="Revoked" variant="outlined" clickable={false} disabled/>
} }
} }
...@@ -341,20 +343,17 @@ export default function DisplayUserProfile(props) { ...@@ -341,20 +343,17 @@ export default function DisplayUserProfile(props) {
<GridContainer> <GridContainer>
<Grid item xs={12} sm={12} md={8}> <Grid item xs={12} sm={12} md={8}>
<Card profile> <Card profile>
<CardHeader color="info" stats icon>
<CardIcon color="info">
<PermIdentityOutlinedIcon />
</CardIcon>
<p className={classes.cardCategory}>{"Profile information"}</p>
<h3 className={classes.cardTitle}>{user.username}</h3>
{getUserStatus(user)}
</CardHeader>
<CardBody profile> <CardBody profile>
<div className={classes.root}> <div className={classes.root}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item align="center" xs={12} sm={12} md={12}> <Grid item xs={12} sm={12} md={6}>
<CardAvatar displayProfile>
<img src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} className={classes.editProfilePicture} alt="..." /> <img src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} className={classes.editProfilePicture} alt="..." />
<h4>{user.username ? user.username : 'no username'}</h4> </CardAvatar>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<h3 className={classes.cardTitle} >{user.username ? user.username : 'no username'}</h3>
{getUserStatus(user)}
</Grid> </Grid>
<Grid item xs={12} sm={12} md={6}> <Grid item xs={12} sm={12} md={6}>
<List dense={false}> <List dense={false}>
...@@ -371,11 +370,11 @@ export default function DisplayUserProfile(props) { ...@@ -371,11 +370,11 @@ export default function DisplayUserProfile(props) {
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
<PersonOutlinedIcon/> <PhoneInTalkOutlinedIcon/>
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={user.lastName ? user.lastName : 'no lastname'} primary={user.phoneNumber ? user.phoneNumber : 'no phone number'}
/> />
</ListItem> </ListItem>
<ListItem> <ListItem>
...@@ -406,11 +405,11 @@ export default function DisplayUserProfile(props) { ...@@ -406,11 +405,11 @@ export default function DisplayUserProfile(props) {
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
<PhoneInTalkOutlinedIcon/> <PersonOutlinedIcon/>
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={user.phoneNumber ? user.phoneNumber : 'no phone number'} primary={user.lastName ? user.lastName : 'no lastname'}
/> />
</ListItem> </ListItem>
<ListItem> <ListItem>
......
jams-react-client/src/views/Users/Users.js
+ 2
− 2
View file @ 1736aa26
...@@ -189,7 +189,7 @@ export default function Users() { ...@@ -189,7 +189,7 @@ export default function Users() {
if(a.username > b.username) { return 1; } if(a.username > b.username) { return 1; }
return 0; return 0;
}).map(user => }).map(user =>
<GridItem xs={12} sm={12} md={2} key={user.username}> <GridItem xs={12} sm={12} md={2} key={user.username} wrap="nowrap">
<Card profile> <Card profile>
<CardBody profile> <CardBody profile>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment