Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

AdminX various cleanup (#17522)

Browse source 
refs. https://github.com/TryGhost/Product/issues/3349

- fixed textfield right placeholder bug
- fixed menu highlight when settings is searched
This commit is contained in:
Peter Zimon 2023-07-27 19:09:28 +02:00 • committed by GitHub
parent 0a0fcbc551
commit db272bf146
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-settings/src/App.tsx
View file

@ -33,7 +33,7 @@ function App({ghostVersion, officialThemes}: AppProps) {
</div>
{/* Main container */}
<div className="mx-auto flex max-w-[1080px] flex-col px-[5vmin] py-[12vmin] md:flex-row md:items-start md:gap-x-10 md:py-[8vmin]">
<div className="mx-auto flex max-w-[1080px] flex-col px-[5vmin] py-[12vmin] md:flex-row md:items-start md:gap-x-10 md:py-[8vmin]" id="admin-x-settings-content">
{/* Sidebar */}
<div className="relative z-20 min-w-[260px] grow-0 md:fixed md:top-[8vmin] md:basis-[260px]">

4
apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
View file

@ -75,12 +75,12 @@ const TextField: React.FC<TextFieldProps> = ({
if (rightPlaceholder) {
const rightPHClasses = !unstyled && clsx(
'h-10 border-b py-2 text-right text-grey-500',
'order-3 h-10 border-b py-2 text-right text-grey-500',
error ? `border-red` : `${disabled ? 'border-grey-300' : 'border-grey-500 peer-hover:border-grey-700 peer-focus:border-black'}`
);
field = (
<div className='flex w-full items-center'>
<div className='order-2 flex w-full items-center'>
{inputField}
<span className={rightPHClasses || ''}>{rightPlaceholder}</span>
</div>

12
apps/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx
View file

@ -58,7 +58,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({
const {yScroll, updateScrolled, route} = useRouting();
const [highlight, setHighlight] = useState(false);
const scrollRef = useRef<HTMLDivElement | null>(null);
const [currentRect, setCurrentRect] = useState<DOMRect>(DOMRect.fromRect());
const [currentRect, setCurrentRect] = useState<{top: number, bottom: number}>({top: 0, bottom: 0});
const topOffset = -193.5;
const bottomOffset = 36;
@ -134,9 +134,15 @@ const SettingGroup: React.FC<SettingGroupProps> = ({
useEffect(() => {
if (scrollRef.current) {
setCurrentRect(scrollRef.current.getBoundingClientRect());
const rootElement = document.getElementById('admin-x-settings-content');
const rootRect = rootElement?.getBoundingClientRect();
const sectionRect = scrollRef.current.getBoundingClientRect();
setCurrentRect({
top: sectionRect.top - rootRect!.top,
bottom: (sectionRect.top - rootRect!.top) + sectionRect.height
});
}
}, [checkVisible]);
}, [checkVisible, navid]);
useEffect(() => {
if (currentRect.top && yScroll! >= currentRect.top + topOffset && yScroll! < currentRect.bottom + topOffset + bottomOffset) {