Skip to content

619/refactor image upload button #680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: Development
Choose a base branch
from
Open

619/refactor image upload button #680

Changes from 3 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9ae0c8e
Refactoring image upload button onto avatar
andycwilliams Sep 19, 2024
45055d3
Merge branch 'development' into 619/refactor-image-upload-button
andycwilliams Sep 19, 2024
126552a
Merge branch 'Development' into 619/refactor-image-upload-button
andycwilliams Sep 21, 2024
6c4d32f
Refactoring from icon button to regular button
andycwilliams Sep 23, 2024
c72a56c
Updating hover styling and tests
andycwilliams Sep 24, 2024
a55ebab
Merge branch 'Development' into 619/refactor-image-upload-button
andycwilliams Oct 1, 2024
2288444
One test remaining
andycwilliams Oct 8, 2024
176a105
Removing commented out code
andycwilliams Oct 8, 2024
1012ef3
Fixing test
andycwilliams Oct 9, 2024
252e1bb
Minor cleanup
andycwilliams Oct 9, 2024
07989ea
Linting
andycwilliams Oct 9, 2024
1472b48
Merge branch 'Development' into 619/refactor-image-upload-button
andycwilliams Nov 14, 2024
8544c97
Merge branch 'Development' into 619/refactor-image-upload-button
andycwilliams Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 58 additions & 30 deletions src/components/Profile/ProfileImageField.jsx
View file
Open in desktop
Copy link
Contributor

@leekahung leekahung Sep 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nitpick, could we have a small text right under the image icon (perhaps in white text) to let users know what it's for? For someone that's not tech-savvy, it's not immediately clear that I would need to click don't the image to change the image.

Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { useNotification, useSession } from '@hooks';
// Material UI Imports
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import HideImageIcon from '@mui/icons-material/HideImage';
import IconButton from '@mui/material/IconButton';
import ImageIcon from '@mui/icons-material/Image';
// Contexts Imports
import { SignedInUserContext } from '@contexts';
Expand Down Expand Up @@ -34,6 +34,7 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
const [profileImg, setProfileImg] = useState(localStorage.getItem('profileImage'));
const [processing, setProcessing] = useState(false);
const [showConfirmationModal, setShowConfirmationModal] = useState(false);
const [hover, setHover] = useState(false);

const handleProfileImage = async (event) => {
if (event.target.files[0].size > 1 * 1000 * 1024) {
Expand Down Expand Up @@ -69,6 +70,15 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
setShowConfirmationModal(true);
};

const iconButtonStyling = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
color: '#fff'
};

return (
<Box
sx={{
Expand All @@ -80,35 +90,53 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
gap: '10px'
}}
>
<Avatar
src={contactProfile ? contactProfile.profileImage : profileImg}
alt="PASS profile"
sx={{ height: '100px', width: '100px', objectFit: 'contain' }}
/>
{!contactProfile &&
(profileImg ? (
<Button
variant="outlined"
color="error"
sx={{ width: '150px' }}
onClick={handleSelectRemoveProfileImg}
endIcon={<HideImageIcon />}
>
Remove Img
</Button>
) : (
<Button
variant="outlined"
component="label"
color="primary"
onChange={handleProfileImage}
endIcon={<ImageIcon />}
sx={{ width: '150px' }}
>
Choose Img
<input type="file" hidden accept=".gif, .png, .jpeg, .jpg, .webp" />
</Button>
))}
<Box
position="relative"
display="inline-block"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Avatar
src={contactProfile ? contactProfile.profileImage : profileImg}
alt="PASS profile"
sx={{ height: '100px', width: '100px', objectFit: 'contain' }}
/>
{hover && (
<>
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: '50%'
}}
/>
{contactProfile || profileImg ? (
<IconButton
sx={iconButtonStyling}
disableRipple
onClick={handleSelectRemoveProfileImg}
>
<HideImageIcon />
</IconButton>
) : (
<IconButton sx={iconButtonStyling} component="label" disableRipple>
<ImageIcon />
<input
type="file"
hidden
accept=".gif, .png, .jpeg, .jpg, .webp"
onChange={handleProfileImage}
/>
</IconButton>
)}
</>
)}
</Box>

<ConfirmationModal
showModal={showConfirmationModal}
setShowModal={setShowConfirmationModal}
Expand Down
Loading