Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Added initials helper in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3318
This commit is contained in:
Peter Zimon 2023-05-30 12:16:00 +02:00
parent c604255ace
commit 197c19e472
3 changed files with 19 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,6 +11,7 @@ import TabView from '../../../admin-x-ds/global/TabView';
import UserDetailModal from './modals/UserDetailModal'; import UserDetailModal from './modals/UserDetailModal';
import useStaffUsers from '../../../hooks/useStaffUsers'; import useStaffUsers from '../../../hooks/useStaffUsers';
import {User} from '../../../types/api'; import {User} from '../../../types/api';
import {getInitials} from '../../../utils/helpers';
const Owner: React.FC<{user: User}> = ({user}) => { const Owner: React.FC<{user: User}> = ({user}) => {
const showDetailModal = () => { const showDetailModal = () => {
@ -20,9 +21,10 @@ const Owner: React.FC<{user: User}> = ({user}) => {
if (!user) { if (!user) {
return null; return null;
} }
return ( return (
<div className='group flex gap-3 hover:cursor-pointer' onClick={showDetailModal}> <div className='group flex gap-3 hover:cursor-pointer' onClick={showDetailModal}>
<Avatar bgColor='yellow' label='DV' /> <Avatar bgColor='grey-200' label={getInitials(user.name)} size='lg' />
<div className='flex flex-col'> <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>{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> <span className='text-xs text-grey-700'>{user.email}</span>
@ -56,7 +58,7 @@ const UsersList: React.FC<UsersListProps> = ({users, updateUser}) => {
<ListItem <ListItem
key={user.id} key={user.id}
action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>} action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>}
avatar={(<Avatar bgColor='green' label='DV' labelColor='white' />)} avatar={(<Avatar bgColor='grey-200' label={getInitials(user.name)} />)}
detail={user.email} detail={user.email}
hideActions={true} hideActions={true}
id={`list-item-${user.id}`} id={`list-item-${user.id}`}

7
ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
View file

@ -11,6 +11,7 @@ import TextField from '../../../../admin-x-ds/global/TextField';
import Toggle from '../../../../admin-x-ds/global/Toggle'; import Toggle from '../../../../admin-x-ds/global/Toggle';
import useRoles from '../../../../hooks/useRoles'; import useRoles from '../../../../hooks/useRoles';
import {User} from '../../../../types/api'; import {User} from '../../../../types/api';
import {getInitials} from '../../../../utils/helpers';
interface CustomHeadingProps { interface CustomHeadingProps {
children?: React.ReactNode; children?: React.ReactNode;
@ -252,11 +253,11 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
}} }}
> >
<div> <div>
<div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12 text-white'> <div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12'>
<div className='mt-60'> <div className='mt-60'>
<Avatar bgColor='green' className='-ml-1 mb-2' label='DV' labelColor='white' size='xl' /> <Avatar bgColor='grey-200' className='-ml-1 mb-2' label={getInitials(userData.name)} size='xl' />
<Heading styles='text-white'>{user.name}</Heading> <Heading styles='text-white'>{user.name}</Heading>
<span className='text-md font-semibold'>Administrator</span> <span className='text-md font-semibold text-white'>Administrator</span>
</div> </div>
</div> </div>
<div className='mt-10 grid grid-cols-2 gap-x-12 gap-y-20 pb-10'> <div className='mt-10 grid grid-cols-2 gap-x-12 gap-y-20 pb-10'>

11
ghost/admin-x-settings/src/utils/helpers.ts
View file

@ -35,3 +35,14 @@ export function getOptionLabel(
): string | undefined { ): string | undefined {
return options?.find(option => option.value === value)?.label; return options?.find(option => option.value === value)?.label;
} }
export function getInitials(name: string) {
let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
let rgxInitials = [...name.matchAll(rgx)] || [];
const initials = (
(rgxInitials.shift()?.[1] || '') + (rgxInitials.pop()?.[1] || '')
).toUpperCase();
return initials;
}