From 0a13d047bb0436a1ebae1f4ba848d32d1400596a Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sun, 23 Jul 2023 05:18:08 -0700 Subject: [PATCH] Begin support for container queries with css modules --- .../hooks/use-fixed-table-header.tsx | 13 ++----------- .../shared/components/animated-page.module.scss | 9 +++++++++ .../features/shared/components/animated-page.tsx | 16 ++++------------ 3 files changed, 15 insertions(+), 23 deletions(-) create mode 100644 src/renderer/features/shared/components/animated-page.module.scss diff --git a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx index 25842e28..c9d63a61 100644 --- a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx +++ b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx @@ -10,8 +10,8 @@ export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => { const topMargin = windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS - ? '-128px' - : '-98px'; + ? '-130px' + : '-100px'; const isTableHeaderInView = useInView(tableHeaderRef, { margin: `${topMargin} 0px 0px 0px`, @@ -30,21 +30,12 @@ export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => { const root = document.querySelector('main .ag-root'); if (!isTableHeaderInView && isTableInView) { - if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) { - header?.classList.add('window-frame'); - } header?.classList.add('ag-header-fixed'); root?.classList.add('ag-header-fixed-margin'); } else if (!isTableInView) { - if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) { - header?.classList.remove('window-frame'); - } header?.classList.remove('ag-header-fixed'); root?.classList.remove('ag-header-fixed-margin'); } else if (isTableHeaderInView) { - if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) { - header?.classList.remove('window-frame'); - } header?.classList.remove('ag-header-fixed'); root?.classList.remove('ag-header-fixed-margin'); } diff --git a/src/renderer/features/shared/components/animated-page.module.scss b/src/renderer/features/shared/components/animated-page.module.scss new file mode 100644 index 00000000..11bdf176 --- /dev/null +++ b/src/renderer/features/shared/components/animated-page.module.scss @@ -0,0 +1,9 @@ +.animated-page { + container-type: inline-size; + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: hidden; +} diff --git a/src/renderer/features/shared/components/animated-page.tsx b/src/renderer/features/shared/components/animated-page.tsx index ce17578f..75170427 100644 --- a/src/renderer/features/shared/components/animated-page.tsx +++ b/src/renderer/features/shared/components/animated-page.tsx @@ -1,21 +1,12 @@ import type { ReactNode, Ref } from 'react'; import { forwardRef } from 'react'; import { motion } from 'framer-motion'; -import styled from 'styled-components'; +import styles from './animated-page.module.scss'; interface AnimatedPageProps { children: ReactNode; } -const StyledAnimatedPage = styled(motion.main)` - position: relative; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - overflow: hidden; -`; - const variants = { animate: { opacity: 1 }, exit: { opacity: 0 }, @@ -25,16 +16,17 @@ const variants = { export const AnimatedPage = forwardRef( ({ children }: AnimatedPageProps, ref: Ref) => { return ( - {children} - + ); }, );