Merge pull request #617 from universi-me/feat#535/cores-aleatórias-pa…

…ra-imagem-de-perfil FEAT #535: Cores aleatórias para imagem de perfil
universi-me · Sep 5, 2024 · 5a76adf · 5a76adf
2 parents cdd855b + 7c8691d
commit 5a76adf
Show file tree

Hide file tree

Showing 17 changed files with 107 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,12 +23,15 @@
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.11.3",
     "compressorjs": "^1.2.1",
+    "core-js": "^3.38.1",
+    "core-js-pure": "^3.38.1",
     "cropperjs": "^1.6.1",
     "dompurify": "^3.0.6",
     "jsdom": "^23.0.1",
     "phosphor-react": "^1.4.1",
     "quill-image-uploader": "^1.3.0",
     "react": "^18.2.0",
+    "react-avatar": "^5.0.3",
     "react-bootstrap": "^2.8.0",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",

diff --git a/src/components/ProfileImage/ProfileImage.css b/src/components/ProfileImage/ProfileImage.css
@@ -3,4 +3,5 @@
     background-repeat: no-repeat;
     background-size: contain;
     aspect-ratio: 1;
+    user-select: none;
 }
diff --git a/src/components/ProfileImage/ProfileImage.tsx b/src/components/ProfileImage/ProfileImage.tsx
@@ -2,20 +2,21 @@ import { HTMLAttributes } from "react";
 import { IMG_DEFAULT_PROFILE } from "@/utils/assets";
 import { makeClassName } from "@/utils/tsxUtils";
 import "./ProfileImage.css"
+import Avatar from 'react-avatar'
 
 export type ProfileImageProps = HTMLAttributes<HTMLElement> & {
     imageUrl: string | null | undefined;
+    name?: string | null | undefined;
     noImageColor?: string;
 };
 
 const DEFAULT_NO_IMAGE_COLOR = "#8A8A8A";
 
 export function ProfileImage(props: ProfileImageProps) {
-    const {imageUrl, noImageColor, ...genericElementProps} = props;
+    const {imageUrl, name, noImageColor, ...genericElementProps} = props;
     const className = makeClassName("profile-image-component", genericElementProps.className);
 
-    return <img {...genericElementProps}
-        className={className}
-        src={imageUrl ?? IMG_DEFAULT_PROFILE}
-    />
+    return <div className={className} >
+        <Avatar size="100%" name={name!} src={imageUrl!} round={true} textSizeRatio={3} maxInitials={2}/>
+    </div>;
 }
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
@@ -43,7 +43,7 @@ export function ProfileBio(props: ProfileBioProps) {
             </div>
 
             <div className="intro intro-section">
-                <ProfileImage className="image" imageUrl={profile.imageUrl} noImageColor="#505050" />
+                <ProfileImage className="image" imageUrl={profile.imageUrl} name={profile.fullname} noImageColor="#505050" />
                 {
                     isOnOwnProfile
                         ? <h2 className="card-heading name">{ profile.fullname }</h2>

diff --git a/src/components/UniversiHeader/components/WelcomeUser/WelcomeUser.tsx b/src/components/UniversiHeader/components/WelcomeUser/WelcomeUser.tsx
@@ -24,7 +24,7 @@ export function WelcomeUser() {
             <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
                     <div>
-                        <ProfileImage className="logged-user-image" imageUrl={auth.profile?.imageUrl ?? IMG_DEFAULT_PROFILE} onClick={() => {setProfileClicked(!profileClicked)}}/>
+                        <ProfileImage className="logged-user-image" imageUrl={auth.profile?.imageUrl} name={auth.profile?.fullname} onClick={() => {setProfileClicked(!profileClicked)}}/>
                     </div>
                 </DropdownMenu.Trigger>
 

diff --git a/src/pages/Group/GroupConfig/Roles/RolesPage.tsx b/src/pages/Group/GroupConfig/Roles/RolesPage.tsx
@@ -183,7 +183,7 @@ const RolesPage : React.FC<RolesPageProps> = ({ group }) => {
                 return null;
 
             return <div className="profile-item" key={profile.id}>
-                <ProfileImage imageUrl={profile.imageUrl} className="profile-image" />
+                <ProfileImage imageUrl={profile.imageUrl} name={profile.fullname} className="profile-image" />
                 <div className="info">
                     <h2 className="profile-name">{profile.fullname}</h2>
                     <p className="profile-bio">{profile.bio}</p>

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx
@@ -120,7 +120,7 @@ function SelectPeople(){
                                 const isSelected = !!selectedProfiles.find(i => i.id === p.id);
 
                                 return <div className="participant-item" key={p.id}>
-                                    <img src={p.imageUrl} alt="" className="profile-picture" />
+                                    <ProfileImage className="profile-picture" imageUrl={p.imageUrl!} name={p?.fullname} />
                                     <div className="profile-data">
                                         <h2 className="profile-name">{ p.fullname }</h2>
                                     </div>
@@ -344,9 +344,9 @@ export function GroupContents() {
                 {
                     imageUrl
                     ?
-                    <ProfileImage imageUrl={imageUrl} className="content-image" onClick={() => selectContent(content)} />
+                    <img src={imageUrl} title={content.name} className="content-image" onClick={() => selectContent(content)} />
                     :
-                    <ProfileImage imageUrl={"/assets/imgs/default-content.png"} className="content-image default-image" onClick={() => selectContent(content)} />
+                    <img src={"/assets/imgs/default-content.png"} title={content.name} className="content-image default-image" onClick={() => selectContent(content)} />
                 }
 
                 <div className="info">

diff --git a/src/pages/Group/GroupTabs/GroupFeed/GroupFeedPost.tsx b/src/pages/Group/GroupTabs/GroupFeed/GroupFeedPost.tsx
@@ -17,6 +17,7 @@ import { Permission } from "@/types/Roles";
 import { ICON_LIKE, ICON_CLAP, ICON_HEART, ICON_SUPPORT, ICON_GENIUS, ICON_HAPPY, ICON_COMMENT } from '@/utils/assets';
 import TextboxFormatted from "@/components/TextboxFormatted/TextboxFormatted";
 import UniversiForm, { FormInputs, RequiredValidation, TextValidation, ValidationComposite } from "@/components/UniversiForm";
+import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
 
 export type GroupFeedPostProps = Readonly<{
     post: GroupPost;
@@ -122,7 +123,7 @@ export function GroupFeedPost({ post, isComment }: GroupFeedPostProps) {
 
     return <div className="feed-item tab-item">
         <Link to={`/profile/${author.user.name}`} className="feed-user-info">
-            <img src={author.imageUrl} alt="" className="feed-image" />
+            <ProfileImage className="feed-image" imageUrl={author.imageUrl} name={author.fullname} />
             <p>{author.fullname}</p>
         </Link>
 

diff --git a/src/pages/Group/GroupTabs/GroupPeople/GroupPeople.less b/src/pages/Group/GroupTabs/GroupPeople/GroupPeople.less
@@ -15,34 +15,43 @@
     gap: @gap;
     justify-content: center;
 
+    .person-image-info {
+        width: 32%;
+        min-width: 32%;
+        max-width: 32%;
+        aspect-ratio: 1;
+    }
+
     .person-item {
         display: flex;
         flex-direction: row;
 
         width: calc(50% - @gap / 2);
+        min-width: 200px;
 
         text-align: center;
 
         align-items: center;
-        padding: 0;
+        padding: 0.3rem 0.3rem;
         overflow: hidden;
         border: none;
 
         .person-image {
-            @side: 8rem !important;
+            @side: 100% !important;
             width: @side;
             height: @side;
             aspect-ratio: 1;
 
             background-color: inherit;
             object-fit: cover;
             border-radius: 50%;
-            padding: 1rem;
+            padding: 0.6rem 0.6rem;
         }
 
         .info { 
 
             text-align: start;
+            word-break: break-word;
 
             color: @font-color-v2;
             .person-name {

diff --git a/src/pages/Group/GroupTabs/GroupPeople/GroupPeople.tsx b/src/pages/Group/GroupTabs/GroupPeople/GroupPeople.tsx
@@ -316,8 +316,8 @@ function renderPerson(person: ProfileClass) {
 
     return (
         <div className="person-item tab-item" key={person.id} id={person.id}>
-            <Link to={linkToProfile}>
-                <ProfileImage imageUrl={imageUrl} className="person-image" />
+            <Link to={linkToProfile} className="person-image-info">
+                <ProfileImage imageUrl={imageUrl} name={person.fullname} className="person-image" />
             </Link>
 
             <div className="info">

diff --git a/src/pages/ManageProfile/ManageProfile.tsx b/src/pages/ManageProfile/ManageProfile.tsx
@@ -42,7 +42,7 @@ export function ManageProfilePage() {
             <div id="left-side">
                 <form id="profile-edit" className="card">
                     <div className="image-name-container">
-                        <ManageProfileImage currentImage={profile.imageUrl} setImage={setImage} />
+                        <ManageProfileImage currentImage={profile.imageUrl} setImage={setImage} name={profile.fullname} />
 
                         <fieldset id="fieldset-name">
                             <legend>Altere seu nome</legend>

diff --git a/src/pages/ManageProfile/ManageProfileImage.tsx b/src/pages/ManageProfile/ManageProfileImage.tsx
@@ -7,6 +7,7 @@ import CropperComponent from "@/components/ImageCropper/ImageCropper";
 export type ManageProfileImageProps = {
     currentImage: string | null;
     setImage(image: File | undefined): any;
+    name: string | null;
 };
 
 export function ManageProfileImage(props: ManageProfileImageProps) {
@@ -20,7 +21,7 @@ export function ManageProfileImage(props: ManageProfileImageProps) {
         <fieldset id="fieldset-image">
             <legend className="required-input">Alterar imagem do perfil</legend>
             <input id="image" name="image" accept="image/*" type="file" onChange={changeImage} />
-            <label htmlFor="image"><ProfileImage imageUrl={image} id="profile-image-view" /></label>
+            <label htmlFor="image"><ProfileImage imageUrl={image} name={props.name} id="profile-image-view" /></label>
             <CropperComponent show={showCrop} src={image as string} selectImage={updateImage} willClose={() => setShowCrop(false)} options={{aspectRatio: 1,}} />
         </fieldset>
     );

diff --git a/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.tsx b/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.tsx
@@ -12,6 +12,7 @@ import { type Folder, type FolderProfile } from "@/types/Capacity";
 import { ProfileClass } from "@/types/Profile";
 
 import "./ProfileAssignedByMe.less";
+import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
 
 export function ProfileAssignedByMe() {
     const context = useContext(ProfileContext);
@@ -135,7 +136,7 @@ function WatchFolderProgress(props: Readonly<WatchFolderProgressProps>) {
                 const shownPercentage = isNaN(percentage) ? 0 : percentage;
 
                 return <Link to={`/content/${folder.reference}?watch=${w.profile.user.name}`} target="_blank" className="profile-watcher" key={w.id}>
-                    <img src={w.profile.imageUrl} className="profile-image" alt="" />
+                    <ProfileImage className="profile-image" imageUrl={w.profile.imageUrl!} name={w.profile?.fullname} />
 
                     <div className="progress-data">
                         <h3 className="profile-name">{w.profile.fullname}</h3>

diff --git a/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.tsx b/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.tsx
@@ -28,7 +28,7 @@ export function ProfileLastRecommendations() {
                             return (
                                 <div className="recommendation" key={recommendation.id}>
                                     <Link to={originUrl} target='_blank'>
-                                    <ProfileImage className="image" imageUrl={recommendation.origin.imageUrl} noImageColor='#8A8A8A' />
+                                    <ProfileImage className="image" imageUrl={recommendation.origin.imageUrl} name={recommendation.origin.fullname} noImageColor='#8A8A8A' />
                                     </Link>
 
                                     <div className="box">

diff --git a/src/pages/Settings/RolesPage/RolesPage.tsx b/src/pages/Settings/RolesPage/RolesPage.tsx
@@ -203,7 +203,7 @@ export function RolesPage() {
                 </div>
 
                 <div style={{width: '15%'}}>
-                    <ProfileImage imageUrl={profile.imageUrl} className="profile-image" />
+                    <ProfileImage imageUrl={profile.imageUrl} name={profile.fullname} className="profile-image" />
                 </div>
 
                 <div className="info" style={{width: '40%'}}>

diff --git a/src/types/Profile.ts b/src/types/Profile.ts
@@ -61,7 +61,7 @@ export class ProfileClass implements Profile {
      */
     get imageUrl() {
         if (this.image === null)
-            return IMG_DEFAULT_PROFILE;
+            return null;
 
         if (this.image.startsWith("/")) {
             return import.meta.env.VITE_UNIVERSIME_API + this.image;