Skip to content

Commit

Permalink
Fix broken avatar component in staff details page (#5082)
Browse files Browse the repository at this point in the history 
* fix broken avatar in staff details

* changesets

* fix styles

* fix changeset
  • Loading branch information
@Cloud11PL
Cloud11PL committed Aug 2, 2024
1 parent 0b9296f commit cf2eb13
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 104 deletions.
5 changes: 5 additions & 0 deletions .changeset/ninety-dogs-mate.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"saleor-dashboard": patch
---

Now you can see initials in your account details when there is no avatar image set for your account.
188 changes: 84 additions & 104 deletions src/staff/components/StaffProperties/StaffProperties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,92 +7,11 @@ import { getUserInitials } from "@dashboard/misc";
import { getFormErrors } from "@dashboard/utils/errors";
import getStaffErrorMessage from "@dashboard/utils/errors/staff";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import { Text, vars } from "@saleor/macaw-ui-next";
import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import SVG from "react-inlinesvg";
import { FormattedMessage, useIntl } from "react-intl";

const useStyles = makeStyles(
theme => ({
avatar: {
"& svg": {
fill: "#fff",
},
"&:hover $avatarHover": {
opacity: 1,
},
alignItems: "center",
borderRadius: "100%",
display: "grid",
height: 120,
justifyContent: "center",
overflow: "hidden",
position: "relative",
width: 120,
},
avatarActionText: {
"&:hover": {
textDecoration: "underline",
},
color: "#fff",
cursor: "pointer",
fontSize: 12,
},
avatarDefault: {
"& div": {
color: vars.colors.text.buttonDefaultPrimary,
fontSize: 35,
fontWeight: 580,
lineHeight: "120px",
},
background: vars.colors.background.accent1,
height: 120,
textAlign: "center",
width: 120,
},
avatarHover: {
background: "#00000080",
borderRadius: "100%",
fontSize: 12,
fontWeight: 500,
height: 120,
opacity: 0,
padding: theme.spacing(2.5, 0),
position: "absolute",
textAlign: "center",
textTransform: "uppercase",
transition: "opacity 0.5s",
width: 120,
},
avatarImage: {
pointerEvents: "none",
width: "100%",
},
fileField: {
display: "none",
},
prop: {
marginBottom: theme.spacing(2),
},
propGrid: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridRowGap: theme.spacing(1),
gridTemplateColumns: "1fr 1fr",
[theme.breakpoints.down("xs")]: {
gridTemplateColumns: "1fr",
},
},
root: {
display: "grid",
gridColumnGap: theme.spacing(4),
gridTemplateColumns: "120px 1fr",
},
}),
{ name: "StaffProperties" },
);

interface StaffPropertiesProps {
canEditAvatar: boolean;
className?: string;
Expand Down Expand Up @@ -120,7 +39,6 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
onImageDelete,
onImageUpload,
} = props;
const classes = useStyles(props);
const intl = useIntl();
const imgInputAnchor = React.createRef<HTMLInputElement>();
const clickImgInput = () => imgInputAnchor.current.click();
Expand All @@ -147,20 +65,67 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
</DashboardCard.Title>
</DashboardCard.Header>
<DashboardCard.Content>
<div className={classes.root}>
<Box display="grid" gap={6} __gridTemplateColumns="120px 1fr">
<div>
<div className={classes.avatar}>
<Box
alignItems="center"
borderRadius="100%"
display="grid"
justifyContent="center"
overflow="hidden"
position="relative"
__height="120px"
__width="120px"
>
{hasAvatar ? (
<img className={classes.avatarImage} src={staffMember.avatar.url} />
<Box as="img" pointerEvents="none" width="100%" src={staffMember.avatar.url} />
) : (
<div className={classes.avatarDefault}>
<Text>{getUserInitials(data)}</Text>
</div>
<Box
backgroundColor="accent1"
__height="120px"
__width="120px"
display="flex"
justifyContent="center"
>
<Text
color="buttonDefaultPrimary"
fontWeight="bold"
textAlign="center"
__fontSize={35}
__lineHeight="120px"
>
{getUserInitials(data)}
</Text>
</Box>
)}
{canEditAvatar && (
<div className={classes.avatarHover}>
<Box
borderRadius="100%"
opacity={{
hover: "1",
default: "0",
}}
position="absolute"
padding={4}
__height="120px"
__backgroundColor="#00000080"
__width="120px"
__transition="opacity 0.5s"
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<SVG src={photoIcon} />
<Text onClick={clickImgInput} className={classes.avatarActionText}>
<Text
onClick={clickImgInput}
textDecoration={{
hover: "underline",
}}
color="buttonDefaultPrimary"
cursor="pointer"
fontSize={4}
>
<FormattedMessage
id="+2VzH4"
defaultMessage="Change"
Expand All @@ -169,7 +134,15 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
</Text>
{hasAvatar && (
<>
<Text onClick={onImageDelete} className={classes.avatarActionText}>
<Text
onClick={onImageDelete}
textDecoration={{
hover: "underline",
}}
color="buttonDefaultPrimary"
cursor="pointer"
fontSize={4}
>
<FormattedMessage
id="11lR5V"
defaultMessage="Delete"
Expand All @@ -179,19 +152,26 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
</>
)}
<input
className={classes.fileField}
style={{ display: "none" }}
id="fileUpload"
onChange={event => onImageUpload(event.target.files[0])}
type="file"
ref={imgInputAnchor}
/>
</div>
</Box>
)}
</div>
</Box>
</div>
<div>
<div className={classes.propGrid}>
<div className={classes.prop}>
<Box
display="grid"
gap={4}
gridTemplateColumns={{
mobile: 1,
tablet: 2,
}}
>
<Box>
<TextField
{...getFieldProps("firstName")}
onChange={onChange}
Expand All @@ -201,8 +181,8 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
"data-test-id": "staffFirstName",
}}
/>
</div>
<div className={classes.prop}>
</Box>
<Box>
<TextField
{...getFieldProps("lastName")}
onChange={onChange}
Expand All @@ -212,8 +192,8 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
"data-test-id": "staffLastName",
}}
/>
</div>
<div className={classes.prop}>
</Box>
<Box>
<TextField
{...getFieldProps("email")}
onChange={onChange}
Expand All @@ -223,10 +203,10 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
"data-test-id": "staffEmail",
}}
/>
</div>
</div>
</Box>
</Box>
</div>
</div>
</Box>
</DashboardCard.Content>
{!!formErrors.id && (
<DashboardCard.Content>
Expand Down

0 comments on commit cf2eb13

Please sign in to comment.