TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-03 00:15:11 +03:00
Code Issues Projects Releases Wiki Activity

Added avatar color generator helper in AdminX

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3318
This commit is contained in:
Peter Zimon 2023-05-30 15:16:49 +02:00
parent 55376774c0
commit 9657556265
3 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/admin-x-settings/src/components/settings/general/Users.tsx
View File

@ -11,7 +11,7 @@ import TabView from '../../../admin-x-ds/global/TabView';
import UserDetailModal from './modals/UserDetailModal';
import useStaffUsers from '../../../hooks/useStaffUsers';
import {User} from '../../../types/api';
import {getInitials} from '../../../utils/helpers';
import {generateAvatarColor, getInitials} from '../../../utils/helpers';
const Owner: React.FC<{user: User}> = ({user}) => {
const showDetailModal = () => {
@ -24,7 +24,7 @@ const Owner: React.FC<{user: User}> = ({user}) => {
return (
<div className='group flex gap-3 hover:cursor-pointer' onClick={showDetailModal}>
<Avatar bgColor='#efefef' image={user.profile_image} label={getInitials(user.name)} size='lg' />
<Avatar bgColor={generateAvatarColor((user.name ? user.name : user.email))} image={user.profile_image} label={getInitials(user.name)} labelColor='white' size='lg' />
<div className='flex flex-col'>
<span>{user.name} &mdash; <strong>Owner</strong> <span className='invisible ml-2 inline-block text-sm font-bold text-green group-hover:visible'>Edit</span></span>
<span className='text-xs text-grey-700'>{user.email}</span>
@ -58,7 +58,7 @@ const UsersList: React.FC<UsersListProps> = ({users, updateUser}) => {
<ListItem
key={user.id}
action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>}
avatar={(<Avatar bgColor='#efefef' image={user.profile_image} label={getInitials(user.name)} />)}
avatar={(<Avatar bgColor={generateAvatarColor((user.name ? user.name : user.email))} image={user.profile_image} label={getInitials(user.name)} labelColor='white' />)}
detail={user.email}
hideActions={true}
id={`list-item-${user.id}`}

4
ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
View File

@ -11,7 +11,7 @@ import TextField from '../../../../admin-x-ds/global/TextField';
import Toggle from '../../../../admin-x-ds/global/Toggle';
import useRoles from '../../../../hooks/useRoles';
import {User} from '../../../../types/api';
import {getInitials} from '../../../../utils/helpers';
import {generateAvatarColor, getInitials} from '../../../../utils/helpers';
interface CustomHeadingProps {
children?: React.ReactNode;
@ -258,7 +258,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
<div className='absolute inset-0 z-0 block bg-gradient-to-tr from-[rgba(0,0,0,0.5)] to-[rgba(0,0,0,0.01)]'></div>
)}
<div className='relative z-10 mt-60 flex gap-4'>
<Avatar bgColor='#efefef' className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} size='xl' />
<Avatar bgColor={generateAvatarColor((userData.name ? userData.name : userData.email))} className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} labelColor='white' size='xl' />
<div>
<Heading styles='text-white'>{user.name}</Heading>
<span className='text-md font-semibold text-white'>Administrator</span>

12
ghost/admin-x-settings/src/utils/helpers.ts
View File

@ -45,4 +45,16 @@ export function getInitials(name: string) {
).toUpperCase();
return initials;
}
export function generateAvatarColor(name: string) {
const s = 70;
const l = 40;
let hash = 0;
for (var i = 0; i < name.length; i++) {
hash = name.charCodeAt(i) + ((hash << 5) - hash);
}
const h = hash % 360;
return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
}