TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Added avatar image uploader in AdminX

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3351
This commit is contained in:
Peter Zimon 2023-06-02 15:00:12 +02:00
parent 498629d9a9
commit d1c0ea6c57
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ghost/admin-x-settings/src/admin-x-ds/assets/icons/user-add.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M11.250 17.250 A6.000 6.000 0 1 0 23.250 17.250 A6.000 6.000 0 1 0 11.250 17.250 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 14.25L17.25 20.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 17.25L20.25 17.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M.75,17.25a6.753,6.753,0,0,1,9.4-6.208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.375 4.875 A4.125 4.125 0 1 0 11.625 4.875 A4.125 4.125 0 1 0 3.375 4.875 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 825 B

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

@ -1,4 +1,3 @@
import Avatar from '../../../../admin-x-ds/global/Avatar';
import Button from '../../../../admin-x-ds/global/Button';
import ConfirmationModal from '../../../../admin-x-ds/global/ConfirmationModal';
import Heading from '../../../../admin-x-ds/global/Heading';
@ -16,7 +15,7 @@ import Toggle from '../../../../admin-x-ds/global/Toggle';
import useRoles from '../../../../hooks/useRoles';
import {ServicesContext} from '../../../providers/ServiceProvider';
import {User} from '../../../../types/api';
import {generateAvatarColor, getInitials, isOwnerUser} from '../../../../utils/helpers';
import {isOwnerUser} from '../../../../utils/helpers';
interface CustomHeadingProps {
children?: React.ReactNode;
@ -469,7 +468,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
}
}, [saveState]);
const fileUploadButtonClasses = 'absolute right-[104px] bottom-12 bg-[rgba(0,0,0,0.75)] rounded text-sm text-white flex items-center justify-center px-3 h-8 opacity-80 hover:opacity-100 transition cursor-pointer font-medium';
const fileUploadButtonClasses = 'absolute right-[104px] bottom-12 bg-[rgba(0,0,0,0.75)] rounded text-sm text-white flex items-center justify-center px-3 h-8 opacity-80 hover:opacity-100 transition cursor-pointer font-medium z-10';
return (
<Modal
@ -502,8 +501,25 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
<div className="absolute bottom-12 right-12">
<Menu items={menuItems} position='left' trigger={<UserMenuTrigger />}></Menu>
</div>
<div className='pointer-events-none relative z-10 flex gap-4 px-12 pb-12 pt-60'>
<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 className='relative flex items-center gap-4 px-12 pb-12 pt-60'>
<ImageUpload
deleteButtonClassName='invisible absolute -right-2 -top-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.75)] text-white hover:bg-black group-hover:!visible'
fileUploadClassName='rounded-full bg-black flex items-center justify-center opacity-80 transition hover:opacity-100 -ml-2 cursor-pointer'
height='80px'
id='avatar'
imageClassName='relative rounded-full group bg-cover -ml-2'
imageURL={userData.profile_image}
width='80px'
onDelete={() => {
alert('deleted');
}}
onUpload={() => {
alert('uploaded');
}}
>
<Icon color='white' name='user-add' size='lg' />
</ImageUpload>
<div>
<Heading styles='text-white'>{user.name}</Heading>
<span className='text-md font-semibold text-white'>Administrator</span>