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

Added static tabs for design settings in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3328
This commit is contained in:
Peter Zimon 2023-05-31 14:45:06 +02:00
parent 664f4ebedd
commit c865ab00f4
2 changed files with 53 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin-x-settings/src/components/settings/site/SiteSettings.tsx
View file

@ -1,4 +1,4 @@
import Design from './Design'; import DesignModal from './modals/DesignModal';
import React from 'react'; import React from 'react';
import SettingSection from '../../../admin-x-ds/settings/SettingSection'; import SettingSection from '../../../admin-x-ds/settings/SettingSection';
@ -6,7 +6,7 @@ const SiteSettings: React.FC = () => {
return ( return (
<> <>
<SettingSection title="Site"> <SettingSection title="Site">
<Design /> <DesignModal />
</SettingSection> </SettingSection>
</> </>
); );

69
ghost/admin-x-settings/src/components/settings/site/Design.tsx → ghost/admin-x-settings/src/components/settings/site/modals/DesignModal.tsx
View file

@ -1,15 +1,16 @@
import Button from '../../../admin-x-ds/global/Button'; import Button from '../../../../admin-x-ds/global/Button';
import DesktopChrome from '../../../admin-x-ds/global/DesktopChrome'; import DesktopChrome from '../../../../admin-x-ds/global/DesktopChrome';
import Heading from '../../../admin-x-ds/global/Heading'; import Heading from '../../../../admin-x-ds/global/Heading';
import Hint from '../../../admin-x-ds/global/Hint'; import Hint from '../../../../admin-x-ds/global/Hint';
import NiceModal from '@ebay/nice-modal-react'; import NiceModal from '@ebay/nice-modal-react';
import PreviewModal from '../../../admin-x-ds/global/PreviewModal'; import PreviewModal from '../../../../admin-x-ds/global/PreviewModal';
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 TabView from '../../../admin-x-ds/global/TabView'; import TabView from '../../../../admin-x-ds/global/TabView';
import TextField from '../../../admin-x-ds/global/TextField'; import TextField from '../../../../admin-x-ds/global/TextField';
import {Tab} from '../../../admin-x-ds/global/TabView'; import useSettingGroup from '../../../../hooks/useSettingGroup';
import {Tab} from '../../../../admin-x-ds/global/TabView';
const Preview: React.FC = () => { const Preview: React.FC = () => {
return ( return (
@ -24,6 +25,12 @@ const Preview: React.FC = () => {
}; };
const Brand: React.FC = () => { const Brand: React.FC = () => {
const {
getSettingValues
} = useSettingGroup();
const [description, accentColor] = getSettingValues(['description', 'accent_color']) as string[];
return ( return (
<div className='mt-7'> <div className='mt-7'>
<SettingGroupContent> <SettingGroupContent>
@ -32,16 +39,18 @@ const Brand: React.FC = () => {
clearBg={true} clearBg={true}
hint='Used in your theme, meta data and search results' hint='Used in your theme, meta data and search results'
title='Site description' title='Site description'
value={description}
/> />
<div className='flex items-center justify-between gap-3'> <div className='flex items-center justify-between gap-3'>
<Heading level={6}>Accent color</Heading> <Heading level={6}>Accent color</Heading>
<div className='relative max-w-[90px]'> <div className='relative max-w-[70px]'>
<span className='absolute left-1 top-[9px] text-grey-600'>#</span> {/* <span className='absolute left-1 top-[9px] text-grey-600'>#</span> */}
<TextField <TextField
key='accent-color' key='accent-color'
className='text-right' className='text-right'
clearBg={true} clearBg={true}
maxLength={6} maxLength={7}
value={accentColor}
/> />
</div> </div>
</div> </div>
@ -65,6 +74,30 @@ const Brand: React.FC = () => {
); );
}; };
const SiteWide: React.FC = () => {
return (
<div className='mt-2'>
Site wide design settings
</div>
);
};
const Homepage: React.FC = () => {
return (
<div className='mt-2'>
Homepage design settings
</div>
);
};
const Post: React.FC = () => {
return (
<div className='mt-2'>
Post design settings
</div>
);
};
const Sidebar: React.FC = () => { const Sidebar: React.FC = () => {
const tabs: Tab[] = [ const tabs: Tab[] = [
{ {
@ -75,17 +108,17 @@ const Sidebar: React.FC = () => {
{ {
id: 'site-wide', id: 'site-wide',
title: 'Site wide', title: 'Site wide',
contents: 'Site wide' contents: <SiteWide />
}, },
{ {
id: 'homepage', id: 'homepage',
title: 'Homepage', title: 'Homepage',
contents: 'Homepage' contents: <Homepage />
}, },
{ {
id: 'post', id: 'post',
title: 'Post', title: 'Post',
contents: 'Post' contents: <Post />
} }
]; ];
@ -94,7 +127,7 @@ const Sidebar: React.FC = () => {
); );
}; };
const Design: React.FC = () => { const DesignModal: React.FC = () => {
const openPreviewModal = () => { const openPreviewModal = () => {
NiceModal.show(PreviewModal, { NiceModal.show(PreviewModal, {
title: 'Design', title: 'Design',
@ -115,4 +148,4 @@ const Design: React.FC = () => {
); );
}; };
export default Design; export default DesignModal;