From b801689f3251b2ab13bab41b2c1986651d8241a7 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 7 Jun 2024 20:05:52 -0300 Subject: [PATCH] Implemented image at header and implemented horizontal scroll --- src/frontend/src/assets/profile-circle.png | Bin 0 -> 14406 bytes .../src/components/headerComponent/index.tsx | 44 ++++++------ .../profilePictureChooserComponent/index.tsx | 64 ++++++++++++------ .../components/ProfilePictureForm/index.tsx | 2 +- 4 files changed, 67 insertions(+), 43 deletions(-) create mode 100644 src/frontend/src/assets/profile-circle.png diff --git a/src/frontend/src/assets/profile-circle.png b/src/frontend/src/assets/profile-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..e63f97c5956879936fd9ee55e5667ce36c071029 GIT binary patch literal 14406 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 + > + + {!autoLogin && ( <>
-
+ {userData?.username ?? "User"}
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx index a5a6b9c56..5e2cee180 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import useAlertStore from "../../../../../../../../stores/alertStore"; import { gradients } from "../../../../../../../../utils/styleUtils"; import useGetProfilePictures from "./hooks/use-get-profile-pictures"; @@ -10,6 +10,8 @@ import { import HorizontalScrollFadeComponent from "../../../../../../../../components/horizontalScrollFadeComponent"; import LoadingComponent from "../../../../../../../../components/loadingComponent"; import Loading from "../../../../../../../../components/ui/loading"; +import { cn } from "../../../../../../../../utils/utils"; +import { Button } from "../../../../../../../../components/ui/button"; type ProfilePictureChooserComponentProps = { profilePictures: { [key: string]: string[] }; @@ -24,35 +26,53 @@ export default function ProfilePictureChooserComponent({ value, onChange, }: ProfilePictureChooserComponentProps) { + const ref = useRef(null); + + useEffect(() => { + if (value && ref) { + ref.current?.scrollIntoView({ behavior: "smooth", block: "center" }); + } + }, [ref]); + return (
{loading ? ( ) : ( Object.keys(profilePictures).map((folder, idx) => ( -
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx index f8f77c5b7..a841ecc5e 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx @@ -17,7 +17,7 @@ type ProfilePictureFormComponentProps = { profilePicture: string; handleInput: (event: any) => void; handlePatchProfilePicture: (gradient: string) => void; - handleGetProfilePictures: () => Promise; + handleGetProfilePictures: () => Promise; userData: any; }; const ProfilePictureFormComponent = ({