TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Updated AdminX Portal button icons (#17223)

Browse Source 
refs. https://github.com/TryGhost/Product/issues/3545

Portal button icons in AdminX styling was just placeholders.
This commit is contained in:
Peter Zimon 2023-07-06 13:53:33 +02:00 committed by GitHub
parent 22a7d1c374
commit 4fff14fdac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/admin-x-settings/src/admin-x-ds/assets/icons/upload.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>upload-bottom</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.001 15.75v-12"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m16.501 8.25-4.5-4.5-4.5 4.5"></path><path d="M23.251 15.75v1.5a3 3 0 0 1-3 3h-16.5a3 3 0 0 1-3-3v-1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 524 B

12
apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
View File

@ -18,6 +18,7 @@ interface ImageUploadProps {
fileUploadClassName?: string;
deleteButtonClassName?: string;
deleteButtonContent?: React.ReactNode;
deleteButtonUnstyled?: boolean;
/**
* Removes all the classnames from all elements so you can set a completely custom styling
@ -40,6 +41,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
fileUploadClassName,
deleteButtonClassName,
deleteButtonContent,
deleteButtonUnstyled = false,
imageBWCheckedBg = false,
unstyled = false,
onUpload,
@ -67,10 +69,12 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
);
deleteButtonClassName = clsx(
'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',
deleteButtonClassName
);
if (!deleteButtonUnstyled) {
deleteButtonClassName = clsx(
'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',
deleteButtonClassName
);
}
}
deleteButtonContent = deleteButtonContent || <Icon colorClass='text-white' name='trash' size='sm' />;

43
apps/admin-x-settings/src/components/settings/membership/portal/LookAndFeel.tsx
View File

@ -6,6 +6,8 @@ import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import {Setting, SettingValue} from '../../../../types/api';
import {getSettingValues} from '../../../../utils/helpers';
import Heading from '../../../../admin-x-ds/global/Heading';
import Icon from '../../../../admin-x-ds/global/Icon';
import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
import clsx from 'clsx';
import {ReactComponent as PortalIcon1} from '../../../../assets/icons/portal-icon-1.svg';
@ -80,21 +82,32 @@ const LookAndFeel: React.FC<{
onSelect={option => updateSetting('portal_button_style', option)}
/>
{portalButtonStyle?.toString()?.includes('icon') &&
<div className='flex gap-2 border border-green p-4'>
{defaultButtonIcons.map(icon => (
<button className={clsx('border p-4', currentIcon === icon.value ? 'border-green' : 'border-transparent')} type="button" onClick={() => updateSetting('portal_button_icon', icon.value)}>
<icon.Component className="h-6 w-6 text-green" />
</button>
))}
<div className={clsx('w-10 border', currentIcon === uploadedIcon ? 'border-green' : 'border-transparent')}>
<ImageUpload
id='test'
imageClassName='cursor-pointer'
imageURL={uploadedIcon}
onDelete={handleImageDelete}
onImageClick={() => uploadedIcon && updateSetting('portal_button_icon', uploadedIcon)}
onUpload={handleImageUpload}
/>
<div className='flex flex-col gap-2'>
<Heading level={6} grey>Icon</Heading>
<div className='flex justify-between'>
{defaultButtonIcons.map(icon => (
<button className={clsx('border p-3', currentIcon === icon.value ? 'border-green' : 'border-transparent')} type="button" onClick={() => updateSetting('portal_button_icon', icon.value)}>
<icon.Component className={`h-5 w-5 ${currentIcon === icon.value ? 'text-green' : 'text-black opacity-70 transition-all hover:opacity-100'}`} />
</button>
))}
<div className={clsx('relative w-[46px] border', currentIcon === uploadedIcon ? 'border-green' : 'border-transparent')}>
<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'
deleteButtonContent={<Icon colorClass='text-white' name='trash' size='sm' />}
height='46px'
id='test'
imageClassName='cursor-pointer'
imageURL={uploadedIcon}
width='46px'
deleteButtonUnstyled
onDelete={handleImageDelete}
onImageClick={() => uploadedIcon && updateSetting('portal_button_icon', uploadedIcon)}
onUpload={handleImageUpload}
>
<Icon name='upload' size='md' />
</ImageUpload>
</div>
</div>
</div>
}