Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

AdminX design updates (#18238)

Browse source 
refs. https://github.com/TryGhost/Product/issues/3349
This commit is contained in:
Peter Zimon 2023-09-20 17:38:36 +03:00 • committed by GitHub
parent 7439e68628
commit 02692a15e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx
View file

@ -13,15 +13,15 @@ const Banner: React.FC<BannerProps> = ({color = 'grey', children, className}) =>
color === 'grey' && 'text-black', color === 'grey' && 'text-black',
color === 'blue' && 'text-blue', color === 'blue' && 'text-blue',
color === 'green' && 'text-green', color === 'green' && 'text-green',
color === 'yellow' && 'text-yellow', color === 'yellow' && 'text-yellow-600',
color === 'red' && 'text-red', color === 'red' && 'text-red',
`before:absolute before:inset-0 before:block before:opacity-10 before:content-['']`, `after:pointer-events-none after:absolute after:inset-0 after:block after:opacity-10 after:content-['']`,
color === 'grey' && 'before:bg-grey-500', color === 'grey' && 'after:bg-grey-500',
color === 'blue' && 'before:bg-blue', color === 'blue' && 'after:bg-blue',
color === 'green' && 'before:bg-green', color === 'green' && 'after:bg-green',
color === 'yellow' && 'before:bg-yellow', color === 'yellow' && 'after:bg-yellow',
color === 'red' && 'before:bg-red', color === 'red' && 'after:bg-red',
className className
); );

24
apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
View file

@ -1,14 +1,17 @@
import Banner from '../../../admin-x-ds/global/Banner';
import Icon from '../../../admin-x-ds/global/Icon'; import Icon from '../../../admin-x-ds/global/Icon';
import React from 'react'; import React from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent'; import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import Toggle from '../../../admin-x-ds/global/form/Toggle'; import Toggle from '../../../admin-x-ds/global/form/Toggle';
import useRouting from '../../../hooks/useRouting';
import {Setting, getSettingValues, useEditSettings} from '../../../api/settings'; import {Setting, getSettingValues, useEditSettings} from '../../../api/settings';
import {useGlobalData} from '../../providers/GlobalDataProvider'; import {useGlobalData} from '../../providers/GlobalDataProvider';
const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => { const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {settings} = useGlobalData(); const {settings} = useGlobalData();
const {mutateAsync: editSettings} = useEditSettings(); const {mutateAsync: editSettings} = useEditSettings();
const {updateRoute} = useRouting();
const [newslettersEnabled, membersSignupAccess] = getSettingValues<string>(settings, ['editor_default_email_recipients', 'members_signup_access']); const [newslettersEnabled, membersSignupAccess] = getSettingValues<string>(settings, ['editor_default_email_recipients', 'members_signup_access']);
@ -29,9 +32,8 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const enableToggle = ( const enableToggle = (
<> <>
<Toggle <Toggle
checked={isDisabled ? false : newslettersEnabled !== 'disabled'} checked={newslettersEnabled !== 'disabled'}
direction='rtl' direction='rtl'
disabled={isDisabled}
onChange={handleToggleChange} onChange={handleToggleChange}
/> />
</> </>
@ -46,23 +48,27 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
title='Newsletter sending' title='Newsletter sending'
> >
<SettingGroupContent <SettingGroupContent
columns={1}
values={[ values={[
{ {
key: 'private', key: 'private',
value: (!isDisabled && newslettersEnabled !== 'disabled') ? ( value: (newslettersEnabled !== 'disabled') ? (<div className='w-full'>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<Icon colorClass='text-green' name='check' size='sm' /> <Icon colorClass='text-green' name='check' size='sm' />
<span>Enabled</span> <span>Enabled</span>
</div> </div>
) : ( {isDisabled &&
<Banner className='mt-6 text-sm' color='grey'>
Your <button className='!underline' type="button" onClick={() => {
updateRoute('access');
}}>Subscription access</button> is set to &lsquo;Nobody&rsquo;, only existing members will receive newsletters.
</Banner>
}
</div>) :
<div className='flex items-center gap-2 text-grey-900'> <div className='flex items-center gap-2 text-grey-900'>
<Icon colorClass='text-grey-600' name='mail-block' size='sm' /> <Icon colorClass='text-grey-600' name='mail-block' size='sm' />
<span> <span>Disabled</span>
Disabled
{isDisabled && ' by Access settings'}
</span>
</div> </div>
)
} }
]} ]}
/> />