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

Added unstyled property to image uploads AdminX

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-07 10:29:03 +02:00
parent 9faf2cafbe
commit f05b6a6037
3 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx
View File

@ -8,6 +8,7 @@ interface ImageUploadProps {
width?: string;
height?: string;
imageURL?: string;
unstyled?: boolean;
imageClassName?: string;
fileUploadClassName?: string;
deleteButtonClassName?: string;
@ -22,18 +23,26 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
width,
height = '120px',
imageURL,
imageClassName = 'group relative bg-cover',
fileUploadClassName = 'flex cursor-pointer items-center justify-center rounded border border-grey-100 bg-grey-75 p-3 text-sm font-semibold text-grey-800 hover:text-black',
deleteButtonClassName = 'invisible absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-[rgba(0,0,0,0.75)] text-white hover:bg-black group-hover:!visible',
deleteButtonContent = <Icon color='white' name='trash' size='sm' />,
imageClassName,
fileUploadClassName,
deleteButtonClassName,
deleteButtonContent,
unstyled = false,
onUpload,
onDelete
}) => {
if (!unstyled) {
imageClassName = imageClassName || 'group relative bg-cover';
fileUploadClassName = fileUploadClassName || 'flex cursor-pointer items-center justify-center rounded border border-grey-100 bg-grey-75 p-3 text-sm font-semibold text-grey-800 hover:text-black';
deleteButtonClassName = deleteButtonClassName || 'invisible absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-[rgba(0,0,0,0.75)] text-white hover:bg-black group-hover:!visible';
deleteButtonContent = deleteButtonContent || <Icon color='white' name='trash' size='sm' />;
}
if (imageURL) {
return (
<div className={imageClassName} style={{
width: width,
height: height,
width: (unstyled ? '' : width),
height: (unstyled ? '' : height),
backgroundImage: `url(${imageURL})`
}}>
<button className={deleteButtonClassName} type='button' onClick={onDelete}>
@ -45,8 +54,8 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
return (
<FileUpload className={fileUploadClassName} id={id} style={
{
width: width,
height: height
width: (unstyled ? '' : width),
height: (unstyled ? '' : height)
}
} onUpload={onUpload}>
{children}

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

@ -629,6 +629,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
id='cover-image'
imageClassName='absolute inset-0 bg-cover group bg-center rounded-t overflow-hidden'
imageURL={userData.cover_image || ''}
unstyled={true}
onDelete={() => {
handleImageDelete('cover_image');
}}
@ -640,14 +641,14 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
<Menu items={menuItems} position='left' trigger={<UserMenuTrigger />}></Menu>
</div>
<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'
deleteButtonContent={<Icon color='white' name='trash' size='sm' />}
fileUploadClassName='rounded-full bg-black flex items-center justify-center opacity-80 transition hover:opacity-100 -ml-2 cursor-pointer h-[80px] w-[80px]'
id='avatar'
imageClassName='relative rounded-full group bg-cover bg-center -ml-2'
imageClassName='relative rounded-full group bg-cover bg-center -ml-2 h-[80px] w-[80px]'
imageURL={userData.profile_image}
unstyled={true}
width='80px'
onDelete={() => {
handleImageDelete('profile_image');

34
ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
View File

@ -1,6 +1,6 @@
import Button from '../../../../admin-x-ds/global/Button';
import Heading from '../../../../admin-x-ds/global/Heading';
import Hint from '../../../../admin-x-ds/global/Hint';
import ImageUpload from '../../../../admin-x-ds/global/ImageUpload';
import React from 'react';
import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../../admin-x-ds/global/TextField';
@ -40,16 +40,38 @@ const BrandSettings: React.FC = () => {
<Heading level={6}>Publication icon</Heading>
<div className='mt-2 flex gap-3'>
<Hint className='mr-5'>A square, social icon, at least 60x60px</Hint>
<Button color='grey' label='Upload icon' />
<ImageUpload
height='36px'
id='logo'
width='150px'
onDelete={() => {}}
onUpload={() => {}}
>
Upload icon
</ImageUpload>
</div>
</div>
<div>
<Heading level={6}>Publication logo</Heading>
<Button className='mt-2' color='grey' fullWidth={true} label='Upload logo' />
<Heading className='mb-2' level={6}>Publication logo</Heading>
<ImageUpload
height='80px'
id='logo'
onDelete={() => {}}
onUpload={() => {}}
>
Upload logo
</ImageUpload>
</div>
<div>
<Heading level={6}>Publication cover</Heading>
<Button className='mt-2' color='grey' fullWidth={true} label='Upload cover' />
<Heading className='mb-2' level={6}>Publication cover</Heading>
<ImageUpload
height='140px'
id='cover'
onDelete={() => {}}
onUpload={() => {}}
>
Upload cover
</ImageUpload>
</div>
</SettingGroupContent>
</div>