jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Implemented image at header and implemented horizontal scroll

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-07 20:05:52 -03:00
commit b801689f32
4 changed files with 67 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/frontend/src/assets/profile-circle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

44
src/frontend/src/components/headerComponent/index.tsx
View file

@ -1,9 +1,12 @@
import { useContext } from "react";
import profileCircle from "../../assets/profile-circle.png";
import { FaDiscord, FaGithub } from "react-icons/fa";
import { RiTwitterXFill } from "react-icons/ri";
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown";
import {
BACKEND_URL,
BASE_URL_API,
LOCATIONS_TO_RETURN,
USER_PROJECTS_HEADER,
} from "../../constants/constants";
@ -192,34 +195,35 @@ export default function Header(): JSX.Element {
variant="none"
size="none"
data-testid="user-profile-settings"
className={
"h-7 w-7 rounded-full focus-visible:outline-0 " +
(userData?.profile_image ??
(userData?.id
? gradients[
parseInt(userData?.id ?? "", 30) % gradients.length
]
: "bg-gray-500"))
}
/>
>
<img
src={
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
profileCircle
}
className="h-7 w-7 focus-visible:outline-0 "
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{!autoLogin && (
<>
<DropdownMenuLabel>
<div className="flex items-center gap-3">
<div
className={
"h-5 w-5 rounded-full focus-visible:outline-0 " +
(userData?.profile_image ??
(userData?.id
? gradients[
parseInt(userData?.id ?? "", 30) %
gradients.length
]
: "bg-gray-500"))
<img
src={
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
profileCircle
}
className="h-5 w-5 focus-visible:outline-0 "
/>
{userData?.username ?? "User"}
</div>
</DropdownMenuLabel>

64
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
View file

@ -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<HTMLButtonElement>(null);
useEffect(() => {
if (value && ref) {
ref.current?.scrollIntoView({ behavior: "smooth", block: "center" });
}
}, [ref]);
return (
<div className="flex flex-col justify-center gap-2">
{loading ? (
<Loading />
) : (
Object.keys(profilePictures).map((folder, idx) => (
<Label>
<div className="flex flex-col gap-2">
<div className="edit-flow-arrangement">
<span className="font-medium">{folder}</span>
<span className="font-normal">{folder}</span>
</div>
<HorizontalScrollFadeComponent>
{profilePictures[folder].map((path, idx) => (
<img
key={idx}
src={`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/images/${folder + "/" + path}`}
className={
"h-12 w-12 rounded-full" +
(value === folder + "/" + path
? " border-2 border-white"
: "")
}
onClick={() => onChange(folder + "/" + path)}
/>
))}
</HorizontalScrollFadeComponent>
</Label>
<div className="block overflow-hidden">
<div className="flex items-center gap-1 overflow-x-auto rounded-lg bg-background px-1">
{profilePictures[folder].map((path, idx) => (
<Button
ref={value === folder + "/" + path ? ref : undefined}
size="none"
variant="none"
onClick={() => onChange(folder + "/" + path)}
className="shrink-0 px-0.5 py-2"
>
<img
key={idx}
src={`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${folder + "/" + path}`}
style={{
filter:
value === folder + "/" + path
? "drop-shadow(0 0 0.3rem rgb(255, 255, 255))"
: "",
}}
className={cn("h-12 w-12")}
/>
</Button>
))}
</div>
</div>
</div>
))
)}
</div>

2
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
View file

@ -17,7 +17,7 @@ type ProfilePictureFormComponentProps = {
profilePicture: string;
handleInput: (event: any) => void;
handlePatchProfilePicture: (gradient: string) => void;
handleGetProfilePictures: () => Promise<string[]>;
handleGetProfilePictures: () => Promise<string[] | undefined>;
userData: any;
};
const ProfilePictureFormComponent = ({