TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Added inner scrolling for Design sidebar in AdminX

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-07 15:19:59 +02:00
parent c4629e0118
commit f48dc5a847
5 changed files with 65 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
View File

@ -169,7 +169,7 @@ const Modal: React.FC<ModalProps> = ({
);
const footer = (stickyFooter ?
<StickyFooter bgTWColor='white' shiftY={footerContainerBottom}>
<StickyFooter shiftY={footerContainerBottom}>
{footerContent}
</StickyFooter>
:

2
ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
View File

@ -73,7 +73,7 @@ const PreviewModal: React.FC<PreviewModalProps> = ({
</>
</div>
)}
<div className={`grow ${sidebarPadding && 'p-7'}`}>
<div className={`grow ${sidebarPadding && 'p-7'} flex flex-col justify-between overflow-y-auto`}>
{sidebar}
</div>
</div>

3
ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx
View File

@ -31,6 +31,7 @@ const footerContents = (
export const Default: Story = {
args: {
children: footerContents
children: footerContents,
contentBgColorClass: 'bg-[#efefef]'
}
};

67
ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx
View File

@ -3,34 +3,61 @@ import clsx from 'clsx';
interface StickyFooterProps {
shiftY?: string;
bgTWColor: string;
footerBgColorClass?: string;
contentBgColorClass?: string;
height?: number;
children?: React.ReactNode;
containerClasses?: string;
contentClasses?: string;
}
const StickyFooter: React.FC<StickyFooterProps> = ({shiftY, bgTWColor = 'white', children, containerClasses, contentClasses}) => {
const footerContainerBottom = shiftY ? `calc(${shiftY})` : '0';
const shadowBottom = shiftY ? `calc(${shiftY} + 72px)` : '72px';
const footerContainerClasses = clsx(
'w-100 sticky z-[100]',
containerClasses
const StickyFooter: React.FC<StickyFooterProps> = ({
shiftY,
footerBgColorClass = 'bg-white',
contentBgColorClass = 'bg-white',
height = 96,
children
}) => {
const containerClasses = clsx(
'w-100 sticky bottom-[-24px] z-[9997] m-0 box-border p-0'
);
const containerBottom = shiftY ? `calc(${shiftY} - 24px)` : '-24px';
const containerHeight = `${height + 24}px`;
const shadowClasses = `sticky bottom-[72px] mx-2 block h-[22px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
const footerClasses = clsx(
`bg-${bgTWColor} sticky z-[101] mb-[-24px] flex min-h-[48px] items-center justify-between`,
contentClasses
const coverClasses = clsx(
'sticky z-[9998] block h-[24px]',
contentBgColorClass
);
const coverBottom = '0';
const contentClasses = clsx(
`sticky z-[9999] mb-[-24px] flex items-center justify-between`,
// 'min-h-[48px]',
'h-[96px]',
footerBgColorClass
);
const contentBottom = '0';
const contentHeight = `${height}px`;
const shadowClasses = `sticky mx-2 block h-[24px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
const shadowBottom = shiftY ? `calc(${shiftY} + ${height - 24}px)` : `${height - 24}px`;
return (
<div className={footerContainerClasses} style={{
bottom: footerContainerBottom
}}>
<div className={footerClasses}>
<div className={containerClasses}
style={{
bottom: containerBottom,
height: containerHeight
}}
>
<div className={coverClasses}
style={{
bottom: coverBottom
}}
></div>
<div className={contentClasses}
style={{
bottom: contentBottom,
height: contentHeight
}}
>
{children}
</div>
<div className={shadowClasses}

16
ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
View File

@ -4,6 +4,7 @@ import NiceModal from '@ebay/nice-modal-react';
import PreviewModal from '../../../admin-x-ds/global/PreviewModal';
import React from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
import TabView from '../../../admin-x-ds/global/TabView';
import ThemePreview from './designAndBranding/ThemePreivew';
import ThemeSettings from './designAndBranding/ThemeSettings';
@ -34,7 +35,17 @@ const Sidebar: React.FC = () => {
];
return (
<TabView tabs={tabs} />
<>
<div className='p-7'>
<TabView tabs={tabs} />
</div>
<StickyFooter>
<button className='flex w-full cursor-pointer flex-col px-7' type='button' onClick={() => {}}>
<strong>Change theme</strong>
<span className='text-sm text-grey-600'>Casper</span>
</button>
</StickyFooter>
</>
);
};
@ -44,7 +55,8 @@ const DesignModal: React.FC = () => {
title: 'Design',
okLabel: 'Save',
preview: <ThemePreview />,
sidebar: <Sidebar />
sidebar: <Sidebar />,
sidebarPadding: false
});
};