mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

select profile picture dialog

Browse source
This commit is contained in:
luisa.bellitto 2025-06-20 14:15:55 +02:00 • committed by Rudi Regentonne
parent f1711d10e8
commit b77a6c9580
7 changed files with 112 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

24
code/frontend/package-lock.json generated
View file

@ -10,7 +10,7 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.1.1",
"@mui/icons-material": "^7.1.2",
"@mui/material": "^7.1.1",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
@ -3115,9 +3115,9 @@
"license": "MIT"
},
"node_modules/@mui/core-downloads-tracker": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz",
"integrity": "sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==",
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.2.tgz",
"integrity": "sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg==",
"license": "MIT",
"funding": {
"type": "opencollective",
@ -3125,9 +3125,9 @@
}
},
"node_modules/@mui/icons-material": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.1.tgz",
"integrity": "sha512-X37+Yc8QpEnl0sYmz+WcLFy2dWgNRzbswDzLPXG7QU1XDVlP5TPp1HXjdmCupOWLL/I9m1fyhcyZl8/HPpp/Cg==",
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.2.tgz",
"integrity": "sha512-slqJByDub7Y1UcokrM17BoMBMvn8n7daXFXVoTv0MEH5k3sHjmsH8ql/Mt3s9vQ20cORDr83UZ448TEGcbrXtw==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.27.1"
@ -3140,7 +3140,7 @@
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@mui/material": "^7.1.1",
"@mui/material": "^7.1.2",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
@ -3151,13 +3151,13 @@
}
},
"node_modules/@mui/material": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.1.tgz",
"integrity": "sha512-mTpdmdZCaHCGOH3SrYM41+XKvNL0iQfM9KlYgpSjgadXx/fEKhhvOktxm8++Xw6FFeOHoOiV+lzOI8X1rsv71A==",
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.2.tgz",
"integrity": "sha512-Z5PYKkA6Kd8vS04zKxJNpwuvt6IoMwqpbidV7RCrRQQKwczIwcNcS8L6GnN4pzFYfEs+N9v6co27DmG07rcnoA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.27.1",
"@mui/core-downloads-tracker": "^7.1.1",
"@mui/core-downloads-tracker": "^7.1.2",
"@mui/system": "^7.1.1",
"@mui/types": "^7.4.3",
"@mui/utils": "^7.1.1",

2
code/frontend/package.json
View file

@ -5,7 +5,7 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.1.1",
"@mui/icons-material": "^7.1.2",
"@mui/material": "^7.1.1",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",

46
code/frontend/src/components/ChagneAvatarDialog.tsx
View file

@ -9,6 +9,8 @@ import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import Typography from "@mui/material/Typography";
import Avatar from "@mui/material/Avatar";
import EditSquareIcon from "@mui/icons-material/EditSquare";
import { useRef, useState } from "react";
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": {
@ -29,6 +31,17 @@ export default function CustomizedDialogs() {
setOpen(false);
};
const inputFile = useRef<HTMLInputElement | null>(null);
const openFileExplorer = () => {
// `current` points to the mounted file input element
if (inputFile.current) {
inputFile.current.click();
}
};
const [selectedImage, setSelectedImage] = useState<File | null>(null);
return (
<React.Fragment>
<Button onClick={handleClickOpen}>
@ -46,7 +59,7 @@ export default function CustomizedDialogs() {
open={open}
>
<DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
Modal title
Change Profile Picture
</DialogTitle>
<IconButton
aria-label="close"
@ -61,21 +74,22 @@ export default function CustomizedDialogs() {
<CloseIcon />
</IconButton>
<DialogContent dividers>
<Typography gutterBottom>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</Typography>
<Typography gutterBottom>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</Typography>
<Typography gutterBottom>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</Typography>
{selectedImage && <img className="profile-image-large" src={URL.createObjectURL(selectedImage)} alt="Profile Picture" />}
<IconButton aria-label="upload picture" onClick={openFileExplorer}>
<EditSquareIcon />
<input
type="file"
id="file"
ref={inputFile}
style={{ display: "none" }}
onChange={(event) => {
console.log(event.target.files?[0]:undefined); // Log the selected file
if (event.target.files && event.target.files[0]) {
setSelectedImage(event.target.files[0]); // Update the state with the selected file
}
}}
/>
</IconButton>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose}>

14
code/frontend/src/components/changeAvatarDialog.css Normal file
View file

@ -0,0 +1,14 @@
.dialog-content {
display: flex;
flex-direction: column;
}
.profile-image-large {
width: 5rem;
height: 5rem;
}
#file {
max-width: 50rem;
max-height: 50rem;
}

44
code/frontend/src/pages/Profile.tsx
View file

@ -4,7 +4,7 @@ import "./loginAndSignUpPage.css";
import "../styles/sizes.css";
import "../styles/colors.css";
import "../styles/fonts.css";
import { useState } from "react";
import { useRef, useState } from "react";
import Avatar from "@mui/material/Avatar";
import QuiltedImageList from "../components/QuiltedImageList";
import TextField from "@mui/material/TextField";
@ -17,6 +17,8 @@ import {
Divider,
Button,
Tooltip,
Popover,
Typography,
} from "@mui/material";
import ProfilePictureDialog from "../components/ChagneAvatarDialog";
@ -39,6 +41,21 @@ function Profile() {
});
const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
const username = "Username12345678"; /* Get username from database */
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
@ -46,11 +63,26 @@ function Profile() {
<div className="user-info">
<div className="user">
<ProfilePictureDialog />
<Tooltip title="Username12345678" placement="top" arrow>
<button className="profile-username body-l">
Username12345678
</button>
</Tooltip>
<Popover
className="profile-popover"
onClose={handleClose}
id={id}
open={open}
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
transformOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{p: 1}}>{username}</Typography>
</Popover>
<span className="profile-username body-l" onClick={handleClick}>
{username}
</span>
</div>
<div>
<Box

4
code/frontend/src/pages/profile.css
View file

@ -64,6 +64,10 @@
text-overflow: ellipsis;
}
.profile-popover {
padding: 1rem;
}
.button {
margin-bottom: 0.5rem;
}

26
code/frontend/yarn.lock
View file

@ -1646,25 +1646,25 @@
resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz"
integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
"@mui/core-downloads-tracker@^7.1.1":
version "7.1.1"
resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz"
integrity sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==
"@mui/core-downloads-tracker@^7.1.2":
version "7.1.2"
resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.2.tgz"
integrity sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg==
"@mui/icons-material@^7.1.1":
version "7.1.1"
resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.1.tgz"
integrity sha512-X37+Yc8QpEnl0sYmz+WcLFy2dWgNRzbswDzLPXG7QU1XDVlP5TPp1HXjdmCupOWLL/I9m1fyhcyZl8/HPpp/Cg==
"@mui/icons-material@^7.1.2":
version "7.1.2"
resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.2.tgz"
integrity sha512-slqJByDub7Y1UcokrM17BoMBMvn8n7daXFXVoTv0MEH5k3sHjmsH8ql/Mt3s9vQ20cORDr83UZ448TEGcbrXtw==
dependencies:
"@babel/runtime" "^7.27.1"
"@mui/material@^7.1.1":
version "7.1.1"
resolved "https://registry.npmjs.org/@mui/material/-/material-7.1.1.tgz"
integrity sha512-mTpdmdZCaHCGOH3SrYM41+XKvNL0iQfM9KlYgpSjgadXx/fEKhhvOktxm8++Xw6FFeOHoOiV+lzOI8X1rsv71A==
"@mui/material@^7.1.1", "@mui/material@^7.1.2":
version "7.1.2"
resolved "https://registry.npmjs.org/@mui/material/-/material-7.1.2.tgz"
integrity sha512-Z5PYKkA6Kd8vS04zKxJNpwuvt6IoMwqpbidV7RCrRQQKwczIwcNcS8L6GnN4pzFYfEs+N9v6co27DmG07rcnoA==
dependencies:
"@babel/runtime" "^7.27.1"
"@mui/core-downloads-tracker" "^7.1.1"
"@mui/core-downloads-tracker" "^7.1.2"
"@mui/system" "^7.1.1"
"@mui/types" "^7.4.3"
"@mui/utils" "^7.1.1"